soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2026-05-08 17:48:55 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use theme-aware chart colors and update color variables

Browse Source
This commit is contained in:
Sean O'Connor
2025-07-31 23:10:55 -04:00
parent 8c8f09dab9
commit 43b8fd6c9e
7 changed files with 75 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/dashboard/_components/invoice-status-chart.tsx
+5 -5
View File
@@ -43,12 +43,12 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
name: item.status.charAt(0).toUpperCase() + item.status.slice(1),
}));
// Light pastel colors for different statuses
// Use theme-aware colors
const COLORS = {
draft: "hsl(220 9% 46%)", // muted gray
sent: "hsl(210 40% 70%)", // light blue
paid: "hsl(142 76% 85%)", // light green
overdue: "hsl(0 84% 85%)", // light red
draft: "hsl(var(--muted-foreground))",
sent: "oklch(var(--chart-1))",
paid: "oklch(var(--chart-2))",
overdue: "oklch(var(--chart-3))",
};
const formatCurrency = (value: number) => {
src/app/dashboard/_components/monthly-metrics-chart.tsx
+9 -9
View File
@@ -104,13 +104,13 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
<div className="bg-card border-border rounded-lg border p-3 shadow-lg">
<p className="font-medium">{label}</p>
<div className="space-y-1 text-sm">
<p style={{ color: "hsl(142 45% 45%)" }}>
<p style={{ color: "oklch(var(--chart-2))" }}>
Paid: {data.paidInvoices}
</p>
<p style={{ color: "hsl(210 40% 50%)" }}>
<p style={{ color: "oklch(var(--chart-1))" }}>
Pending: {data.pendingInvoices}
</p>
<p style={{ color: "hsl(0 65% 55%)" }}>
<p style={{ color: "oklch(var(--chart-3))" }}>
Overdue: {data.overdueInvoices}
</p>
<p className="text-muted-foreground border-t pt-1">
@@ -158,19 +158,19 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
<Bar
dataKey="paidInvoices"
stackId="a"
fill="hsl(142 76% 85%)"
fill="oklch(var(--chart-2))"
radius={[0, 0, 0, 0]}
/>
<Bar
dataKey="pendingInvoices"
stackId="a"
fill="hsl(210 40% 85%)"
fill="oklch(var(--chart-1))"
radius={[0, 0, 0, 0]}
/>
<Bar
dataKey="overdueInvoices"
stackId="a"
fill="hsl(0 84% 85%)"
fill="oklch(var(--chart-3))"
radius={[2, 2, 0, 0]}
/>
</BarChart>
@@ -182,21 +182,21 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
<div className="flex items-center space-x-2">
<div
className="h-3 w-3 rounded-full"
style={{ backgroundColor: "hsl(142 76% 85%)" }}
style={{ backgroundColor: "oklch(var(--chart-2))" }}
/>
<span className="text-xs">Paid</span>
</div>
<div className="flex items-center space-x-2">
<div
className="h-3 w-3 rounded-full"
style={{ backgroundColor: "hsl(210 40% 85%)" }}
style={{ backgroundColor: "oklch(var(--chart-1))" }}
/>
<span className="text-xs">Pending</span>
</div>
<div className="flex items-center space-x-2">
<div
className="h-3 w-3 rounded-full"
style={{ backgroundColor: "hsl(0 84% 85%)" }}
style={{ backgroundColor: "oklch(var(--chart-3))" }}
/>
<span className="text-xs">Overdue</span>
</div>
src/app/dashboard/_components/revenue-chart.tsx
+4 -4
View File
@@ -87,7 +87,7 @@ export function RevenueChart({ invoices }: RevenueChartProps) {
return (
<div className="bg-card border-border rounded-lg border p-3 shadow-lg">
<p className="font-medium">{label}</p>
<p style={{ color: "hsl(210 40% 50%)" }}>
<p style={{ color: "oklch(var(--chart-1))" }}>
Revenue: {formatCurrency(data.revenue)}
</p>
<p className="text-muted-foreground text-sm">
@@ -122,12 +122,12 @@ export function RevenueChart({ invoices }: RevenueChartProps) {
<linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="hsl(210 40% 70%)"
stopColor="oklch(var(--chart-1))"
stopOpacity={0.4}
/>
<stop
offset="95%"
stopColor="hsl(210 40% 70%)"
stopColor="oklch(var(--chart-1))"
stopOpacity={0.05}
/>
</linearGradient>
@@ -148,7 +148,7 @@ export function RevenueChart({ invoices }: RevenueChartProps) {
<Area
type="monotone"
dataKey="revenue"
stroke="hsl(210 40% 60%)"
stroke="oklch(var(--chart-1))"
strokeWidth={2}
fill="url(#revenueGradient)"
/>