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/Gridler/stories/Examples.goapi.tsx

@@ -4,6 +4,10 @@ import { useRef, useState } from 'react';
 
 import type { GridlerColumns } from '../components/Column';
 
+import { FormerDialog } from '../../Former';
+import { NativeSelectCtrl, TextInputCtrl } from '../../FormerControllers';
+import { InlineWrapper } from '../../FormerControllers/Inputs/InlineWrapper';
+import NumberInputCtrl from '../../FormerControllers/Inputs/NumberInputCtrl';
 import { GlidlerAPIAdaptorForGoLangv2 } from '../components/adaptors';
 import { type GridlerRef } from '../components/GridlerStore';
 import { Gridler } from '../Gridler';
@@ -18,12 +22,18 @@ export const GridlerGoAPIExampleEventlog = () => {
   const [selectRow, setSelectRow] = useState<string | undefined>('');
   const [values, setValues] = useState<Array<Record<string, any>>>([]);
   const [search, setSearch] = useState<string>('');
+  const [formProps, setFormProps] = useState<{ onChange?: any; onClose?: any; opened: boolean; request: any; title?: string; values: any; } | null>({
+    onChange: (_request: string, data: any) => { ref.current?.refresh({ value: data }); },
+    onClose: () => { setFormProps((cv) => ({ ...cv, opened: false, request: null, values: null })) },
+    opened: false,
+    request: null,
+    values: null,
+  });
   const [sections, setSections] = useState<Record<string, unknown> | undefined>(undefined);
   const columns: GridlerColumns = [
     {
       Cell: (row) => {
-        const process = `${
-          row?.cql2?.length > 0
+        const process = `${row?.cql2?.length > 0
             ? '🔖'
             : row?.cql1?.length > 0
               ? '📕'
@@ -32,7 +42,7 @@ export const GridlerGoAPIExampleEventlog = () => {
                 : row?.status === 2
                   ? '🔒'
                   : '⚙️'
-        } ${String(row?.id_process ?? '0')}`;
+          } ${String(row?.id_process ?? '0')}`;
 
         return {
           data: process,
@@ -129,10 +139,29 @@ export const GridlerGoAPIExampleEventlog = () => {
           changeOnActiveClick={true}
           descriptionField={'process'}
           onRequestForm={(request, data) => {
-            console.log('Form requested', request, data);
+            setFormProps((cv)=> { 
+              return {...cv, opened: true, request: request as any, values: data as any}
+            })    
           }}
         />
       </Gridler>
+      <FormerDialog 
+          former={{
+            request: formProps?.request ?? "insert",
+            values: formProps?.values,
+          }}
+          onClose={formProps?.onClose}
+          opened={formProps?.opened ?? false}
+          title={formProps?.title ?? 'Process Form'}
+        >
+            <Stack>
+              <TextInputCtrl label="Process Name" name="process" />
+              <NumberInputCtrl label="Sequence" name="sequence" />
+              <InlineWrapper label="Type" promptWidth={200}>
+                <NativeSelectCtrl data={["trigger","function","view"]} name="type"/>
+              </InlineWrapper>
+            </Stack>
+      </FormerDialog>
       <Divider />
       <Group>
         <TextInput
@@ -193,6 +222,6 @@ export const GridlerGoAPIExampleEventlog = () => {
           Goto 2050
         </Button>
       </Group>
-    </Stack>
+    </Stack >
   );
 };