feat(datagrid/dialogs): introduce DataGridDialogManager with form and footer orchestration

- Add DialogManager to orchestrate dialog behavior based on ActionMode
- Implement mode-specific titles, descriptions and submit labels
- Support default footer with dynamic submit button label
- Allow custom footer via renderFooter override
- Ensure cancel logic resets action mode and closes dialog
- Use the Sheet component as the controlled dialog container

Author: ialopezg

src/DataGrid.tsx

@@ -1,34 +1,28 @@
-// file: src/DataGrid.tsx
+// file: src/components/DataGrid.tsx
 
-'use client';
+import { ReactNode } from 'react';
 
-import DataGridView from './DataGridView';
-import { DataGridProvider } from './context/DataGridProvider';
-import type { Identifiable, DataGridMode } from './context/DataGridState';
-import type { DataGridEventsProps } from './hooks/useGridEvents';
+import { DataGridProvider } from '@context';
+import type { Identifiable } from '@contracts';
+import { DataGridDialogManager } from '@components';
 
-export interface DataGridProps<T extends Identifiable> extends DataGridEventsProps<T> {
-  data: T[];
-  initialTake?: number;
-  initialTotalRows?: number;
-  mode?: DataGridMode;
+interface DataGridProps<T extends Identifiable> {
+  rows: T[];
+  children?: ReactNode;
 }
 
 export default function DataGrid<T extends Identifiable>({
-  data,
-  initialTake = 10,
-  initialTotalRows = data.length,
-  mode,
-  ...events
+  rows,
+  children,
 }: DataGridProps<T>) {
   return (
-    <DataGridProvider<T>
-      initialData={data}
-      initialTake={initialTake}
-      initialTotalRows={initialTotalRows}
-      mode={mode}
-    >
-      <DataGridView<T> {...events} />
+    <DataGridProvider<T> initialRows={rows}>
+      {children}
+
+      <DataGridDialogManager
+        onSubmit={() => console.log('Form submitted!')}
+        renderForm={(_) => <>FormDialog</>}
+      />
     </DataGridProvider>
   );
 }

src/components/datagrid/dialogs/DialogManager.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { useActions } from '@hooks';
+import { Sheet, SheetContent, SheetFooter, SheetHeader } from '@components';
+
+interface FormContext {
+  onSubmit: () => Promise<void> | void;
+  onCancel: () => void;
+}
+
+interface DataGridDialogsProps {
+  renderForm: (ctx: FormContext) => ReactNode;
+  renderFooter?: (ctx: FormContext) => ReactNode;
+  onSubmit: () => Promise<void> | void;
+  onCancel?: () => void;
+}
+
+/**
+ * Dialog orchestrator for DataGrid.
+ * Supports: create, update, delete, import.
+ * Explicitly DOES NOT support multi-row delete.
+ */
+export function DataGridDialogManager({
+  renderForm,
+  renderFooter,
+  onSubmit,
+  onCancel,
+}: DataGridDialogsProps) {
+  const actions = useActions();
+
+  /** Always close dialog by resetting mode + triggering optional callback */
+  const close = () => {
+    actions.reset();
+    onCancel?.();
+  };
+
+  // ---- Dialog Titles Per Mode ----
+  const titles: Record<string, string> = {
+    create: 'Create Record',
+    update: 'Update Record',
+    delete: 'Delete Record',
+    import: 'Import Data',
+  };
+
+  const descriptions: Record<string, string> = {
+    create: 'Add a new entry',
+    update: 'Modify the selected entry',
+    delete: 'This action cannot be undone',
+    import: 'Upload a file to import',
+  };
+
+  // ---- Primary Button Labels Per Mode ----
+  const submitLabels: Record<string, string> = {
+    create: 'Create',
+    update: 'Update',
+    delete: 'Delete',
+    import: 'Import',
+  };
+
+  const title = titles[actions.mode] ?? 'Dialog';
+  const description = descriptions[actions.mode] ?? '';
+  const submitLabel = submitLabels[actions.mode] ?? 'Submit';
+
+  // Context to pass to form + footer
+  const formCtx: FormContext = {
+    onSubmit,
+    onCancel: close,
+  };
+
+  // ---- Default Footer (used if no override is provided) ----
+  const defaultFooter = (
+    <>
+      <button onClick={close}>Cancel</button>
+      <button
+        onClick={onSubmit}
+        style={{
+          color: actions.mode === 'delete' ? 'white' : 'inherit',
+          background: actions.mode === 'delete' ? '#d32f2f' : 'inherit',
+        }}
+      >
+        {submitLabel}
+      </button>
+    </>
+  );
+
+  return (
+    <Sheet
+      open={!['idle', 'reload'].includes(actions.mode)}
+      onOpenChange={() => actions.set('idle')}
+    >
+      <SheetHeader title={title} description={description} onClose={close} />
+
+      <SheetContent>{renderForm(formCtx)}</SheetContent>
+
+      <SheetFooter>{renderFooter ? renderFooter(formCtx) : defaultFooter}</SheetFooter>
+    </Sheet>
+  );
+}