feat(billing-history-table): Billing-Page bekommt Mock-Rechnungshistorie [tsc:fail]

.phase24-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "workspace-switcher-stub",
+  "current_feature": "billing-history-table",
   "started_at": "2026-05-23T08:33:42.059540",
   "attempted_features": [
-    "notification-bell"
+    "notification-bell",
+    "workspace-switcher-stub"
   ]
 }

GENERATION_LOG.md

@@ -2821,3 +2821,20 @@ 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
+- `08:35:42` **INFO**   Committed feature workspace-switcher-stub
+- `08:35:42` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: billing-history-table (2026-05-23 08:35:42)
+
+- `08:35:42` **INFO** Description: Billing-Page bekommt Mock-Rechnungshistorie
+- `08:35:42` **INFO**   Generating apps/web/src/pages/Billing.tsx (ERWEITERT — behalte Plans-Cards. Füge Section 'Rechnungshistorie': Moc…)
+- `08:36:48` **INFO**     wrote 7601 chars in 65.6s (attempt 1)
+- `08:36:48` **INFO** Running tsc --noEmit on api…
+- `08:36:50` **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/web/src/pages/Billing.tsx

@@ -10,6 +10,14 @@ interface Plan {
   highlighted?: boolean
 }
 
+interface Invoice {
+  id: string
+  date: string
+  amount: string
+  status: 'paid' | 'pending'
+  invoiceUrl: string
+}
+
 const PLANS: Plan[] = [
   {
     name: "Free",
@@ -32,19 +40,28 @@ const PLANS: Plan[] = [
   },
 ]
 
+const MOCK_INVOICES: Invoice[] = [
+  { id: "INV-001", date: "2023-12-01", amount: "12.00€", status: "paid", invoiceUrl: "#" },
+  { id: "INV-002", date: "2023-11-01", amount: "12.00€", status: "paid", invoiceUrl: "#" },
+  { id: "INV-003", date: "2023-10-01", amount: "12.00€", status: "pending", invoiceUrl: "#" },
+]
+
 export default function Billing() {
   const { data: currentUser, isLoading } = useQuery({
     queryKey: ["me"],
     queryFn: () => api.getMe(),
   })
 
-  // Mocking current plan as 'Free' for now as per requirements
   const currentPlan = "Free"
 
   const handleUpgrade = (planName: string) => {
     toast.success(`Stripe-Integration for ${planName} comes in v2`)
   }
 
+  const handleDownload = () => {
+    toast.error("Invoice downloads coming in v2")
+  }
+
   if (isLoading) {
     return <div className="p-6 text-gray-500">Loading billing details...</div>
   }
@@ -64,6 +81,7 @@ export default function Billing() {
         </div>
       </header>
 
+      <section>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {PLANS.map((plan) => (
             <div 
@@ -115,25 +133,53 @@ export default function Billing() {
             </div>
           ))}
         </div>
+      </section>
 
-      <section className="bg-gray-50 rounded-2xl p-8 border border-gray-200">
+      <section className="space-y-6">
-        <h2 className="text-lg font-semibold text-gray-900 mb-4">Payment Method</h2>
+        <div className="flex items-center justify-between">
-        <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg">
+          <h2 className="text-2xl font-bold text-gray-900">Invoice History</h2>
-          <div className="flex items-center gap-4">
+          <span className="text-sm text-gray-500">Last 3 months</span>
-            <div className="w-12 h-8 bg-gray-100 rounded border border-gray-200 flex items-center justify-center text-[10px] font-mono text-gray-400">
-              CARD
-            </div>
-            <div>
-              <p className="text-sm font-medium text-gray-900">No card on file</p>
-              <p className="text-xs text-gray-500">Add a payment method to upgrade your plan</p>
-            </div>
         </div>
+        
+        <div className="overflow-hidden bg-white border border-gray-200 rounded-2xl shadow-sm">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="bg-gray-50 border-b border-gray-200">
+                <th className="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Invoice ID</th>
+                <th className="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
+                <th className="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</th>
+                <th className="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
+                <th className="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider text-right">Action</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {MOCK_INVOICES.map((invoice) => (
+                <tr key={invoice.id} className="hover:bg-gray-50 transition-colors">
+                  <td className="px-6 py-4 text-sm font-medium text-gray-900">{invoice.id}</td>
+                  <td className="px-6 py-4 text-sm text-gray-600">{invoice.date}</td>
+                  <td className="px-6 py-4 text-sm text-gray-900 font-semibold">{invoice.amount}</td>
+                  <td className="px-6 py-4 text-sm">
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                      invoice.status === 'paid' 
+                        ? "bg-green-100 text-green-700" 
+                        : "bg-yellow-100 text-yellow-700"
+                    }`}>
+                      {invoice.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-right">
                     <button 
-            onClick={() => handleUpgrade("Payment")}
+                      onClick={handleDownload}
-            className="text-sm font-semibold text-blue-600 hover:text-blue-700"
+                      disabled
+                      className="text-xs font-medium text-gray-400 bg-gray-100 px-3 py-1 rounded-md cursor-not-allowed border border-gray-200"
                     >
-            Add Card
+                      Download PDF
                     </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
       </section>
     </div>