Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:11 UTC
23fc7ee9ee988db3b2bd67b12f682834e6c89cc4
1 file changed
+105
-79
src/pages/CFOOverview.tsx
+105
-79
@@ -1,8 +1,8 @@
1
import { Button } from "@/components/ui/button";
2
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
3
-import { ArrowLeft, TrendingUp, TrendingDown, DollarSign, Users, CreditCard, AlertCircle, ArrowUpRight, ArrowDownRight } from "lucide-react";
3
+import { ArrowLeft, TrendingUp, TrendingDown, DollarSign, Users, CreditCard, AlertCircle, ArrowUpRight } from "lucide-react";
4
import { Link } from "react-router-dom";
5
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell } from "recharts";
5
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
6
7
const monthlySpendData = [
8
{ month: "Jan", spend: 125000, budget: 150000 },
@@ -14,11 +14,11 @@ const monthlySpendData = [
14
];
15
16
const departmentSpend = [
17
- { name: "Engineering", spend: 85000, color: "hsl(93, 72%, 67%)" },
18
- { name: "Marketing", spend: 45000, color: "hsl(220, 26%, 14%)" },
19
- { name: "Sales", spend: 38000, color: "hsl(220, 20%, 40%)" },
20
- { name: "Operations", spend: 29000, color: "hsl(93, 60%, 55%)" },
21
- { name: "HR", spend: 18000, color: "hsl(220, 13%, 65%)" },
17
+ { name: "Engineering", spend: 85000, color: "#9fe870" },
18
+ { name: "Marketing", spend: 45000, color: "#163300" },
19
+ { name: "Sales", spend: 38000, color: "#37d505" },
20
+ { name: "Operations", spend: 29000, color: "#0a2008" },
21
+ { name: "HR", spend: 18000, color: "#6bd147" },
22
];
23
24
const recentTransactions = [
@@ -35,23 +35,25 @@ const CFOOverview = () => {
35
const budgetUsedPercent = (totalSpend / budgetTotal) * 100;
36
37
return (
38
- <div className="min-h-screen bg-muted/30">
38
+ <div className="min-h-screen bg-secondary">
39
{/* Header */}
40
- <header className="bg-card border-b border-border sticky top-0 z-50">
40
+ <header className="bg-secondary border-b border-secondary-foreground/10 sticky top-0 z-50">
41
<div className="container flex items-center justify-between h-16">
42
<div className="flex items-center gap-4">
43
<Link to="/">
44
- <Button variant="ghost" size="sm" className="gap-2">
44
+ <Button variant="ghost" size="sm" className="gap-2 text-secondary-foreground hover:bg-secondary-foreground/10">
45
<ArrowLeft className="w-4 h-4" />
46
Back
47
</Button>
48
</Link>
49
- <div className="h-6 w-px bg-border" />
50
- <h1 className="text-xl font-semibold text-foreground">CFO Dashboard</h1>
49
+ <div className="h-6 w-px bg-secondary-foreground/20" />
50
+ <h1 className="text-xl font-semibold text-secondary-foreground">CFO Dashboard</h1>
51
</div>
52
<div className="flex items-center gap-3">
53
- <Button variant="outline" size="sm">Export Report</Button>
54
- <Button variant="default" size="sm" className="bg-primary text-primary-foreground">
53
+ <Button variant="outline" size="sm" className="border-secondary-foreground/20 text-secondary-foreground hover:bg-secondary-foreground/10">
54
+ Export Report
55
+ </Button>
56
+ <Button size="sm" className="bg-primary text-primary-foreground hover:bg-lime-dark">
57
Add Expense
58
</Button>
59
</div>
@@ -61,60 +63,74 @@ const CFOOverview = () => {
63
<main className="container py-8">
64
{/* Key Metrics */}
65
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
64
- <Card className="animate-fade-up">
66
+ <Card className="bg-secondary border-secondary-foreground/10 animate-fade-up">
67
<CardHeader className="flex flex-row items-center justify-between pb-2">
66
- <CardTitle className="text-sm font-medium text-muted-foreground">Total Spend (Nov)</CardTitle>
67
- <DollarSign className="w-4 h-4 text-muted-foreground" />
68
+ <CardTitle className="text-sm font-medium text-secondary-foreground/70">Total Spend (Nov)</CardTitle>
69
+ <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
70
+ <DollarSign className="w-4 h-4 text-primary" />
71
+ </div>
72
</CardHeader>
73
<CardContent>
70
- <div className="text-2xl font-bold text-foreground">${totalSpend.toLocaleString()}</div>
71
- <div className="flex items-center gap-1 mt-1">
72
- <TrendingUp className="w-3 h-3 text-destructive" />
73
- <span className="text-xs text-destructive">+12.5% from last month</span>
74
+ <div className="text-3xl font-bold text-secondary-foreground">${totalSpend.toLocaleString()}</div>
75
+ <div className="flex items-center gap-1 mt-2">
76
+ <div className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-500/10">
77
+ <TrendingUp className="w-3 h-3 text-red-400" />
78
+ <span className="text-xs text-red-400">+12.5%</span>
79
+ </div>
80
+ <span className="text-xs text-secondary-foreground/50">from last month</span>
81
</div>
82
</CardContent>
83
</Card>
84
78
- <Card className="animate-fade-up animation-delay-100">
85
+ <Card className="bg-secondary border-secondary-foreground/10 animate-fade-up animation-delay-100">
86
<CardHeader className="flex flex-row items-center justify-between pb-2">
80
- <CardTitle className="text-sm font-medium text-muted-foreground">Budget Remaining</CardTitle>
81
- <CreditCard className="w-4 h-4 text-muted-foreground" />
87
+ <CardTitle className="text-sm font-medium text-secondary-foreground/70">Budget Remaining</CardTitle>
88
+ <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
89
+ <CreditCard className="w-4 h-4 text-primary" />
90
+ </div>
91
</CardHeader>
92
<CardContent>
84
- <div className="text-2xl font-bold text-foreground">${(budgetTotal - totalSpend).toLocaleString()}</div>
85
- <div className="w-full bg-muted rounded-full h-2 mt-2">
93
+ <div className="text-3xl font-bold text-secondary-foreground">${(budgetTotal - totalSpend).toLocaleString()}</div>
94
+ <div className="w-full bg-secondary-foreground/10 rounded-full h-2 mt-3">
95
<div
96
className="bg-primary h-2 rounded-full transition-all"
97
style={{ width: `${budgetUsedPercent}%` }}
98
/>
99
</div>
91
- <span className="text-xs text-muted-foreground">{budgetUsedPercent.toFixed(0)}% of budget used</span>
100
+ <span className="text-xs text-secondary-foreground/50 mt-1 block">{budgetUsedPercent.toFixed(0)}% of budget used</span>
101
</CardContent>
102
</Card>
103
95
- <Card className="animate-fade-up animation-delay-200">
104
+ <Card className="bg-secondary border-secondary-foreground/10 animate-fade-up animation-delay-200">
105
<CardHeader className="flex flex-row items-center justify-between pb-2">
97
- <CardTitle className="text-sm font-medium text-muted-foreground">Pending Approvals</CardTitle>
98
- <AlertCircle className="w-4 h-4 text-muted-foreground" />
106
+ <CardTitle className="text-sm font-medium text-secondary-foreground/70">Pending Approvals</CardTitle>
107
+ <div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center">
108
+ <AlertCircle className="w-4 h-4 text-amber-400" />
109
+ </div>
110
</CardHeader>
111
<CardContent>
101
- <div className="text-2xl font-bold text-foreground">8</div>
102
- <div className="flex items-center gap-1 mt-1">
103
- <span className="text-xs text-muted-foreground">$24,500 awaiting review</span>
112
+ <div className="text-3xl font-bold text-secondary-foreground">8</div>
113
+ <div className="flex items-center gap-1 mt-2">
114
+ <span className="text-xs text-secondary-foreground/50">$24,500 awaiting review</span>
115
</div>
116
</CardContent>
117
</Card>
118
108
- <Card className="animate-fade-up animation-delay-300">
119
+ <Card className="bg-secondary border-secondary-foreground/10 animate-fade-up animation-delay-300">
120
<CardHeader className="flex flex-row items-center justify-between pb-2">
110
- <CardTitle className="text-sm font-medium text-muted-foreground">Active Cardholders</CardTitle>
111
- <Users className="w-4 h-4 text-muted-foreground" />
121
+ <CardTitle className="text-sm font-medium text-secondary-foreground/70">Active Cardholders</CardTitle>
122
+ <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
123
+ <Users className="w-4 h-4 text-primary" />
124
+ </div>
125
</CardHeader>
126
<CardContent>
114
- <div className="text-2xl font-bold text-foreground">47</div>
115
- <div className="flex items-center gap-1 mt-1">
116
- <TrendingUp className="w-3 h-3 text-primary" />
117
- <span className="text-xs text-primary">+3 this month</span>
127
+ <div className="text-3xl font-bold text-secondary-foreground">47</div>
128
+ <div className="flex items-center gap-1 mt-2">
129
+ <div className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10">
130
+ <TrendingUp className="w-3 h-3 text-primary" />
131
+ <span className="text-xs text-primary">+3</span>
132
+ </div>
133
+ <span className="text-xs text-secondary-foreground/50">this month</span>
134
</div>
135
</CardContent>
136
</Card>
@@ -123,10 +139,10 @@ const CFOOverview = () => {
139
{/* Charts Row */}
140
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
141
{/* Monthly Spend Trend */}
126
- <Card className="lg:col-span-2 animate-fade-up animation-delay-200">
142
+ <Card className="lg:col-span-2 bg-secondary border-secondary-foreground/10 animate-fade-up animation-delay-200">
143
<CardHeader>
128
- <CardTitle className="text-lg">Monthly Spend vs Budget</CardTitle>
129
- <CardDescription>Track your spending against monthly budgets</CardDescription>
144
+ <CardTitle className="text-lg text-secondary-foreground">Monthly Spend vs Budget</CardTitle>
145
+ <CardDescription className="text-secondary-foreground/50">Track your spending against monthly budgets</CardDescription>
146
</CardHeader>
147
<CardContent>
148
<div className="h-[300px]">
@@ -134,33 +150,35 @@ const CFOOverview = () => {
150
<AreaChart data={monthlySpendData}>
151
<defs>
152
<linearGradient id="spendGradient" x1="0" y1="0" x2="0" y2="1">
137
- <stop offset="5%" stopColor="hsl(93, 72%, 67%)" stopOpacity={0.3} />
138
- <stop offset="95%" stopColor="hsl(93, 72%, 67%)" stopOpacity={0} />
153
+ <stop offset="5%" stopColor="#9fe870" stopOpacity={0.4} />
154
+ <stop offset="95%" stopColor="#9fe870" stopOpacity={0} />
155
</linearGradient>
156
</defs>
141
- <CartesianGrid strokeDasharray="3 3" stroke="hsl(220, 13%, 91%)" />
142
- <XAxis dataKey="month" stroke="hsl(220, 13%, 46%)" fontSize={12} />
143
- <YAxis stroke="hsl(220, 13%, 46%)" fontSize={12} tickFormatter={(value) => `$${value / 1000}k`} />
157
+ <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
158
+ <XAxis dataKey="month" stroke="rgba(255,255,255,0.5)" fontSize={12} />
159
+ <YAxis stroke="rgba(255,255,255,0.5)" fontSize={12} tickFormatter={(value) => `$${value / 1000}k`} />
160
<Tooltip
161
contentStyle={{
146
- backgroundColor: "hsl(0, 0%, 100%)",
147
- border: "1px solid hsl(220, 13%, 91%)",
148
- borderRadius: "8px"
162
+ backgroundColor: "#163300",
163
+ border: "1px solid rgba(159, 232, 112, 0.3)",
164
+ borderRadius: "8px",
165
+ color: "#fff"
166
}}
167
formatter={(value: number) => [`$${value.toLocaleString()}`, '']}
168
+ labelStyle={{ color: "#9fe870" }}
169
/>
170
<Area
171
type="monotone"
172
dataKey="spend"
155
- stroke="hsl(93, 72%, 67%)"
156
- strokeWidth={2}
173
+ stroke="#9fe870"
174
+ strokeWidth={3}
175
fill="url(#spendGradient)"
176
name="Spend"
177
/>
178
<Area
179
type="monotone"
180
dataKey="budget"
163
- stroke="hsl(220, 26%, 14%)"
181
+ stroke="rgba(255,255,255,0.4)"
182
strokeWidth={2}
183
strokeDasharray="5 5"
184
fill="transparent"
@@ -173,10 +191,10 @@ const CFOOverview = () => {
191
</Card>
192
193
{/* Department Breakdown */}
176
- <Card className="animate-fade-up animation-delay-300">
194
+ <Card className="bg-secondary border-secondary-foreground/10 animate-fade-up animation-delay-300">
195
<CardHeader>
178
- <CardTitle className="text-lg">Spend by Department</CardTitle>
179
- <CardDescription>November breakdown</CardDescription>
196
+ <CardTitle className="text-lg text-secondary-foreground">Spend by Department</CardTitle>
197
+ <CardDescription className="text-secondary-foreground/50">November breakdown</CardDescription>
198
</CardHeader>
199
<CardContent>
200
<div className="h-[180px] mb-4">
@@ -192,21 +210,29 @@ const CFOOverview = () => {
210
dataKey="spend"
211
>
212
{departmentSpend.map((entry, index) => (
195
- <Cell key={`cell-${index}`} fill={entry.color} />
213
+ <Cell key={`cell-${index}`} fill={entry.color} stroke="transparent" />
214
))}
215
</Pie>
198
- <Tooltip formatter={(value: number) => `$${value.toLocaleString()}`} />
216
+ <Tooltip
217
+ formatter={(value: number) => `$${value.toLocaleString()}`}
218
+ contentStyle={{
219
+ backgroundColor: "#163300",
220
+ border: "1px solid rgba(159, 232, 112, 0.3)",
221
+ borderRadius: "8px",
222
+ color: "#fff"
223
+ }}
224
+ />
225
</PieChart>
226
</ResponsiveContainer>
227
</div>
202
- <div className="space-y-2">
228
+ <div className="space-y-3">
229
{departmentSpend.map((dept) => (
230
<div key={dept.name} className="flex items-center justify-between text-sm">
231
<div className="flex items-center gap-2">
232
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: dept.color }} />
207
- <span className="text-muted-foreground">{dept.name}</span>
233
+ <span className="text-secondary-foreground/70">{dept.name}</span>
234
</div>
209
- <span className="font-medium text-foreground">${dept.spend.toLocaleString()}</span>
235
+ <span className="font-medium text-secondary-foreground">${dept.spend.toLocaleString()}</span>
236
</div>
237
))}
238
</div>
@@ -215,13 +241,13 @@ const CFOOverview = () => {
241
</div>
242
243
{/* Recent Transactions */}
218
- <Card className="animate-fade-up animation-delay-400">
244
+ <Card className="bg-secondary border-secondary-foreground/10 animate-fade-up animation-delay-400">
245
<CardHeader className="flex flex-row items-center justify-between">
246
<div>
221
- <CardTitle className="text-lg">Recent Transactions</CardTitle>
222
- <CardDescription>Latest company expenses</CardDescription>
247
+ <CardTitle className="text-lg text-secondary-foreground">Recent Transactions</CardTitle>
248
+ <CardDescription className="text-secondary-foreground/50">Latest company expenses</CardDescription>
249
</div>
224
- <Button variant="ghost" size="sm" className="text-primary">
250
+ <Button variant="ghost" size="sm" className="text-primary hover:bg-primary/10">
251
View All
252
<ArrowUpRight className="w-4 h-4 ml-1" />
253
</Button>
@@ -230,37 +256,37 @@ const CFOOverview = () => {
256
<div className="overflow-x-auto">
257
<table className="w-full">
258
<thead>
233
- <tr className="border-b border-border">
234
- <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Vendor</th>
235
- <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Category</th>
236
- <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Date</th>
237
- <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Status</th>
238
- <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Amount</th>
259
+ <tr className="border-b border-secondary-foreground/10">
260
+ <th className="text-left py-3 px-4 text-sm font-medium text-secondary-foreground/50">Vendor</th>
261
+ <th className="text-left py-3 px-4 text-sm font-medium text-secondary-foreground/50">Category</th>
262
+ <th className="text-left py-3 px-4 text-sm font-medium text-secondary-foreground/50">Date</th>
263
+ <th className="text-left py-3 px-4 text-sm font-medium text-secondary-foreground/50">Status</th>
264
+ <th className="text-right py-3 px-4 text-sm font-medium text-secondary-foreground/50">Amount</th>
265
</tr>
266
</thead>
267
<tbody>
268
{recentTransactions.map((tx) => (
243
- <tr key={tx.id} className="border-b border-border last:border-0 hover:bg-muted/50 transition-colors">
269
+ <tr key={tx.id} className="border-b border-secondary-foreground/5 last:border-0 hover:bg-secondary-foreground/5 transition-colors">
270
<td className="py-4 px-4">
245
- <span className="font-medium text-foreground">{tx.vendor}</span>
271
+ <span className="font-medium text-secondary-foreground">{tx.vendor}</span>
272
</td>
273
<td className="py-4 px-4">
248
- <span className="text-sm text-muted-foreground">{tx.category}</span>
274
+ <span className="text-sm text-secondary-foreground/60">{tx.category}</span>
275
</td>
276
<td className="py-4 px-4">
251
- <span className="text-sm text-muted-foreground">{tx.date}</span>
277
+ <span className="text-sm text-secondary-foreground/60">{tx.date}</span>
278
</td>
279
<td className="py-4 px-4">
280
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
281
tx.status === "completed"
256
- ? "bg-primary/10 text-primary"
257
- : "bg-secondary/10 text-secondary"
282
+ ? "bg-primary/20 text-primary"
283
+ : "bg-amber-500/20 text-amber-400"
284
}`}>
285
{tx.status}
286
</span>
287
</td>
288
<td className="py-4 px-4 text-right">
263
- <span className="font-semibold text-foreground">${tx.amount.toLocaleString()}</span>
289
+ <span className="font-semibold text-secondary-foreground">${tx.amount.toLocaleString()}</span>
290
</td>
291
</tr>
292
))}