From 64dd529b67cace13cfa00cd02225b51bae39dca7 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Sat, 12 Sep 2026 19:15:42 +0200 Subject: [PATCH] Add billing page in preview (#2718) Co-authored-by: codecalm --- .changeset/billing-page.md | 5 + .../fix-selectgroup-nested-icon-margin.md | 5 + core/scss/ui/forms/_form-selectgroup.scss | 2 +- preview/pages/billing.astro | 217 ++++++++++++++++++ shared/data/menu.json | 5 + 5 files changed, 233 insertions(+), 1 deletion(-) create mode 100644 .changeset/billing-page.md create mode 100644 .changeset/fix-selectgroup-nested-icon-margin.md create mode 100644 preview/pages/billing.astro diff --git a/.changeset/billing-page.md b/.changeset/billing-page.md new file mode 100644 index 000000000..71649ac1f --- /dev/null +++ b/.changeset/billing-page.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Added new billing page with plan usage, payment method, and invoices layout. diff --git a/.changeset/fix-selectgroup-nested-icon-margin.md b/.changeset/fix-selectgroup-nested-icon-margin.md new file mode 100644 index 000000000..8c88f2d2a --- /dev/null +++ b/.changeset/fix-selectgroup-nested-icon-margin.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed the `.form-selectgroup-label` icon-only margin applying to icons nested deeper inside the label. diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss index 12b40c137..edeb58c02 100644 --- a/core/scss/ui/forms/_form-selectgroup.scss +++ b/core/scss/ui/forms/_form-selectgroup.scss @@ -51,7 +51,7 @@ Select group @include border-radius(var(--border-radius)); @include transition(border-color $transition-time, background $transition-time, color $transition-time); - .icon:only-child { + > .icon:only-child { margin: 0 var(--form-selectgroup-icon-margin-x); } diff --git a/preview/pages/billing.astro b/preview/pages/billing.astro new file mode 100644 index 000000000..301c3879e --- /dev/null +++ b/preview/pages/billing.astro @@ -0,0 +1,217 @@ +--- +import DefaultLayout from '@shared/layouts/DefaultLayout.astro' +import Card from '@ui/Card.astro' +import CardHeader from '@ui/CardHeader.astro' +import CardBody from '@ui/CardBody.astro' +import CardActions from '@ui/CardActions.astro' +import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' +import Badge from '@ui/Badge.astro' +import Button from '@ui/Button.astro' +import ButtonList from '@ui/ButtonList.astro' +import Datagrid from '@ui/Datagrid.astro' +import DatagridItem from '@ui/DatagridItem.astro' +import ListGroup from '@ui/ListGroup.astro' +import ListGroupItem from '@ui/ListGroupItem.astro' +import Icon from '@ui/Icon.astro' +import Payment from '@ui/Payment.astro' +import Progress from '@ui/Progress.astro' +import type { PaymentProvider } from '@shared/lib/tokens' + +const usage = { used: 7420, limit: 10000 } +const usagePercent = Math.round((usage.used / usage.limit) * 100) + +const paymentMethods: { provider: PaymentProvider; title: string; description: string; isDefault: boolean }[] = [ + { provider: 'visa', title: 'Visa ending in 4242', description: 'Expires 09/2028', isDefault: true }, + { provider: 'mastercard', title: 'Mastercard ending in 5512', description: 'Expires 03/2027', isDefault: false }, + { provider: 'paypal', title: 'PayPal', description: 'billing@tabler.io', isDefault: false }, +] + +const invoices: { date: string; number: string; amount: string; status: 'paid' | 'open' }[] = [ + { date: 'Sep 18, 2026', number: 'INV-2026-0089', amount: '$49.00', status: 'open' }, + { date: 'Aug 18, 2026', number: 'INV-2026-0081', amount: '$49.00', status: 'paid' }, + { date: 'Jul 18, 2026', number: 'INV-2026-0074', amount: '$49.00', status: 'paid' }, + { date: 'Jun 18, 2026', number: 'INV-2026-0066', amount: '$49.00', status: 'paid' }, +] + +const invoiceStatus = { + paid: { text: 'Paid', color: 'success' }, + open: { text: 'Open', color: 'warning' }, +} +--- + + + +
+ {!method.isDefault && ( + + )} + + +
+ + + + )) + } + + + + +
+ + +
+ Billing details + Shown on every invoice and receipt. +
+ +
+
+ + + Cancel subscription + Your plan stays active until the end of the current billing period. After that the workspace switches to the free plan and API access is paused. +
+ + + + diff --git a/shared/data/menu.json b/shared/data/menu.json index 28d833661..b1c9bca0f 100644 --- a/shared/data/menu.json +++ b/shared/data/menu.json @@ -266,6 +266,11 @@ "title": "Activity", "url": "activity.html" }, + "billing": { + "title": "Billing", + "url": "billing.html", + "badge": "New" + }, "chat": { "title": "Chat", "url": "chat.html"