feat: Implement a new dashboard shell with animated background, refactor dashboard data fetching into a dedicated API route, and introduce new UI components.**

src/components/layout/sidebar-provider.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+
+interface SidebarContextType {
+    isCollapsed: boolean;
+    toggleCollapse: () => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+const SidebarContext = React.createContext<SidebarContextType | undefined>(
+    undefined,
+);
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+    const [isCollapsed, setIsCollapsed] = React.useState(false);
+
+    // Persist state if needed, for now just local state
+    React.useEffect(() => {
+        const saved = localStorage.getItem("sidebar-collapsed");
+        if (saved) {
+            setIsCollapsed(JSON.parse(saved));
+        }
+    }, []);
+
+    const toggleCollapse = React.useCallback(() => {
+        setIsCollapsed((prev) => {
+            const next = !prev;
+            localStorage.setItem("sidebar-collapsed", JSON.stringify(next));
+            return next;
+        });
+    }, []);
+
+    const expand = React.useCallback(() => {
+        setIsCollapsed(false);
+        localStorage.setItem("sidebar-collapsed", JSON.stringify(false));
+    }, []);
+
+    const collapse = React.useCallback(() => {
+        setIsCollapsed(true);
+        localStorage.setItem("sidebar-collapsed", JSON.stringify(true));
+    }, []);
+
+    return (
+        <SidebarContext.Provider
+            value={{ isCollapsed, toggleCollapse, expand, collapse }}
+        >
+            {children}
+        </SidebarContext.Provider>
+    );
+}
+
+export function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (context === undefined) {
+        throw new Error("useSidebar must be used within a SidebarProvider");
+    }
+    return context;
+}