feat(billing-history-table): Billing-Page bekommt Mock-Rechnungshistorie [tsc:fail]
This commit is contained in:
parent
fce954b096
commit
f8aac22d93
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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,76 +81,105 @@ export default function Billing() {
|
||||
</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"
|
||||
<section>
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
{currentPlan === plan.name ? "Current Plan" : "Upgrade Plan"}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{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>
|
||||
|
||||
<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
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Invoice History</h2>
|
||||
<span className="text-sm text-gray-500">Last 3 months</span>
|
||||
</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={handleDownload}
|
||||
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"
|
||||
>
|
||||
Download PDF
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user