feat: Add NPV comparison and distribution charts to reporting

- Implemented NPV comparison chart generation using Plotly in ReportingService.
- Added distribution histogram for Monte Carlo results.
- Updated reporting templates to include new charts and improved layout.
- Created new settings and currencies management pages.
- Enhanced sidebar navigation with dynamic URL handling.
- Improved CSS styles for chart containers and overall layout.
- Added new simulation and theme settings pages with placeholders for future features.

static/css/main.css

@@ -117,6 +117,16 @@ a {
   margin-top: 3rem;
 }
 
+.chart-container {
+  width: 100%;
+  height: 400px;
+  background: rgba(15, 20, 27, 0.8);
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  margin-bottom: 1rem;
+}
+
 .section-header {
   margin-bottom: 1.25rem;
 }

static/js/navigation.js

@@ -7,12 +7,12 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Define the navigation order (main pages)
   const navPages = [
-    "/",
-    "/projects/ui",
-    "/imports/ui",
-    "/ui/simulations",
-    "/ui/reporting",
-    "/ui/settings",
+    window.NAVIGATION_URLS.dashboard,
+    window.NAVIGATION_URLS.projects,
+    window.NAVIGATION_URLS.imports,
+    window.NAVIGATION_URLS.simulations,
+    window.NAVIGATION_URLS.reporting,
+    window.NAVIGATION_URLS.settings,
   ];
 
   const currentPath = window.location.pathname;