Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:12 UTC
9ab5b8a78e7eca66f86c6eb41b3ccd529dc5c6bc
4 files changed
+51
-13
src/App.tsx
+15
-12
@@ -3,6 +3,7 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
3
import { TooltipProvider } from "@/components/ui/tooltip";
4
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5
import { BrowserRouter, Routes, Route } from "react-router-dom";
6
+import { ThemeProvider } from "@/components/ThemeProvider";
7
import Index from "./pages/Index";
8
import CFOOverview from "./pages/CFOOverview";
9
import NotFound from "./pages/NotFound";
@@ -11,18 +12,20 @@ const queryClient = new QueryClient();
12
13
const App = () => (
14
<QueryClientProvider client={queryClient}>
14
- <TooltipProvider>
15
- <Toaster />
16
- <Sonner />
17
- <BrowserRouter>
18
- <Routes>
19
- <Route path="/" element={<Index />} />
20
- <Route path="/cfo-overview" element={<CFOOverview />} />
21
- {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
22
- <Route path="*" element={<NotFound />} />
23
- </Routes>
24
- </BrowserRouter>
25
- </TooltipProvider>
15
+ <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
16
+ <TooltipProvider>
17
+ <Toaster />
18
+ <Sonner />
19
+ <BrowserRouter>
20
+ <Routes>
21
+ <Route path="/" element={<Index />} />
22
+ <Route path="/cfo-overview" element={<CFOOverview />} />
23
+ {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
24
+ <Route path="*" element={<NotFound />} />
25
+ </Routes>
26
+ </BrowserRouter>
27
+ </TooltipProvider>
28
+ </ThemeProvider>
29
</QueryClientProvider>
30
);
31
src/components/ThemeProvider.tsx
new
+13
@@ -0,0 +1,13 @@
1
+import { ThemeProvider as NextThemesProvider } from "next-themes";
2
+import { type ReactNode } from "react";
3
+
4
+interface ThemeProviderProps {
5
+ children: ReactNode;
6
+ attribute?: "class" | "data-theme";
7
+ defaultTheme?: string;
8
+ enableSystem?: boolean;
9
+}
10
+
11
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
12
+ return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
13
+}
src/components/ThemeToggle.tsx
new
+20
@@ -0,0 +1,20 @@
1
+import { Moon, Sun } from "lucide-react";
2
+import { useTheme } from "next-themes";
3
+import { Button } from "@/components/ui/button";
4
+
5
+export function ThemeToggle() {
6
+ const { theme, setTheme } = useTheme();
7
+
8
+ return (
9
+ <Button
10
+ variant="ghost"
11
+ size="icon"
12
+ onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
13
+ className="relative w-9 h-9 rounded-full hover:bg-secondary-foreground/10"
14
+ >
15
+ <Sun className="h-5 w-5 rotate-0 scale-100 transition-all text-primary dark:-rotate-90 dark:scale-0" />
16
+ <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all text-primary dark:rotate-0 dark:scale-100" />
17
+ <span className="sr-only">Toggle theme</span>
18
+ </Button>
19
+ );
20
+}
src/pages/CFOOverview.tsx
+3
-1
@@ -1,7 +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 } from "lucide-react";
3
+import { ArrowLeft, TrendingUp, DollarSign, Users, CreditCard, AlertCircle, ArrowUpRight } from "lucide-react";
4
import { Link } from "react-router-dom";
5
+import { ThemeToggle } from "@/components/ThemeToggle";
6
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
7
8
const monthlySpendData = [
@@ -50,6 +51,7 @@ const CFOOverview = () => {
51
<h1 className="text-xl font-semibold text-secondary-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">
56
Export Report
57
</Button>