InOffice

Plan and track your hybrid office days.

InOffice is a lightweight planner and tracker for hybrid workers. Set your office target, plan which days you'll go in, log what actually happened, and see what you need to meet your monthly goal. Use it as a guest and your attendance stays in your browser, or sign in with Google to keep it in sync across devices.

Features

• Simple start: continue with Google, or as a guest with just your first name, then choose a percentage of working days or office days per week.
• Monthly summary: office, required, and remaining days appear above the calendar.
• Interactive calendar: Monday-first, with disabled weekends and a highlighted current day.
• UK bank holidays: England & Wales, Scotland, and Northern Ireland, with cached fallback and manual overrides.
• Progress tracking: see your progress against the monthly office target.
• Year overview: compare all twelve months and jump directly to a month.
• Optional account: sign in with Google to save attendance to your account and use it on any device. Guest data can be synced to your account when you sign in.
• Backup and restore: export or import settings, attendance, and cached holidays as JSON.
• Responsive and accessible: compact mobile cards, keyboard-accessible dialogs, visible focus states, and reduced-motion support.

Getting started

Use Node.js 22.22+ and pnpm 11.20.0. The pnpm version is pinned in package.json.

pnpm install --frozen-lockfile
pnpm dev

Open the local URL printed by Vite. The landing page offers Google or guest; setup then runs at /onboarding (guests are asked for a first name first).

Commands

Command	Purpose
pnpm dev	Start the local development server
pnpm build	Build the production app into dist/
pnpm preview	Preview the production build locally
pnpm test	Run calculation, validation, and storage tests
pnpm typecheck	Type-check the project with TypeScript
pnpm db:generate	Generate a SQL migration from server/db/schema.ts
pnpm db:migrate	Apply pending migrations to the database in .env.local
pnpm test:e2e	Run Playwright browser tests

Install the browser before running end-to-end tests:

pnpm exec playwright install chromium
pnpm test:e2e

Browser tests cover onboarding, both target modes, calendar interactions, persistence, settings, backup import/export, resets, holiday fallback, responsive layouts, and signed-in sync, offline behaviour and first-sign-in import. They start their own dev server on port 5174 with an in-memory PGlite database and a test-only sign-in route, so they need no credentials and never touch real data. API tests (tests/api.test.ts) also run against PGlite. One test calls the live GOV.UK service and requires internet access. To use an existing Chromium installation, set PLAYWRIGHT_EXECUTABLE_PATH to its executable.

Database (accounts and sync)

Guest mode needs no backend. Account features use a Supabase Postgres database through the API in server/. To work on them locally:

1. Link the project and pull its environment variables (or copy .env.example to .env.local and fill it in):

   pnpm dlx vercel link
   pnpm dlx vercel env pull .env.local
   

2. Apply migrations:

   pnpm db:migrate
   

Sign-in uses Better Auth with Google. Create an OAuth client in Google Cloud Console with the redirect URI http://127.0.0.1:5173/api/auth/callback/google (and http://localhost:5173/... if you use that host), then set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET. See .env.example for every variable.

pnpm dev serves the API from the Vite dev server; GET /api/health reports database connectivity. All InOffice tables, and the migration history, live in a dedicated inoffice Postgres schema. After changing server/db/schema.ts, run pnpm db:generate and commit the new file in drizzle/.

How attendance is calculated

InOffice assumes a Monday–Friday working week.

Working days = Weekdays − Bank holidays − OOO days
Required office days = ceil(Working days × Target percentage / 100)
Remaining days = max(Required office days − Office days, 0)

For example, with 22 weekdays, one bank holiday, one OOO day, and a 50% target, you need 10 office days. If you have recorded six, you need four more.

A days-per-week target converts to a percentage of a five-day week: three office days per week becomes 60%. It is applied to the monthly calculation, rather than enforcing a separate weekly quota.

Recording days

Select a weekday to cycle through:

Home → Office → OOO → Bank holiday → Home

Only weekdays count. Bank holidays and OOO days are excluded from working days. Manual entries take precedence over automatic bank holidays, including an explicit Home entry.

Future Office entries count toward the monthly total as planned attendance.

Future additions

Forecasting is intentionally hidden for now. The existing forecast module remains in src/lib/forecast.ts so it can be reintroduced later when the experience is ready.

Bank holidays

Holiday data comes from the GOV.UK bank holiday API. Responses are cached for seven days. Failed refreshes use cached data where available; holidays can also be marked manually.

The API covers a limited set of years. InOffice shows a notice when the selected year has no automatic holiday data.

Privacy and storage

As a guest

Your first name, attendance records, preferences, setup completion, and the holiday cache are stored in LocalStorage, using these keys:

inoffice.settings.v1
inoffice.entries.v1
inoffice.holidays.v1
inoffice.profile.v1

Guest data belongs to the current browser and site origin. Clearing browser data or switching devices does not transfer your records; use JSON export/import to keep a backup or move them.

This is the beginning of the README. Read the rest at the original. Read the full README ↗