All files / app layout.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type {Metadata} from "next";
import {ReactQueryProvider} from "@/providers/react-query-provider";
import "./globals.css";
 
export const metadata: Metadata = {
    title: "SaaS Analytics Dashboard",
    description:
        "A production-style SaaS analytics dashboard with mock APIs, filtering, caching, loading states, and dark mode.",
};
 
// Set the persisted theme before React hydrates to avoid a light/dark flash.
const themeScript = `
(() => {
  try {
    const stored = localStorage.getItem("dashboard-theme");
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const shouldUseDark = stored ? stored === "dark" : prefersDark;
    const theme = shouldUseDark ? "dark" : "light";
    document.documentElement.classList.toggle("dark", shouldUseDark);
    document.documentElement.dataset.dashboardTheme = theme;
  } catch {
    document.documentElement.classList.remove("dark");
    document.documentElement.dataset.dashboardTheme = "light";
  }
})();
`;
 
export default function RootLayout({
                                       children,
                                   }: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en" suppressHydrationWarning>
        <body>
        <script dangerouslySetInnerHTML={{__html: themeScript}}/>
        <ReactQueryProvider>{children}</ReactQueryProvider>
        </body>
        </html>
    );
}