Time Tracking Dashboard

A real-time dashboard built with Astro that visualizes time tracking data from a Bitfreedom code API. Displays time worked across issues, pull requests, and date ranges using interactive ApexCharts.

Features

Summary stats: Time worked today, this week, and this month
Weekly area chart: Hours tracked over the last 14 days
Monthly area chart: Hours tracked over the last 30 days
Issue breakdown: Horizontal bar chart of time spent by issue
PR breakdown: Horizontal bar chart of time spent by pull request
Distribution donut: Ratio of time on issues vs. pull requests
Dark theme: Purple-accented responsive UI

Tech Stack

Astro — static site framework
ApexCharts — interactive charts
Node.js ≥ 22.12.0
Bun — package manager

Getting Started

Prerequisites

Node.js ≥ 22.12.0
Bun
An ACCESS_TOKEN for the Bitfreedom API

Install

bun install

Environment

Copy the access token into the environment. Create a .env file at the project root:

PUBLIC_ACCESS_TOKEN=your_token_here

The token is injected at build time via Vite's define config in astro.config.mjs.

Development

bun dev

Starts the local dev server at localhost:4321.

Build

bun build

Produces a static site in ./dist/.

Preview

bun preview

Serves the built output locally for a pre-deployment check.

Project Structure

├── astro.config.mjs      # Astro + Vite config (injects ACCESS_TOKEN)
├── package.json          # Dependencies: astro, apexcharts
├── tsconfig.json
├── .env                  # Environment variables (not committed)
├── public/               # Static assets
├── src/
│   ├── assets/           # SVG backgrounds, icons
│   ├── components/
│   │   └── Welcome.astro # Astro starter component (unused by dashboard)
│   ├── layouts/
│   │   └── Layout.astro  # Base layout template
│   └── pages/
│       └── index.astro   # Dashboard page (self-contained app)
└── dist/                 # Built output

API

The dashboard fetches time tracking data from:

https://bitfreedom.net/code/api/v1/user/times?access_token=<token>&since=<ISO-date>

The since parameter defaults to the start of the current week (Monday). The API returns time entries with created, time (in seconds), and optional issue objects containing id, number, title, and pull_request flags.

Deployment

Since bun build outputs a static site to ./dist/, the dashboard can be deployed to any static hosting service (Netlify, Vercel, GitHub Pages, etc.). Make sure the PUBLIC_ACCESS_TOKEN environment variable is configured in your hosting platform.

2.9 KiB Raw Permalink Blame History