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