Add and update frontend files

frontend/src/store/dashboardStore.ts

@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+
+type ChartRow = Record<string, unknown>;
+type GridLayout = { i: string; x: number; y: number; w: number; h: number };
+
+export interface ChartConfig {
+  id: string;
+  title: string;
+  type: 'bar' | 'line';
+  data: ChartRow[];
+  sql: string;
+  layout: GridLayout;
+}
+
+interface DashboardState {
+  charts: ChartConfig[];
+  addChart: (chart: Omit<ChartConfig, 'layout'>) => void;
+  removeChart: (id: string) => void;
+  updateLayout: (layouts: GridLayout[]) => void;
+}
+
+export const useDashboardStore = create<DashboardState>((set) => ({
+  charts: [],
+  addChart: (chart) => set((state) => {
+    const newLayout: GridLayout = {
+      i: chart.id,
+      x: (state.charts.length * 6) % 12,
+      y: Infinity,
+      w: 6,
+      h: 8,
+    };
+    return { charts: [...state.charts, { ...chart, layout: newLayout }] };
+  }),
+  removeChart: (id) => set((state) => ({
+    charts: state.charts.filter((c) => c.id !== id),
+  })),
+  updateLayout: (layouts) => set((state) => ({
+    charts: state.charts.map((chart) => {
+      const layout = layouts.find((l) => l.i === chart.id);
+      return layout ? { ...chart, layout } : chart;
+    }),
+  })),
+}));

frontend/src/store/visualizationStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+
+export interface VisualizationState {
+  currentData: any[] | null;
+  currentSQL: string | null;
+  currentChartType: 'bar' | 'line';
+  isLoading: boolean;
+  error: string | null;
+  setVisualization: (data: any[], sql: string) => void;
+  setChartType: (type: 'bar' | 'line') => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  clearVisualization: () => void;
+}
+
+export const useVisualizationStore = create<VisualizationState>((set) => ({
+  currentData: null,
+  currentSQL: null,
+  currentChartType: 'bar',
+  isLoading: false,
+  error: null,
+  setVisualization: (data, sql) => set({ currentData: data, currentSQL: sql, error: null }),
+  setChartType: (type) => set({ currentChartType: type }),
+  setLoading: (loading) => set({ isLoading: loading }),
+  setError: (error) => set({ error, isLoading: false }),
+  clearVisualization: () => set({ currentData: null, currentSQL: null, error: null }),
+}));