apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-12 08:42:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix credits display on billing page

Browse source
This commit is contained in:
Ramnique Singh 2025-08-19 14:14:09 +05:30
parent 05fb6ad9a8
commit ce37f5e9ff
1 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
apps/rowboat/app/billing/app.tsx
View file

@ -53,6 +53,11 @@ export function BillingPage({ customer, usage }: BillingPageProps) {
const [upgradeModalOpen, setUpgradeModalOpen] = useState(false); const [upgradeModalOpen, setUpgradeModalOpen] = useState(false);
const [upgradeError, setUpgradeError] = useState(""); const [upgradeError, setUpgradeError] = useState("");
// show friendly values for credits
const sanctionedCredits = Math.floor(usage.sanctionedCredits / (10 ** 6));
const availableCredits = Math.floor(usage.availableCredits / (10 ** 6));
const usedCredits = Math.ceil((usage.sanctionedCredits - usage.availableCredits) / (10 ** 6));
// Prepare usage metrics data // Prepare usage metrics data
const usageData = Object.entries(usage.usage) const usageData = Object.entries(usage.usage)
.map(([type, credits]) => ({ .map(([type, credits]) => ({
@ -162,7 +167,7 @@ export function BillingPage({ customer, usage }: BillingPageProps) {
tokens.colors.light.text.primary, tokens.colors.light.text.primary,
tokens.colors.dark.text.primary tokens.colors.dark.text.primary
)}> )}>
{usage.sanctionedCredits.toLocaleString()} {sanctionedCredits.toLocaleString()}
</p> </p>
<p className={clsx( <p className={clsx(
tokens.typography.sizes.sm, tokens.typography.sizes.sm,
@ -180,7 +185,7 @@ export function BillingPage({ customer, usage }: BillingPageProps) {
tokens.colors.light.text.primary, tokens.colors.light.text.primary,
tokens.colors.dark.text.primary tokens.colors.dark.text.primary
)}> )}>
{(usage.sanctionedCredits - usage.availableCredits).toLocaleString()} {usedCredits.toLocaleString()}
</p> </p>
<p className={clsx( <p className={clsx(
tokens.typography.sizes.sm, tokens.typography.sizes.sm,
@ -200,7 +205,7 @@ export function BillingPage({ customer, usage }: BillingPageProps) {
tokens.colors.dark.text.primary tokens.colors.dark.text.primary
) )
)}> )}>
{usage.availableCredits.toLocaleString()} {availableCredits.toLocaleString()}
</p> </p>
<p className={clsx( <p className={clsx(
tokens.typography.sizes.sm, tokens.typography.sizes.sm,
@ -263,7 +268,7 @@ export function BillingPage({ customer, usage }: BillingPageProps) {
<section className="card"> <section className="card">
<div className="px-4 pt-4 pb-6"> <div className="px-4 pt-4 pb-6">
<SectionHeading> <SectionHeading>
Usage data Usage split
</SectionHeading> </SectionHeading>
</div> </div>
<HorizontalDivider /> <HorizontalDivider />
@ -287,13 +292,13 @@ export function BillingPage({ customer, usage }: BillingPageProps) {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="space-y-1"> <div className="space-y-1">
<Label label={type.replace(/_/g, ' ')} /> <Label label={type.replace(/_/g, ' ')} />
<p className={clsx( {/* <p className={clsx(
tokens.typography.sizes.sm, tokens.typography.sizes.sm,
tokens.colors.light.text.secondary, tokens.colors.light.text.secondary,
tokens.colors.dark.text.secondary tokens.colors.dark.text.secondary
)}> )}>
{credits.toLocaleString()} credits {credits.toLocaleString()} credits
</p> </p> */}
</div> </div>
<span className={clsx( <span className={clsx(
tokens.typography.sizes.sm, tokens.typography.sizes.sm,