# carcanne/clockout architecture

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

- Interactive diagram: https://gitdiagram.com/carcanne/clockout
- Repository: https://github.com/carcanne/clockout

## Overview

ClockOut lets an employee submit a timecard image and receive a calculated clock-out time. The Vue view accepts a selected or pasted image, sends it to the FastAPI endpoint, and displays the returned time; the backend decodes and saves the image, extracts clock times with OCR, then calculates the result using target hours and a lunch-break allowance. The backend also exposes menu retrieval and transport lookup. Those capabilities are documented or present in the API source, though the sampled frontend does not show them being used. Edges reflect shown calls or documented API behavior.

Main entry points: [`python_backend/main.py`](https://github.com/carcanne/clockout/blob/main/python_backend/main.py) (FastAPI endpoints), [`vue-frontend-clockout/src/views/clockoutView.vue`](https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/views/clockoutView.vue) (Clock-out view), [`vue-frontend-clockout/src/main.ts`](https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/main.ts) (Vue entry), [`vue-frontend-clockout/src/App.vue`](https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/App.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web interface"]
  node_frontend_entry["Vue entry<br/>[main.ts]"]
  node_app_shell["App shell<br/>[App.vue]"]
  node_clockout_view["Clock-out view<br/>[clockoutView.vue]"]
end

subgraph group_backend["Backend API"]
  node_api["FastAPI endpoints<br/>[main.py]"]
end

subgraph group_calculation["Time processing"]
  node_ocr["Image OCR<br/>[ocr.py]"]
  node_time_calc["Time calculation<br/>[func.py]"]
end

subgraph group_integrations["External integrations"]
  node_menu_fetch["Menu retrieval<br/>[get_menus.py]"]
end

node_employee(("Employee"))
node_menu_site["Eurest menu site"]
node_transport_service["Transport API"]

node_employee -->|"uses"| node_frontend_entry
node_frontend_entry -->|"mounts"| node_app_shell
node_app_shell -->|"renders"| node_clockout_view
node_clockout_view -->|"posts image"| node_api
node_api -->|"returns time"| node_clockout_view
node_api -->|"calls OCR"| node_ocr
node_api -->|"calculates time"| node_time_calc
node_api -->|"fetches menus"| node_menu_fetch
node_menu_fetch -->|"scrapes menus"| node_menu_site
node_api -->|"requests connections"| node_transport_service

click node_frontend_entry "https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/main.ts"
click node_app_shell "https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/App.vue"
click node_clockout_view "https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/views/clockoutView.vue"
click node_api "https://github.com/carcanne/clockout/blob/main/python_backend/main.py"
click node_ocr "https://github.com/carcanne/clockout/blob/main/python_backend/ocr.py"
click node_time_calc "https://github.com/carcanne/clockout/blob/main/python_backend/func.py"
click node_menu_fetch "https://github.com/carcanne/clockout/blob/main/python_backend/get_menus.py"

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_frontend_entry,node_app_shell,node_clockout_view toneBlue
class node_api toneAmber
class node_ocr,node_time_calc,node_transport_service toneMint
class node_menu_fetch toneRose
class node_employee,node_menu_site toneIndigo
```

## Components

### Web interface

- [Vue entry](https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/main.ts): `vue-frontend-clockout/src/main.ts`
- [App shell](https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/App.vue): `vue-frontend-clockout/src/App.vue`
- [Clock-out view](https://github.com/carcanne/clockout/blob/main/vue-frontend-clockout/src/views/clockoutView.vue): `vue-frontend-clockout/src/views/clockoutView.vue`

### Backend API

- [FastAPI endpoints](https://github.com/carcanne/clockout/blob/main/python_backend/main.py): `python_backend/main.py`

### Time processing

- [Image OCR](https://github.com/carcanne/clockout/blob/main/python_backend/ocr.py): `python_backend/ocr.py`
- [Time calculation](https://github.com/carcanne/clockout/blob/main/python_backend/func.py): `python_backend/func.py`

### External integrations

- [Menu retrieval](https://github.com/carcanne/clockout/blob/main/python_backend/get_menus.py): `python_backend/get_menus.py`

### Other components

- **Employee**
- **Eurest menu site**
- **Transport API**

## Connections

- Employee → Vue entry: uses (evidence: `README.md`)
- Vue entry → App shell: mounts (evidence: `vue-frontend-clockout/src/main.ts`)
- App shell → Clock-out view: renders (evidence: `vue-frontend-clockout/src/App.vue`)
- Clock-out view → FastAPI endpoints: posts image (evidence: `vue-frontend-clockout/src/views/clockoutView.vue`)
- FastAPI endpoints → Clock-out view: returns time (evidence: `vue-frontend-clockout/src/views/clockoutView.vue`)
- FastAPI endpoints → Image OCR: calls OCR (evidence: `python_backend/main.py`)
- FastAPI endpoints → Time calculation: calculates time (evidence: `python_backend/main.py`)
- FastAPI endpoints → Menu retrieval: fetches menus (evidence: `python_backend/main.py`)
- Menu retrieval → Eurest menu site: scrapes menus (evidence: `python_backend/get_menus.py`)
- FastAPI endpoints → Transport API: requests connections (evidence: `python_backend/main.py`)