Simon Franken
4f23c1c653
Add support for monthly and weekly targets with work-day selection: - Users can now set targets as 'monthly' or 'weekly' - Users select which days of the week they work - Balance is calculated per working day, evenly distributed - Target hours = (periodHours / workingDaysInPeriod) - Corrections are applied at period level - Daily balance tracking replaces weekly granularity Database changes: - Rename weekly_hours -> target_hours - Add period_type (weekly|monthly, default=weekly) - Add work_days (integer array of ISO weekdays, default=[1,2,3,4,5]) - Add constraints for valid period_type and non-empty work_days Backend: - Rewrite balance calculation in ClientTargetService - Support monthly period enumeration - Calculate per-day targets based on selected working days - Update Zod schemas for new fields - Update TypeScript types Frontend: - Add period type selector in target form (weekly/monthly) - Add work days multi-checkbox selector - Conditional start date input (week vs month) - Update DashboardPage to show 'this period' instead of 'this week' - Update ClientsPage to display working days and period type - Support both weekly and monthly targets in UI Migration: - Add migration to extend client_targets table with new columns - Backfill existing targets with default values (weekly, Mon-Fri)
TimeTracker
A multi-user web application for tracking time spent working on projects. Users authenticate via an external OIDC provider and manage their own clients, projects, and time entries.
Features
- OIDC Authentication - Secure login via external OpenID Connect provider with PKCE flow
- Client Management - Create and manage clients/customers
- Project Management - Organize work into projects with color coding
- Time Tracking - Start/stop timer with live elapsed time display
- Manual Entry - Add time entries manually for past work
- Validation - Overlap prevention and end-time validation
- Responsive UI - Works on desktop and mobile
Architecture
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ React │────▶│ Express │────▶│ PostgreSQL │
│ Frontend │ │ Backend │ │ Database │
└─────────────┘ └─────────────┘ └─────────────┘
│
▼
┌─────────────┐
│ OIDC │
│ Provider │
└─────────────┘
Quick Start
Prerequisites
- Node.js 18+
- PostgreSQL 14+
- An OIDC provider (e.g., Keycloak, Auth0, Okta)
1. Database Setup
# Create PostgreSQL database
createdb timetracker
2. Backend Setup
cd backend
npm install
# Copy and configure environment
cp ../.env.example .env
# Edit .env with your database and OIDC settings
# Run migrations
npx prisma migrate dev
# Start server
npm run dev
3. Frontend Setup
cd frontend
npm install
npm run dev
4. Environment Variables
Create .env in the backend directory:
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/timetracker"
# OIDC Configuration
OIDC_ISSUER_URL="https://your-oidc-provider.com"
OIDC_CLIENT_ID="your-client-id"
OIDC_REDIRECT_URI="http://localhost:3001/auth/callback"
# Session
SESSION_SECRET="your-secure-session-secret-min-32-chars"
# Server
PORT=3001
NODE_ENV=development
APP_URL="http://localhost:5173"
API Endpoints
Authentication
GET /auth/login- Initiate OIDC loginGET /auth/callback- OIDC callbackPOST /auth/logout- End sessionGET /auth/me- Get current user
Clients
GET /api/clients- List clientsPOST /api/clients- Create clientPUT /api/clients/:id- Update clientDELETE /api/clients/:id- Delete client
Projects
GET /api/projects- List projectsPOST /api/projects- Create projectPUT /api/projects/:id- Update projectDELETE /api/projects/:id- Delete project
Time Entries
GET /api/time-entries- List entries (with filters/pagination)POST /api/time-entries- Create entryPUT /api/time-entries/:id- Update entryDELETE /api/time-entries/:id- Delete entry
Timer
GET /api/timer- Get ongoing timerPOST /api/timer/start- Start timerPUT /api/timer- Update timer (set project)POST /api/timer/stop- Stop timer (creates entry)
Data Model
User (oidc sub)
├── Client[]
│ └── Project[]
│ └── TimeEntry[]
└── OngoingTimer (optional)
Technology Stack
Backend:
- Node.js + Express
- TypeScript
- Prisma ORM
- PostgreSQL
- OpenID Client
Frontend:
- React 18
- TypeScript
- TanStack Query
- React Router
- Tailwind CSS
- date-fns
License
MIT