@fluxo-dev/shell-reporting 25.3.2 → 25.3.4

package/reports-manager.esm.js

@@ -1,46 +1,89 @@
-import { c as createReactComponent, p as promiseNativeConstructor, f as fails$1, _ as _export, s as speciesConstructor$1, g as getBuiltIn$1, a as promiseResolve$1, i as isCallable$1, d as defineBuiltIn$1 } from './index.esm2.js';
+import { c as createReactComponent, p as promiseNativeConstructor, f as fails$1, _ as _export, s as speciesConstructor$1, g as getBuiltIn$1, a as promiseResolve$1, i as isCallable$1, d as defineBuiltIn$1, R as ReportDesigner } from './index.esm2.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ShellPage, DataCard, ConfirmModal } from '@fluxo-dev/ui-components';
-import { Stack, Text, TextInput, Textarea, Group, Button, Loader, Divider, Center, Modal } from '@mantine/core';
-import { useState, useEffect } from 'react';
+import { Stack, Text, TextInput, Textarea, Group, Button, Paper, Skeleton, Center, Select, Badge, Menu, ActionIcon, Modal } from '@mantine/core';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { FluxoClientSys } from '@fluxo-dev/api-client-base';
 import { useNavigate } from 'react-router-dom';
 import { showNotification } from '@mantine/notifications';
+import { ShellPage, ConfirmModal } from '@fluxo-dev/ui-components';
 import '@mantine/dates';
 
 /**
- * @tabler/icons-react v2.47.0 - MIT
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
  */
 
 
-var IconPlus = createReactComponent("plus", "IconPlus", [
-  ["path", { d: "M12 5l0 14", key: "svg-0" }],
-  ["path", { d: "M5 12l14 0", key: "svg-1" }]
-]);
+const __iconNode$6 = [["path", { "d": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }]];
+const IconDotsVertical = createReactComponent("outline", "dots-vertical", "DotsVertical", __iconNode$6);
 
 /**
- * @tabler/icons-react v2.47.0 - MIT
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
  */
 
 
-var IconReport = createReactComponent("report", "IconReport", [
-  [
-    "path",
-    { d: "M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697", key: "svg-0" }
-  ],
-  ["path", { d: "M18 14v4h4", key: "svg-1" }],
-  ["path", { d: "M18 11v-4a2 2 0 0 0 -2 -2h-2", key: "svg-2" }],
-  [
-    "path",
-    {
-      d: "M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",
-      key: "svg-3"
-    }
-  ],
-  ["path", { d: "M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-4" }],
-  ["path", { d: "M8 11h4", key: "svg-5" }],
-  ["path", { d: "M8 15h3", key: "svg-6" }]
-]);
+const __iconNode$5 = [["path", { "d": "M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1", "key": "svg-0" }], ["path", { "d": "M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z", "key": "svg-1" }], ["path", { "d": "M16 5l3 3", "key": "svg-2" }]];
+const IconEdit = createReactComponent("outline", "edit", "Edit", __iconNode$5);
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$4 = [["path", { "d": "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", "key": "svg-0" }], ["path", { "d": "M11 13l9 -9", "key": "svg-1" }], ["path", { "d": "M15 4h5v5", "key": "svg-2" }]];
+const IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$4);
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$3 = [["path", { "d": "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2", "key": "svg-0" }]];
+const IconFolder = createReactComponent("outline", "folder", "Folder", __iconNode$3);
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$2 = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M5 12l14 0", "key": "svg-1" }]];
+const IconPlus = createReactComponent("outline", "plus", "Plus", __iconNode$2);
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [["path", { "d": "M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697", "key": "svg-0" }], ["path", { "d": "M18 14v4h4", "key": "svg-1" }], ["path", { "d": "M18 11v-4a2 2 0 0 0 -2 -2h-2", "key": "svg-2" }], ["path", { "d": "M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", "key": "svg-3" }], ["path", { "d": "M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", "key": "svg-4" }], ["path", { "d": "M8 11h4", "key": "svg-5" }], ["path", { "d": "M8 15h3", "key": "svg-6" }]];
+const IconReport = createReactComponent("outline", "report", "Report", __iconNode$1);
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M4 7l16 0", "key": "svg-0" }], ["path", { "d": "M10 11l0 6", "key": "svg-1" }], ["path", { "d": "M14 11l0 6", "key": "svg-2" }], ["path", { "d": "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12", "key": "svg-3" }], ["path", { "d": "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3", "key": "svg-4" }]];
+const IconTrash = createReactComponent("outline", "trash", "Trash", __iconNode);
 
 var $ = _export;
 var NativePromiseConstructor = promiseNativeConstructor;
@@ -85,9 +128,14 @@ if (isCallable(NativePromiseConstructor)) {
 }
 
 function CreateReport(props) {
-  const [name, setName] = useState('');
-  const [note, setNote] = useState('');
+  const [name, setName] = useState(props.initialName || '');
+  const [note, setNote] = useState(props.initialNote || '');
   const [loading, setLoading] = useState(false);
+  const isEditMode = props.mode === 'edit';
+  useEffect(() => {
+    if (props.initialName) setName(props.initialName);
+    if (props.initialNote) setNote(props.initialNote);
+  }, [props.initialName, props.initialNote]);
   const createReport = () => {
     if (!name) return;
     const command = {
@@ -116,22 +164,57 @@ function CreateReport(props) {
       setLoading(false);
     });
   };
+  const updateReport = () => {
+    if (!name || !props.reportId) return;
+    setLoading(true);
+    FluxoClientSys.Instance.reporting.updateReport(props.reportId, {
+      name: name,
+      annotations: note
+    }).then(() => {
+      var _a;
+      showNotification({
+        title: 'Report aggiornato',
+        message: 'Il report è stato aggiornato con successo',
+        color: 'teal'
+      });
+      (_a = props.onUpdated) === null || _a === void 0 ? void 0 : _a.call(props);
+    }).catch(err => {
+      showNotification({
+        title: 'Errore',
+        message: 'Si è verificato un errore durante l\'aggiornamento del report',
+        color: 'red'
+      });
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+  const handleSubmit = () => {
+    if (isEditMode) {
+      updateReport();
+    } else {
+      createReport();
+    }
+  };
   return jsxs(Stack, {
-    children: [jsxs(Text, {
-      children: [jsx("b", {
-        children: "Nome:"
-      }), " ", props.name]
-    }), jsxs(Text, {
-      children: [jsx("b", {
-        children: "Categoria:"
-      }), " ", props.scope, ".", props.packageName, ".", props.namespace, ".", props.id]
+    children: [!isEditMode && jsxs(Fragment, {
+      children: [jsxs(Text, {
+        children: [jsx("b", {
+          children: "Nome:"
+        }), " ", props.name]
+      }), jsxs(Text, {
+        children: [jsx("b", {
+          children: "Categoria:"
+        }), " ", props.scope, ".", props.packageName, ".", props.namespace, ".", props.id]
+      })]
     }), jsx(TextInput, {
       disabled: loading,
       label: 'Nome report',
+      value: name,
       onChange: v => setName(v.target.value)
     }), jsx(Textarea, {
       disabled: loading,
       label: 'Note',
+      value: note,
       onChange: v => setNote(v.target.value)
     }), jsxs(Group, {
       justify: 'right',
@@ -141,9 +224,9 @@ function CreateReport(props) {
         variant: 'subtle',
         children: "Annulla"
       }), jsx(Button, {
-        onClick: createReport,
+        onClick: handleSubmit,
         disabled: !name || loading,
-        children: "Crea"
+        children: isEditMode ? 'Salva' : 'Crea'
       })]
     })]
   });
@@ -152,32 +235,143 @@ function CreateReport(props) {
 function ReportsManager() {
   const [reportsList, setReportsList] = useState([]);
   const [loading, setLoading] = useState(true);
-  const navigate = useNavigate();
-  const [createReportModalOpened, setCreateReportModalOpened] = useState(false);
-  const [deleteReportModalOpened, setDeleteReportModalOpened] = useState(false);
-  const [currentId, setCurrentId] = useState();
-  const [currentScope, setCurrentScope] = useState('');
-  const [currentPackageName, setCurrentPackageName] = useState('');
-  const [currentNamespace, setCurrentNamespace] = useState('');
-  const [currentReportId, setCurrentReportId] = useState('');
-  const [currentReportTypeName, setCurrentReportTypeName] = useState('');
-  const [currentReportName, setCurrentReportName] = useState('');
+  useNavigate();
+  // Refactored state management
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [selectedReport, setSelectedReport] = useState(null);
+  const [selectedCategoryKey, setSelectedCategoryKey] = useState(null);
+  const [modals, setModals] = useState({
+    create: false,
+    delete: false,
+    edit: false,
+    reportEditor: false
+  });
+  const [editingReportId, setEditingReportId] = useState(null);
+  const [editingReport, setEditingReport] = useState(null);
+  const isClosingRef = useRef(false);
   useEffect(() => {
     refresh();
   }, []);
+  useEffect(() => {
+    // Auto-select first category when data loads
+    if (reportsList.length > 0 && !selectedCategoryKey) {
+      const firstCategory = reportsList[0];
+      setSelectedCategoryKey(`${firstCategory.scope}-${firstCategory.reportTypeId}`);
+    }
+  }, [reportsList, selectedCategoryKey]);
+  // Intercetta il refresh e il cambio tab del browser
+  useEffect(() => {
+    if (!modals.reportEditor) return;
+    const handleBeforeUnload = e => {
+      e.preventDefault();
+      e.returnValue = 'Sei sicuro di voler uscire? Le modifiche non salvate andranno perse.';
+      return e.returnValue;
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [modals.reportEditor]);
+  // Intercetta la navigazione nel router (back button del browser)
+  useEffect(() => {
+    if (!modals.reportEditor) return;
+    const handlePopState = () => {
+      if (!isClosingRef.current) {
+        const confirmExit = window.confirm('Sei sicuro di voler uscire dall\'editor? Le modifiche non salvate andranno perse.');
+        if (!confirmExit) {
+          window.history.pushState(null, '', window.location.href);
+        } else {
+          setModals(prev => Object.assign(Object.assign({}, prev), {
+            reportEditor: false
+          }));
+          setEditingReportId(null);
+        }
+      }
+    };
+    // Aggiungi uno stato alla history per intercettare il back button
+    window.history.pushState(null, '', window.location.href);
+    window.addEventListener('popstate', handlePopState);
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, [modals.reportEditor]);
   const refresh = () => {
     FluxoClientSys.Instance.reporting.getReportsList().then(res => {
       setReportsList(res);
       setLoading(false);
     });
   };
+  // Helper functions for modal management
+  const openCreateModal = category => {
+    setSelectedCategory(category);
+    setModals(prev => Object.assign(Object.assign({}, prev), {
+      create: true
+    }));
+  };
+  const closeCreateModal = () => {
+    setSelectedCategory(null);
+    setModals(prev => Object.assign(Object.assign({}, prev), {
+      create: false
+    }));
+  };
+  const openEditModal = (report, category) => {
+    setEditingReport({
+      id: report.id,
+      name: report.name,
+      annotations: report.annotations || '',
+      scope: category.scope,
+      packageName: category.packageName,
+      namespace: category.namespace,
+      reportTypeId: category.reportTypeId,
+      categoryName: category.name
+    });
+    setModals(prev => Object.assign(Object.assign({}, prev), {
+      edit: true
+    }));
+  };
+  const closeEditModal = () => {
+    setEditingReport(null);
+    setModals(prev => Object.assign(Object.assign({}, prev), {
+      edit: false
+    }));
+  };
+  const openDeleteModal = report => {
+    setSelectedReport(report);
+    setModals(prev => Object.assign(Object.assign({}, prev), {
+      delete: true
+    }));
+  };
+  const closeDeleteModal = () => {
+    setSelectedReport(null);
+    setModals(prev => Object.assign(Object.assign({}, prev), {
+      delete: false
+    }));
+  };
+  const openReportEditor = reportId => {
+    setEditingReportId(reportId);
+    setModals(prev => Object.assign(Object.assign({}, prev), {
+      reportEditor: true
+    }));
+  };
+  const handleCloseReportEditor = useCallback(() => {
+    const confirmClose = window.confirm('Sei sicuro di voler chiudere l\'editor? Le modifiche non salvate andranno perse.');
+    if (confirmClose) {
+      isClosingRef.current = true;
+      setModals(prev => Object.assign(Object.assign({}, prev), {
+        reportEditor: false
+      }));
+      setEditingReportId(null);
+      // Reset del flag dopo un breve delay
+      setTimeout(() => {
+        isClosingRef.current = false;
+      }, 100);
+    }
+  }, []);
   const deleteReport = () => {
-    if (!currentId) return;
-    FluxoClientSys.Instance.reporting.deleteReport(currentId).then(() => {
+    if (!(selectedReport === null || selectedReport === void 0 ? void 0 : selectedReport.id)) return;
+    FluxoClientSys.Instance.reporting.deleteReport(selectedReport.id).then(() => {
       showNotification({
         title: 'Report eliminato',
         message: 'Il report è stato eliminato con successo',
-        color: 'success'
+        color: 'green'
       });
       refresh();
     }).catch(() => {
@@ -187,105 +381,312 @@ function ReportsManager() {
         color: 'red'
       });
     }).finally(() => {
-      setDeleteReportModalOpened(false);
-      setCurrentId(undefined);
+      closeDeleteModal();
     });
   };
+  // Get currently selected category data
+  const getCurrentCategory = () => {
+    if (!selectedCategoryKey) return null;
+    return reportsList.find(cat => `${cat.scope}-${cat.reportTypeId}` === selectedCategoryKey);
+  };
+  const currentCategory = getCurrentCategory();
   return jsxs(ShellPage, {
     headerProps: {
       title: 'Reports'
     },
-    children: [loading ? jsx(Loader, {
-      size: 48,
-      style: {
-        margin: 'auto'
-      }
-    }) : jsx(Stack, {
-      children: reportsList.map(report => {
-        return jsx(DataCard, {
-          title: report.name,
-          actions: [{
-            label: 'Nuovo report',
-            icon: jsx(IconPlus, {
-              size: 18
+    children: [loading ? jsx(Stack, {
+      gap: "sm",
+      maw: 1280,
+      m: '0 auto',
+      children: [1, 2, 3].map(i => jsxs(Paper, {
+        p: "sm",
+        withBorder: true,
+        children: [jsxs(Group, {
+          justify: "space-between",
+          mb: "xs",
+          children: [jsx(Skeleton, {
+            height: 20,
+            width: 200
+          }), jsx(Skeleton, {
+            height: 16,
+            circle: true
+          })]
+        }), jsx(Skeleton, {
+          height: 32,
+          mt: "sm"
+        })]
+      }, i))
+    }) : reportsList.length === 0 ? jsx(Center, {
+      py: 60,
+      maw: 1280,
+      m: '0 auto',
+      children: jsxs(Stack, {
+        align: "center",
+        gap: "sm",
+        children: [jsx(IconFolder, {
+          size: 48,
+          stroke: 1.2,
+          style: {
+            opacity: 0.4
+          }
+        }), jsx(Text, {
+          size: "sm",
+          c: "dimmed",
+          children: "Nessuna categoria di report disponibile"
+        })]
+      })
+    }) : jsxs(Stack, {
+      gap: "sm",
+      maw: 1280,
+      m: '0 auto',
+      children: [jsx(Paper, {
+        p: "sm",
+        withBorder: true,
+        children: jsxs(Group, {
+          justify: "space-between",
+          align: "flex-end",
+          children: [jsx(Select, {
+            label: "Categoria",
+            placeholder: "Seleziona categoria",
+            value: selectedCategoryKey,
+            onChange: value => setSelectedCategoryKey(value),
+            data: reportsList.map(category => ({
+              value: `${category.scope}-${category.reportTypeId}`,
+              label: `${category.name} (${category.reports.length})`
+            })),
+            searchable: true,
+            clearable: true,
+            leftSection: jsx(IconFolder, {
+              size: 16
+            }),
+            style: {
+              flex: 1,
+              maxWidth: 400
+            },
+            size: "sm"
+          }), currentCategory && jsx(Button, {
+            size: "sm",
+            variant: "light",
+            leftSection: jsx(IconPlus, {
+              size: 16
             }),
-            onClick: () => {
-              setCurrentScope(report.scope);
-              setCurrentPackageName(report.packageName);
-              setCurrentNamespace(report.namespace);
-              setCurrentReportId(report.reportTypeId);
-              setCurrentReportTypeName(report.name);
-              setCreateReportModalOpened(true);
-            }
-          }],
-          children: jsxs(Stack, {
-            children: [report.reports.map((r, index) => {
-              return jsxs(Fragment, {
+            onClick: () => openCreateModal({
+              scope: currentCategory.scope,
+              packageName: currentCategory.packageName,
+              namespace: currentCategory.namespace,
+              reportTypeId: currentCategory.reportTypeId,
+              name: currentCategory.name
+            }),
+            children: "Nuovo report"
+          })]
+        })
+      }), currentCategory ? jsx(Paper, {
+        p: "sm",
+        withBorder: true,
+        children: jsxs(Stack, {
+          gap: "sm",
+          children: [jsx(Group, {
+            justify: "space-between",
+            mb: "xs",
+            children: jsxs(Group, {
+              gap: "xs",
+              children: [jsx(Text, {
+                size: "sm",
+                children: currentCategory.name
+              }), jsx(Badge, {
+                size: "sm",
+                variant: "dot",
+                color: currentCategory.reports.length > 0 ? 'blue' : 'gray',
+                children: currentCategory.reports.length
+              })]
+            })
+          }), currentCategory.reports.length === 0 ? jsx(Center, {
+            py: 40,
+            children: jsxs(Stack, {
+              align: "center",
+              gap: "sm",
+              children: [jsx(IconReport, {
+                size: 40,
+                stroke: 1.2,
+                style: {
+                  opacity: 0.4
+                }
+              }), jsx(Text, {
+                size: "sm",
+                c: "dimmed",
+                children: "Nessun report"
+              }), jsx(Button, {
+                size: "xs",
+                variant: "light",
+                leftSection: jsx(IconPlus, {
+                  size: 14
+                }),
+                onClick: () => openCreateModal({
+                  scope: currentCategory.scope,
+                  packageName: currentCategory.packageName,
+                  namespace: currentCategory.namespace,
+                  reportTypeId: currentCategory.reportTypeId,
+                  name: currentCategory.name
+                }),
+                children: "Crea report"
+              })]
+            })
+          }) : jsx(Stack, {
+            gap: 8,
+            children: currentCategory.reports.map(report => jsx(Paper, {
+              p: "xs",
+              withBorder: true,
+              style: {
+                cursor: 'pointer'
+              },
+              onClick: () => openReportEditor(report.id),
+              children: jsxs(Group, {
+                justify: "space-between",
                 children: [jsxs(Group, {
-                  justify: 'space-between',
-                  children: [jsxs(Group, {
-                    children: [jsx(IconReport, {
-                      color: 'gray',
-                      size: 18
-                    }), jsx(Text, {
-                      fw: 600,
-                      size: 'md',
-                      children: r.name
-                    })]
-                  }), jsxs(Group, {
-                    children: [jsx(Button, {
-                      onClick: () => navigate(r.id.toString(), {
-                        state: {
-                          title: `Report/${r.name}`
-                        }
+                  gap: "sm",
+                  children: [jsx(IconReport, {
+                    size: 16,
+                    style: {
+                      opacity: 0.6
+                    }
+                  }), jsx(Text, {
+                    size: "sm",
+                    children: report.name
+                  })]
+                }), jsxs(Menu, {
+                  shadow: "sm",
+                  width: 160,
+                  position: "bottom-end",
+                  children: [jsx(Menu.Target, {
+                    children: jsx(ActionIcon, {
+                      variant: "subtle",
+                      color: "gray",
+                      size: "sm",
+                      onClick: e => e.stopPropagation(),
+                      children: jsx(IconDotsVertical, {
+                        size: 16
+                      })
+                    })
+                  }), jsxs(Menu.Dropdown, {
+                    children: [jsx(Menu.Item, {
+                      leftSection: jsx(IconEdit, {
+                        size: 14
                       }),
-                      size: 'xs',
+                      onClick: e => {
+                        e.stopPropagation();
+                        openEditModal(report, currentCategory);
+                      },
                       children: "Modifica"
-                    }), jsx(Button, {
-                      onClick: () => {
-                        setCurrentId(r.id);
-                        setCurrentReportName(r.name);
-                        setDeleteReportModalOpened(true);
+                    }), jsx(Menu.Item, {
+                      leftSection: jsx(IconExternalLink, {
+                        size: 14
+                      }),
+                      onClick: e => {
+                        e.stopPropagation();
+                        openReportEditor(report.id);
+                      },
+                      children: "Apri designer"
+                    }), jsx(Menu.Item, {
+                      leftSection: jsx(IconTrash, {
+                        size: 14
+                      }),
+                      color: "red",
+                      onClick: e => {
+                        e.stopPropagation();
+                        openDeleteModal({
+                          id: report.id,
+                          name: report.name
+                        });
                       },
-                      size: 'xs',
-                      color: 'red',
                       children: "Elimina"
                     })]
                   })]
-                }), index !== report.reports.length - 1 && jsx(Divider, {})]
-              });
-            }), report.reports.length === 0 && jsx(Center, {
-              children: jsx(Text, {
-                size: 'md',
-                children: "Nessun report per la categoria"
+                })]
               })
-            })]
+            }, report.id))
+          })]
+        })
+      }) : jsx(Paper, {
+        p: "sm",
+        withBorder: true,
+        children: jsx(Center, {
+          py: 30,
+          children: jsx(Text, {
+            size: "sm",
+            c: "dimmed",
+            children: "Seleziona una categoria"
           })
-        });
-      })
+        })
+      })]
     }), jsx(Modal, {
-      title: 'Nuovo report',
+      title: "Nuovo report",
       centered: true,
-      opened: createReportModalOpened,
-      onClose: () => setCreateReportModalOpened(false),
-      children: jsx(CreateReport, {
-        name: currentReportTypeName,
-        scope: currentScope,
-        packageName: currentPackageName,
-        namespace: currentNamespace,
-        id: currentReportId,
+      opened: modals.create,
+      onClose: closeCreateModal,
+      size: "sm",
+      children: selectedCategory && jsx(CreateReport, {
+        name: selectedCategory.name,
+        scope: selectedCategory.scope,
+        packageName: selectedCategory.packageName,
+        namespace: selectedCategory.namespace,
+        id: selectedCategory.reportTypeId,
         onCreated: newReportId => {
-          setCreateReportModalOpened(false);
-          navigate(newReportId.toString());
+          closeCreateModal();
+          refresh();
+          openReportEditor(newReportId);
+        },
+        onCancel: closeCreateModal
+      })
+    }), jsx(Modal, {
+      title: "Modifica report",
+      centered: true,
+      opened: modals.edit,
+      onClose: closeEditModal,
+      size: "sm",
+      children: editingReport && jsx(CreateReport, {
+        mode: "edit",
+        reportId: editingReport.id,
+        initialName: editingReport.name,
+        initialNote: editingReport.annotations,
+        name: editingReport.categoryName,
+        scope: editingReport.scope,
+        packageName: editingReport.packageName,
+        namespace: editingReport.namespace,
+        id: editingReport.reportTypeId,
+        onCreated: () => {},
+        onUpdated: () => {
+          closeEditModal();
+          refresh();
         },
-        onCancel: () => setCreateReportModalOpened(false)
+        onCancel: closeEditModal
       })
     }), jsx(ConfirmModal, {
-      open: deleteReportModalOpened,
-      onButtonConfirmClick: () => deleteReport(),
-      onButtonCancelClick: () => setDeleteReportModalOpened(true),
-      title: 'Elimina report',
-      messageText: `Sei sicuro di voler eliminare il report ${currentReportName}?`
+      open: modals.delete,
+      onButtonConfirmClick: deleteReport,
+      onButtonCancelClick: closeDeleteModal,
+      title: "Elimina report",
+      messageText: `Sei sicuro di voler eliminare il report "${selectedReport === null || selectedReport === void 0 ? void 0 : selectedReport.name}"?`
+    }), jsx(Modal, {
+      title: "Editor Report",
+      styles: {
+        header: {
+          marginBottom: 0,
+          boxShadow: 'rgba(33, 33, 33, 0.1) 2px 1px 1px',
+          minHeight: 48,
+          padding: 8
+        }
+      },
+      padding: 0,
+      closeOnEscape: false,
+      closeOnClickOutside: false,
+      withCloseButton: true,
+      opened: modals.reportEditor,
+      fullScreen: true,
+      onClose: handleCloseReportEditor,
+      children: editingReportId && jsx(ReportDesigner, {
+        mode: "designer",
+        reportId: editingReportId
+      })
     })]
   });
 }