feat: add DR Capacity Planner, light/dark mode toggle, and PDF export

- Add zroc-planner UI page with VM selector, journal retention slider (1h-30d),
  WAN compression input, and live bandwidth/journal/mirror storage estimates
- Add CSV and PDF export for planning reports
- Add light/dark mode toggle in TopBar with localStorage persistence
- Wire theme via CSS custom properties for full Tailwind opacity support
- Add Planner route and sidebar entry

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Justin
2026-04-12 20:29:38 -04:00
parent 5a617fd550
commit b7b9f6191d
10 changed files with 592 additions and 10 deletions
+29
View File
@@ -0,0 +1,29 @@
// src/auth/ThemeContext.jsx
import { createContext, useContext, useState, useEffect } from 'react';
const ThemeContext = createContext(null);
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState(() =>
localStorage.getItem('zroc-theme') || 'dark'
);
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('zroc-theme', theme);
}, [theme]);
const toggle = () => setTheme((t) => t === 'dark' ? 'light' : 'dark');
return (
<ThemeContext.Provider value={{ theme, toggle }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
return ctx;
}