Refactor: Global Theme System and Finance Modules Redesign

src/context/ThemeContext.tsx

@@ -0,0 +1,74 @@
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'default' | 'dubai' | 'minimal' | 'nature';
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [theme, setTheme] = useState<Theme>(() => {
+        if (typeof window !== 'undefined') {
+            const savedTheme = localStorage.getItem('app-theme');
+            return (savedTheme as Theme) || 'default';
+        }
+        return 'default';
+    });
+
+    useEffect(() => {
+        localStorage.setItem('app-theme', theme);
+        const root = window.document.documentElement;
+
+        // Remove old theme classes
+        root.classList.remove('theme-default', 'theme-dubai', 'theme-minimal', 'theme-nature');
+
+        // Add new theme class
+        root.classList.add(`theme-${theme}`);
+
+        // Check if we need to force dark mode for specific themes
+        if (theme === 'dubai') {
+            root.classList.add('dark');
+        } else {
+            root.classList.remove('dark');
+        }
+
+    }, [theme]);
+
+    // Background Image Map
+    const getBackgroundImage = () => {
+        switch (theme) {
+            case 'dubai': return "url('https://images.unsplash.com/photo-1512453979798-5ea9ba6a80f4?q=80&w=2000&auto=format&fit=crop')";
+            case 'minimal': return "url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2000&auto=format&fit=crop')";
+            case 'nature': return "url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=2000&auto=format&fit=crop')";
+            default: return 'none'; // Gradient handles default
+        }
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, setTheme }}>
+            {/* Background Layer managed here for global coverage */}
+            {theme !== 'default' && (
+                <div
+                    className="fixed inset-0 z-[-1] transition-all duration-700 ease-in-out bg-cover bg-center bg-no-repeat bg-fixed"
+                    style={{ backgroundImage: getBackgroundImage() }}
+                />
+            )}
+            {/* Overlay for contrast if needed */}
+            {theme === 'dubai' && <div className="fixed inset-0 z-[-1] bg-black/40 pointer-events-none" />}
+
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};