first commit

app/src/store/useModuleStore.ts

@@ -0,0 +1,14 @@
+// store/useModuleStore.ts
+import { create } from "zustand";
+
+interface ModuleStore {
+  activeModule: string;
+  setActiveModule: (module: string) => void;
+}
+
+const useModuleStore = create<ModuleStore>((set) => ({
+  activeModule: "builder", // Initial state
+  setActiveModule: (module) => set({ activeModule: module }), // Update state
+}));
+
+export default useModuleStore;

app/src/store/usePlayButtonStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+type PlayButtonStore = {
+  isPlaying: boolean; // Updated state name to reflect the play/pause status more clearly
+  setIsPlaying: (value: boolean) => void; // Updated setter function name for clarity
+};
+
+export const usePlayButtonStore = create<PlayButtonStore>((set) => ({
+  isPlaying: false, // Default state for play/pause
+  setIsPlaying: (value) => set({ isPlaying: value }), // Update isPlaying state
+}));

app/src/store/useTemplateStore.ts

@@ -0,0 +1,39 @@
+import { create } from "zustand";
+
+// type Side = "top" | "bottom" | "left" | "right";
+
+export interface Widget {
+  id: string;
+  type: string;
+  title: string;
+  panel: string;
+  data: any;
+}
+
+export interface Template {
+  id: string;
+  name: string;
+  panelOrder: string[];
+  widgets: Widget[];
+  snapshot?: string | null; // Add an optional image property (base64)
+}
+
+interface TemplateStore {
+  templates: Template[];
+  addTemplate: (template: Template) => void;
+  removeTemplate: (id: string) => void;
+}
+
+export const useTemplateStore = create<TemplateStore>((set) => ({
+  templates: [],
+  addTemplate: (template) =>
+    set((state) => ({
+      templates: [...state.templates, template],
+    })),
+  removeTemplate: (id) =>
+    set((state) => ({
+      templates: state.templates.filter((t) => t.id !== id),
+    })),
+}));
+
+export default useTemplateStore;

app/src/store/useThemeStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface ThemeState {
+  themeColor: string[]; // This should be an array of strings
+  setThemeColor: (colors: string[]) => void; // This function will accept an array of strings
+}
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  themeColor: ["#5c87df", "#EEEEFE", "#969BA7"],
+  setThemeColor: (colors) => set({ themeColor: colors }),
+}));

app/src/store/useUIToggleStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface ToggleState {
+  toggleUI: boolean; // State to track UI toggle
+  setToggleUI: (value: boolean) => void; // Action to update toggleUI
+}
+
+const useToggleStore = create<ToggleState>((set) => ({
+  toggleUI: true, // Initial state
+  setToggleUI: (value: boolean) => set({ toggleUI: value }), // Update the state
+}));
+
+export default useToggleStore;

app/src/store/useWidgetStore.ts

@@ -0,0 +1,49 @@
+import { create } from "zustand";
+
+export interface Widget {
+  id: string;
+  type: string; // Can be chart type or "progress"
+  panel: "top" | "bottom" | "left" | "right";
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  data: {
+    // Chart data
+    labels?: string[];
+    datasets?: Array<{
+      data: number[];
+      backgroundColor: string;
+      borderColor: string;
+      borderWidth: number;
+    }>;
+    // Progress card data
+    stocks?: Array<{
+      key: string;
+      value: number;
+      description: string;
+    }>;
+  };
+}
+
+interface WidgetStore {
+  draggedAsset: Widget | null; // The currently dragged widget asset
+  widgets: Widget[]; // List of all widgets
+  selectedChartId: any;
+  setDraggedAsset: (asset: Widget | null) => void; // Setter for draggedAsset
+  addWidget: (widget: Widget) => void; // Add a new widget
+  setWidgets: (widgets: Widget[]) => void; // Replace the entire widgets array
+  setSelectedChartId: (widget: Widget | null) => void; // Set the selected chart/widget
+}
+
+// Create the store with Zustand
+export const useWidgetStore = create<WidgetStore>((set) => ({
+  draggedAsset: null,
+  widgets: [],
+  selectedChartId: null, // Initialize as null, not as an array
+  setDraggedAsset: (asset) => set({ draggedAsset: asset }),
+  addWidget: (widget) =>
+    set((state) => ({ widgets: [...state.widgets, widget] })),
+  setWidgets: (widgets) => set({ widgets }),
+  setSelectedChartId: (widget) => set({ selectedChartId: widget }),
+}));

app/src/store/useZoneStore.ts

@@ -0,0 +1,41 @@
+import { create } from "zustand";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+  id: string;
+  type: string;
+  title: string;
+  panel: Side;
+  data: any;
+}
+
+interface SelectedZoneState {
+  zoneName: string;
+  activeSides: Side[];
+  panelOrder: Side[];
+  lockedPanels: Side[];
+  widgets: Widget[];
+}
+
+interface SelectedZoneStore {
+  selectedZone: SelectedZoneState;
+  setSelectedZone: (zone: Partial<SelectedZoneState> | ((prev: SelectedZoneState) => SelectedZoneState)) => void;
+}
+
+export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
+  selectedZone: {
+    zoneName: "Manufacturing unit",
+    activeSides: [],
+    panelOrder: [],
+    lockedPanels: [],
+    widgets: [],
+  },
+  setSelectedZone: (zone) =>
+    set((state) => ({
+      selectedZone:
+        typeof zone === "function"
+          ? zone(state.selectedZone) // Handle functional updates
+          : { ...state.selectedZone, ...zone }, // Handle partial updates
+    })),
+}));