use title case and fix colors

This commit is contained in:
Owen
2026-08-11 18:02:17 -04:00
parent b08e875b37
commit 11595f5f96
8 changed files with 39 additions and 37 deletions
@@ -75,7 +75,7 @@ export function OverviewTab(props: OverviewTabProps) {
<CardHeader>
<InfoSections cols={4}>
<InfoSection>
<InfoSectionTitle>Total requests</InfoSectionTitle>
<InfoSectionTitle>Total Requests</InfoSectionTitle>
<InfoSectionContent>
{data
? compactNumberFormatter.format(
@@ -85,7 +85,7 @@ export function OverviewTab(props: OverviewTabProps) {
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>Total tokens</InfoSectionTitle>
<InfoSectionTitle>Total Tokens</InfoSectionTitle>
<InfoSectionContent>
{data
? compactNumberFormatter.format(
@@ -95,7 +95,7 @@ export function OverviewTab(props: OverviewTabProps) {
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>Total cost</InfoSectionTitle>
<InfoSectionTitle>Total Cost</InfoSectionTitle>
<InfoSectionContent>
{data ? formatCost(data.totalCost) : "--"}
</InfoSectionContent>
@@ -115,7 +115,7 @@ export function OverviewTab(props: OverviewTabProps) {
<div className="grid lg:grid-cols-3 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Request volume</h3>
<h3 className="font-semibold">Request Volume</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -127,7 +127,7 @@ export function OverviewTab(props: OverviewTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Token usage</h3>
<h3 className="font-semibold">Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -155,7 +155,7 @@ export function OverviewTab(props: OverviewTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Model cost</h3>
<h3 className="font-semibold">Model Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -168,7 +168,7 @@ export function OverviewTab(props: OverviewTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Model tokens</h3>
<h3 className="font-semibold">Model Tokens</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -182,7 +182,7 @@ export function OverviewTab(props: OverviewTabProps) {
<Card>
<CardHeader>
<h3 className="font-semibold">Top models</h3>
<h3 className="font-semibold">Top Models</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -48,7 +48,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
<div className="flex flex-col gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Top providers</h3>
<h3 className="font-semibold">Top Providers</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -62,7 +62,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Provider cost</h3>
<h3 className="font-semibold">Provider Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -75,7 +75,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Provider token usage</h3>
<h3 className="font-semibold">Provider Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -56,7 +56,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
<div className="flex flex-col gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Top resources</h3>
<h3 className="font-semibold">Top Resources</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -70,7 +70,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Resource cost</h3>
<h3 className="font-semibold">Resource Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -83,7 +83,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Resource token usage</h3>
<h3 className="font-semibold">Resource Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -129,7 +129,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
key={s.key}
dataKey={s.key}
stackId="stack"
fill={`var(--color-${s.key})`}
fill={s.color}
radius={2}
isAnimationActive={false}
/>
@@ -165,7 +165,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
<Line
key={s.key}
dataKey={s.key}
stroke={`var(--color-${s.key})`}
stroke={s.color}
strokeWidth={2}
fill="transparent"
isAnimationActive={false}
@@ -80,7 +80,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<h3 className="font-semibold text-muted-foreground">Roles</h3>
<Card>
<CardHeader>
<h3 className="font-semibold">Top roles</h3>
<h3 className="font-semibold">Top Roles</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -93,7 +93,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Role cost</h3>
<h3 className="font-semibold">Role Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -106,7 +106,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Role token usage</h3>
<h3 className="font-semibold">Role Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -123,7 +123,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<h3 className="font-semibold text-muted-foreground">Users</h3>
<Card>
<CardHeader>
<h3 className="font-semibold">Top users</h3>
<h3 className="font-semibold">Top Users</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -136,7 +136,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">User cost</h3>
<h3 className="font-semibold">User Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -149,7 +149,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">User token usage</h3>
<h3 className="font-semibold">User Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart