feat(form): ✨ enhance form functionality and API integration

* Refactor key handling to use uniqueKeyField
* Add reset functionality to clear dirty state after save
* Introduce new API call specifications for REST and resolve
* Implement predefined wrappers for dialogs and popovers
* Update todo list to reflect completed tasks

src/Former/FormerButtonArea.tsx

@@ -1,14 +1,33 @@
-import { Group, Button } from '@mantine/core';
+import { Group, Button, Tooltip } from '@mantine/core';
 import { IconX, IconDeviceFloppy } from '@tabler/icons-react';
 import { useFormerStore } from './Former.store';
 
 export const FormerButtonArea = () => {
-  const { save, onClose, buttonAreaGroupProps } = useFormerStore((state) => ({
+  const {
+    save,
+    onClose,
+    buttonAreaGroupProps,
+    saveButtonProps,
+    closeButtonProps,
+    closeButtonTitle,
+    saveButtonTitle,
+    request,
+    dirty,
+  } = useFormerStore((state) => ({
     save: state.save,
     onClose: state.onClose,
     buttonAreaGroupProps: state.layout?.buttonAreaGroupProps,
+    saveButtonProps: state.layout?.saveButtonProps,
+    closeButtonProps: state.layout?.closeButtonProps,
+    closeButtonTitle: state.layout?.closeButtonTitle,
+    saveButtonTitle: state.layout?.saveButtonTitle,
+    request: state.request,
+    dirty: state.dirty,
   }));
 
+  const disabledSave =
+    ['select', 'view'].includes(request || '') || (['update'].includes(request || '') && !dirty);
+
   return (
     <Group
       justify="center"
@@ -24,22 +43,41 @@ export const FormerButtonArea = () => {
             leftSection={<IconX />}
             size="sm"
             px="md"
-            onClick={() => onClose()}
             miw={'8rem'}
+            {...closeButtonProps}
+            onClick={() => {
+              onClose();
+            }}
           >
-            Close
+            {closeButtonTitle || 'Close'}
           </Button>
         )}
-        <Button
-          color="green"
-          leftSection={<IconDeviceFloppy />}
-          size="sm"
-          px="md"
-          onClick={() => save()}
-          miw={'8rem'}
+        <Tooltip
+          label={
+            disabledSave ? (
+              <p>
+                Cannot save in view or select mode, or no changes made. <br />
+                Try changing some values.
+              </p>
+            ) : (
+              <p>Save the current record</p>
+            )
+          }
         >
-          Save
-        </Button>
+          <Button
+            color="green"
+            leftSection={<IconDeviceFloppy />}
+            size="sm"
+            px="md"
+            miw={'8rem'}
+            bg={request === 'delete' ? 'red' : undefined}
+            {...saveButtonProps}
+            disabled={disabledSave}
+            onClick={() => save()}
+          >
+            {saveButtonTitle || 'Save'}
+          </Button>
+        </Tooltip>
       </Group>
     </Group>
   );