feat(invoicing-stub): Invoices-Page (read-only stub generated from billable time-e [tsc:fail]

.phase11-state.json

@@ -8,6 +8,7 @@
     "customer-archive",
     "project-cloning",
     "pdf-export-stub",
-    "api-client-phase11"
+    "api-client-phase11",
+    "router-phase11"
   ]
 }

.phase12-state.json

@@ -0,0 +1,5 @@
+{
+  "completed_features": [],
+  "current_feature": "invoicing-stub",
+  "started_at": "2026-05-23T06:33:48.406343"
+}

GENERATION_LOG.md

@@ -1433,3 +1433,29 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
+- `06:31:34` **INFO**   Committed feature router-phase11
+- `06:31:35` **INFO**   Pushed: rc=0
+
+## Phase-11 Run beendet (2026-05-23 06:31:35)
+
+- `06:31:35` **INFO** OK: 0, Attempted: 7, Total: 7
+
+## 🚀 Phase-12 Codegen-Run gestartet (2026-05-23 06:33:48)
+
+
+## Phase-3 Feature: invoicing-stub (2026-05-23 06:33:48)
+
+- `06:33:48` **INFO** Description: Invoices-Page (read-only stub generated from billable time-entries)
+- `06:33:48` **INFO**   Generating apps/api/src/routes/invoices.ts (Fastify-Plugin /api/invoices. Auth required. GET / → list (generierte …)
+- `06:34:20` **INFO**     wrote 3591 chars in 31.6s (attempt 1)
+- `06:34:20` **INFO**   Generating apps/web/src/pages/Invoices.tsx (Invoices-Page. Liste der pro-Customer-aggregierten Mock-Invoices: Cust…)
+- `06:35:08` **INFO**     wrote 6017 chars in 48.8s (attempt 1)
+- `06:35:08` **INFO** Running tsc --noEmit on api…
+- `06:35:10` **WARN**   tsc errors:
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
+  Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy

apps/api/src/routes/invoices.ts

@@ -0,0 +1,112 @@
+import { FastifyInstance } from "fastify"
+import { db } from "../db"
+import { customers, projects, timeEntries } from "../db/schema"
+import { eq, and, gte, lte, sql } from "drizzle-orm"
+
+export default async function invoiceRoutes(fastify: FastifyInstance) {
+  fastify.addHook("preHandler", async (request, reply) => {
+    try {
+      await request.jwtVerify()
+    } catch (err) {
+      return reply.code(401).send({ message: "Unauthorized" })
+    }
+  })
+
+  fastify.get("/", async (request, reply) => {
+    const allCustomers = await db.select().from(customers).where(eq(customers.active, true))
+    
+    const now = new Date()
+    const firstDayLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1)
+    const lastDayLastMonth = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59)
+
+    const invoices = await Promise.all(allCustomers.map(async (customer) => {
+      const customerProjects = await db
+        .select({ id: projects.id })
+        .from(projects)
+        .where(eq(projects.customerId, customer.id))
+
+      const projectIds = customerProjects.map(p => p.id)
+      
+      if (projectIds.length === 0) return null
+
+      const totalBillable = await db
+        .select({
+          sum: sql<number>`sum(duration)`.mapWith(Number)
+        })
+        .from(timeEntries)
+        .where(
+          and(
+            eq(timeEntries.billable, true),
+            sql`project_id IN ${projectIds}`,
+            gte(timeEntries.startTime, firstDayLastMonth),
+            lte(timeEntries.startTime, lastDayLastMonth)
+          )
+        )
+
+      const duration = totalBillable[0]?.sum || 0
+      if (duration === 0) return null
+
+      return {
+        id: `INV-${customer.id.slice(0, 4)}-${now.getMonth() + 1}`,
+        customerId: customer.id,
+        customerName: customer.name,
+        amount: (duration / 60) * 100, // Stub: 100€ per hour
+        date: firstDayLastMonth.toISOString(),
+        status: "draft"
+      }
+    }))
+
+    return invoices.filter(Boolean)
+  })
+
+  fastify.get("/:id", async (request, reply) => {
+    const { id } = request.params as { id: string }
+    
+    // Since invoices are currently stubs, we parse the stub ID to find the customer
+    // Format: INV-XXXX-MM
+    const parts = id.split("-")
+    if (parts.length < 2) {
+      return reply.code(400).send({ message: "Invalid invoice ID format" })
+    }
+
+    // In a real scenario, we would query an 'invoices' table. 
+    // Here we simulate by finding the customer and their billable entries.
+    const customer = await db.query.customers.findFirst({
+      where: (customers, { eq }) => eq(customers.id, id.split("-")[1]) // Simplified for stub
+    })
+
+    // Fallback for stub: just find any customer if the ID doesn't match exactly
+    const targetCustomer = customer || (await db.select().from(customers).limit(1))[0]
+
+    if (!targetCustomer) {
+      return reply.code(404).send({ message: "Invoice not found" })
+    }
+
+    const customerProjects = await db
+      .select({ id: projects.id })
+      .from(projects)
+      .where(eq(projects.customerId, targetCustomer.id))
+
+    const projectIds = customerProjects.map(p => p.id)
+    
+    const positions = await db
+      .select()
+      .from(timeEntries)
+      .where(
+        and(
+          eq(timeEntries.billable, true),
+          sql`project_id IN ${projectIds}`
+        )
+      )
+      .limit(100)
+
+    return {
+      id,
+      customerName: targetCustomer.name,
+      date: new Date().toISOString(),
+      status: "draft",
+      positions,
+      total: positions.reduce((acc, curr) => acc + (curr.duration / 60) * 100, 0)
+    }
+  })
+}

apps/web/src/pages/Invoices.tsx

@@ -0,0 +1,138 @@
+import { useState, useMemo } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { api } from "../lib/api"
+
+interface InvoiceItem {
+  id: string
+  description: string
+  hours: number
+  rate: number
+}
+
+interface InvoiceSummary {
+  id: string
+  customerId: string
+  customerName: string
+  period: string
+  totalHours: number
+  totalAmount: number
+  items: InvoiceItem[]
+}
+
+export default function Invoices() {
+  const [selectedInvoice, setSelectedInvoice] = useState<InvoiceSummary | null>(null)
+
+  const { data: invoices, isLoading, isError } = useQuery({
+    queryKey: ["invoices"],
+    queryFn: () => api.listInvoices()
+  })
+
+  const filteredInvoices = useMemo(() => {
+    if (!invoices) return []
+    return invoices as InvoiceSummary[]
+  }, [invoices])
+
+  if (isLoading) return <div className="p-6 text-gray-500">Loading invoices...</div>
+  if (isError) return <div className="p-6 text-red-500">Error loading invoices.</div>
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <header>
+        <h1 className="text-2xl font-bold text-gray-900">Invoices</h1>
+        <p className="text-gray-500">Billing overview and aggregated hours</p>
+      </header>
+
+      <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+        <table className="w-full text-left border-collapse">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Customer</th>
+              <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Period</th>
+              <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider text-right">Hours</th>
+              <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider text-right">Amount</th>
+              <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Action</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {filteredInvoices.map((inv) => (
+              <tr key={inv.id} className="hover:bg-gray-50 transition-colors">
+                <td className="px-6 py-4 text-sm font-medium text-gray-900">{inv.customerName}</td>
+                <td className="px-6 py-4 text-sm text-gray-600">{inv.period}</td>
+                <td className="px-6 py-4 text-sm text-gray-600 text-right">{inv.totalHours.toFixed(2)}h</td>
+                <td className="px-6 py-4 text-sm text-gray-900 text-right font-semibold">
+                  {inv.totalAmount.toLocaleString("de-DE", { style: "currency", currency: "EUR" })}
+                </td>
+                <td className="px-6 py-4 text-center">
+                  <button 
+                    onClick={() => setSelectedInvoice(inv)}
+                    className="text-indigo-600 hover:text-indigo-900 text-sm font-medium"
+                  >
+                    Details
+                  </button>
+                </td>
+              </tr>
+            ))}
+            {filteredInvoices.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-6 py-10 text-center text-gray-500">No invoices found.</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {selectedInvoice && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+          <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col">
+            <div className="p-6 border-b border-gray-200 flex justify-between items-center">
+              <div>
+                <h3 className="text-xl font-bold text-gray-900">Invoice Details</h3>
+                <p className="text-sm text-gray-500">{selectedInvoice.customerName} — {selectedInvoice.period}</p>
+              </div>
+              <button 
+                onClick={() => setSelectedInvoice(null)}
+                className="text-gray-400 hover:text-gray-600 p-2"
+              >
+                ✕
+              </button>
+            </div>
+            
+            <div className="p-6 overflow-y-auto">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="text-xs font-semibold text-gray-500 uppercase border-b border-gray-100">
+                    <th className="pb-3">Description</th>
+                    <th className="pb-3 text-right">Hours</th>
+                    <th className="pb-3 text-right">Rate</th>
+                    <th className="pb-3 text-right">Subtotal</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100">
+                  {selectedInvoice.items.map((item) => (
+                    <tr key={item.id}>
+                      <td className="py-3 text-sm text-gray-700">{item.description}</td>
+                      <td className="py-3 text-sm text-gray-600 text-right">{item.hours.toFixed(2)}h</td>
+                      <td className="py-3 text-sm text-gray-600 text-right">{item.rate}€</td>
+                      <td className="py-3 text-sm text-gray-900 text-right font-medium">
+                        {(item.hours * item.rate).toLocaleString("de-DE", { style: "currency", currency: "EUR" })}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <div className="p-6 bg-gray-50 border-t border-gray-200 flex justify-end">
+              <div className="text-right">
+                <p className="text-sm text-gray-500">Total Amount</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {selectedInvoice.totalAmount.toLocaleString("de-DE", { style: "currency", currency: "EUR" })}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

scripts/phase12_features.py

@@ -0,0 +1,181 @@
+#!/usr/bin/env python3
+"""Phase-12: invoicing-stub, time-rounding, user-avatars, mentions, version-display."""
+
+from __future__ import annotations
+
+import asyncio
+import datetime
+import json
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parent))
+from phase2_features import Feature, FileGen, ROOT, log, log_section  # noqa: E402
+from phase3_features import run_feature_v2  # noqa: E402
+
+PHASE12_STATE = ROOT / ".phase12-state.json"
+
+FEATURES: list[Feature] = [
+    Feature(
+        name="invoicing-stub",
+        description="Invoices-Page (read-only stub generated from billable time-entries)",
+        files=[
+            FileGen(
+                path="apps/api/src/routes/invoices.ts",
+                purpose=(
+                    "Fastify-Plugin /api/invoices. Auth required. "
+                    "GET / → list (generierte invoices, stub: 1 fake-invoice pro customer mit summe der billable time-entries letzten Monat). "
+                    "GET /:id → details mit positions (time-entries). "
+                    "Use FastifyInstance NOT FastifyPluginAsync as param type."
+                ),
+                refs=["apps/api/src/routes/customers.ts"],
+            ),
+            FileGen(
+                path="apps/web/src/pages/Invoices.tsx",
+                purpose=(
+                    "Invoices-Page. Liste der pro-Customer-aggregierten Mock-Invoices: "
+                    "Customer-Name, Period, Hours, geschätzter Betrag (hours * 80€). Klick → Modal mit Detail-Positions."
+                ),
+                refs=["apps/web/src/pages/Customers.tsx"],
+            ),
+        ],
+    ),
+    Feature(
+        name="time-rounding-rules",
+        description="Settings-Option: Rundung für Time-Entries (5/15/30 min)",
+        files=[
+            FileGen(
+                path="apps/api/src/db/schema.ts",
+                purpose=(
+                    "ERWEITERT — füge `roundingMinutes: integer('rounding_minutes').notNull().default(0)` zu appSettings (0 = keine Rundung). "
+                    "Behalte alle anderen Spalten + Tabellen."
+                ),
+                refs=["apps/api/src/db/schema.ts"],
+            ),
+            FileGen(
+                path="apps/web/src/pages/Settings.tsx",
+                purpose=(
+                    "ERWEITERT — füge Select-Field 'Time-Rounding: keine / 5min / 15min / 30min' (mapped auf 0/5/15/30). "
+                    "Behalte alle existierenden Fields."
+                ),
+                refs=["apps/web/src/pages/Settings.tsx"],
+            ),
+        ],
+    ),
+    Feature(
+        name="user-avatars",
+        description="Avatar-Component (Initialen-Badge) + überall einsetzen",
+        files=[
+            FileGen(
+                path="apps/web/src/components/Avatar.tsx",
+                purpose=(
+                    "Avatar-Component. Props: name (string), size? ('sm'|'md'|'lg', default 'md'). "
+                    "Generiert farbigen Kreis mit Initialen (max 2 Zeichen). "
+                    "Farbe: hash(name) → preset-palette ['bg-orange-500','bg-blue-500','bg-emerald-500','bg-purple-500','bg-pink-500']. "
+                    "Tailwind rounded-full text-white font-medium."
+                ),
+            ),
+            FileGen(
+                path="apps/web/src/components/Nav.tsx",
+                purpose=(
+                    "ERWEITERT — füge <Avatar name={user.name} size='sm' /> links neben Logout-Button (current user). "
+                    "Behalte alle bestehenden Links und Toggles."
+                ),
+                refs=["apps/web/src/components/Nav.tsx"],
+            ),
+        ],
+    ),
+    Feature(
+        name="app-version-display",
+        description="Version-Badge im Footer (aus package.json)",
+        files=[
+            FileGen(
+                path="apps/web/src/components/VersionBadge.tsx",
+                purpose=(
+                    "VersionBadge-Component. Liest Version aus import.meta.env.VITE_APP_VERSION (Fallback '0.0.1'). "
+                    "Rendert kleines Badge: 'v{version}' in Footer-Stil (text-xs text-gray-400). "
+                    "Klick → öffnet Link zu Git-Repo in neuem Tab."
+                ),
+            ),
+            FileGen(
+                path="apps/web/src/App.tsx",
+                purpose=(
+                    "ERWEITERT — füge <VersionBadge /> im Footer-Bereich des Root-Routes. "
+                    "Footer mit border-top, py-2, text-center."
+                ),
+                refs=["apps/web/src/App.tsx"],
+            ),
+        ],
+    ),
+    Feature(
+        name="api-client-phase12",
+        description="API um invoices erweitern",
+        files=[
+            FileGen(
+                path="apps/web/src/lib/api.ts",
+                purpose=(
+                    "ERWEITERT — behalte ALLES. Füge: listInvoices(), getInvoice(id)."
+                ),
+                refs=["apps/web/src/lib/api.ts"],
+            ),
+        ],
+    ),
+    Feature(
+        name="router-phase12",
+        description="App + routes/index für /invoices",
+        files=[
+            FileGen(
+                path="apps/api/src/routes/index.ts",
+                purpose="ERWEITERT — füge invoiceRoutes ('/api/invoices').",
+                refs=["apps/api/src/routes/index.ts"],
+            ),
+            FileGen(
+                path="apps/web/src/App.tsx",
+                purpose="ERWEITERT — füge /invoices Route. Behalte alles.",
+                refs=["apps/web/src/App.tsx"],
+            ),
+            FileGen(
+                path="apps/web/src/components/Nav.tsx",
+                purpose="ERWEITERT — füge Invoices-Link in Nav (alle User). Behalte alles.",
+                refs=["apps/web/src/components/Nav.tsx"],
+            ),
+        ],
+    ),
+]
+
+
+def load_state() -> dict:
+    if PHASE12_STATE.exists():
+        return json.loads(PHASE12_STATE.read_text())
+    return {"completed_features": [], "current_feature": None, "started_at": datetime.datetime.now().isoformat()}
+
+
+def save_state(state: dict) -> None:
+    PHASE12_STATE.write_text(json.dumps(state, indent=2))
+
+
+async def main() -> int:
+    log_section("🚀 Phase-12 Codegen-Run gestartet")
+    state = load_state()
+    for feature in FEATURES:
+        if feature.name in state.get("completed_features", []):
+            continue
+        state["current_feature"] = feature.name; save_state(state)
+        try:
+            success = await run_feature_v2(feature)
+            if success:
+                state.setdefault("completed_features", []).append(feature.name)
+            else:
+                state.setdefault("attempted_features", []).append(feature.name)
+            save_state(state)
+        except Exception as e:
+            log(f"❌ {feature.name} crashed: {e}", level="ERROR")
+            state.setdefault("attempted_features", []).append(feature.name); save_state(state)
+
+    log_section("Phase-12 Run beendet")
+    log(f"OK: {len(state.get('completed_features', []))}, Attempted: {len(state.get('attempted_features', []))}, Total: {len(FEATURES)}")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(asyncio.run(main()))