@@ -619,8 +495,6 @@ function Dashboard({ data, showDataLabels }) {
@@ -722,17 +596,19 @@ function Dashboard({ data, showDataLabels }) {
- {(filters.museum === 'all' ? dashboardCharts : dashboardCharts.filter(c => !['visitors-museum', 'revenue-museum'].includes(c.id))).map((chart, i) => (
+ {chartLabels.map((label, i) => (
))}
+
+ )}
);
}
diff --git a/src/components/shared/Carousel.jsx b/src/components/shared/Carousel.jsx
new file mode 100644
index 0000000..7d6637c
--- /dev/null
+++ b/src/components/shared/Carousel.jsx
@@ -0,0 +1,78 @@
+import React, { useRef, useCallback } from 'react';
+
+function Carousel({
+ children,
+ activeIndex,
+ setActiveIndex,
+ labels = [],
+ showLabels = true,
+ className = ''
+}) {
+ const touchStart = useRef(null);
+ const itemCount = React.Children.count(children);
+
+ const handleTouchStart = useCallback((e) => {
+ touchStart.current = e.touches[0].clientX;
+ }, []);
+
+ const handleTouchEnd = useCallback((e) => {
+ if (!touchStart.current) return;
+ const diff = touchStart.current - e.changedTouches[0].clientX;
+ if (Math.abs(diff) > 50) {
+ if (diff > 0 && activeIndex < itemCount - 1) {
+ setActiveIndex(activeIndex + 1);
+ } else if (diff < 0 && activeIndex > 0) {
+ setActiveIndex(activeIndex - 1);
+ }
+ }
+ touchStart.current = null;
+ }, [activeIndex, setActiveIndex, itemCount]);
+
+ const handleKeyDown = useCallback((e) => {
+ if (e.key === 'ArrowLeft' && activeIndex > 0) {
+ setActiveIndex(activeIndex - 1);
+ } else if (e.key === 'ArrowRight' && activeIndex < itemCount - 1) {
+ setActiveIndex(activeIndex + 1);
+ }
+ }, [activeIndex, setActiveIndex, itemCount]);
+
+ return (
+
+
+
+
+ {React.Children.map(children, (child, i) => (
+
+ {child}
+
+ ))}
+
+
+
+
+
+ {Array.from({ length: itemCount }).map((_, i) => (
+
+ ))}
+
+
+ );
+}
+
+export default Carousel;
diff --git a/src/components/shared/ChartCard.jsx b/src/components/shared/ChartCard.jsx
new file mode 100644
index 0000000..a9fa93b
--- /dev/null
+++ b/src/components/shared/ChartCard.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+function ChartCard({
+ title,
+ children,
+ className = '',
+ headerRight = null,
+ fullWidth = false,
+ halfWidth = false
+}) {
+ const sizeClass = fullWidth ? 'full-width' : halfWidth ? 'half-width' : '';
+
+ return (
+
+ {(title || headerRight) && (
+
+ {title &&
{title}
}
+ {headerRight &&
{headerRight}
}
+
+ )}
+
+ {children}
+
+
+ );
+}
+
+export default ChartCard;
diff --git a/src/components/shared/EmptyState.jsx b/src/components/shared/EmptyState.jsx
new file mode 100644
index 0000000..20dab2e
--- /dev/null
+++ b/src/components/shared/EmptyState.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+function EmptyState({
+ icon = '📊',
+ title = 'No data found',
+ message = 'Try adjusting your filters',
+ action,
+ actionLabel = 'Reset Filters'
+}) {
+ return (
+
+
{icon}
+
{title}
+
{message}
+ {action && (
+
+ )}
+
+ );
+}
+
+export default EmptyState;
diff --git a/src/components/shared/FilterControls.jsx b/src/components/shared/FilterControls.jsx
new file mode 100644
index 0000000..e2fbbd1
--- /dev/null
+++ b/src/components/shared/FilterControls.jsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+
+function FilterControls({
+ children,
+ title = 'Filters',
+ defaultExpanded = true,
+ onReset = null,
+ className = ''
+}) {
+ const [expanded, setExpanded] = useState(defaultExpanded);
+
+ return (
+
+
setExpanded(!expanded)}>
+
{title}
+
+ {onReset && expanded && (
+
+ )}
+
+
+
+
+ {children}
+
+
+ );
+}
+
+function FilterGroup({ label, children }) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+function FilterRow({ children }) {
+ return
{children}
;
+}
+
+FilterControls.Group = FilterGroup;
+FilterControls.Row = FilterRow;
+
+export default FilterControls;
diff --git a/src/components/shared/StatCard.jsx b/src/components/shared/StatCard.jsx
new file mode 100644
index 0000000..a8ea393
--- /dev/null
+++ b/src/components/shared/StatCard.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+function StatCard({ title, value, change = null, changeLabel = 'YoY' }) {
+ const isPositive = change !== null && change >= 0;
+
+ return (
+
+
{title}
+
{value}
+ {change !== null && (
+
+ {isPositive ? '↑' : '↓'} {Math.abs(change).toFixed(1)}% {changeLabel}
+
+ )}
+
+ );
+}
+
+export default StatCard;
diff --git a/src/components/shared/ToggleSwitch.jsx b/src/components/shared/ToggleSwitch.jsx
new file mode 100644
index 0000000..529520d
--- /dev/null
+++ b/src/components/shared/ToggleSwitch.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+function ToggleSwitch({ options, value, onChange, className = '' }) {
+ return (
+
+ {options.map((option) => (
+
+ ))}
+
+ );
+}
+
+export default ToggleSwitch;
diff --git a/src/components/shared/index.js b/src/components/shared/index.js
new file mode 100644
index 0000000..d10bbb4
--- /dev/null
+++ b/src/components/shared/index.js
@@ -0,0 +1,6 @@
+export { default as Carousel } from './Carousel';
+export { default as ChartCard } from './ChartCard';
+export { default as EmptyState } from './EmptyState';
+export { default as FilterControls } from './FilterControls';
+export { default as StatCard } from './StatCard';
+export { default as ToggleSwitch } from './ToggleSwitch';
diff --git a/src/config/chartConfig.js b/src/config/chartConfig.js
new file mode 100644
index 0000000..902fcb1
--- /dev/null
+++ b/src/config/chartConfig.js
@@ -0,0 +1,97 @@
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ ArcElement,
+ Title,
+ Tooltip,
+ Legend,
+ Filler
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+// Register ChartJS components once
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ ArcElement,
+ Title,
+ Tooltip,
+ Legend,
+ Filler,
+ ChartDataLabels
+);
+
+export const chartColors = {
+ primary: '#2563eb',
+ secondary: '#7c3aed',
+ tertiary: '#0891b2',
+ success: '#059669',
+ danger: '#dc2626',
+ muted: '#94a3b8',
+ grid: '#f1f5f9'
+};
+
+export const createDataLabelConfig = (showDataLabels) => ({
+ display: showDataLabels,
+ color: '#1e293b',
+ font: { size: 10, weight: 600 },
+ anchor: 'end',
+ align: 'end',
+ offset: 4,
+ padding: 4,
+ backgroundColor: 'rgba(255, 255, 255, 0.85)',
+ borderRadius: 3,
+ formatter: (value) => {
+ if (value == null) return '';
+ if (value >= 1000000) return (value / 1000000).toFixed(2) + 'M';
+ if (value >= 1000) return (value / 1000).toFixed(2) + 'K';
+ if (value < 100 && value > 0) return value.toFixed(2);
+ return Math.round(value).toLocaleString();
+ }
+});
+
+export const createBaseOptions = (showDataLabels) => ({
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: { display: false },
+ tooltip: {
+ backgroundColor: '#1e293b',
+ padding: 12,
+ cornerRadius: 8,
+ titleFont: { size: 12 },
+ bodyFont: { size: 11 }
+ },
+ datalabels: createDataLabelConfig(showDataLabels)
+ },
+ scales: {
+ x: {
+ grid: { display: false },
+ ticks: { font: { size: 10 }, color: '#94a3b8' }
+ },
+ y: {
+ grid: { color: chartColors.grid },
+ ticks: { font: { size: 10 }, color: '#94a3b8' },
+ border: { display: false }
+ }
+ }
+});
+
+export const lineDatasetDefaults = {
+ borderWidth: 2,
+ tension: 0.4,
+ fill: true,
+ pointRadius: 0,
+ pointHoverRadius: 4
+};
+
+export const barDatasetDefaults = {
+ borderRadius: 4
+};
diff --git a/src/services/dataService.js b/src/services/dataService.js
index 8ab3511..b0a3b9f 100644
--- a/src/services/dataService.js
+++ b/src/services/dataService.js
@@ -3,15 +3,12 @@ const SPREADSHEET_ID = '1rdK1e7jmfu-es4Ql0YwDYNBY2OvVihBjYaXTM-MHHqg';
const SHEET_NAME = 'Consolidated Data';
const SHEET_URL = `https://docs.google.com/spreadsheets/d/${SPREADSHEET_ID}/gviz/tq?tqx=out:csv&sheet=${encodeURIComponent(SHEET_NAME)}`;
-// NocoDB configuration
-// Use relative URL for dev proxy, full URL for production
-const NOCODB_URL = process.env.NODE_ENV === 'production' ? 'http://localhost:8090' : '';
-const NOCODB_TOKEN = 'By-wCdkUm6N9JdfmNpGH2jd6LqEejwOXER7FMkgr';
+// NocoDB configuration - uses environment variables for security
+// Set REACT_APP_NOCODB_URL and REACT_APP_NOCODB_TOKEN in .env.local
+const NOCODB_URL = process.env.REACT_APP_NOCODB_URL || '';
+const NOCODB_TOKEN = process.env.REACT_APP_NOCODB_TOKEN || '';
-// Old flat table (for backwards compatibility)
-const NOCODB_TABLE_ID = 'mzcz8ktjybcjc79';
-
-// New normalized tables (Samaya Museums Statistics base)
+// Table IDs (not sensitive - just identifiers)
const NOCODB_TABLES = {
districts: 'm8cup7lesbet0sa',
museums: 'm1c7od7mdirffvu',