✦ Angular Invoice Timer Desk

Angular billing cockpit with client timers, billable worklogs, invoice preview, and local draft persistence.

---

✨ Highlights

• Billing-desk UI with a client tape, active timer cockpit, work ledger, and invoice preview
• Mock clients, projects, worklogs, active timer state, and invoice drafts shaped like a future API
• Start/pause timer, add quarter-hour blocks, log active sessions, and reset current timer
• Computed billable hours, subtotal, tax, total, client budget usage, and invoice line items
• localStorage persistence for active timer and worklog changes
• Tailwind-first UI with Lucide Angular SVG icons

🛠️ Tech Stack

• Angular 21 with standalone components
• Angular Signals and computed state
• TypeScript 5.9
• Tailwind CSS 4 via @tailwindcss/postcss
• Lucide Angular SVG icons
• Vitest via the Angular CLI unit-test builder

🔌 Mock API Contract

The mock billing data lives in src/app/data/mock-billing.ts and follows future backend shapes:

• ClientAccount
• ProjectBrief
• WorklogEntry
• InvoiceDraft
• ActiveTimer

The UI talks to BillingStateService, so the mock source can later be replaced with HttpClient without rewriting the template.

🗂️ Project Structure

angular-invoice-timer-desk/
|-- .postcssrc.json
|-- public/
|   `-- favicon.svg
|-- src/
|   |-- app/
|   |   |-- data/
|   |   |   `-- mock-billing.ts
|   |   |-- services/
|   |   |   `-- billing-state.ts
|   |   |-- app.config.ts
|   |   |-- app.html
|   |   |-- app.spec.ts
|   |   |-- app.ts
|   |   `-- models.ts
|   |-- index.html
|   |-- main.ts
|   `-- styles.css
|-- LICENSE
|-- package.json
|-- vercel.json
`-- README.md

🚀 Local Development

npm install
npm start

Open http://localhost:4200.

🧪 Checks

npm test -- --watch=false
npm run build

🌐 Vercel Deployment

The repository includes vercel.json for Angular static deployment:

{
  "framework": "angular",
  "buildCommand": "npm run build",
  "outputDirectory": "dist/angular-invoice-timer-desk/browser"
}

📄 License

MIT License. See LICENSE.