refactor(admin): replace parameterized routes with modal-based editing for users and roles

src/shared/components/Modal.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Dialog } from '@headlessui/react';
 import { Cancel01Icon } from '../icons/index.js';
-import Button from './Button';
+import Button from './Button.js';
+
+const FORM_ID = 'modal-form-inner';
 
 const Modal = ({
     isOpen = true,
@@ -10,19 +12,56 @@ const Modal = ({
     children,
     footer,
     size = 'lg',
-    closable = true
+    closable = true,
+    // Form props — when provided, wraps children in a <form> and shows a standard footer
+    onSubmit,
+    submitLabel = 'Enregistrer',
+    cancelLabel = 'Annuler',
+    submitVariant = 'primary',
+    loading = false,
+    disabled = false,
 }) => {
     const sizeClasses = {
         sm: 'max-w-md',
         md: 'max-w-lg',
         lg: 'max-w-2xl',
         xl: 'max-w-4xl',
-        full: 'max-w-7xl'
+        full: 'max-w-7xl',
     };
 
+    const isForm = typeof onSubmit === 'function';
+
+    const handleFormSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(e);
+    };
+
+    const resolvedFooter = footer ?? (isForm ? (
+        <div className="flex items-center justify-end gap-2">
+            <Button
+                variant="ghost"
+                size="sm"
+                onClick={onClose}
+                disabled={loading}
+            >
+                {cancelLabel}
+            </Button>
+            <Button
+                type="submit"
+                form={FORM_ID}
+                variant={submitVariant}
+                size="sm"
+                loading={loading}
+                disabled={disabled || loading}
+            >
+                {submitLabel}
+            </Button>
+        </div>
+    ) : null);
+
     return (
-        <Dialog 
-            open={isOpen} 
+        <Dialog
+            open={isOpen}
             onClose={closable ? onClose : () => {}}
             className="relative z-50"
         >
@@ -31,14 +70,14 @@ const Modal = ({
 
             {/* Container */}
             <div className="fixed inset-0 flex items-center justify-center p-4">
-                <Dialog.Panel 
+                <Dialog.Panel
                     className={`
                         w-full ${sizeClasses[size]}
                         bg-white dark:bg-neutral-900
                         border border-neutral-200 dark:border-neutral-800
                         rounded-lg
-                        shadow-xl 
-                        max-h-[90vh] 
+                        shadow-xl
+                        max-h-[90vh]
                         overflow-hidden
                         flex flex-col
                     `}
@@ -61,13 +100,17 @@ const Modal = ({
 
                     {/* Content */}
                     <div className="flex-1 overflow-y-auto p-4">
-                        {children}
+                        {isForm ? (
+                            <form id={FORM_ID} onSubmit={handleFormSubmit} noValidate>
+                                {children}
+                            </form>
+                        ) : children}
                     </div>
 
                     {/* Footer */}
-                    {footer && (
+                    {resolvedFooter && (
                         <div className="px-4 py-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/30">
-                            {footer}
+                            {resolvedFooter}
                         </div>
                     )}
                 </Dialog.Panel>
@@ -76,4 +119,4 @@ const Modal = ({
     );
 };
 
-export default Modal; 
+export default Modal;