ui polish

app/globals.css

@@ -6,8 +6,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-inter);
-  --font-mono: var(--font-geist-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

components/charts/bar-chart.tsx

@@ -11,14 +11,15 @@ interface BarChartProps {
     datasets: {
       label: string
       data: number[]
-      backgroundColor?: string
+      backgroundColor?: string | string[]
     }[]
   }
   options?: ChartOptions<"bar">
   height?: number
+  showGrid?: boolean
 }
 
-export function BarChart({ data, options, height = 300 }: BarChartProps) {
+export function BarChart({ data, options, height = 300, showGrid = true }: BarChartProps) {
   const { theme } = useTheme()
   const colors = getChartColors(theme)
 
@@ -27,6 +28,8 @@ export function BarChart({ data, options, height = 300 }: BarChartProps) {
     datasets: data.datasets.map((dataset) => ({
       ...dataset,
       backgroundColor: dataset.backgroundColor || colors.primary,
+      borderRadius: 6,
+      borderSkipped: false,
     })),
   }
 
@@ -35,16 +38,19 @@ export function BarChart({ data, options, height = 300 }: BarChartProps) {
     ...options,
     scales: {
       y: {
+        display: showGrid,
         grid: {
+          display: showGrid,
           color: colors.grid,
         },
         ticks: {
+          display: showGrid,
           color: colors.text,
         },
       },
       x: {
         grid: {
-          color: colors.grid,
+          display: false,
         },
         ticks: {
           color: colors.text,
@@ -55,10 +61,7 @@ export function BarChart({ data, options, height = 300 }: BarChartProps) {
       ...defaultChartOptions.plugins,
       ...options?.plugins,
       legend: {
-        ...defaultChartOptions.plugins?.legend,
+        display: false,
-        labels: {
-          color: colors.text,
-        },
       },
     },
   }

components/charts/line-chart.tsx

@@ -17,9 +17,11 @@ interface LineChartProps {
   }
   options?: ChartOptions<"line">
   height?: number
+  showGrid?: boolean
+  showPoints?: boolean
 }
 
-export function LineChart({ data, options, height = 300 }: LineChartProps) {
+export function LineChart({ data, options, height = 300, showGrid = true, showPoints = true }: LineChartProps) {
   const { theme } = useTheme()
   const colors = getChartColors(theme)
 
@@ -31,6 +33,9 @@ export function LineChart({ data, options, height = 300 }: LineChartProps) {
       backgroundColor: dataset.backgroundColor || (index === 0 ? `${colors.primary}20` : `${colors.secondary}20`),
       tension: 0.4,
       fill: true,
+      borderWidth: 2,
+      pointRadius: showPoints ? 3 : 0,
+      pointHoverRadius: showPoints ? 5 : 0,
     })),
   }
 
@@ -39,16 +44,19 @@ export function LineChart({ data, options, height = 300 }: LineChartProps) {
     ...options,
     scales: {
       y: {
+        display: showGrid,
         grid: {
+          display: showGrid,
           color: colors.grid,
         },
         ticks: {
+          display: showGrid,
           color: colors.text,
         },
       },
       x: {
         grid: {
-          color: colors.grid,
+          display: false,
         },
         ticks: {
           color: colors.text,
@@ -59,10 +67,7 @@ export function LineChart({ data, options, height = 300 }: LineChartProps) {
       ...defaultChartOptions.plugins,
       ...options?.plugins,
       legend: {
-        ...defaultChartOptions.plugins?.legend,
+        display: false,
-        labels: {
-          color: colors.text,
-        },
       },
     },
   }

components/dashboard/metric-card.tsx

@@ -1,17 +1,28 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { TrendingUp, TrendingDown } from "lucide-react"
+import { TrendingUp, TrendingDown, Users, ShoppingCart, DollarSign, CreditCard, LucideIcon } from "lucide-react"
 import type { MetricCard as MetricCardType } from "@/types/dashboard"
 
-export function MetricCard({ title, value, change, changeLabel }: MetricCardType) {
+const iconMap: Record<string, LucideIcon> = {
+  Users,
+  ShoppingCart,
+  DollarSign,
+  CreditCard,
+}
+
+export function MetricCard({ title, value, change, changeLabel, icon }: MetricCardType) {
   const isPositive = change >= 0
+  const Icon = iconMap[icon]
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-0">
-        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <CardTitle className="text-sm font-medium flex items-center gap-2">
+          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+          {title}
+        </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{value}</div>
+        <div className="text-3xl font-bold pb-1">{value}</div>
         <div className="flex items-center text-xs text-muted-foreground mt-1">
           {isPositive ? (
             <TrendingUp className="mr-1 h-4 w-4 text-green-500" />

components/dashboard/revenue-chart.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { LineChart } from "@/components/charts/line-chart"
 import type { ChartDataPoint } from "@/types/dashboard"
 
@@ -15,21 +15,26 @@ export function RevenueChart({ data }: RevenueChartProps) {
       {
         label: "Revenue",
         data: data.map((d) => d.value),
+        borderColor: "rgb(244, 114, 182)",
+        backgroundColor: "rgba(244, 114, 182, 0.2)",
       },
       {
         label: "Subscriptions",
         data: data.map((d) => d.secondaryValue || 0),
+        borderColor: "rgb(94, 234, 212)",
+        backgroundColor: "rgba(94, 234, 212, 0.2)",
       },
     ],
   }
 
   return (
-    <Card>
+    <Card className="h-[300px] flex flex-col">
-      <CardHeader>
+      <CardHeader className="flex-shrink-0">
         <CardTitle>Revenue Overview</CardTitle>
+        <CardDescription>Showing total revenue for the last 6 months</CardDescription>
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex-1 min-h-0">
-        <LineChart data={chartData} height={350} />
+        <LineChart data={chartData} height={180} showGrid={false} showPoints={false} />
       </CardContent>
     </Card>
   )

components/dashboard/sales-chart.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { BarChart } from "@/components/charts/bar-chart"
 import type { ChartDataPoint } from "@/types/dashboard"
 
@@ -9,23 +9,38 @@ interface SalesChartProps {
 }
 
 export function SalesChart({ data }: SalesChartProps) {
+  // Calculate total and change percentage
+  const total = data.reduce((sum, d) => sum + d.value, 0)
+  const lastMonthValue = data[data.length - 2]?.value || 0
+  const currentMonthValue = data[data.length - 1]?.value || 0
+  const changePercent = lastMonthValue > 0
+    ? (((currentMonthValue - lastMonthValue) / lastMonthValue) * 100).toFixed(1)
+    : "0.0"
+
+  // Alternate colors for bars
+  const backgroundColors = data.map((_, index) =>
+    index % 2 === 0 ? "rgb(251, 113, 133)" : "rgb(94, 234, 212)"
+  )
+
   const chartData = {
     labels: data.map((d) => d.label),
     datasets: [
       {
         label: "Sales",
         data: data.map((d) => d.value),
+        backgroundColor: backgroundColors,
       },
     ],
   }
 
   return (
-    <Card>
+    <Card className="h-[300px] flex flex-col">
-      <CardHeader>
+      <CardHeader className="flex-shrink-0">
-        <CardTitle>Sales Activity</CardTitle>
+        <CardTitle>Subscriptions</CardTitle>
+        <CardDescription>+{changePercent}% from last month</CardDescription>
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex-1 min-h-0">
-        <BarChart data={chartData} height={350} />
+        <BarChart data={chartData} height={180} showGrid={false} />
       </CardContent>
     </Card>
   )

lib/mock-data.ts

@@ -9,6 +9,7 @@ export function getDashboardData(): DashboardData {
         value: "4,682",
         change: 15.54,
         changeLabel: "from last month",
+        icon: "Users",
       },
       {
         id: "2",
@@ -16,6 +17,7 @@ export function getDashboardData(): DashboardData {
         value: "1,226",
         change: 40.2,
         changeLabel: "from last month",
+        icon: "ShoppingCart",
       },
       {
         id: "3",
@@ -23,6 +25,7 @@ export function getDashboardData(): DashboardData {
         value: "$1,080",
         change: 10.8,
         changeLabel: "from last month",
+        icon: "DollarSign",
       },
       {
         id: "4",
@@ -30,6 +33,7 @@ export function getDashboardData(): DashboardData {
         value: "$15,231.89",
         change: 20.1,
         changeLabel: "from last month",
+        icon: "CreditCard",
       },
     ],
     revenueData: [

types/dashboard.ts

@@ -4,6 +4,7 @@ export interface MetricCard {
   value: string | number
   change: number
   changeLabel: string
+  icon: string
 }
 
 export interface Payment {