feat(globalStateStore): implement global state management with persistence

- refactor state structure to include app, layout, navigation, owner, program, session, and user
- add slices for managing program, session, owner, user, layout, navigation, and app states
- create context provider for global state with automatic fetching and throttling
- implement persistence using IndexedDB with localStorage fallback
- add comprehensive README documentation for usage and API

src/Boxer/hooks/useBoxerOptions.tsx

@@ -1,17 +1,17 @@
-import { Combobox, Checkbox } from '@mantine/core';
+import { Checkbox, Combobox } from '@mantine/core';
 import { useMemo } from 'react';
 
 import type { BoxerItem } from '../Boxer.types';
 
 interface UseBoxerOptionsProps {
   boxerData: Array<BoxerItem>;
-  value?: any | Array<any>;
   multiSelect?: boolean;
   onOptionSubmit: (index: number) => void;
+  value?: any | Array<any>;
 }
 
 const useBoxerOptions = (props: UseBoxerOptionsProps) => {
-  const { boxerData, value, multiSelect, onOptionSubmit } = props;
+  const { boxerData, multiSelect, onOptionSubmit, value } = props;
 
   const options = useMemo(() => {
     return boxerData.map((item, index) => {
@@ -21,15 +21,15 @@ const useBoxerOptions = (props: UseBoxerOptionsProps) => {
 
       return (
         <Combobox.Option
-          key={`${item.value}-${index}`}
-          value={String(index)}
           active={isSelected}
+          key={`${item.value}-${index}`}
           onClick={() => {
             onOptionSubmit(index);
           }}
+          value={String(index)}
         >
           {multiSelect ? (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
               <Checkbox checked={isSelected} onChange={() => {}} tabIndex={-1} />
               <span>{item.label}</span>
             </div>