From 08a3132beca5d02f81f8756851024fdbc6cee483 Mon Sep 17 00:00:00 2001
From: Pierre Wessman <4029607+pierrewessman@users.noreply.github.com>
Date: Sun, 14 Dec 2025 17:47:17 +0100
Subject: [PATCH] polish
---
.claude/settings.local.json | 4 +-
app/page.tsx | 4 +-
components/dashboard/payments-table.tsx | 34 ++--
components/dashboard/revenue-chart.tsx | 17 +-
components/dashboard/sales-chart.tsx | 17 +-
.../dashboard/unclassified-payments-table.tsx | 78 +++++++++
lib/chart-config.ts | 18 +-
lib/mock-data.ts | 159 ++++++++++++------
types/dashboard.ts | 11 +-
9 files changed, 259 insertions(+), 83 deletions(-)
create mode 100644 components/dashboard/unclassified-payments-table.tsx
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index cb52a19..692ac60 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,9 @@
"permissions": {
"allow": [
"Bash(cat:*)",
- "Bash(tree:*)"
+ "Bash(tree:*)",
+ "Bash(pnpm run build:*)",
+ "Bash(pnpm run dev:*)"
]
}
}
diff --git a/app/page.tsx b/app/page.tsx
index 84684f5..f34a6b6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,12 +6,14 @@ import { MetricCard } from "@/components/dashboard/metric-card"
import { RevenueChart } from "@/components/dashboard/revenue-chart"
import { SalesChart } from "@/components/dashboard/sales-chart"
import { PaymentsTable } from "@/components/dashboard/payments-table"
+import { UnclassifiedPaymentsTable } from "@/components/dashboard/unclassified-payments-table"
import { TeamTable } from "@/components/dashboard/team-table"
import { getDashboardData } from "@/lib/mock-data"
export default function Home() {
const data = getDashboardData()
+ //
return (
<>
@@ -40,7 +42,7 @@ export default function Home() {
-
+
diff --git a/components/dashboard/payments-table.tsx b/components/dashboard/payments-table.tsx
index b76323f..b40ccd4 100644
--- a/components/dashboard/payments-table.tsx
+++ b/components/dashboard/payments-table.tsx
@@ -30,14 +30,22 @@ interface PaymentsTableProps {
}
export function PaymentsTable({ payments }: PaymentsTableProps) {
- const getStatusColor = (status: Payment["status"]) => {
- switch (status) {
- case "success":
- return "bg-green-500/10 text-green-500 hover:bg-green-500/20"
- case "processing":
- return "bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20"
- case "failed":
- return "bg-red-500/10 text-red-500 hover:bg-red-500/20"
+ const getCategoryColor = (category: Payment["category"]) => {
+ switch (category) {
+ case "groceries":
+ return "bg-green-500/15 text-green-500 hover:bg-green-500/20"
+ case "utilities":
+ return "bg-blue-500/15 text-blue-500 hover:bg-blue-500/20"
+ case "transport":
+ return "bg-purple-500/15 text-purple-500 hover:bg-purple-500/20"
+ case "entertainment":
+ return "bg-pink-500/15 text-pink-500 hover:bg-pink-500/20"
+ case "shopping":
+ return "bg-orange-500/15 text-orange-500 hover:bg-orange-500/20"
+ case "insurance":
+ return "bg-red-500/15 text-red-500 hover:bg-red-500/20"
+ case "housing":
+ return "bg-yellow-500/15 text-yellow-500 hover:bg-yellow-500/20"
default:
return ""
}
@@ -54,8 +62,8 @@ export function PaymentsTable({ payments }: PaymentsTableProps) {
- Status
- Email
+ Category
+ Description
Amount
Actions
@@ -64,11 +72,11 @@ export function PaymentsTable({ payments }: PaymentsTableProps) {
{payments.map((payment) => (
-
- {payment.status}
+
+ {payment.category}
- {payment.email}
+ {payment.description}
${payment.amount.toFixed(2)}
diff --git a/components/dashboard/revenue-chart.tsx b/components/dashboard/revenue-chart.tsx
index cf4a314..99e6991 100644
--- a/components/dashboard/revenue-chart.tsx
+++ b/components/dashboard/revenue-chart.tsx
@@ -1,7 +1,9 @@
"use client"
+import { useTheme } from "next-themes"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LineChart } from "@/components/charts/line-chart"
+import { getChartColors } from "@/lib/chart-config"
import type { ChartDataPoint } from "@/types/dashboard"
interface RevenueChartProps {
@@ -9,32 +11,35 @@ interface RevenueChartProps {
}
export function RevenueChart({ data }: RevenueChartProps) {
+ const { theme } = useTheme()
+ const colors = getChartColors(theme)
+
const chartData = {
labels: data.map((d) => d.label),
datasets: [
{
label: "Revenue",
data: data.map((d) => d.value),
- borderColor: "rgb(244, 114, 182)",
- backgroundColor: "rgba(244, 114, 182, 0.2)",
+ borderColor: colors.blue,
+ backgroundColor: `${colors.blue.replace('rgb', 'rgba').replace(')', ', 0.2)')}`,
},
{
label: "Subscriptions",
data: data.map((d) => d.secondaryValue || 0),
- borderColor: "rgb(94, 234, 212)",
- backgroundColor: "rgba(94, 234, 212, 0.2)",
+ borderColor: colors.orange,
+ backgroundColor: `${colors.orange.replace('rgb', 'rgba').replace(')', ', 0.2)')}`,
},
],
}
return (
-
+
Revenue Overview
Showing total revenue for the last 6 months
-
+
)
diff --git a/components/dashboard/sales-chart.tsx b/components/dashboard/sales-chart.tsx
index c4de32e..affbf8e 100644
--- a/components/dashboard/sales-chart.tsx
+++ b/components/dashboard/sales-chart.tsx
@@ -1,7 +1,9 @@
"use client"
+import { useTheme } from "next-themes"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { BarChart } from "@/components/charts/bar-chart"
+import { getChartColors } from "@/lib/chart-config"
import type { ChartDataPoint } from "@/types/dashboard"
interface SalesChartProps {
@@ -9,6 +11,9 @@ interface SalesChartProps {
}
export function SalesChart({ data }: SalesChartProps) {
+ const { theme } = useTheme()
+ const colors = getChartColors(theme)
+
// Calculate total and change percentage
const total = data.reduce((sum, d) => sum + d.value, 0)
const lastMonthValue = data[data.length - 2]?.value || 0
@@ -17,16 +22,16 @@ export function SalesChart({ data }: SalesChartProps) {
? (((currentMonthValue - lastMonthValue) / lastMonthValue) * 100).toFixed(1)
: "0.0"
- // Alternate colors for bars
+ // Alternate colors for bars using centralized palette
const backgroundColors = data.map((_, index) =>
- index % 2 === 0 ? "rgb(251, 113, 133)" : "rgb(94, 234, 212)"
+ index % 2 === 0 ? colors.darkBlue : colors.orange
)
const chartData = {
labels: data.map((d) => d.label),
datasets: [
{
- label: "Sales",
+ label: "Expenditure",
data: data.map((d) => d.value),
backgroundColor: backgroundColors,
},
@@ -34,13 +39,13 @@ export function SalesChart({ data }: SalesChartProps) {
}
return (
-
+
- Subscriptions
+ Expenditure
+{changePercent}% from last month
-
+
)
diff --git a/components/dashboard/unclassified-payments-table.tsx b/components/dashboard/unclassified-payments-table.tsx
new file mode 100644
index 0000000..2645f81
--- /dev/null
+++ b/components/dashboard/unclassified-payments-table.tsx
@@ -0,0 +1,78 @@
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { MoreHorizontal } from "lucide-react"
+import type { Transaction } from "@/types/dashboard"
+
+interface TransactionsTableProps {
+ transactions: Transaction[]
+}
+
+export function UnclassifiedPaymentsTable({ transactions }: TransactionsTableProps) {
+ return (
+
+
+ Unclassified Transactions
+ You have {transactions.length} transactions that need to be labeled.
+
+
+
+
+
+
+ Description
+ Amount
+ Actions
+
+
+
+ {transactions.map((transaction) => (
+
+ {transaction.description}
+
+ ${transaction.amount.toFixed(2)}
+
+
+
+
+
+
+
+ Actions
+ View details
+ Categorize
+
+
+
+
+ ))}
+
+
+