first commit

src/context/zustand-store/appStore.ts

@@ -0,0 +1,148 @@
+import { create } from "zustand";
+import { ReactNode } from "react";
+import { persist } from "zustand/middleware";
+
+interface DrawerState {
+  isOpen?: boolean | null | string | undefined;
+  title?: string;
+  content?: ReactNode | null;
+  direction?: string | null;
+}
+
+interface UseDrawerStore {
+  drawerState: DrawerState;
+  openDrawer: (args: {
+    title?: string;
+    content?: ReactNode;
+    direction?: string;
+    isOpen?: boolean;
+  }) => void;
+  closeDrawer: () => void;
+}
+
+export const useDrawerStore = create<UseDrawerStore>((set) => ({
+  drawerState: {
+    isOpen: false,
+    title: "",
+    content: null,
+    direction: null,
+  },
+  openDrawer: ({ title, content, direction }) =>
+    set({
+      drawerState: {
+        isOpen: true,
+        title,
+        content,
+        direction: direction || null,
+      },
+    }),
+  closeDrawer: () =>
+    set({
+      drawerState: {
+        isOpen: false,
+        title: "",
+        content: null,
+        direction: null,
+      },
+    }),
+}));
+
+interface UseBackdropStore {
+  isOpen: boolean;
+  openBackdrop: () => void;
+  closeBackdrop: () => void;
+}
+
+export const useBackdropStore = create<UseBackdropStore>((set) => ({
+  isOpen: false,
+  openBackdrop: () => set({ isOpen: true }),
+  closeBackdrop: () => set({ isOpen: false }),
+}));
+
+interface UseModalStore {
+  isOpen?: boolean;
+  isFullSize?: boolean;
+  title: string;
+  content: ReactNode | null;
+  openModal: (args: {
+    title: string;
+    content: ReactNode;
+    isFullSize?: boolean;
+  }) => void;
+  updateModalContent: (content: ReactNode) => void;
+  closeModal: () => void;
+}
+
+export const useModalStore = create<UseModalStore>((set) => ({
+  isOpen: false,
+  isFullSize: false,
+  title: "",
+  content: null,
+  openModal: ({ title, content, isFullSize }) =>
+    set({ isOpen: true, title, content, isFullSize: isFullSize || false }),
+  updateModalContent: (content) =>
+    set((state) => (state.isOpen ? { content } : {})),
+  closeModal: () => set({ isOpen: false }),
+}));
+
+interface UseSideBarStore {
+  isSideBarOpen?: boolean;
+  toggleSideBar: (args: { state: boolean }) => void;
+}
+
+export const useSideBarStore = create<UseSideBarStore>((set) => ({
+  isSideBarOpen: true,
+  toggleSideBar: ({ state }) => set({ isSideBarOpen: state }),
+}));
+
+interface TabState {
+  activeTabs: Record<
+    string,
+    {
+      index: number;
+      path: string;
+      label: string;
+    }
+  >;
+}
+
+interface UseTabStore {
+  tabState: TabState;
+  setActiveTab: (args: {
+    index: number;
+    path: string;
+    label: string;
+    tabKey: string;
+  }) => void;
+  clearTabState: () => void;
+}
+
+export const useTabStore = create<UseTabStore>()(
+  persist(
+    (set) => ({
+      tabState: {
+        activeTabs: {},
+      },
+      setActiveTab: ({ index, path, label, tabKey }) =>
+        set((state) => ({
+          tabState: {
+            activeTabs: {
+              ...state.tabState.activeTabs,
+              [tabKey]: { index, path, label },
+            },
+          },
+        })),
+      clearTabState: () =>
+        set({
+          tabState: {
+            activeTabs: {},
+          },
+        }),
+    }),
+    {
+      name: "tab-storage",
+    }
+  )
+);
+
+

src/context/zustand-store/dashboardTabStore.ts

@@ -0,0 +1,36 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface Tab {
+  id: string;
+  title: string;
+  component: React.ComponentType;
+  path: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  clearTabs?: () => void;
+}
+
+interface TabStore {
+  dashboarTabs: Tab[];
+  activeTabId: string | null;
+  setDashboardTabs: (dashboarTabs: Tab[]) => void;
+  setActiveTabId: (id: string | null) => void;
+  clearTabs: () => void;
+}
+
+export const useDashboardTabStore = create<TabStore>()(
+  persist(
+    (set) => ({
+      dashboarTabs: [],
+      activeTabId: null,
+      setDashboardTabs: (dashboarTabs) => set({ dashboarTabs }),
+      setActiveTabId: (id) => set({ activeTabId: id }),
+      clearTabs: () => set({ dashboarTabs: [], activeTabId: null }),
+    }),
+    {
+      name: "dashboard-tabs-storage",
+    }
+  )
+);
+
+

src/context/zustand-store/userStore.ts

@@ -0,0 +1,102 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { useDashboardTabStore } from "./dashboardTabStore";
+
+interface UseUserProfileStore {
+  profile?: Record<string, any> | null;
+  setUserProfile: (profile: Record<string, any>) => void;
+  clearProfile: () => void;
+}
+
+const arePermissionsEqual = (
+  permissions1?: string[],
+  permissions2?: string[]
+): boolean => {
+  if (!permissions1 && !permissions2) return true;
+  if (!permissions1 || !permissions2) return false;
+  if (permissions1.length !== permissions2.length) return false;
+
+  const sorted1 = [...permissions1].sort();
+  const sorted2 = [...permissions2].sort();
+
+  return JSON.stringify(sorted1) === JSON.stringify(sorted2);
+};
+
+const areProfilesEqual = (
+  currentProfile: Record<string, any> | null | undefined,
+  newProfile: Record<string, any>
+): boolean => {
+  if (!currentProfile) return false;
+
+  if (
+    !arePermissionsEqual(currentProfile.permissions, newProfile.permissions)
+  ) {
+    return false;
+  }
+
+  const currentKeys = Object.keys(currentProfile).filter(
+    (key) => key !== "permissions"
+  );
+  const newKeys = Object.keys(newProfile).filter(
+    (key) => key !== "permissions"
+  );
+
+  if (currentKeys.length !== newKeys.length) return false;
+
+  for (const key of currentKeys) {
+    if (
+      JSON.stringify(currentProfile[key]) !== JSON.stringify(newProfile[key])
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+export const useUserProfileStore = create<UseUserProfileStore>()(
+  persist(
+    (set, get) => ({
+      profile: null,
+      setUserProfile: (profile) => {
+        const currentProfile = get().profile;
+
+        if (!currentProfile) {
+          set({ profile });
+          console.log("profile", profile);
+          return;
+        }
+
+        if (!areProfilesEqual(currentProfile, profile)) {
+          set({ profile });
+          console.log("profile", profile);
+        }
+      },
+      clearProfile: () => set({ profile: null }),
+    }),
+    { name: "userprofile" }
+  )
+);
+
+interface UseUserStore {
+  auth?: string;
+  setUser: (args: { auth: string }) => void;
+  logOut?: () => void;
+}
+
+export const useUserStore = create<UseUserStore>()(
+  persist(
+    (set) => ({
+      auth: "",
+      setUser: ({ auth }) => set({ auth }),
+      logOut: () => {
+        set({ auth: "" });
+        useUserProfileStore.getState().clearProfile();
+        useDashboardTabStore.getState().clearTabs();
+      },
+    }),
+    {
+      name: "user",
+    }
+  )
+);