Graph styling

src/app/dashboard/_components/invoice-status-chart.tsx

@@ -45,10 +45,11 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
 
   // Use theme-aware colors
   const COLORS = {
-    draft: "hsl(var(--muted-foreground))",
-    sent: "oklch(var(--chart-1))",
-    paid: "oklch(var(--chart-2))",
-    overdue: "oklch(var(--chart-3))",
+    draft: "hsl(0, 0%, 60%)", // grey
+    sent: "hsl(214, 100%, 50%)", // blue
+    pending: "hsl(45, 100%, 50%)", // yellow
+    paid: "hsl(142, 76%, 36%)", // green
+    overdue: "hsl(0, 84%, 60%)", // red
   };
 
   const formatCurrency = (value: number) => {
@@ -110,7 +111,7 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
               cy="50%"
               innerRadius={40}
               outerRadius={80}
-              paddingAngle={2}
+              stroke="none"
               dataKey="count"
             >
               {chartData.map((entry, index) => (

src/app/dashboard/_components/monthly-metrics-chart.tsx

@@ -40,6 +40,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
         paidInvoices: 0,
         pendingInvoices: 0,
         overdueInvoices: 0,
+        draftInvoices: 0,
       };
 
       acc[monthKey].totalInvoices += 1;
@@ -54,6 +55,9 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
         case "overdue":
           acc[monthKey].overdueInvoices += 1;
           break;
+        case "draft":
+          acc[monthKey].draftInvoices += 1;
+          break;
       }
 
       return acc;
@@ -66,6 +70,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
         paidInvoices: number;
         pendingInvoices: number;
         overdueInvoices: number;
+        draftInvoices: number;
       }
     >,
   );
@@ -93,6 +98,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
         paidInvoices: number;
         pendingInvoices: number;
         overdueInvoices: number;
+        draftInvoices: number;
         totalInvoices: number;
       };
     }>;
@@ -104,15 +110,16 @@ 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: "oklch(var(--chart-2))" }}>
-              Paid: {data.paidInvoices}
-            </p>
-            <p style={{ color: "oklch(var(--chart-1))" }}>
+            <p style={{ color: "var(--chart-2)" }}>Paid: {data.paidInvoices}</p>
+            <p style={{ color: "var(--chart-1)" }}>
               Pending: {data.pendingInvoices}
             </p>
-            <p style={{ color: "oklch(var(--chart-3))" }}>
+            <p style={{ color: "var(--chart-3)" }}>
               Overdue: {data.overdueInvoices}
             </p>
+            <p style={{ color: "hsl(0, 0%, 60%)" }}>
+              Draft: {data.draftInvoices}
+            </p>
             <p className="text-muted-foreground border-t pt-1">
               Total: {data.totalInvoices}
             </p>
@@ -147,30 +154,36 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
               dataKey="monthLabel"
               axisLine={false}
               tickLine={false}
-              tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+              tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
             />
             <YAxis
               axisLine={false}
               tickLine={false}
-              tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+              tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
             />
             <Tooltip content={<CustomTooltip />} />
+            <Bar
+              dataKey="draftInvoices"
+              stackId="a"
+              fill="hsl(0, 0%, 60%)"
+              radius={[0, 0, 0, 0]}
+            />
             <Bar
               dataKey="paidInvoices"
               stackId="a"
-              fill="oklch(var(--chart-2))"
+              fill="var(--chart-2)"
               radius={[0, 0, 0, 0]}
             />
             <Bar
               dataKey="pendingInvoices"
               stackId="a"
-              fill="oklch(var(--chart-1))"
+              fill="var(--chart-1)"
               radius={[0, 0, 0, 0]}
             />
             <Bar
               dataKey="overdueInvoices"
               stackId="a"
-              fill="oklch(var(--chart-3))"
+              fill="var(--chart-3)"
               radius={[2, 2, 0, 0]}
             />
           </BarChart>
@@ -182,21 +195,28 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
         <div className="flex items-center space-x-2">
           <div
             className="h-3 w-3 rounded-full"
-            style={{ backgroundColor: "oklch(var(--chart-2))" }}
+            style={{ backgroundColor: "hsl(0, 0%, 60%)" }}
+          />
+          <span className="text-xs">Draft</span>
+        </div>
+        <div className="flex items-center space-x-2">
+          <div
+            className="h-3 w-3 rounded-full"
+            style={{ backgroundColor: "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: "oklch(var(--chart-1))" }}
+            style={{ backgroundColor: "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: "oklch(var(--chart-3))" }}
+            style={{ backgroundColor: "var(--chart-3)" }}
           />
           <span className="text-xs">Overdue</span>
         </div>

src/app/dashboard/_components/revenue-chart.tsx

@@ -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: "oklch(var(--chart-1))" }}>
+          <p style={{ color: "hsl(0, 0%, 60%)" }}>
             Revenue: {formatCurrency(data.revenue)}
           </p>
           <p className="text-muted-foreground text-sm">
@@ -120,14 +120,10 @@ export function RevenueChart({ invoices }: RevenueChartProps) {
         <AreaChart data={chartData}>
           <defs>
             <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop
-                offset="5%"
-                stopColor="oklch(var(--chart-1))"
-                stopOpacity={0.4}
-              />
+              <stop offset="5%" stopColor="hsl(0, 0%, 60%)" stopOpacity={0.4} />
               <stop
                 offset="95%"
-                stopColor="oklch(var(--chart-1))"
+                stopColor="hsl(0, 0%, 60%)"
                 stopOpacity={0.05}
               />
             </linearGradient>
@@ -136,19 +132,19 @@ export function RevenueChart({ invoices }: RevenueChartProps) {
             dataKey="monthLabel"
             axisLine={false}
             tickLine={false}
-            tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+            tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
           />
           <YAxis
             axisLine={false}
             tickLine={false}
-            tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+            tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
             tickFormatter={formatCurrency}
           />
           <Tooltip content={<CustomTooltip />} />
           <Area
             type="monotone"
             dataKey="revenue"
-            stroke="oklch(var(--chart-1))"
+            stroke="hsl(0, 0%, 60%)"
             strokeWidth={2}
             fill="url(#revenueGradient)"
           />