feat(billing-stub): Plans-Page mit Pricing-Tiers (UI only, kein Stripe) [tsc:fail]

.phase9-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "two-factor-auth-stub",
+  "current_feature": "billing-stub",
   "started_at": "2026-05-23T06:02:21.166704",
   "attempted_features": [
-    "webhooks-config"
+    "webhooks-config",
+    "two-factor-auth-stub"
   ]
 }

GENERATION_LOG.md

@@ -1056,3 +1056,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
+- `06:04:42` **INFO**   Committed feature two-factor-auth-stub
+- `06:04:42` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: billing-stub (2026-05-23 06:04:42)
+
+- `06:04:42` **INFO** Description: Plans-Page mit Pricing-Tiers (UI only, kein Stripe)
+- `06:04:42` **INFO**   Generating apps/web/src/pages/Billing.tsx (Billing/Plans-Page. 3 Pricing-Cards: 'Free' (0€, 1 User, 100 entries/M…)
+- `06:05:29` **INFO**     wrote 5423 chars in 47.2s (attempt 1)
+- `06:05:29` **INFO** Running tsc --noEmit on api…
+- `06:05:31` **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

@@ -0,0 +1,141 @@
+import { useQuery } from "@tanstack/react-query"
+import { api } from "../lib/api"
+import { toast } from "react-hot-toast"
+
+interface Plan {
+  name: string
+  price: string
+  description: string
+  features: string[]
+  highlighted?: boolean
+}
+
+const PLANS: Plan[] = [
+  {
+    name: "Free",
+    price: "0€",
+    description: "Perfect for individuals getting started.",
+    features: ["1 User", "100 entries / month", "Basic Support", "Community Access"],
+  },
+  {
+    name: "Team",
+    price: "12€",
+    description: "Scale your business with collaboration.",
+    features: ["Unlimited Users", "Unlimited entries", "Customers & Projects", "Priority Email Support"],
+    highlighted: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    description: "Advanced security and dedicated support.",
+    features: ["Custom SLA", "SSO / SAML", "Audit Logs", "Dedicated Account Manager"],
+  },
+]
+
+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`)
+  }
+
+  if (isLoading) {
+    return <div className="p-6 text-gray-500">Loading billing details...</div>
+  }
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto space-y-12">
+      <header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Billing & Plans</h1>
+          <p className="text-gray-500">Choose the right plan for your organization's needs.</p>
+        </div>
+        <div className="flex items-center gap-3 bg-white px-4 py-2 rounded-full border border-gray-200 shadow-sm">
+          <span className="text-sm text-gray-600 font-medium">Current Plan:</span>
+          <span className="px-3 py-1 text-xs font-bold uppercase tracking-wider text-blue-600 bg-blue-50 rounded-full border border-blue-100">
+            {currentPlan}
+          </span>
+        </div>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {PLANS.map((plan) => (
+          <div 
+            key={plan.name}
+            className={`relative flex flex-col p-8 rounded-2xl border transition-all duration-300 hover:scale-105 cursor-default ${
+              plan.highlighted 
+                ? "border-blue-500 bg-blue-50/30 shadow-xl ring-1 ring-blue-500" 
+                : "border-gray-200 bg-white shadow-sm"
+            }`}
+          >
+            {plan.highlighted && (
+              <span className="absolute -top-4 left-1/2 -translate-x-1/2 px-3 py-1 text-xs font-bold text-white bg-blue-600 rounded-full">
+                MOST POPULAR
+              </span>
+            )}
+            
+            <div className="mb-8">
+              <h3 className="text-xl font-bold text-gray-900">{plan.name}</h3>
+              <div className="mt-4 flex items-baseline gap-1">
+                <span className="text-4xl font-extrabold text-gray-900">{plan.price}</span>
+                {plan.price !== "Custom" && (
+                  <span className="text-gray-500 text-sm">/user/month</span>
+                )}
+              </div>
+              <p className="mt-2 text-sm text-gray-600">{plan.description}</p>
+            </div>
+
+            <ul className="flex-1 space-y-4 mb-8">
+              {plan.features.map((feature) => (
+                <li key={feature} className="flex items-start gap-3 text-sm text-gray-700">
+                  <svg className="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                  {feature}
+                </li>
+              ))}
+            </ul>
+
+            <button
+              onClick={() => handleUpgrade(plan.name)}
+              className={`w-full py-3 px-4 rounded-xl font-semibold transition-colors ${
+                plan.highlighted
+                  ? "bg-blue-600 text-white hover:bg-blue-700"
+                  : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+              }`}
+            >
+              {currentPlan === plan.name ? "Current Plan" : "Upgrade Plan"}
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <section className="bg-gray-50 rounded-2xl p-8 border border-gray-200">
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">Payment Method</h2>
+        <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg">
+          <div className="flex items-center gap-4">
+            <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>
+          <button 
+            onClick={() => handleUpgrade("Payment")}
+            className="text-sm font-semibold text-blue-600 hover:text-blue-700"
+          >
+            Add Card
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}