change

.flutter-plugins

@@ -1,19 +1,16 @@
 # This is a generated file; do not edit or check into version control.
-desktop_window=/home/mr/.pub-cache/hosted/pub.dev/desktop_window-0.4.0/
-device_info_plus=/home/mr/.pub-cache/hosted/pub.dev/device_info_plus-10.1.0/
+desktop_window=/home/mr/.pub-cache/hosted/pub.dev/desktop_window-0.4.1/
+device_info_plus=/home/mr/.pub-cache/hosted/pub.dev/device_info_plus-10.1.2/
 irondash_engine_context=/home/mr/.pub-cache/hosted/pub.dev/irondash_engine_context-0.5.4/
-path_provider=/home/mr/.pub-cache/hosted/pub.dev/path_provider-2.1.3/
+path_provider=/home/mr/.pub-cache/hosted/pub.dev/path_provider-2.1.4/
 path_provider_android=/home/mr/.pub-cache/hosted/pub.dev/path_provider_android-2.2.4/
 path_provider_foundation=/home/mr/.pub-cache/hosted/pub.dev/path_provider_foundation-2.4.0/
 path_provider_linux=/home/mr/.pub-cache/hosted/pub.dev/path_provider_linux-2.2.1/
-path_provider_windows=/home/mr/.pub-cache/hosted/pub.dev/path_provider_windows-2.2.1/
+path_provider_windows=/home/mr/.pub-cache/hosted/pub.dev/path_provider_windows-2.3.0/
 shared_preferences=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences-2.2.3/
 shared_preferences_android=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_android-2.2.2/
-shared_preferences_foundation=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_foundation-2.4.0/
-shared_preferences_linux=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_linux-2.3.2/
-shared_preferences_web=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_web-2.3.0/
-shared_preferences_windows=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_windows-2.3.2/
-super_native_extensions=/home/mr/.pub-cache/hosted/pub.dev/super_native_extensions-0.8.17/
-webview_flutter=/home/mr/.pub-cache/hosted/pub.dev/webview_flutter-4.8.0/
-webview_flutter_android=/home/mr/.pub-cache/hosted/pub.dev/webview_flutter_android-3.16.3/
-webview_flutter_wkwebview=/home/mr/.pub-cache/hosted/pub.dev/webview_flutter_wkwebview-3.14.0/
+shared_preferences_foundation=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_foundation-2.5.3/
+shared_preferences_linux=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_linux-2.4.1/
+shared_preferences_web=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_web-2.4.1/
+shared_preferences_windows=/home/mr/.pub-cache/hosted/pub.dev/shared_preferences_windows-2.4.1/
+super_native_extensions=/home/mr/.pub-cache/hosted/pub.dev/super_native_extensions-0.8.19/

.gitignore

@@ -8,6 +8,7 @@
 .buildlog/
 .history
 .svn/
+build/
 migrate_working_dir/
 
 # IntelliJ related

Dockerfile

@@ -5,15 +5,17 @@ FROM debian:latest AS build-env
 RUN apt-get update
 RUN apt-get install -y curl git unzip
 
-ARG WORKSPACE_HOST="https://localhost:8089"
-ARG WORKFLOW_HOST="https://localhost:8088"
-ARG SEARCH_HOST="https://localhost:49618"
-ARG ITEM_HOST="https://localhost:8087"
-ARG SCHEDULER_HOST="http://localhost:8090"
+ARG WORKSPACE_HOST="http://localhost:8089/oc"
+ARG WORKFLOW_HOST="http://localhost:8088/oc"
+ARG ITEM_HOST="http://localhost:8087/oc"
+ARG SCHEDULER_HOST="http://localhost:8090/oc"
 ARG LOGS_HOST="http://localhost:3100"
-
+ARG PEER_HOST="http://localhost:8093/oc"
+ARG DATACENTER_HOST="http://localhost:8092/oc"
+ARG COLLABORATIVE_AREA_HOST="http://localhost:8091/oc"
+ARG AUTH_MODE=true
 # define variables
-ARG FLUTTER_SDK=/usr/local/flutter
+ARG FLUTTER_SDK=/usr/local/flutter 
 ARG FLUTTER_VERSION=3.19.6
 ARG APP=/app/
 
@@ -40,10 +42,15 @@ WORKDIR $APP
 RUN flutter clean
 RUN flutter pub get
 RUN flutter build web \ 
+    --dart-define=AUTH_MODE=$AUTH_MODE \
     --dart-define=WORKSPACE_HOST=$WORKSPACE_HOST \
     --dart-define=WORKFLOW_HOST=$WORKFLOW_HOST \
-    --dart-define=SEARCH_HOST=$SEARCH_HOST \
-    --dart-define=ITEM_HOST=$ITEM_HOST 
+    --dart-define=PEER_HOST=$PEER_HOST \
+    --dart-define=COLLABORATIVE_AREA_HOST=$COLLABORATIVE_AREA_HOST \
+    --dart-define=SCHEDULER_HOST=$SCHEDULER_HOST \
+    --dart-define=LOGS_HOST=$LOGS_HOST \
+    --dart-define=ITEM_HOST=$ITEM_HOST \
+    --dart-define=DATACENTER_HOST=$DATACENTER_HOST
 # once heare the app will be compiled and ready to deploy
 
 # use nginx to deploy

README.md

@@ -43,4 +43,7 @@ At the root of the project :
     - `docker build . -t oc-front` 
     if localisation services change : `docker build -t oc-front --build-arg WORKSPACE_HOST=<SERVICE URL> --build-arg WORKFLOW_HOST=<SERVICE URL> --build-arg SEARCH_HOST=<SERVICE URL> --build-arg ITEM_HOST=<SERVICE URL> .`
 
-    - `docker-compose up -d --build --force-recreate` 
+    - `docker-compose up -d --build --force-recreate` 
+
+## HELP
+sudo apt install libwebkit2gtk-4.0-dev

lib/core/models/shared_workspace_local.dart

@@ -13,35 +13,35 @@ class WorkSpaceItem {
   WorkSpaceItem({this.id, this.name});
 }
 
-class SharedWorkspaceLocal {
+class CollaborativeAreaLocal {
   static String? current;
-  static Map<String, SharedWorkspace> workspaces = {};
+  static Map<String, CollaborativeArea> workspaces = {};
   static final SharedService _service = SharedService();
 
-  static void init(BuildContext context, bool changeCurrent) {
-    _service.all(context).then((value) {
+  static Future<void> init(BuildContext context, bool changeCurrent) async {
+      await _service.all(context).then((value) {
       if (value.data != null && value.data!.values.isNotEmpty ) {
         var vals = value.data!.values;
         for (var element in vals) {
-          var ws = SharedWorkspace().deserialize(element);
+          var ws = CollaborativeArea().deserialize(element);
           if (ws.id == null) { continue; }
           workspaces[ws.id!] = ws;
         }
       }
-    });
+    }).catchError((e) => print(e));    
   }
 
-  static SharedWorkspace? getSharedWorkspace(String id) {
+  static CollaborativeArea? getCollaborativeArea(String id) {
     return workspaces[id];
   }
 
-  static Future<void> deleteSharedWorkspace(String id) async {
+  static Future<void> deleteCollaborativeArea(String id) async {
     if (workspaces.containsKey(id) && workspaces.length == 1) { return; }
     workspaces.remove(id);
     await _service.delete(null, id, {});
   }
 
-  static Future<void> createSharedWorkspace(String name, BuildContext? context) async {
+  static Future<void> createCollaborativeArea(BuildContext context, String name) async {
     Workspace n = Workspace(name: name);
     await _service.post(context, n.serialize(), {}).then((value) {
       if (value.data != null) {
@@ -67,7 +67,7 @@ class SharedWorkspaceLocal {
     WorkflowFactory.key.currentState?.setState(() {});
   }
 
-  static List<WorkSpaceItem> getSharedWorkspacesIDS() {
+  static List<WorkSpaceItem> getCollaborativeAreasIDS() {
     List<WorkSpaceItem> res = [];
     for (var element in workspaces.entries) {
       res.add(WorkSpaceItem(id: element.key, name: element.value.name));

lib/core/models/workspace_local.dart

@@ -1,8 +1,13 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_flow_chart/flutter_flow_chart.dart';
 import 'package:oc_front/core/sections/end_drawer.dart';
+import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/data.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/resources/storage.dart';
+import 'package:oc_front/models/resources/workflow.dart';
 import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/search.dart';
 import 'package:oc_front/models/workspace.dart';
 import 'package:oc_front/core/services/specialized_services/workspace_service.dart';
 import 'package:oc_front/pages/catalog.dart';
@@ -21,29 +26,28 @@ class WorkspaceLocal {
   static final WorkspaceService _service = WorkspaceService();
   static List<AbstractItem> items = [];
 
-  static void init(BuildContext context, bool changeCurrent) {
-    _service.all(context).then((value) {
-      if (value.data != null && value.data!.values.isNotEmpty ) {
-        var vals = value.data!.values;
-        for (var element in vals) {
-          var ws = Workspace().deserialize(element);
-          if (ws.id == null) { continue; }
-          workspaces[ws.id!] = ws;
-          if (current == null) {
-            current ??= ws.id;
-            workspaces[current!] = ws; 
-            _service.put(context, ws.id!, { "active" : true }, {});
-          }
-          if (ws.active == true && changeCurrent) {
-            current = ws.id;
-          }
-          fill();      
+  static Future<void> init(BuildContext? context, bool changeCurrent) async {
+    var value = await _service.all(context);
+    if (value.data != null && value.data!.values.isNotEmpty ) {
+      var vals = value.data!.values;
+      for (var element in vals) {
+        var ws = Workspace().deserialize(element);
+        if (ws.id == null) { continue; }
+        workspaces[ws.id!] = ws;
+        if (current == null) {
+          current ??= ws.id;
+          workspaces[current!] = ws; 
+          _service.put(context, ws.id!, { "active" : true }, {});
         }
-      } else {
-        WorkspaceLocal.createWorkspace("main", null);
+        if (ws.active == true && changeCurrent) {
+          current = ws.id;
+        }
+        fill();      
+        HeaderConstants.headerKey.currentState?.setState(() {});
       }
-      print("qsdqsd $current");
-    });
+    } else {
+      await WorkspaceLocal.createWorkspace("default workspace", null);
+    }
   }
 
   static void fill() {
@@ -56,7 +60,7 @@ class WorkspaceLocal {
               for (var element in workspaces[current]!.processings) { 
                 if (WorkspaceLocal.hasItemByID(element.getID())) { continue; }
                 items.add(element);  } 
-              for (var element in workspaces[current]!.datacenters) { 
+              for (var element in workspaces[current]!.computes) { 
                 if (WorkspaceLocal.hasItemByID(element.getID())) { continue; }
                 items.add(element);
               }
@@ -75,6 +79,13 @@ class WorkspaceLocal {
     return workspaces[current];
   }
 
+  static bool hasWorkspace(String workspaceName) {
+    for (var element in workspaces.values) {
+      if (element.name == workspaceName) { return true; }
+    }
+    return false;
+  }
+
   static Future<void> deleteWorkspace(String id) async {
     if (workspaces.containsKey(id) && workspaces.length == 1) { return; }
     workspaces.remove(id);
@@ -90,29 +101,36 @@ class WorkspaceLocal {
         current = value.data!.id;
         fill();
         endDrawerKey.currentState?.setState(() {});
-    CatalogFactory.key.currentState?.setState(() {});
-    CatalogItemFactory.key.currentState?.setState(() {});
-    WorkflowFactory.key.currentState?.setState(() {});
+        CatalogFactory.key.currentState?.setState(() {});
+        CatalogItemFactory.key.currentState?.setState(() {});
+        WorkflowFactory.key.currentState?.setState(() {});
+        HeaderConstants.headerKey.currentState?.setState(() {});
       }
     });
   }
 
   static void changeWorkspaceByName(String name) {
-    var id = workspaces.entries.firstWhere((element) => element.value.name == "${name}_workspace").key;  
-    changeWorkspace(id);
+    try {
+      var id = workspaces.entries.firstWhere((element) => element.value.name == "${name}_workspace").key;  
+      changeWorkspace(id);
+    } catch (e) {} 
   }
 
   static void changeWorkspace(String id) {
-    print("WORKSPACES ID $id");
     _service.put(null, id, { "active" : true }, {});
     current = id;
     fill();
+    HeaderConstants.headerKey.currentState?.setState(() {});
     endDrawerKey.currentState?.setState(() {});
     CatalogFactory.key.currentState?.setState(() {});
     CatalogItemFactory.key.currentState?.setState(() {});
     WorkflowFactory.key.currentState?.setState(() {});
   }
 
+  static String getWorkspaceName(String id) {
+    return workspaces[id]?.name ?? "";
+  }
+
   static List<WorkSpaceItem> getWorkspacesIDS() {
     List<WorkSpaceItem> res = [];
     for (var element in workspaces.entries) {
@@ -130,10 +148,10 @@ class WorkspaceLocal {
   }
 
   static List<AbstractItem> byWorkspace(String id) {
-    List<AbstractItem<FlowData>> d = [];
+    List<AbstractItem> d = [];
     var w = workspaces[id]!;
     d = [ ...d, ...w.datas.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
-    d = [ ...d, ...w.datacenters.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
+    d = [ ...d, ...w.computes.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
     d = [ ...d, ...w.processings.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
     d = [ ...d, ...w.storages.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
     d = [ ...d, ...w.workflows.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
@@ -142,10 +160,10 @@ class WorkspaceLocal {
   
   static List<AbstractItem> byTopic(String topic, bool all) {
     if (all) {
-      List<AbstractItem<FlowData>> d = [];
+      List<AbstractItem> d = [];
       for (var w in workspaces.values) {
         d = [ ...d, ...w.datas.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
-        d = [ ...d, ...w.datacenters.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
+        d = [ ...d, ...w.computes.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
         d = [ ...d, ...w.processings.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
         d = [ ...d, ...w.storages.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
         d = [ ...d, ...w.workflows.where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
@@ -157,10 +175,10 @@ class WorkspaceLocal {
 
   static AbstractItem? getItem(String id, bool all) {
     if (all) {
-      List<AbstractItem<FlowData>> d = [];
+      List<AbstractItem> d = [];
       for (var w in workspaces.values) {
         d = [ ...d, ...w.datas.where((element) => element.id.toString() == id).where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
-        d = [ ...d, ...w.datacenters.where((element) => element.id.toString() == id).where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
+        d = [ ...d, ...w.computes.where((element) => element.id.toString() == id).where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
         d = [ ...d, ...w.processings.where((element) => element.id.toString() == id).where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
         d = [ ...d, ...w.storages.where((element) => element.id.toString() == id).where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
         d = [ ...d, ...w.workflows.where((element) => element.id.toString() == id).where((element) => !d.map( (d2) => d2.id).contains(element.id)) ];
@@ -175,25 +193,29 @@ class WorkspaceLocal {
     if (!WorkspaceLocal.hasItem(item) && workspaces[current] != null && workspaces[current]!.id != null) { 
       items.add(item); 
       if (item.topic == "data") { workspaces[current]!.datas.add(item as DataItem); }
-      if (item.topic == "processing") { workspaces[current]!.processings.add(item as ProcessingItem); }
-      if (item.topic == "datacenter") { workspaces[current]!.datacenters.add(item as DataCenterItem); }
+      if (item.topic == "processing") {  workspaces[current]!.processings.add(item as ProcessingItem); }
+      if (item.topic == "compute") { workspaces[current]!.computes.add(item as ComputeItem); }
       if (item.topic == "storage") { workspaces[current]!.storages.add(item as StorageItem); }
       if (item.topic == "workflow") { workspaces[current]!.workflows.add(item as WorkflowItem); }
-      try { _service.put(null, workspaces[current]!.id!, workspaces[current]!.serialize(), {});
-      } catch (e) { /* */ }
-      _service.put(null, item.id ?? "", workspaces[current]!.serialize(), {});
+      try { 
+        _service.put(null, workspaces[current]!.id!, workspaces[current]!.serialize(), {});
+      } catch (e) { 
+        _service.put(null, item.id ?? "", workspaces[current]!.serialize(), {});
+      }
     }
   }
   static void removeItem(AbstractItem item) {
     items = items.where((element) => element.name != item.name).toList();
     if (item.topic == "data") { workspaces[current]!.datas.removeWhere( (e) => e.id == item.id); }
     if (item.topic == "processing") { workspaces[current]!.processings.removeWhere( (e) => e.id == item.id); }
-    if (item.topic == "datacenter") { workspaces[current]!.datacenters.removeWhere( (e) => e.id == item.id); }
+    if (item.topic == "compute") { workspaces[current]!.computes.removeWhere( (e) => e.id == item.id); }
     if (item.topic == "storage") { workspaces[current]!.storages.removeWhere( (e) => e.id == item.id); }
     if (item.topic == "workflow") { workspaces[current]!.workflows.removeWhere( (e) => e.id == item.id); }
-    try { _service.put(null, workspaces[current]!.id!, workspaces[current]!.serialize(), {});
-    } catch (e) { /* */ }
-     _service.put(null, item.id ?? "", workspaces[current]!.serialize(), {});
+    try { 
+      _service.put(null, workspaces[current]!.id!, workspaces[current]!.serialize(), {});
+    } catch (e) { 
+      _service.put(null, item.id ?? "", workspaces[current]!.serialize(), {});
+    }
   }
   static bool hasItemByID(String id) { 
     return items.where((element) => element.id == id).isNotEmpty;

lib/core/sections/end_drawer.dart

@@ -1,14 +1,14 @@
+import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
-import 'package:oc_front/core/models/shared_workspace_local.dart';
-import 'package:oc_front/core/services/specialized_services/shared_service.dart';
-import 'package:oc_front/core/services/specialized_services/workspace_service.dart';
-import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/search.dart';
-import 'package:oc_front/pages/catalog.dart';
-import 'package:oc_front/core/models/workspace_local.dart';
 import 'package:oc_front/pages/shared.dart';
+import 'package:oc_front/pages/catalog.dart';
 import 'package:oc_front/widgets/items/item_row.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
+import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
+import 'package:oc_front/core/models/shared_workspace_local.dart';
 import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
+import 'package:oc_front/core/services/specialized_services/workspace_service.dart';
 
 GlobalKey<EndDrawerWidgetState> endDrawerKey = GlobalKey<EndDrawerWidgetState>();
 class EndDrawerWidget extends StatefulWidget {
@@ -24,12 +24,12 @@ class EndDrawerWidgetState extends State<EndDrawerWidget> {
       Container( 
         color: Colors.white,
         width: 400,
-          height: MediaQuery.of(context).size.height,
+        height: getHeight(context),
         child: Column( children: [
             Container( 
               width: 400,
               height: 50,
-              decoration: const BoxDecoration(color: Color.fromRGBO(38, 166, 154, 1)),
+              decoration: BoxDecoration(color: lightColor ),
               child: const Center( 
                 child: Row( mainAxisAlignment: MainAxisAlignment.center,
                   children: [
@@ -41,52 +41,61 @@ class EndDrawerWidgetState extends State<EndDrawerWidget> {
             ),
             ShallowDropdownInputWidget(
                 current: WorkspaceLocal.current,
+                filled: Colors.white,
                 width: 400,
                 all: () async => WorkspaceLocal.getWorkspacesShallow(),
                 canRemove: (p0) => p0 != null,
                 remove: (p0) async {
                   await WorkspaceService().delete(context, p0, {}).then( (e) => WorkspaceLocal.deleteWorkspace(p0));
                 },
-                type: SharedWorkspaceType.workspace,
+                type: CollaborativeAreaType.workspace,
                 change: (String? change) {
                   WorkspaceLocal.changeWorkspace(change.toString());
                 }
             ),
+            Container(
+              width: 400,
+              height: 40,
+              decoration: BoxDecoration(
+                color: Colors.white,
+                border: Border(bottom: BorderSide(color: midColor), top: BorderSide(color: midColor)),
+              ),
+              child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                Padding(padding: EdgeInsets.only(right: 5), child: Icon(Icons.share, size: 12, color: Colors.grey)),
+                Text(  (WorkspaceLocal.workspaces[WorkspaceLocal.current]?.shared) == null ? 
+                  "actually not shared" : "share with ${CollaborativeAreaLocal.workspaces[WorkspaceLocal.workspaces[WorkspaceLocal.current]!.shared!]}",
+                style: TextStyle( fontSize: 14, color: Colors.grey ),),
+              ]),
+            ),
             Column( children: [
-            itemRows.isEmpty ? Container( height: MediaQuery.of(context).size.height - 100, 
-              color: Colors.grey.shade300,
-              child: const Center(child: Text("WORKSPACE IS EMPTY", 
-                style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600, color: Colors.white)))) 
-            : Container( height: MediaQuery.of(context).size.height - 100,  child: SingleChildScrollView(
+            itemRows.isEmpty ? Container( height: getHeight(context) - 140, 
+              color: Colors.white,
+              child: Center(child: Text("WORKSPACE IS EMPTY", 
+                style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600, color: midColor)))) 
+            : Container( height: getHeight(context) - 140,  child: SingleChildScrollView(
               scrollDirection: Axis.vertical,
               child: Column( children: [ ...itemRows, Container(height: 50)])
             )),
             ])
           ])
         ), 
-      itemRows.isEmpty ? Container() : Positioned( bottom: 0, left: 0, 
-        child: ShallowDropdownInputWidget(
-          type: SharedWorkspaceType.workspace,
-            all: () async => SharedWorkspaceLocal.workspaces.values.map( 
-              (e) => Shallow(id: e.id ?? "", name: e.name ?? "") ).toList(),
-            current: WorkspaceLocal.workspaces[WorkspaceLocal.current]?.shared,
-            width: 400,
-            filled:  Colors.grey.shade300,
-            hintColor: Colors.grey,
-            color: Colors.black,
-            canLoad: (String? change) => SharedWorkspaceLocal.workspaces[change] == null 
-              || !SharedWorkspaceLocal.workspaces[change]!.workspaces.map( (e) => e.id ).contains(WorkspaceLocal.current),
-            canRemove: (String? change) => SharedWorkspaceLocal.workspaces[change] == null 
-            || SharedWorkspaceLocal.workspaces[change]!.workspaces.map( (e) => e.id ).contains(WorkspaceLocal.current), 
-            load: (String val) async {
-              await SharedService().addWorkspace(context, val, WorkspaceLocal.current ?? "");
-              SharedWorkspaceLocal.init(context, false);
-            },
-            remove: (String val) async {
-              await SharedService().removeWorkspace(context, val, WorkspaceLocal.current ?? "");
-              SharedWorkspaceLocal.init(context, false);
-            })
-          )
+      Positioned( bottom: 0, left: 0, 
+        child: Tooltip( message: "create workspace", child: ShallowTextInputWidget(
+                width: 400,
+                tooltipLoad: "create workspace",
+                iconLoad: Icons.create_new_folder_sharp,
+                type: CollaborativeAreaType.workspace,
+                color: Colors.white,
+                filled: midColor,
+                hint: "enter workspace name",
+                hintColor: Colors.grey,
+                canLoad: (String? remove) => remove != null,
+                load: (Map<String?, dynamic> add) async {
+                  if (add["name"] == null) { return; }
+                  WorkspaceLocal.createWorkspace(add["name"], context);
+                },
+            ),
+          ))
       ]
     );
   }

lib/core/sections/header/default.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/core/services/perms_service.dart';
+import 'package:oc_front/core/services/router.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/pages/shared.dart';
+import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
+
+class DefaultWidget extends StatefulWidget{
+  const DefaultWidget (): super(key: null);
+  @override DefaultWidgetState createState() => DefaultWidgetState();
+}
+class DefaultWidgetState extends State<DefaultWidget> {
+
+  @override Widget build(BuildContext context) {
+    return Container(
+      width: getMainWidth(context),
+      height: getHeight(context) - 50,
+      color: midColor,
+      padding: EdgeInsets.only(top: 50),
+      child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: getMainHeight(context) < 600 ? MainAxisAlignment.center : MainAxisAlignment.start,  
+          children: [ getMainHeight(context) < 600 ? Container() : Container(
+              margin: EdgeInsets.only(left: 40), 
+              child:  SvgPicture.asset("assets/images/logo.svg", width: 300, height: (getMainHeight(context) / (1.8) ), semanticsLabel: 'OpenCloud Logo')
+            ),
+          ShallowTextInputWidget(
+                    alignment: MainAxisAlignment.center,
+                    width: getMainWidth(context) / 1.5,
+                    type: CollaborativeAreaType.workspace,
+                    hint: "search in resources...",
+                    iconLoad: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? Icons.search : null,
+                    iconRemove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? Icons.screen_search_desktop_outlined : null,
+                    tooltipLoad: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? "search" : null,
+                    tooltipRemove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? "distributed search" : null,
+                    canLoad: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? (String? str) => str != null && str.isNotEmpty : null,
+                    canRemove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? (String? str) => str != null && str.isNotEmpty : null,
+                    change: (value) => SearchConstants.set(value),
+                    loadStr: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? (String val) async {
+                      AppRouter.currentRoute.factory.search(context, false); 
+                    } : null,
+                    remove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? (String val) async {
+                      AppRouter.currentRoute.factory.search(context, true); 
+                    } : null,
+          )
+        ])
+    );
+  }
+}

lib/core/sections/header/header.dart

@@ -1,11 +1,32 @@
 import 'package:flutter/material.dart';
+import 'package:localstorage/localstorage.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
+import 'package:oc_front/core/sections/header/default.dart';
 import 'package:oc_front/core/sections/header/menu.dart';
-import 'package:oc_front/core/sections/header/search.dart';
+import 'package:oc_front/core/services/perms_service.dart';
 import 'package:oc_front/core/services/router.dart';
-import 'package:oc_front/widgets/menus/clipper_menu.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/pages/shared.dart';
+import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
+import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
+
+class SearchConstants {
+  static final Map<String, String?> _searchHost = {};
+  static String? get() { return _searchHost[AppRouter.currentRoute.route]; }
+  static void set(String? search) { _searchHost[AppRouter.currentRoute.route] = search; }
+  static void remove() { _searchHost.remove(AppRouter.currentRoute.route); }
+  static void clear() { 
+    localStorage.setItem("search", "");
+    _searchHost.clear(); 
+  }
+}
 
 class HeaderConstants {
+  static GlobalKey<HeaderMenuWidgetState> headerKey = GlobalKey<HeaderMenuWidgetState>();
   static final List<RouterItem> noHeader = [
+    AppRouter.scheduler,
+    AppRouter.compute,
+    AppRouter.shared,
     AppRouter.workflowItem,
     AppRouter.workflowIDItem,
   ];
@@ -14,14 +35,23 @@ class HeaderConstants {
   static String? title;
   static String? description;
 
+  static getKey() {
+    headerKey = GlobalKey<HeaderMenuWidgetState>();
+    return headerKey;
+  }
+
   static setTitle(String? v) {
     title = v;
-    HeaderConstants.headerWidget?.setState(() {});
+    Future.delayed(Duration(milliseconds: 100), () {
+      HeaderConstants.headerWidget?.setState(() {});
+    });
   }
 
   static setDescription(String? v) {
     description = v;
-    HeaderConstants.headerWidget?.setState(() {});
+    Future.delayed(Duration(milliseconds: 100), () {
+      HeaderConstants.headerWidget?.setState(() {});
+    });
   }
 
   static bool isNoHeader(String route) {
@@ -30,17 +60,81 @@ class HeaderConstants {
 }
 
 class HeaderWidget extends StatefulWidget {
-  HeaderWidget () : super(key: null);
+  const HeaderWidget () : super(key: null);
   @override HeaderWidgetState createState() => HeaderWidgetState();
 }
 class HeaderWidgetState extends State<HeaderWidget> {
   @override Widget build(BuildContext context) {
     HeaderConstants.headerWidget = this;
-    headerMenuKey.currentState?.closeMenu();
-    HeaderConstants.height = HeaderConstants.isNoHeader(AppRouter.currentRoute.route) ? 50 : 200;
+    if (HeaderConstants.isNoHeader(AppRouter.currentRoute.route)) {
+      return Container();
+    }
+    if (AppRouter.currentRoute.factory.searchFill()) {
+      return DefaultWidget();
+    }
+    HeaderConstants.height = HeaderConstants.isNoHeader(AppRouter.currentRoute.route) || !AppRouter.currentRoute.factory.searchFill() ? 50 : 100;
     return Column( children: [
-      const HeaderMenuWidget(),
-      HeaderConstants.isNoHeader(AppRouter.currentRoute.route) ? Container() : SearchWidget()
+      AppRouter.currentRoute.factory.searchFill() ? Container() : Container( 
+        height: 50, width: getMainWidth(context),
+        decoration: BoxDecoration(
+          color: midColor,
+          border: Border(bottom: BorderSide(color: Colors.white, width: 1),)
+        ),
+        child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, 
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              InkWell( onTap: () {
+                  AppRouter.currentRoute.factory.back(context);
+                },
+                child:
+                  Container(width: 50, height: 50, 
+                    color: Colors.black,
+                    child: Center(child: Icon(Icons.keyboard_backspace, color: Colors.white))
+                  ),
+              ),
+                ShallowTextInputWidget(
+                  filled: midColor,
+                  current: AppRouter.currentRoute.factory.getSearch(),
+                  width: getMainWidth(context) - 501,
+                  type: CollaborativeAreaType.workspace,
+                  hint: "search in resources...",
+                  iconLoad: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? Icons.search : null,
+                  iconRemove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? Icons.screen_search_desktop_outlined : null,
+                  tooltipLoad: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? "search" : null,
+                  tooltipRemove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? "distributed search" : null,
+                  canLoad: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? (String? str) => str != null && str.isNotEmpty : null,
+                  canRemove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? (String? str) => str != null && str.isNotEmpty : null,
+                  change: (value) => SearchConstants.set(value),
+                  loadStr: PermsService.getPerm(Perms.SEARCH_INTERNAL) ? (String val) async {
+                    AppRouter.currentRoute.factory.search(context, false); 
+                  } : null,
+                  remove: PermsService.getPerm(Perms.SEARCH_EXTERNAL) ? (String val) async {
+                    AppRouter.currentRoute.factory.search(context, true); 
+                  } : null,
+              ),
+              Container( padding: EdgeInsets.only(left: 50),
+                decoration: BoxDecoration( border: Border( left: BorderSide( color: Colors.white ))),
+                child: ShallowDropdownInputWidget(
+                  prefixIcon: Padding( padding: EdgeInsets.only(right: 10), child: Icon(Icons.shopping_cart, color: Colors.grey)),
+                  current: WorkspaceLocal.current,
+                  width: 350,
+                  all: () async => WorkspaceLocal.getWorkspacesShallow(),
+                  type: CollaborativeAreaType.workspace,
+                  change: (String? change) {
+                    WorkspaceLocal.changeWorkspace(change.toString());
+                  },
+                  canLoad: (p0) => true,
+                  load: (p0) async {
+                    scaffoldKey.currentState?.openEndDrawer(); 
+                  },
+                  tooltipLoad: "open workspace manager",
+                  iconLoad: Icons.remove_red_eye,
+                  color: Colors.black,
+                  filled: midColor,
+                  hintColor: Colors.grey,
+          )) 
+        ])
+      ),
     ],);
   } 
 }

lib/core/sections/header/menu.dart

@@ -1,51 +1,61 @@
+import 'package:flutter_svg/svg.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/core/services/auth.service.dart';
+import 'package:oc_front/core/services/router.dart';
 import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
-import 'package:oc_front/widgets/menus/clipper_menu.dart';
-import 'package:oc_front/widgets/dialog/login.dart';
+import 'package:oc_front/pages/catalog.dart';
 
 class HeaderMenuWidget extends StatefulWidget{
-  const HeaderMenuWidget ({ super.key });
+  HeaderMenuWidget (): super(key: HeaderConstants.getKey());
   @override HeaderMenuWidgetState createState() => HeaderMenuWidgetState();
 }
 class HeaderMenuWidgetState extends State<HeaderMenuWidget> {
   @override Widget build(BuildContext context) {
     return Container( 
-        width: MediaQuery.of(context).size.width,
+        width: getWidth(context),
         height: 50,
         decoration: BoxDecoration(
-          border: Border(bottom: BorderSide(color: Colors.grey.shade300))
+          color: Colors.white,
+          border: Border(bottom: BorderSide(color: midColor))
         ),
-        child: Padding(padding: const EdgeInsets.only(top: 5, bottom: 5, left: 50, right: 50), 
-          child: Stack(children: [
-            Row(crossAxisAlignment: CrossAxisAlignment.stretch, 
+        child: Stack(children: [  
+          AppRouter.currentRoute.factory.searchFill() ? Container() : Positioned( top: 0, left: 30, 
+            child: InkWell( onTap: () {
+              CatalogFactory.key.currentState?.widget.isSearch = true;
+              CatalogFactory.key.currentState?.widget.items = [];
+              AppRouter.zones.first.go(context, {});
+              AppRouter.zones.first.factory.getKey().currentState?.setState(() {});
+              HeaderConstants.headerKey.currentState?.setState(() {});
+            }, 
+            child: Wrap( alignment: WrapAlignment.center, children: [ 
+              SvgPicture.asset("assets/images/icon.svg", width: 70, height: 70, semanticsLabel: 'OpenCloud Logo'),
+              Container( height: 50, alignment: Alignment.centerLeft, margin: const EdgeInsets.only(left: 20),
+                child: Text(AppRouter.currentRoute.label ?? "Where am I ?", style: TextStyle( color: Colors.grey)))
+          ]))),
+          Padding( padding: const EdgeInsets.only(left: 50), 
+          child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, 
             mainAxisAlignment: MainAxisAlignment.end,
             children: [
-              Tooltip( message: "workspace/cart", child:  Padding(padding: const EdgeInsets.only(left: 10), 
-                child: IconButton(
-                      icon: const Icon(Icons.shopping_cart_outlined),
-                      onPressed: () { 
-                        headerMenuKey.currentState?.closeMenu();
-                        scaffoldKey.currentState?.openEndDrawer(); 
-                      },
-                  )
+              Center(child: Text("hello \"${AuthService.getUsername() ?? ""}\"", style: const TextStyle(color: Colors.grey, fontSize: 15))),
+              Padding(padding: const EdgeInsets.only(top: 5, bottom: 5, right: 50, left: 20), 
+              child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, 
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  Tooltip( message: "logout", child:  Padding(padding: const EdgeInsets.only(left: 10), 
+                    child: IconButton(
+                          icon: const Icon(FontAwesomeIcons.powerOff),
+                          onPressed: () async { 
+                            await AuthService.logout();
+                            mainKey?.currentState?.setState(() {});
+                          },
+                      )
               )),
-              Tooltip( message: "login", child: Padding(padding: const EdgeInsets.only(left: 10), 
-                child: IconButton(
-                      icon: const Icon(Icons.login_outlined),
-                      onPressed: () { showDialog(context: context, builder: (context) => 
-                      LoginWidget()); },
-                  )
-              )),
-               Tooltip( message: "navigation", child: Padding(padding: const EdgeInsets.only(left: 10), 
-                child:  ClipperMenuWidget(
-                  borderRadius: BorderRadius.circular(4),
-                  iconColor: Colors.white,
-                )
-              ))
             ]
-          )
+          ))
         ])
-      )
+      )])
     );
   } 
 }

lib/core/sections/header/search.dart

@@ -1,96 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
-import 'package:oc_front/core/sections/header/header.dart';
-import 'package:oc_front/core/services/router.dart';
-import 'package:oc_front/pages/shared.dart';
-import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
-
-class SearchConstants {
-  static final Map<String, String?> _searchHost = {};
-  static String? get() { return _searchHost[AppRouter.currentRoute.route]; }
-  static void set(String? search) { _searchHost[AppRouter.currentRoute.route] = search; }
-  static void remove() { _searchHost.remove(AppRouter.currentRoute.route); }
-  static void clear() { _searchHost.clear(); }
-}
-
-GlobalKey<SearchWidgetState> searchWidgetKey = GlobalKey<SearchWidgetState>();
-class SearchWidget extends StatefulWidget {
-  SearchWidget (): super(key: GlobalKey<SearchWidgetState>());
-  @override SearchWidgetState createState() => SearchWidgetState();
-}
-class SearchWidgetState extends State<SearchWidget> {
-  @override Widget build(BuildContext context) {
-    searchWidgetKey = widget.key as GlobalKey<SearchWidgetState>;
-    List<Widget> widgets = [
-          ...(MediaQuery.of(context).size.width > 600 || AppRouter.currentRoute.factory.searchFill()  
-          ? [InkWell( 
-            mouseCursor: SystemMouseCursors.click,
-            onTap: () => AppRouter.zones.first.go(context, {}),
-            child: Container(
-              margin: EdgeInsets.only(top: 20, left: AppRouter.currentRoute.factory.searchFill() ? 40 : 0), 
-              child:  SvgPicture.asset(
-                width: 300,
-                height: AppRouter.currentRoute.factory.searchFill() ? 
-                  ((MediaQuery.of(context).size.height - 50) / 2) : 150,
-                "assets/images/logo.svg",
-                semanticsLabel: 'OpenCloud Logo'
-              )
-            )
-          )] : []),
-          AppRouter.currentRoute.description != null 
-          || (AppRouter.currentRoute.route.contains("shared") && HeaderConstants.title != null) ? 
-            Column( 
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Text(HeaderConstants.title ?? AppRouter.currentRoute.description!, style: const TextStyle(
-                  color: Color.fromRGBO(38, 166, 154, 1),
-                  fontSize: 24,
-                  fontWeight: FontWeight.w600
-                )),
-                Row(children: [
-                  ...(HeaderConstants.description == null && (AppRouter.currentRoute.help == null || AppRouter.currentRoute.help!.isEmpty) ? [] 
-                    : [ const Padding( padding: EdgeInsets.only(right: 10), 
-                      child: Icon(Icons.help_outline, color: Colors.grey, size: 20)),
-                    Text(HeaderConstants.description ?? AppRouter.currentRoute.help ?? "", style: const TextStyle(
-                      color: Colors.grey,
-                      fontSize: 14,
-                      fontWeight: FontWeight.w400
-                    )) ])
-                ],)
-                
-              ],
-            )
-          : Row( 
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [ ShallowTextInputWidget(
-                width: MediaQuery.of(context).size.width - 400 > 0 ? MediaQuery.of(context).size.width - 300 - 100 : 200,
-                type: SharedWorkspaceType.workspace,
-                hint: "search in resources...",
-                iconLoad: Icons.search,
-                iconRemove: Icons.screen_search_desktop_outlined,
-                tooltipLoad: "search",
-                tooltipRemove: "distributed search",
-                canLoad: (String? str) => str != null && str.isNotEmpty,
-                canRemove: (String? str) => str != null && str.isNotEmpty,
-                change: (value) => SearchConstants.set(value),
-                loadStr: (String val) async {
-                  AppRouter.currentRoute.factory.search(context); 
-                },
-                remove: (String val) async {
-                  AppRouter.currentRoute.factory.search(context); 
-                },
-          ) ]),
-        ];
-    return Container(
-      width: MediaQuery.of(context).size.width,
-      height: AppRouter.currentRoute.factory.searchFill() ? (MediaQuery.of(context).size.height - 50) : 150,
-      color: Colors.grey.shade300,
-      child: AppRouter.currentRoute.factory.searchFill() ? Column(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: widgets) 
-      : Row( mainAxisAlignment: MediaQuery.of(context).size.width < 600
-          ? MainAxisAlignment.center : MainAxisAlignment.start, children: widgets)
-    );
-  }
-}

lib/core/sections/left_menu.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/services/router.dart';
+
+class LeftMenuWidget extends StatefulWidget {
+  const LeftMenuWidget({Key? key}): super(key: key);
+  @override LeftMenuWidgetState createState() => LeftMenuWidgetState();
+}
+
+class LeftMenuWidgetState extends State<LeftMenuWidget> {
+  @override Widget build(BuildContext context) {
+    var routes = AppRouter.zones.where(  (e) => e.label != null && e.icon != null).toList();
+    List<Widget> widgets = routes.map( (e) => Opacity(  opacity: AppRouter.currentRoute.route == e.route ?  1 : .5,
+      child: Tooltip( message: e.label, child: SizedBox(  width: 50,  height: 50, child: InkWell(
+        onTap: () { e.go(context, {}); },
+        child: Center( child: Icon(e.icon, color:Colors.white) ),
+      ),
+    )))).toList();
+    return Column( children: widgets);
+  }
+}

lib/core/services/api_service.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:dio/dio.dart';
 import 'package:flutter/material.dart';
 import 'package:alert_banner/exports.dart';
+import 'package:localstorage/localstorage.dart';
 import 'package:oc_front/models/abstract.dart';
 import 'package:oc_front/models/response.dart';
 import 'package:oc_front/widgets/dialog/alert.dart';
@@ -11,19 +12,18 @@ import 'package:oc_front/core/services/html.dart' if (kIsWeb) 'dart:html' as htt
 class APIService<T extends SerializerDeserializer> {
   static bool forceRequest = false;
   static Map<String, APIResponse<dynamic>> cache = <String, APIResponse<dynamic>>{};
-  static String auth = "";
   Dio _dio = Dio(
     BaseOptions(
       baseUrl: const String.fromEnvironment('HOST', defaultValue: 'http://localhost:8080'), // you can keep this blank
-      headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+      headers: { 'Content-Type': 'application/json; charset=UTF-8', 'Access-Control-Allow-Origin': '*' },
     ),
-  )..interceptors.add(LogInterceptor( requestHeader: true, ),);
+  )..interceptors.add(LogInterceptor( requestHeader: true, ));
 
-  APIService({ required String baseURL }) {
+  APIService({ required String baseURL}) {
     _dio = Dio(
       BaseOptions(
         baseUrl: baseURL, // you can keep this blank
-        headers: { 'Content-Type': 'application/json; charset=UTF-8' },
+        headers: { 'Content-Type': 'application/json; charset=UTF-8', 'Access-Control-Allow-Origin': '*' },
       ),
     )..interceptors.add(LogInterceptor( requestHeader: true, ),);
   }
@@ -51,7 +51,6 @@ class APIService<T extends SerializerDeserializer> {
   Future _mainDownload(String url, String method, bool isFilter, String? extend, String savePath, bool isWeb, BuildContext context) async {
     try {
       downloadProgressNotifier.value = 0;
-      // dio.options.headers["authorization"] = auth;
       if (isWeb) { 
         _dio.get("$url${extend ?? ""}").then((value) {
           var url = http.Url.createObjectUrlFromBlob(http.Blob([value.data]));
@@ -75,7 +74,8 @@ class APIService<T extends SerializerDeserializer> {
                                BuildContext? context, Options? options) async {
     var err = ""; 
       try {
-        _dio.options.headers["authorization"] = auth;
+        var type = localStorage.getItem('tokenType') ?? "bearer";
+        _dio.options.headers["Authorization"] = "${type[0].toUpperCase() + type.substring(1)} ${localStorage.getItem('accessToken') ?? ""}";
         _dio.interceptors.clear(); 
         var response = await _request(url, method, body, options);
         if (response.statusCode != null && response.statusCode! < 400) {
@@ -84,24 +84,29 @@ class APIService<T extends SerializerDeserializer> {
           if (resp.error == "") { 
             if (context != null && succeed != "") {
               // ignore: use_build_context_synchronously
-              showAlertBanner(context, () {}, InfoAlertBannerChild(text: succeed), // <-- Put any widget here you want!
+              try {
+                showAlertBanner(context, () {}, InfoAlertBannerChild(text: succeed), // <-- Put any widget here you want!
                 alertBannerLocation:  AlertBannerLocation.bottom,);
+              } catch (e) { /* */ }
             }
             return resp;
           }
           err = resp.error ?? "internal error";
-        } 
-        if (response.statusCode == 401) { err = "not authorized"; }
+        } else if (response.statusCode == 401) { err = "not authorized"; }
       } catch(e, s) {  
-        print(e); 
-        print(s);
-        err = e.toString();
+        if (!e.toString().contains("context")) {
+          print(e); 
+          print(s);
+          err = e.toString();
+        }
       }
     //if (err.contains("token") && err.contains("expired")) {  AuthService().unAuthenticate();  }
     if (context != null) {
       // ignore: use_build_context_synchronously
-      showAlertBanner( context, () {}, AlertAlertBannerChild(text: err),// <-- Put any widget here you want!
+      try {
+        showAlertBanner( context, () {}, AlertAlertBannerChild(text: err),// <-- Put any widget here you want!
                        alertBannerLocation:  AlertBannerLocation.bottom,);
+      } catch (e) { /* */ }
     } 
     throw Exception(err);
   }
@@ -110,9 +115,9 @@ class APIService<T extends SerializerDeserializer> {
     var err = ""; 
     if (url != "") {
       try {
-        _dio.options.headers["authorization"] = auth;
+        var type = localStorage.getItem('tokenType') ?? "bearer";
+        _dio.options.headers["Authorization"] = "${type[0].toUpperCase() + type.substring(1)} ${localStorage.getItem('accessToken') ?? ""}";
         _dio.interceptors.clear(); 
-
         var response = await _request(url, method, body, null);
         if (response.statusCode != null && response.statusCode! < 400) {
           if (method == "delete") { cache.remove(url); return APIResponse<RawData>(); }
@@ -124,7 +129,6 @@ class APIService<T extends SerializerDeserializer> {
       } catch(e, s) { print(e); print(s);
         err = "${e.toString()} ${const String.fromEnvironment('HOST', defaultValue: 'http://localhost:8080')}"; }
     } else { err = "no url"; }
-    // if (err.contains("token") && err.contains("expired")) {  AuthService().unAuthenticate();  }
     throw Exception(err);
   }
 

lib/core/services/auth.service.dart

@@ -0,0 +1,99 @@
+
+import 'package:localstorage/localstorage.dart';
+import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/core/services/api_service.dart';
+import 'package:oc_front/core/services/perms_service.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/models/response.dart';
+class AuthService {
+  static var isAuth = const bool.fromEnvironment('AUTH_MODE', defaultValue: false);
+  static final _clientID = const String.fromEnvironment('CLIENT_ID', defaultValue: 'test-client');
+  static APIService<SimpleData> service = APIService(
+    baseURL: const String.fromEnvironment('AUTH_HOST', defaultValue: 'http://localhost:8080/auth'),
+  );
+  static Future<void> init() async {
+    if (!isAuth) {
+      return;
+    }
+    PermsService.init(localStorage.getItem('accessToken') ?? "");
+    bool ok = await introspect().catchError( (e) => false );
+    if (ok) {
+      var now = DateTime.now();
+      var expires = DateTime.parse(localStorage.getItem('expiresIn') ?? DateTime.now().toIso8601String());
+      var duration = expires.difference(now);
+      refresh(localStorage.getItem('accessToken') ?? "", localStorage.getItem('username') ?? "", duration);
+    } else {
+      localStorage.setItem('accessToken', '');
+      localStorage.setItem('username', '');
+      localStorage.setItem('expiresIn', '');
+    }
+  }
+
+  static bool isConnected() {
+    if (!isAuth) {
+      return true;
+    }
+    return (localStorage.getItem('accessToken') ?? "") != "" 
+    && localStorage.getItem('username') != "";
+  }
+
+  static String? getUsername() {
+    if (!isAuth) {
+      return  "no auth user";
+    }
+    return localStorage.getItem('username') ?? "unknown";
+  }
+
+  static Future<void> login(String username, String password) async {
+    var token = await service.post("/login?client_id=$_clientID", <String, dynamic> {
+      "username": username,
+      "password": password
+    }, null);
+    if (token.code == 200 && token.data != null) {
+      localStorage.setItem('accessToken', token.data?.value['access_token']);
+      localStorage.setItem('tokenType', token.data?.value['token_type']);
+      localStorage.setItem('username', username);
+      localStorage.setItem('expiresIn', DateTime.now().add(
+        Duration(seconds: token.data?.value['expires_in'])).toIso8601String());
+      mainKey?.currentState?.setState(() {});
+      PermsService.init(token.data?.value['access_token']);
+      refresh(token.data?.value['access_token'] ?? "", username, Duration(seconds: token.data?.value['expires_in']));
+    }
+  }
+
+  static Future<void> logout() async {
+    var token = await service.delete("/logout?client_id=$_clientID", null);
+    if (token.code == 200) {
+      localStorage.setItem('accessToken', '');
+      localStorage.setItem('username', '');
+      localStorage.setItem('expiresIn', '');
+      PermsService.clear();
+    }
+  }
+
+  static Future<bool> introspect() async {
+    if (!isConnected()) {
+      return false;
+    }
+    // ignore: invalid_return_type_for_catch_error
+    var isIntrospected = await service.get("/introspect", true, null).catchError((e) => mainKey?.currentState?.setState(() {}));
+    return isIntrospected.code == 200;
+  }
+
+  static Future<void> refresh(String accessToken, String username, Duration duration) async {
+    Future.delayed(duration, () {
+      service.post("/refresh?client_id=$_clientID", <String, dynamic> {
+        "access_token": accessToken,
+        "username": username
+      }, null).then((token) {
+        if (token.code == 200 && token.data != null) {
+          PermsService.init(token.data?.value['access_token']);
+          localStorage.setItem('accessToken', token.data?.value['access_token']);
+          localStorage.setItem('username', username);
+          localStorage.setItem('expiresIn', 
+            DateTime.now().add(Duration(seconds: token.data?.value['expires_in']) - Duration(seconds: 10)).toIso8601String());
+        }
+      });
+    });
+  }
+}

lib/core/services/enum_service.dart

@@ -0,0 +1,49 @@
+import 'package:oc_front/models/response.dart';
+import 'package:oc_front/core/services/api_service.dart';
+
+class EnumService {
+  static final APIService<EnumData> _service = APIService<EnumData>(
+    baseURL: const String.fromEnvironment('ITEM_HOST', 
+      defaultValue: 'http://localhost:8080/catalog')
+  );
+  static String subPath = "/enum/";
+  static Map<String, Map<String,dynamic>> enums = {};
+
+  static int? get(String path, dynamic name) {
+    var n = enums[path];
+    if (n == null) {
+      return null;
+    }
+    var names = "$name";
+    for (var nn in n.keys) {
+      if (n[nn] == names || nn == names) {
+        return int.parse(nn);
+      }
+    }
+    return null;
+  }
+
+  static void init() {
+    _load("infrastructure");
+    _load("storage/type");
+    _load("storage/size");
+    _load("resource/type");
+    _load("booking/status");
+    _load("status");
+    _load("pricing/strategy/buy");
+    _load("pricing/strategy/data");
+    _load("pricing/strategy/time");
+    _load("pricing/strategy/storage");
+    _load("pricing/strategy/privilege/storage");
+    _load("pricing/strategy/privilege");
+    _load("pricing/refund/type");
+  }
+
+  static void _load(String name) {
+    _service.get("$subPath$name", false, null).then((response) {
+      if (response.code == 200) {
+        enums[name] = response.data!.value;
+      }
+    });
+  }
+}

lib/core/services/perms_service.dart

@@ -0,0 +1,99 @@
+import 'dart:convert';
+
+import 'package:oc_front/main.dart';
+
+enum Perms { 
+  SEARCH_INTERNAL,// ignore: constant_identifier_names
+  SEARCH_EXTERNAL, // ignore: constant_identifier_names
+
+  WORKSPACE_SHARE,// ignore: constant_identifier_names
+  WORKSPACE_UNSHARE,// ignore: constant_identifier_names
+
+  WORKFLOW_CREATE, // ignore: constant_identifier_names
+  WORKFLOW_EDIT, // ignore: constant_identifier_names
+  WORKFLOW_DELETE, // ignore: constant_identifier_names
+  WORKFLOW_BOOKING, // ignore: constant_identifier_names
+  WORKFLOW_SHARE, // ignore: constant_identifier_names
+  WORKFLOW_UNSHARE, // ignore: constant_identifier_names
+
+  PEER_SHARE, // ignore: constant_identifier_names
+  PEER_UNSHARE, // ignore: constant_identifier_names
+
+  COLLABORATIVE_AREA_CREATE, // ignore: constant_identifier_names
+  COLLABORATIVE_AREA_EDIT, // ignore: constant_identifier_names
+  COLLABORATIVE_AREA_DELETE, // ignore: constant_identifier_names
+}
+
+Map<Perms, String> perms = {
+  Perms.SEARCH_INTERNAL: 'GET__CATALOG_COMPUTE_SEARCH_SEARCH'.toUpperCase(),
+  Perms.SEARCH_EXTERNAL: 'Search External'.toUpperCase(),
+  Perms.WORKSPACE_SHARE: 'POST__SHARED_COLLABORATIVE_AREA_ID_WORKSPACE_ID2'.toUpperCase(),
+  Perms.WORKFLOW_CREATE: 'POST__WORKFLOW_'.toUpperCase(),
+  Perms.WORKFLOW_UNSHARE: 'DELETE__SHARED_COLLABORATIVE_AREA_ID_WORKFLOW_ID2'.toUpperCase(),
+  Perms.PEER_SHARE: 'POST__SHARED_COLLABORATIVE_AREA_ID_PEER_ID2'.toUpperCase(),
+  Perms.PEER_UNSHARE: 'DELETE__SHARED_COLLABORATIVE_AREA_ID_PEER_ID2'.toUpperCase(),
+  Perms.COLLABORATIVE_AREA_CREATE: 'POST__SHARED_COLLABORATIVE_AREA_'.toUpperCase(),
+  Perms.COLLABORATIVE_AREA_EDIT: 'PUT__SHARED_COLLABORATIVE_AREA_ID'.toUpperCase(),
+  Perms.COLLABORATIVE_AREA_DELETE: 'DELETE__SHARED_COLLABORATIVE_AREA_ID'.toUpperCase(),
+  Perms.WORKSPACE_UNSHARE: 'DELETE__SHARED_COLLABORATIVE_AREA_ID_WORKSPACE_ID2'.toUpperCase(),
+  Perms.WORKFLOW_EDIT: 'PUT__WORKFLOW_ID'.toUpperCase(),
+  Perms.WORKFLOW_DELETE: 'DELETE__WORKFLOW_ID'.toUpperCase(),
+  Perms.WORKFLOW_BOOKING: 'POST__DATACENTER_BOOKING_'.toUpperCase(),
+  Perms.WORKFLOW_SHARE: 'POST__SHARED_COLLABORATIVE_AREA_ID_WORKFLOW_ID2'.toUpperCase(),
+};
+
+class PermsService {
+  static final Map<Perms, bool> _perms = {
+    Perms.SEARCH_INTERNAL: false,
+    Perms.SEARCH_EXTERNAL: false,
+    Perms.WORKSPACE_SHARE: false,
+    Perms.WORKSPACE_UNSHARE: false,
+    Perms.WORKFLOW_CREATE: false,
+    Perms.WORKFLOW_EDIT: false,
+    Perms.WORKFLOW_DELETE: false,
+    Perms.WORKFLOW_BOOKING: false,
+    Perms.WORKFLOW_SHARE: false,
+    Perms.WORKFLOW_UNSHARE: false,
+    Perms.PEER_SHARE: false,
+    Perms.PEER_UNSHARE: false,
+    Perms.COLLABORATIVE_AREA_CREATE: false,
+    Perms.COLLABORATIVE_AREA_EDIT: false,
+    Perms.COLLABORATIVE_AREA_DELETE: false,
+  };
+  static final PermsService _instance = PermsService._internal();
+  factory PermsService() => _instance;
+  PermsService._internal();
+  /* should decode claims such as in oc-auth */
+  static Future<void> init(String token ) async {
+    var claims = token.split(".").last;
+    var decoded = base64.decode(claims);
+    String foo = utf8.decode(decoded);
+    try {
+      var what = json.decode(foo);
+      what = what["session"]["access_token"] as Map<String, dynamic>;
+      
+      for (var w in perms.keys) {
+        if (what.keys.contains(perms[w])) {
+          _perms[w] = true;
+        } else {
+          _perms[w] = false;
+        }
+      }
+      mainKey?.currentState?.setState(() {});
+    } catch (e) {/**/}
+  }
+
+  static void clear() {
+    _perms.forEach((key, value) {
+      _perms[key] = false;
+    });
+  }
+  static bool getPerm(Perms perm) {
+    return _perms[perm] ?? false;
+  }
+
+  static void setPerm(Perms perm, bool value) {
+    _perms[perm] = value;
+  }
+
+}

lib/core/services/router.dart

@@ -53,22 +53,23 @@ class RouterItem {
 }
 
 class AppRouter { 
-  static const String home = "catalog";
+  static String home = "catalog";
   static final RouterItem workflowItem = RouterItem(icon: Icons.rebase_edit, label: "workflow manager", route: "workflow", 
       factory: WorkflowFactory());
   static final RouterItem workflowIDItem = RouterItem(description: "", help: "", route: "workflow/:id", factory: WorkflowFactory(), args: ["id"]);
-  static final RouterItem catalogItem = RouterItem(description: "", help: "", route: "catalog/:id", factory: CatalogItemFactory(), args: ["id"]);
-  static final RouterItem catalog= RouterItem(icon: Icons.book_outlined, label: "catalog searcher", route: home, factory: CatalogFactory());
+  static final RouterItem catalogItem = RouterItem(label: "resource", description: "", help: "", route: "catalog/:id", factory: CatalogItemFactory(), args: ["id"]);
+  static final RouterItem catalog= RouterItem(icon: Icons.book_outlined, label: "catalog searcher", route: "catalog", factory: CatalogFactory());
+  static final RouterItem scheduler = RouterItem(icon: Icons.schedule, label: "scheduled tasks", route: "scheduler", factory: SchedulerFactory());
+  static final RouterItem compute = RouterItem(icon: Icons.dns_outlined, label: "my compute", route: "compute", factory: DatacenterFactory());
+  static final RouterItem shared = RouterItem(icon: Icons.share_rounded, label: "collaborative area", route: "shared", factory: SharedFactory());
 
   static List<RouterItem> zones = [
     catalog, 
     workflowItem, 
-    RouterItem(icon: Icons.schedule, label: "scheduled tasks", route: "scheduler", factory: SchedulerFactory()),
-    RouterItem(icon: Icons.dns_outlined, label: "my datacenter", route: "datacenter", 
-      description: "Manage & monitor your datacenter.", help: "not implemented for now",
-      factory: DatacenterFactory()),
+    scheduler,
+    compute,
     RouterItem(icon: Icons.public_outlined, label: "localisations", route: "map", factory: MapFactory()),
-    RouterItem(icon: Icons.share_rounded, label: "shared spaces", route: "shared", factory: SharedFactory()),
+    shared,
     workflowIDItem,
     catalogItem,
   ];

lib/core/services/specialized_services/abstract_service.dart

@@ -15,7 +15,6 @@ abstract class AbstractService<T extends SerializerDeserializer> {
     return service.get("$subPath$id", true, context);
   }
   Future<APIResponse<T>> post(BuildContext? context, Map<String, dynamic> body, Map<String, String> params) { 
-    print("Creating workspace $body");
     return service.post(subPath, body, context);
   }
   Future<APIResponse<T>> put(BuildContext? context, String id, Map<String, dynamic> body, Map<String, String> params) { 

lib/core/services/specialized_services/booking_service.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/services/api_service.dart';
+import 'package:oc_front/core/services/specialized_services/abstract_service.dart';
+import 'package:oc_front/models/response.dart';
+import 'package:oc_front/models/workflow.dart';
+
+class BookingExecutionService extends AbstractService<WorkflowExecution> {
+  @override APIService<WorkflowExecution> service = APIService<WorkflowExecution>(
+    baseURL: const String.fromEnvironment('DATACENTER_HOST', defaultValue: 'http://localhost:8080/datacenter')
+  );
+  @override String subPath = "/booking/";
+
+  @override Future<APIResponse<WorkflowExecution>> search(BuildContext? context, List<String> words, Map<String, dynamic> params) {  
+    return service.get("${subPath}search/${words.join("/")}", false, context);
+  }
+
+  @override Future<APIResponse<WorkflowExecution>> post(BuildContext? context, Map<String, dynamic> body, Map<String, String> params) { 
+    return throw UnimplementedError();
+  }
+  @override Future<APIResponse<WorkflowExecution>> put(BuildContext? context, String id, Map<String, dynamic> body, Map<String, String> params) { 
+    return throw UnimplementedError();
+  }
+}

lib/core/services/specialized_services/check_service.dart

@@ -6,9 +6,9 @@ import 'package:oc_front/models/workflow.dart';
 
 class CheckService extends AbstractService<Check> {
   @override APIService<Check> service = APIService<Check>(
-    baseURL: const String.fromEnvironment('WORKFLOW_HOST', defaultValue: 'http://localhost:8088')
+    baseURL: const String.fromEnvironment('WORKFLOW_HOST', defaultValue: 'http://localhost:8080/workflow')
   );
-  @override String subPath = "/oc/workflow/check/";
+  @override String subPath = "/check/";
 
   Future<APIResponse<Check>> search(BuildContext? context, List<String> words, Map<String, dynamic> params) {  
     return service.get("$subPath${words.join("/")}", true, context);

lib/core/services/specialized_services/datacenter_service.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/services/api_service.dart';
+import 'package:oc_front/core/services/specialized_services/abstract_service.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/response.dart';
+
+class DatacenterService extends AbstractService<Resource> {
+  @override APIService<Resource> service = APIService<Resource>(
+    baseURL: const String.fromEnvironment('DATACENTER_HOST', defaultValue: 'http://localhost:8080/datacenter')
+  );
+  @override String subPath = "/";
+
+  @override Future<APIResponse<Resource>> search(BuildContext? context, List<String> words, Map<String, dynamic> params) {  
+    return throw UnimplementedError();
+  }
+
+  @override Future<APIResponse<Resource>> post(BuildContext? context, Map<String, dynamic> body, Map<String, String> params) { 
+    return throw UnimplementedError();
+  }
+  @override Future<APIResponse<Resource>> put(BuildContext? context, String id, Map<String, dynamic> body, Map<String, String> params) { 
+    return throw UnimplementedError();
+  }
+}

lib/core/services/specialized_services/peer_service.dart

@@ -4,7 +4,7 @@ import 'package:oc_front/models/shared.dart';
 
 class PeerService extends AbstractService<Peer> {
   @override APIService<Peer> service = APIService<Peer>(
-    baseURL: const String.fromEnvironment('PEER_HOST', defaultValue: 'http://localhost:8093')
+    baseURL: const String.fromEnvironment('PEER_HOST', defaultValue: 'http://localhost:8080/peer')
   );
-  @override String subPath = "/oc/peer/";
+  @override String subPath = "/";
 }

lib/core/services/specialized_services/resource_service.dart

@@ -1,14 +1,14 @@
 import 'package:flutter/material.dart';
-import 'package:oc_front/core/services/api_service.dart';
-import 'package:oc_front/core/services/specialized_services/abstract_service.dart';
 import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/search.dart';
+import 'package:oc_front/core/services/api_service.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/core/services/specialized_services/abstract_service.dart';
 
 class ResourceService extends AbstractService<Resource> {
   @override APIService<Resource> service = APIService<Resource>(
-    baseURL: const String.fromEnvironment('ITEM_HOST', defaultValue: 'http://localhost:8087')
+    baseURL: const String.fromEnvironment('ITEM_HOST', defaultValue: 'http://localhost:8080/catalog')
   );
-  @override String subPath = "/oc/resource/";
+  @override String subPath = "/resource/";
 
   @override Future<APIResponse<Resource>> search(BuildContext? context, List<String> words, Map<String, dynamic> params) {  
     return service.get("${subPath}search/${words.join("/")}", false, context);

lib/core/services/specialized_services/shared_service.dart

@@ -4,33 +4,33 @@ import 'package:oc_front/core/services/specialized_services/abstract_service.dar
 import 'package:oc_front/models/response.dart';
 import 'package:oc_front/models/shared.dart';
 
-class SharedService extends AbstractService<SharedWorkspace> {
-  @override APIService<SharedWorkspace> service = APIService<SharedWorkspace>(
-    baseURL: const String.fromEnvironment('SHAREDWORKSPACE_HOST', defaultValue: 'http://localhost:8091')
+class SharedService extends AbstractService<CollaborativeArea> {
+  @override APIService<CollaborativeArea> service = APIService<CollaborativeArea>(
+    baseURL: const String.fromEnvironment('COLLABORATIVE_AREA_HOST', defaultValue: 'http://localhost:8080/shared')
   );
-  @override String subPath = "/oc/shared/workspace/";
+  @override String subPath = "/collaborative_area/";
 
-  Future<APIResponse<SharedWorkspace>> addWorkspace(BuildContext? context, String id, String id2) {  
+  Future<APIResponse<CollaborativeArea>> addWorkspace(BuildContext? context, String id, String id2) {  
     return service.post("$subPath$id/workspace/$id2", {}, context);
   }
 
-  Future<APIResponse<SharedWorkspace>> addWorkflow(BuildContext? context, String id, String id2) {  
+  Future<APIResponse<CollaborativeArea>> addWorkflow(BuildContext? context, String id, String id2) {  
     return service.post("$subPath$id/workflow/$id2", {}, context);
   }
 
-  Future<APIResponse<SharedWorkspace>> addPeer(BuildContext? context, String id, String id2) {  
+  Future<APIResponse<CollaborativeArea>> addPeer(BuildContext? context, String id, String id2) {  
     return service.post("$subPath$id/peer/$id2", {}, context);
   }
 
-  Future<APIResponse<SharedWorkspace>> removeWorkspace(BuildContext? context, String id, String id2) {  
+  Future<APIResponse<CollaborativeArea>> removeWorkspace(BuildContext? context, String id, String id2) {  
     return service.delete("$subPath$id/workspace/$id2", context);
   }
 
-  Future<APIResponse<SharedWorkspace>> removeWorkflow(BuildContext? context, String id, String id2) {  
+  Future<APIResponse<CollaborativeArea>> removeWorkflow(BuildContext? context, String id, String id2) {  
     return service.delete("$subPath$id/workflow/$id2", context);
   }
 
-  Future<APIResponse<SharedWorkspace>> removePeer(BuildContext? context, String id, String id2) {  
+  Future<APIResponse<CollaborativeArea>> removePeer(BuildContext? context, String id, String id2) {  
     return service.delete("$subPath$id/peer/$id2", context);
   }
 }

lib/core/services/specialized_services/workflow_execution_service.dart

@@ -6,9 +6,9 @@ import 'package:oc_front/models/workflow.dart';
 
 class WorkflowExecutionService extends AbstractService<WorkflowExecutions> {
   @override APIService<WorkflowExecutions> service = APIService<WorkflowExecutions>(
-    baseURL: const String.fromEnvironment('SCHEDULER_HOST', defaultValue: 'http://localhost:8090')
+    baseURL: const String.fromEnvironment('SCHEDULER_HOST', defaultValue: 'http://localhost:8080/scheduler')
   );
-  @override String subPath = "/oc/workflow_execution/";
+  @override String subPath = "/execution/";
 
   @override Future<APIResponse<WorkflowExecutions>> search(BuildContext? context, List<String> words, Map<String, dynamic> params) {  
     return service.get("${subPath}search/${words.join("/")}", false, context);
@@ -20,4 +20,4 @@ class WorkflowExecutionService extends AbstractService<WorkflowExecutions> {
   @override Future<APIResponse<WorkflowExecutions>> put(BuildContext? context, String id, Map<String, dynamic> body, Map<String, String> params) { 
     return throw UnimplementedError();
   }
-}
+}

lib/core/services/specialized_services/workflow_scheduler_service.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/services/api_service.dart';
+import 'package:oc_front/core/services/specialized_services/abstract_service.dart';
+import 'package:oc_front/models/response.dart';
+import 'package:oc_front/models/workflow.dart';
+
+class SchedulerService extends AbstractService<WorkflowExecution> {
+  @override APIService<WorkflowExecution> service = APIService<WorkflowExecution>(
+    baseURL: const String.fromEnvironment('SCHEDULER_HOST', defaultValue: 'http://localhost:8080/scheduler')
+  );
+  @override String subPath = "/";
+
+  Future<APIResponse<WorkflowExecution>> schedule(BuildContext? context, String id, Map<String, dynamic> body, Map<String, dynamic> params) {  
+    print("$subPath$id");
+    return service.post("$subPath$id", body, context);
+  }
+
+  @override Future<APIResponse<WorkflowExecution>> search(BuildContext? context, List<String> words, Map<String, dynamic> params) {  
+    return throw UnimplementedError();
+  }
+
+  @override Future<APIResponse<WorkflowExecution>> post(BuildContext? context, Map<String, dynamic> body, Map<String, String> params) { 
+    return throw UnimplementedError();
+  }
+  @override Future<APIResponse<WorkflowExecution>> put(BuildContext? context, String id, Map<String, dynamic> body, Map<String, String> params) { 
+    return throw UnimplementedError();
+  }
+}

lib/core/services/specialized_services/workflow_service.dart

@@ -4,7 +4,7 @@ import 'package:oc_front/models/workflow.dart';
 
 class WorflowService extends AbstractService<Workflow> {
   @override APIService<Workflow> service = APIService<Workflow>(
-    baseURL: const String.fromEnvironment('WORKFLOW_HOST', defaultValue: 'http://localhost:8088')
+    baseURL: const String.fromEnvironment('WORKFLOW_HOST', defaultValue: 'http://localhost:8080/workflow')
   );
-  @override String subPath = "/oc/workflow/";
+  @override String subPath = "/";
 }

lib/core/services/specialized_services/workspace_service.dart

@@ -4,7 +4,7 @@ import 'package:oc_front/models/workspace.dart';
 
 class WorkspaceService extends AbstractService<Workspace> {
   @override APIService<Workspace> service = APIService<Workspace>(
-    baseURL: const String.fromEnvironment('WORKSPACE_HOST', defaultValue: 'http://localhost:8089')
+    baseURL: const String.fromEnvironment('WORKSPACE_HOST', defaultValue: 'http://localhost:8080/workspace')
   );
-  @override String subPath = "/oc/workspace/";
+  @override String subPath = "/";
 }

lib/main.dart

@@ -1,33 +1,42 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
-import 'package:flutter/foundation.dart';
+import 'package:flutter/services.dart';
 import 'package:go_router/go_router.dart';
+import 'package:localstorage/localstorage.dart';
 import 'package:oc_front/core/models/shared_workspace_local.dart';
 import 'package:oc_front/core/models/workspace_local.dart';
+import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/core/sections/header/menu.dart';
+import 'package:oc_front/core/sections/left_menu.dart';
+import 'package:oc_front/core/services/auth.service.dart';
+import 'package:oc_front/core/services/enum_service.dart';
 import 'package:oc_front/core/services/router.dart';
 import 'package:oc_front/core/sections/end_drawer.dart';
-import 'package:oc_front/core/sections/header/header.dart';
-import 'package:desktop_window/desktop_window.dart' if (kIsWeb) '';
+import 'package:oc_front/widgets/dialog/login.dart';
+void main() async {
+   WidgetsFlutterBinding.ensureInitialized();
 
-void main() {
+  // Run `LinuxWebViewPlugin.initialize()` first before creating a WebView.
+  await initLocalStorage();
   runApp(const MyApp());
 }
+GlobalKey<MainPageState>? mainKey;
 GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
-
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
-    if (!kIsWeb) { DesktopWindow.setMinWindowSize(const Size(400, 400)); }
-    return MaterialApp.router(
-      routerConfig: GoRouter( routes: AppRouter.routes ),
-    );
+    AuthService.init();
+    EnumService.init();
+    SearchConstants.clear();
+    return MaterialApp.router(  routerConfig: GoRouter( routes: AppRouter.routes ) );
   }
 }
 // ignore: must_be_immutable
 class MainPage extends StatefulWidget {
-  Widget page;
-  MainPage({super.key, required this.page});
+  Widget? page;
+  MainPage({Key? key, required this.page}) : super(key: GlobalKey<MainPageState>());
 
   // This widget is the home page of your application. It is stateful, meaning
   // that it has a State object (defined below) that contains fields that affect
@@ -39,10 +48,40 @@ class MainPage extends StatefulWidget {
   // always marked "final".
 
   @override
-  State<MainPage> createState() => _MainPageState();
+  State<MainPage> createState() => MainPageState();
 }
 
-class _MainPageState extends State<MainPage> {
+var darkColor = Color.fromRGBO(26, 83, 92, 1);
+var lightColor = Color.fromRGBO(78, 205, 196, 1); 
+var darkMidColor = Color.fromRGBO(44, 83, 100, 1);
+var midColor = Colors.grey.shade300;
+var redColor = Color.fromRGBO(255, 107, 107, 1);
+
+double getWidth(BuildContext context) {
+  return MediaQuery.of(context).size.width <= 800 ? 800 : MediaQuery.of(context).size.width;
+}
+
+double getHeight(BuildContext context) {
+  return MediaQuery.of(context).size.height <= 400 ? 400 : MediaQuery.of(context).size.height;
+}
+
+double getMainHeight(BuildContext context) {
+  return getHeight(context) - HeaderConstants.height;
+}
+double getMainWidth(BuildContext context) {
+  return getWidth(context) - 50;
+}
+bool loginIsSet = false;
+class MainPageState extends State<MainPage> {
+  bool isCtrl = false;
+  final FocusNode node = FocusNode();
+  @override
+  void initState() {
+    mainKey = widget.key as GlobalKey<MainPageState>?;
+    node.requestFocus();
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     // This method is rerun every time setState is called, for instance as done
@@ -50,33 +89,63 @@ class _MainPageState extends State<MainPage> {
     //
     // The Flutter framework has been optimized to make rerunning build methods
     // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
-    WorkspaceLocal.init(context, false);
-    SharedWorkspaceLocal.init(context, false);
+    // than having to individually change instances of widgets.i
     scaffoldKey = GlobalKey<ScaffoldState>();
-    return Scaffold(
-      key: scaffoldKey,
-      endDrawer: EndDrawerWidget(),
-      body: Column(
-          // Column is also a layout widget. It takes a list of children and
-          // arranges them vertically. By default, it sizes itself to fit its
-          // children horizontally, and tries to be as tall as its parent.
-          //
-          // Column has various properties to control how it sizes itself and
-          // how it positions its children. Here we use mainAxisAlignment to
-          // center the children vertically; the main axis here is the vertical
-          // axis because Columns are vertical (the cross axis would be
-          // horizontal).
-          //
-          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
-          // action in the IDE, or press "p" in the console), to see the
-          // wireframe for each widget.
-          mainAxisAlignment: MainAxisAlignment.start,
-          children: <Widget>[
-            HeaderWidget(),
-            widget.page // CatalogPageWidget(),
-          ],
-        ),
-      );
+    isCtrl = false; 
+    if (!AuthService.isConnected() && !loginIsSet) {
+          Future.delayed(const Duration(milliseconds: 500), () {
+            loginIsSet = true;
+            showDialog(
+                barrierDismissible: false,
+                context: context ?? context, builder: (context) {
+                return AlertDialog(
+                  insetPadding: EdgeInsets.zero,
+                  backgroundColor: Colors.white,
+                  shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
+                  title: LoginWidget());
+              });
+          });
+    }
+    return FutureBuilder(future: AuthService.init(), 
+      builder: (e, s) {
+        WorkspaceLocal.init(context, false);        
+        HeaderConstants.height = HeaderConstants.isNoHeader(AppRouter.currentRoute.route) || AppRouter.currentRoute.factory.searchFill() ? 50 : 100;
+        return Scaffold( key: scaffoldKey, endDrawer: EndDrawerWidget(), body: 
+        SingleChildScrollView(
+          controller: ScrollController(),
+          scrollDirection: Axis.horizontal,
+          child: SingleChildScrollView(
+            child: Column( children: [
+              HeaderMenuWidget(),
+              Row( children : [
+                Container( padding: const EdgeInsets.symmetric(vertical: 30),
+                  decoration: BoxDecoration( color: darkColor),
+                  width: 50, height: getHeight(context) - 50, 
+                  child: SingleChildScrollView( child: LeftMenuWidget() )),
+                SizedBox( width: getMainWidth(context), height: getHeight(context) - 50,
+                  child: KeyboardListener(
+                    focusNode: node,
+                    onKeyEvent: (event) async {
+                      if ( event.logicalKey == LogicalKeyboardKey.controlLeft ) {
+                        isCtrl = (event is KeyDownEvent); 
+                        node.requestFocus();
+                      } else if( (event is KeyDownEvent) && event.logicalKey == LogicalKeyboardKey.enter) {
+                        AppRouter.currentRoute.factory.search(context, isCtrl);
+                        node.requestFocus();
+                      }
+                    },
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.start,
+                      children: <Widget>[
+                        HeaderWidget(),
+                        widget.page ?? Container()  // CatalogPageWidget(),
+                  ],
+                ),
+              )),
+            ])
+          ])
+        )
+      ));
+    });
   }
 }

lib/models/resources/compute.dart

@@ -0,0 +1,222 @@
+
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/services/enum_service.dart';
+import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/resources.dart';
+
+class ComputeItem extends AbstractItem<ComputePricing, ComputePartnership, ComputeInstance, ComputeItem> {
+    // special attributes
+  int? infrastructureEnum;
+  String? architecture;
+
+  ComputeItem({
+    this.infrastructureEnum,
+    this.architecture
+  }): super();  
+
+  @override String get topic => "compute";
+
+  @override deserialize(dynamic data) {
+    try { data = data as Map<String, dynamic>;
+    } catch (e) { return ComputeItem(); }   
+    var w = ComputeItem(
+      infrastructureEnum: data.containsKey("infrastructure") ? EnumService.get("infrastructure", data["infrastructure"]) : null,
+      architecture: data.containsKey("architecture") && data["architecture"] != null ? data["architecture"] : null,
+    );
+    w.mapFromJSON(data, ComputeInstance());
+    if (w.logo != null) { // get image dimensions
+      var image = Image.network(w.logo!);
+      image.image
+        .resolve(const ImageConfiguration())
+        .addListener(
+            ImageStreamListener(
+                (ImageInfo info, bool _) {
+                  w.width = info.image.width.toDouble();
+                  w.height = info.image.height.toDouble();
+                }));
+    }
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "infrastructure": EnumService.enums["infrastructure"] != null 
+      && EnumService.enums["infrastructure"]!["$infrastructureEnum"] != null ? EnumService.enums["infrastructure"]!["$infrastructureEnum"] : infrastructureEnum,
+      "architecture": architecture,
+    };
+  }
+
+  @override Map<String, dynamic> serialize() {
+    Map<String, dynamic> obj = infos();
+    obj["infrastructure"] = infrastructureEnum;
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class ComputeInstance extends AbstractInstance<ComputePricing, ComputePartnership> {
+  String? securityLevel;
+  List<String>? powerSources = [];
+  double? annualEnergyConsumption;
+  Map<String,CPU> cpus = {};
+  Map<String,GPU> gpus = {};
+  List<ComputeNode> nodes = [];
+
+  ComputeInstance({
+    this.securityLevel,
+    this.powerSources = const [],
+    this.annualEnergyConsumption,
+    this.cpus = const {},
+    this.gpus = const {},
+    this.nodes = const [],
+  }): super();
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "security_level": securityLevel,
+      "power_sources": powerSources,
+      "annual_co2_emissions": annualEnergyConsumption,
+      "cpus": toMapJson(cpus),
+      "gpus": toMapJson(gpus),
+      "nodes": toListJson(nodes),
+      "inputs": toListJson(inputs),
+      "outputs": toListJson(outputs),
+    };
+  }
+
+  @override
+  ComputeInstance deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return ComputeInstance(); }
+    var w = ComputeInstance(
+      securityLevel: json.containsKey("security_level") && json["security_level"] != null ? json["security_level"] : null,
+      powerSources: json.containsKey("power_sources") && json["power_sources"] != null ? List<String>.from(json["power_sources"]) : [],
+      annualEnergyConsumption: json.containsKey("annual_co2_emissions") && json["annual_co2_emissions"] != null ? json["annual_co2_emissions"] : null,
+      //cpus: json.containsKey("cpus") && json["cpus"] != null ? fromMapJson(json["cpus"], CPU()) : {},
+      // gpus: json.containsKey("gpus") && json["gpus"] != null ? fromMapJson(json["gpus"], GPU()) : {},
+      //nodes: json.containsKey("nodes") && json["nodes"] != null ? fromListJson(json["nodes"], ComputeNode()) : [],
+    );
+    w.mapFromJSON(json, ComputePartnership());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    var obj = infos();
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class ComputePartnership extends AbstractPartnerShip<ComputePricing> {
+  Map<String, dynamic> maxAllowedCPUsCores = {};
+  Map<String, dynamic> maxAllowedGPUsMemoryGB = {};
+  double? maxAllowedRAM;
+
+  ComputePartnership({
+    this.maxAllowedCPUsCores = const {},
+    this.maxAllowedGPUsMemoryGB = const {},
+    this.maxAllowedRAM,
+  }): super();
+
+  @override
+  ComputePartnership deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return ComputePartnership(); }
+    var w = ComputePartnership(
+      maxAllowedCPUsCores: json.containsKey("allowed_cpus") && json["allowed_cpus"] != null ? json["allowed_cpus"] : {},
+      maxAllowedGPUsMemoryGB: json.containsKey("allowed_gpus") && json["allowed_gpus"] != null ? json["allowed_gpus"] : {},
+      maxAllowedRAM: json.containsKey("allowed_ram") && json["allowed_ram"] != null ? double.parse("${json["allowed_ram"]}") : null,
+    );
+    w.mapFromJSON(json, ComputePricing());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    Map<String, dynamic> obj = {
+      "allowed_cpus": maxAllowedCPUsCores,
+      "allowed_gpus": maxAllowedGPUsMemoryGB,
+      "allowed_ram": maxAllowedRAM,
+    };
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+
+class ComputePricing extends AbstractPricing {
+  Map<String, dynamic> cpusPrice = {};
+  Map<String, dynamic> gpusPrice = {};
+  double? ramPrice;
+
+  ComputePricing({
+    this.cpusPrice = const {},
+    this.gpusPrice = const {},
+    this.ramPrice,
+  });
+
+  @override ComputePricing deserialize(json) {
+    var w = ComputePricing(
+      cpusPrice: json.containsKey("cpus") && json["cpus"] != null ? json["cpus"] : {},
+      gpusPrice: json.containsKey("gpus") && json["gpus"] != null ? json["gpus"] : {},
+      ramPrice: json.containsKey("ram") && json["ram"] != null ? json["ram"] : null,
+    );
+    w.mapFromJSON(json);
+    return w;
+  }
+  @override
+  Map<String, dynamic> serialize() {
+    var obj = {
+      "cpus": cpusPrice,
+      "gpus": gpusPrice,
+      "ram": ramPrice,
+    };
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class ComputeNode extends SerializerDeserializer<ComputeNode> {
+  String? name;
+  int? quantity;
+  Map<String,dynamic> cpus = {};
+  Map<String,dynamic> gpus = {};
+  RAM? ram;
+
+  ComputeNode({
+    this.cpus = const {},
+    this.gpus = const {},
+    this.ram,
+    this.name,
+    this.quantity,
+  });
+
+  @override
+  ComputeNode deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return ComputeNode(); }
+    return ComputeNode(
+      name: json.containsKey("name") && json["name"] != null ? json["name"] : null,
+      quantity: json.containsKey("quantity") && json["quantity"] != null ? json["quantity"] : null,
+      cpus: json.containsKey("cpus") && json["cpus"] != null ? fromMapJson(json["cpus"], CPU()) : {},
+      gpus: json.containsKey("gpus") && json["gpus"] != null ? fromMapJson(json["gpus"], GPU()) : {},
+      ram: json.containsKey("ram") && json["ram"] != null ? RAM().deserialize(json["ram"]) : null,
+    );
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    return {
+      "name": name,
+      "quantity": quantity,
+      "cpus": cpus,
+      "gpus": gpus,
+      "ram": ram!.serialize(),
+    };
+  }
+
+}

lib/models/resources/data.dart

@@ -0,0 +1,166 @@
+
+import 'package:flutter/material.dart';
+import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/resources/resources.dart';
+
+class DataItem extends AbstractItem<DataPricing, DataPartnership, DataInstance, DataItem> {
+  // special attributes
+  String? type;
+  String? source;
+  String? quality;
+  bool openData = false;
+  bool static = false;
+  bool personalData = false;
+  bool anonymizedPersonalData = false;
+  double? size;
+  String? example;
+  DateTime? updatePeriod;
+  
+  DataItem({
+    this.type,
+    this.source,
+    this.quality,
+    this.openData = false,
+    this.static = false,
+    this.personalData = false,
+    this.anonymizedPersonalData = false,
+    this.size,
+    this.example,
+    this.updatePeriod,
+  }): super();  
+
+  @override String get topic => "data";
+
+  @override deserialize(dynamic data) {
+    try { data = data as Map<String, dynamic>;
+    } catch (e) { return DataItem(); }   
+    var w = DataItem(
+      type: data.containsKey("type") && data["type"] != null ? data["type"] : null,
+      source: data.containsKey("source") && data["source"] != null ? data["source"] : null,
+      quality: data.containsKey("quality") && data["quality"] != null ? data["quality"] : null,
+      openData: data.containsKey("open_data") && data["open_data"] != null ? data["open_data"] : false,
+      static: data.containsKey("static") && data["static"] != null ? data["static"] : false,
+      personalData: data.containsKey("personal_data") && data["l"] != null ? data["personal_data"] : false,
+      anonymizedPersonalData: data.containsKey("anonymized_personal_data") && data["anonymized_personal_data"] != null ? data["anonymized_personal_data"] : false,
+      size: data.containsKey("size") && data["size"] != null ? data["size"] : null,
+      example: data.containsKey("example") && data["example"] != null ? data["example"] : null,
+      updatePeriod: data.containsKey("update_period") && data["update_period"] != null ? DateTime.parse(data["update_period"]) : null,
+    );
+    w.mapFromJSON(data, DataInstance());
+    if (w.logo != null) { // get image dimensions
+      var image = Image.network(w.logo!);
+      image.image
+        .resolve(const ImageConfiguration())
+        .addListener(
+            ImageStreamListener(
+                (ImageInfo info, bool _) {
+                  w.width = info.image.width.toDouble();
+                  w.height = info.image.height.toDouble();
+                }));
+    }
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "type": type,
+      "quality": quality,
+      "open_data": openData,
+      "static": static,
+      "personal_data": personalData,
+      "anonymized_personal_data": anonymizedPersonalData,
+      "size": size,
+      "example": example,
+      "update_period": updatePeriod?.toIso8601String(),
+    };
+  }
+
+  @override Map<String, dynamic> serialize() {
+    var obj = infos();
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class DataInstance extends AbstractInstance<DataPricing, DataPartnership> {
+  String? source;
+  DataInstance(
+    {this.source}
+  ): super();
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "inputs": toListJson(inputs),
+      "outputs": toListJson(outputs),
+    };
+  } 
+
+  @override
+  DataInstance deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return DataInstance(); }
+    var w = DataInstance(
+      source: json.containsKey("source") && json["source"] != null ? json["source"] : null,
+    );
+    w.mapFromJSON(json, DataPartnership());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    var obj = toJSON();
+    obj["source"] = source;
+    obj.addAll(infos());
+    return obj;
+  }
+}
+
+class DataPartnership extends AbstractPartnerShip<DataPricing> {
+  double? maxDownloadableGBAllowed;
+  bool personalDataAllowed = false;
+  bool anonymizedPersonalDataAllowed = false;
+
+  DataPartnership({
+    this.maxDownloadableGBAllowed,
+    this.personalDataAllowed = false,
+    this.anonymizedPersonalDataAllowed = false,
+  }): super();
+
+  @override
+  DataPartnership deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return DataPartnership(); }
+    var w = DataPartnership(
+      maxDownloadableGBAllowed: json.containsKey("max_downloadable_gb_allowed") && json["max_downloadable_gb_allowed"] != null ? json["max_downloadable_gb_allowed"] : null,
+      personalDataAllowed: json.containsKey("personal_data_allowed") && json["personal_data_allowed"] != null ? json["personal_data_allowed"] : false,
+      anonymizedPersonalDataAllowed: json.containsKey("anonymized_personal_data_allowed") && json["anonymized_personal_data_allowed"] != null ? json["anonymized_personal_data_allowed"] : false,
+    );
+    w.mapFromJSON(json, DataPricing());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    Map<String, dynamic> obj = {
+      "max_downloadable_gb_allowed": maxDownloadableGBAllowed,
+      "personal_data_allowed": personalDataAllowed,
+      "anonymized_personal_data_allowed": anonymizedPersonalDataAllowed,
+    };
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class DataPricing extends AbstractPricing {
+  @override DataPricing deserialize(json) {
+    var w = DataPricing();
+    w.mapFromJSON(json);
+    return w;
+  }
+  @override
+  Map<String, dynamic> serialize() {
+    return toJSON();
+  }
+}

lib/models/resources/processing.dart

@@ -0,0 +1,357 @@
+
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/services/enum_service.dart';
+import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/resources/resources.dart';
+
+class ProcessingItem extends AbstractItem<ProcessingPricing, ProcessingPartnership, ProcessingInstance, ProcessingItem> {
+    // special attributes
+  int? infrastructureEnum;
+  bool isService = false;
+  bool openSource = false;
+  String? license;
+  String? maturity;
+  ProcessingUsage? usage;  
+  
+  ProcessingItem({
+    this.infrastructureEnum,
+    this.isService = false,
+    this.openSource = false,
+    this.license,
+    this.maturity,
+    this.usage,
+  }): super();  
+
+  @override String get topic => "processing";
+
+  @override deserialize(dynamic data) {
+    try { data = data as Map<String, dynamic>;
+    } catch (e) { return ProcessingItem(); }   
+    var w = ProcessingItem(
+      infrastructureEnum: data.containsKey("infrastructure") ? EnumService.get("infrastructure", data["infrastructure"]) : null,
+      isService: data.containsKey("is_service") && data["is_service"] != null ? data["is_service"] : false,
+      openSource: data.containsKey("open_source") && data["open_source"] != null ? data["open_source"] : false,
+      license: data.containsKey("license") && data["license"] != null ? data["license"] : null,
+      maturity: data.containsKey("maturity") && data["maturity"] != null ? data["maturity"] : null,
+      usage: data.containsKey("usage") && data["usage"] != null ? ProcessingUsage().deserialize(data["usage"]) : null,
+    );
+    w.mapFromJSON(data, ProcessingInstance());
+    if (w.logo != null) { // get image dimensions
+      var image = Image.network(w.logo!);
+      image.image
+        .resolve(const ImageConfiguration())
+        .addListener(
+            ImageStreamListener(
+                (ImageInfo info, bool _) {
+                  w.width = info.image.width.toDouble();
+                  w.height = info.image.height.toDouble();
+                }));
+    }
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "infrastructure": EnumService.enums["infrastructure"] != null 
+      && EnumService.enums["infrastructure"]!["$infrastructureEnum"] != null ? 
+      EnumService.enums["infrastructure"]!["$infrastructureEnum"] : infrastructureEnum,
+      "is_service": isService,
+      "open_source": openSource,
+      "license": license,
+      "maturity": maturity,
+    };
+  }
+
+  @override Map<String, dynamic> serialize() {
+    var obj = infos();
+    obj["infrastructure"] = infrastructureEnum;
+    obj["usage"] = usage?.serialize();
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class ProcessingAccess extends SerializerDeserializer<ProcessingAccess> {
+  Containered? container;
+
+  ProcessingAccess({
+    this.container,
+  });
+
+  @override ProcessingAccess deserialize(dynamic json) {
+    try {
+      json = json as Map<String, dynamic>;
+    } catch (e) {
+      return ProcessingAccess();
+    }
+    return ProcessingAccess(
+      container: json.containsKey("container") && json["container"] != null ? Containered().deserialize(json["container"]) : null,
+    );
+  }
+
+  @override Map<String, dynamic> serialize() {
+    return {
+      "container": container?.serialize(),
+    };
+  }
+}
+
+class ProcessingInstance extends AbstractInstance<ProcessingPricing, ProcessingPartnership> {
+  ProcessingAccess? access;
+  ProcessingInstance(
+    {this.access}
+  ): super();
+
+  @override
+  ProcessingInstance deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return ProcessingInstance(); }
+    var w = ProcessingInstance();
+    w.access = json.containsKey("access") && json["access"] != null ? ProcessingAccess().deserialize(json['access']) : null;
+    w.mapFromJSON(json, ProcessingPartnership());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    var obj = toJSON();
+    obj["access"] = access?.serialize();
+    return obj;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "inputs": toListJson(inputs),
+      "outputs": toListJson(outputs),
+    };
+  } 
+}
+
+class ProcessingPartnership extends AbstractPartnerShip<ProcessingPricing> {
+  ProcessingPartnership(): super();
+
+  @override
+  ProcessingPartnership deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return ProcessingPartnership(); }
+    var w = ProcessingPartnership();
+    w.mapFromJSON(json, ProcessingPricing());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    return toJSON();
+  }
+}
+
+class ProcessingPricing extends AbstractPricing {
+  @override ProcessingPricing deserialize(json) {
+    var w = ProcessingPricing();
+    w.mapFromJSON(json);
+    return w;
+  }
+  @override
+  Map<String, dynamic> serialize() {
+    return toJSON();
+  }
+}
+
+class ProcessingUsage extends SerializerDeserializer<ProcessingUsage> {
+    Map<String,CPU> cpus = {};
+    Map<String,GPU> gpus = {};
+    RAM? ram;
+    double? storageSize;
+    String? hypothesis;
+    String? scalingModel;
+
+    ProcessingUsage({
+      this.cpus = const {},
+      this.gpus = const {},
+      this.ram,
+      this.storageSize,
+      this.hypothesis,
+      this.scalingModel,
+    });
+
+    @override
+  ProcessingUsage deserialize(json) {
+    return ProcessingUsage(
+      cpus: json.containsKey("cpus") && json["cpus"] != null ? fromMapJson(json["cpus"], CPU()) : {},
+      gpus: json.containsKey("gpus") && json["gpus"] != null ? fromMapJson(json["gpus"], GPU()) : {},
+      ram: json.containsKey("ram") && json["ram"] != null ? RAM().deserialize(json["ram"]) : null,
+      storageSize: json.containsKey("storage_size") && json["storage_size"] != null ? json["storage_size"]?.toDouble() : null,
+      hypothesis: json.containsKey("hypothesis") && json["hypothesis"] != null ? json["hypothesis"] : null,
+      scalingModel: json.containsKey("scaling_model") && json["scaling_model"] != null ? json["scaling_model"] : null,
+    );
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    return {
+      "cpus": toMapJson(cpus),
+      "gpus": toMapJson(gpus),
+      "ram": ram?.serialize(),
+      "storage_size": storageSize,
+      "hypothesis": hypothesis,
+      "scaling_model": scalingModel,
+    };
+  }
+
+}
+
+class CPU extends SerializerDeserializer<CPU> {
+  CPU({
+    this.cores,
+    this.platform,
+    this.architecture,
+    this.minimumMemory,
+    this.shared = false,
+  });
+  double? cores;
+  String? platform;
+  bool shared = false;
+  String? architecture;
+  double? minimumMemory;
+
+  @override deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return CPU(); }  
+    return CPU(
+      cores: json.containsKey("cores") && json["cores"] != null ? json["cores"]?.toDouble() : null,
+      platform: json.containsKey("platform") && json["platform"] != null ? json["platform"] : null,
+      architecture: json.containsKey("architecture") && json["architecture"] != null ? json["architecture"] : null,
+      minimumMemory: json.containsKey("minimumMemory") && json["minimumMemory"] != null ? json["minimumMemory"]?.toDouble() : null,
+      shared: json.containsKey("shared") && json["shared"] != null ? json["shared"] : false,
+    );
+  }
+  @override Map<String, dynamic> serialize() => {
+    "cores": cores,
+    "platform": platform,
+    "architecture": architecture,
+    "minimumMemory": minimumMemory,
+    "shared": shared,
+  };
+}
+class GPU extends SerializerDeserializer<GPU> {
+  GPU({
+    this.cudaCores,
+    this.memory,
+    this.model,
+    this.tensorCores,
+  });
+  double? cudaCores;
+  double? memory;
+  String? model;
+  double? tensorCores;
+
+  @override deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return GPU(); }  
+    return GPU(
+      cudaCores: json.containsKey("cuda_cores") && json["cuda_cores"] != null ? json["cuda_cores"]?.toDouble() : null,
+      memory: json.containsKey("memory") && json["memory"] != null ? json["memory"]?.toDouble() : null,
+      model: json.containsKey("model") && json["model"] != null ? json["model"] : null,
+      tensorCores: json.containsKey("tensor_cores") && json["tensor_cores"] != null ? json["tensor_cores"]?.toDouble() : null,
+    );
+  }
+  @override Map<String, dynamic> serialize() => {
+    "cuda_cores": cudaCores,
+    "memory": memory,
+    "model": model,
+    "tensor_cores": tensorCores,
+  };
+}
+class RAM extends SerializerDeserializer<RAM> {
+  RAM({
+    this.ecc = false,
+    this.size,
+  });
+  bool ecc = false;
+  double? size;
+
+  @override deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return RAM(); }  
+    return RAM(
+      ecc: json.containsKey("ecc") && json["ecc"] != null ? json["ecc"] : false,
+      size: json.containsKey("size") && json["size"] != null ? json["size"]?.toDouble() : null,
+    );
+  }
+  @override Map<String, dynamic> serialize() => {
+    "ecc": ecc,
+    "size": size,
+  };
+}
+
+class Expose extends SerializerDeserializer<Expose> {
+  Expose({
+    this.PAT,
+    this.port,
+    this.path,
+  });
+  
+  int? port;
+  int? PAT;
+  String? path;
+
+  @override deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Expose(); }
+    return Expose(
+      port: json.containsKey("port") && json["port"] != null ? json["port"] : null,
+      PAT: json.containsKey("PAT") && json["PAT"] != null ? json["PAT"] : null,
+      path: json.containsKey("reverse") && json["reverse"] != null ? json["reverse"] : null,
+    );
+  }
+
+  @override Map<String, dynamic> serialize() => {
+    "port": port,
+    "PAT": PAT,
+    "reverse": path,
+  };
+}
+
+class Containered extends SerializerDeserializer<Containered> {
+  Containered({
+    this.image,
+    this.args,
+    this.command,
+    this.env,
+    this.volumes,
+    this.exposes = const [],
+  }); 
+
+  String? args;
+  String? image;
+  String? command;
+  Map<String, dynamic>? env;
+  Map<String, dynamic>? volumes;
+  List<Expose> exposes = [];
+
+  @override deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Containered(); }
+    return Containered(
+      args: json.containsKey("args") && json["args"] != null ? json["args"] : null,
+      image: json.containsKey("image") && json["image"] != null ? json["image"] : null,
+      command: json.containsKey("command") && json["command"] != null ? json["command"] : null,
+      env: json.containsKey("env") && json["env"] != null ? json["env"] : null,
+      volumes: json.containsKey("volumes") && json["volumes"] != null ? json["volumes"] : null,
+      exposes: json.containsKey("exposes") && json["exposes"] != null ? fromListJson(json["exposes"], Expose()) : [],
+    );
+  }
+  @override Map<String, dynamic> serialize() {
+    var w = {
+      "args": args,
+      "image": image,
+      "command": command,
+      "env": env,
+      "volumes": volumes,
+      "exposes": toListJson(exposes),
+    };
+    return w;
+  }
+}

lib/models/resources/resources.dart

@@ -0,0 +1,529 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/data.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/storage.dart';
+import 'package:oc_front/models/resources/workflow.dart';
+
+class Resource implements SerializerDeserializer<Resource> {
+  List<DataItem> datas = [];
+  List<ProcessingItem> processings = [];
+  List<StorageItem> storages = [];
+  List<ComputeItem> computes = [];
+  List<WorkflowItem> workflows = [];
+
+  Resource({
+    this.datas = const [],
+    this.processings = const [],
+    this.storages = const [],
+    this.computes = const [],
+    this.workflows = const [],
+  });
+
+  @override Resource deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Resource(); }
+    return Resource(
+      computes: json.containsKey("compute_resource") ? fromListJson(json["compute_resource"], ComputeItem()) : [],
+      datas: json.containsKey("data_resource") ? fromListJson(json["data_resource"], DataItem()) : [],
+      processings: json.containsKey("processing_resource") ? fromListJson(json["processing_resource"], ProcessingItem()) : [],
+      storages: json.containsKey("storage_resource") ? fromListJson(json["storage_resource"], StorageItem()) : [],
+      workflows: json.containsKey("workflow_resource") ? fromListJson(json["workflow_resource"], WorkflowItem()) : [],
+    );
+  }
+
+  @override Map<String, dynamic> serialize() {
+    return {
+      "compute_resource": toListJson<ComputeItem>(computes),
+      "data_resource": toListJson<DataItem>(datas),
+      "processing_resource": toListJson<ProcessingItem>(processings),
+      "storage_resource": toListJson<StorageItem>(storages),
+      "workflow_resource": toListJson<WorkflowItem>(workflows),
+    };
+  }
+}
+
+class Owner extends SerializerDeserializer<Owner> {
+  String? name;
+  String? logo;
+
+  Owner({
+    this.name,
+    this.logo,
+  });
+
+  @override Owner deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Owner(); }
+    return Owner(
+      name: json.containsKey("name") ? json["name"] : null,
+      logo: json.containsKey("logo") ? json["logo"] : null,
+    );
+  }
+
+  @override Map<String, dynamic> serialize() {
+    return {
+      "name": name,
+      "logo": logo,
+    };
+  }
+}
+
+abstract class Infos {
+  Map<String, dynamic> infos();
+}
+
+class Artifact extends SerializerDeserializer<Artifact> {
+  String? attrPath;
+  String? attrFrom;
+  bool readOnly = true;
+
+  Artifact({
+    this.attrPath,
+    this.attrFrom,
+    this.readOnly = true,
+  });
+
+  @override Artifact deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Artifact(); }
+    return Artifact(
+      attrPath: json.containsKey("attr_path") ? json["attr_path"] : null,
+      attrFrom: json.containsKey("attr_from") ? json["attr_from"] : null,
+      readOnly: json.containsKey("readonly") ? json["readonly"] : true,
+    );
+  }
+
+  @override Map<String, dynamic> serialize() {
+    return {
+      "attr_path": attrPath,
+      "attr_from": attrFrom,
+      "readonly": readOnly,
+    };
+  }
+}
+class Param extends SerializerDeserializer<Param> {
+  String? name;
+  String? attr;
+  dynamic value;
+  String? origin;
+  bool optionnal = false;
+  bool readOnly = true;
+
+  Param({
+    this.name,
+    this.attr,
+    this.value,
+    this.origin,
+    this.optionnal = false,
+    this.readOnly = true,
+  });
+
+  @override Param deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Param(); }
+    return Param(
+      name: json.containsKey("name") ? json["name"] : null,
+      attr: json.containsKey("attr") ? json["attr"] : null,
+      value: json.containsKey("value") ? json["value"] : null,
+      origin: json.containsKey("origin") ? json["origin"] : null,
+      optionnal: json.containsKey("optionnal") ? json["optionnal"] : false,
+      readOnly: json.containsKey("readonly") ? json["readonly"] : false,
+    );
+  }
+
+  @override Map<String, dynamic> serialize() {
+    return {
+      "name": name,
+      "attr": attr,
+      "value": value,
+      "origin": origin,
+      "optionnal": optionnal,
+      "readonly": readOnly,
+    };
+  }
+}
+
+class Credential extends SerializerDeserializer<Credential> {
+  String? login;
+  String? password;
+
+  Credential({
+    this.login,
+    this.password,
+  });
+
+  @override
+  Credential deserialize(json) {
+    try { json = json as Map<String, dynamic>; 
+    } catch (e) { return Credential(); }
+    return Credential(
+      login: json.containsKey("login") ? json["login"] : null,
+      password: json.containsKey("password") ? json["password"] : null,
+    );
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    return {
+      "login": login,
+      "password": password,
+    };
+  }
+}
+
+abstract class AbstractItem<X extends AbstractPricing, Y extends AbstractPartnerShip<X>, S extends AbstractInstance<X,Y>, T extends FlowData> extends FlowData implements SerializerDeserializer<T>, Infos {
+  String? id;
+  String? name;
+  String? logo;
+  String? type;
+  String? creatorID;
+  String? updaterID;
+  DateTime? createdAt;
+  DateTime? updatedAt;
+  List<Owner> owners;
+  String? description;
+  String? restrictions;
+  String? shortDescription;
+  int selectedInstance = 0;
+
+  List<AbstractInstance<X,Y>> instances = [];
+
+  String get topic => "";
+
+  AbstractItem({
+    this.id,
+    this.type,
+    this.name,
+    this.logo,
+    this.creatorID,
+    this.updaterID,
+    this.createdAt,
+    this.updatedAt,
+    this.description,
+    this.shortDescription,
+    this.owners = const [],
+    this.selectedInstance = 0,
+  });
+
+  void addEnv(List<dynamic> infos) {
+    var inst = getSelectedInstance();
+    if (inst == null) { return; }
+    inst.env = [];
+    for (var info in infos) {
+      inst.env.add(Param(name: info["name"], attr: info["attr"], value: info["value"], 
+      origin: info["origin"], optionnal: info["optionnal"], readOnly: info["readonly"]));
+    }
+  }
+
+  AbstractInstance<X,Y>? getSelectedInstance() {
+    if (selectedInstance == -1) { return instances.isEmpty ? null : instances[0]; }
+    return  instances.isNotEmpty ? instances[selectedInstance] : null;
+  }
+
+  @override String getID() {
+    return id ?? "";
+  }
+
+  @override String getType() {
+    return type ?? "";
+  }
+
+
+  @override String getName() {
+    return name ?? "";
+  }
+
+  @override
+  Map<String, dynamic> infos();
+
+  double? width;
+  double? height;
+  @override
+  double? getWidth() {
+    return width;
+  }
+  @override
+  double? getHeight() {
+    return height;
+  }
+
+  Map<String, dynamic> setVariable(String key, dynamic value, Map<String, dynamic> map) {
+    map[key] = value;
+    return map;
+  }
+
+  dynamic getVariable(String key, Map<String, dynamic> map) {
+    return map[key];
+  }
+
+  Map<String, dynamic> toJSON() {
+    return {
+      "id": id,
+      "type": type ?? topic,
+      "name": name,
+      "logo": logo,
+      "owners": toListJson(owners),
+      "creator_id": creatorID,
+      "updater_id": updaterID,
+      "creation_date": createdAt?.toIso8601String(),
+      "update_date": updatedAt?.toIso8601String(),
+      "description": description,
+      "short_description": shortDescription,
+      "selected_instance": selectedInstance,
+      "instances": instances.map((e) => e.serialize()).toList(),
+    };
+  }
+
+  void mapFromJSON(dynamic json, S ex) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return; }   
+    this.id = json.containsKey("id") ? json["id"] : null;
+    this.type = json.containsKey("type") ? json["type"] : topic;
+    this.name = json.containsKey("name") ? json["name"] : null;
+    this.logo = json.containsKey("logo") ? json["logo"] : null;
+    this.creatorID = json.containsKey("creator_id") ? json["creator_id"] : null;
+    this.updaterID = json.containsKey("updater_id") ? json["updater_id"] : null;
+    this.description = json.containsKey("description") ? json["description"] : null;
+    this.owners = json.containsKey("owners") ? fromListJson(json["owners"], Owner()) : [];
+    this.instances = json.containsKey("instances") ? fromListJson(json["instances"], ex) : [];
+    this.updatedAt = json.containsKey("update_date") ? DateTime.parse(json["update_date"]) : null;
+    this.selectedInstance = json.containsKey("selected_instance") ? json["selected_instance"] : 0;
+    this.shortDescription = json.containsKey("short_description") ? json["short_description"] : null;
+    this.createdAt = json.containsKey("creation_date") ? DateTime.parse(json["creation_date"]) : null;
+  }
+}
+
+class Location extends SerializerDeserializer<Location> {
+  double? latitude;
+  double? longitude;
+
+  Location({
+    this.latitude,
+    this.longitude,
+  });
+
+  @override
+  Location deserialize(json) {
+    return Location(
+      latitude: json.containsKey("latitude") ? json["latitude"] : null,
+      longitude: json.containsKey("longitude") ? json["longitude"] : null,
+    );
+  }
+  @override
+  Map<String, dynamic> serialize() {
+    return {
+      "latitude": latitude,
+      "longitude": longitude,
+    };
+  }
+}
+  
+abstract class AbstractInstance<X extends AbstractPricing, S extends AbstractPartnerShip<X>> extends SerializerDeserializer<AbstractInstance<X,S>> implements Infos {
+  String? id;
+  String? name; 
+  int? countryCode;
+  Location? location;
+  List<S> partnerships = [];
+  List<Param> env = [];
+  List<Param> inputs = [];
+  List<Param> outputs = [];
+  Credential? credential;
+
+
+  bool isEnv(String key) {
+    for (var e in env) {
+      if (e.name?.contains(key) ?? false || key.contains(e.name ?? "none")) { return true; }
+    }
+    return false;
+  }
+
+  bool isEnvAttr(String attr, String origin, bool isOrigin) {
+    for (var e in env) {
+      if (e.attr == attr && ((isOrigin && e.origin != null) || (!isOrigin && e.origin == origin))) { return true; }
+    }
+    return false;
+  }
+
+  @override
+  Map<String, dynamic> infos();
+
+  void mapFromJSON(dynamic json, S ex) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return; } 
+    this.countryCode = json.containsKey("country_code") ? json["country_code"] : null;
+    this.id = json.containsKey("id") ? json["id"] : null;
+    this.name = json.containsKey("name") ? json["name"] : null;
+    this.env = json.containsKey("env") ? fromListJson(json["env"], Param()) : [];
+    this.inputs = json.containsKey("inputs") ? fromListJson(json["inputs"], Param()) : [];
+    this.outputs = json.containsKey("outputs") ? fromListJson(json["outputs"], Param()) : [];
+    this.location = json.containsKey("location") ? Location().deserialize(json["location"]) : null;
+    this.credential = json.containsKey("credential") ? Credential().deserialize(json["credential"]) : null;
+    this.partnerships = json.containsKey("partnerships") ? fromListJson(json["partnerships"], ex) : [];
+  }
+
+  Map<String, dynamic> toJSON() {
+    return {
+      "country_code": countryCode,
+      "id": id,
+      "name": name,
+      "location": location?.serialize(),
+      "env": toListJson(env),
+      "inputs": toListJson(inputs),
+      "outputs": toListJson(outputs),
+      "credential": credential?.serialize(), // TODO CREDENTIAL FORM
+      "partnerships": partnerships.map((e) => e.serialize()).toList(),
+    }; 
+  }
+}
+
+abstract class AbstractPartnerShip<S extends AbstractPricing> extends SerializerDeserializer<AbstractPartnerShip<S>> {
+  String? namespace;
+  List<AbstractPricing> pricings = [];
+
+  void mapFromJSON(dynamic json, S ex) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return; } 
+    this.namespace = json.containsKey("namespace") ? json["namespace"] : null;
+    this.pricings = json.containsKey("pricings") ? fromListJson(json["pricings"], ex) : [];
+  }
+
+  Map<String, dynamic> toJSON() {
+    return {
+      "namespace": namespace,
+      "pricings": pricings,
+    }; 
+  }
+}
+
+abstract class AbstractPricing extends SerializerDeserializer<AbstractPricing> {
+  PricingStrategy? pricing;
+  int? refundTypeEnum;
+  int? refundRatio;
+  List<dynamic> additionnalRefundTypeEnum = [];
+  int? privilegeStrategyEnum;
+  int? garantedDelaySecond;
+  bool exceeding = false;
+  int? exceedingRatio;
+
+  void mapFromJSON(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return; } 
+    pricing = json.containsKey("pricing") ? PricingStrategy().deserialize(json["pricing"]) : null;
+    refundTypeEnum = json.containsKey("refund_type") ? json["refund_type"] : null;
+    refundRatio = json.containsKey("refund_ratio") ? json["refund_ratio"] : null;
+    additionnalRefundTypeEnum = json.containsKey("additionnal_refund_type") ? json["additionnal_refund_type"] : [];
+    privilegeStrategyEnum = json.containsKey("privilege_strategy") ? json["privilege_strategy"] : null;
+    garantedDelaySecond = json.containsKey("garanted_delay") ? json["garanted_delay"] : null;
+    exceeding = json.containsKey("exceeding") ? json["exceeding"] : false;
+    exceedingRatio = json.containsKey("exceeding_ratio") ? json["exceeding_ratio"] : null;
+  }
+
+  Map<String, dynamic> toJSON() {
+    return {
+      "pricing": pricing?.serialize(),
+      "refund_type": refundTypeEnum,
+      "refund_ratio": refundRatio,
+      "additionnal_refund_type": additionnalRefundTypeEnum,
+      "privilege_strategy": privilegeStrategyEnum,
+      "garanted_delay": garantedDelaySecond,
+      "exceeding": exceeding,
+      "exceeding_ratio": exceedingRatio,
+    }; 
+  }
+}
+
+class PricingStrategy extends SerializerDeserializer<PricingStrategy> {
+  double? price;
+  String? currency;
+  int? buyingStrategyEnum;
+  int? timeStrategyEnum;
+  int? overrideStrategyEnum;
+
+  PricingStrategy({
+    this.price,
+    this.currency,
+    this.buyingStrategyEnum,
+    this.timeStrategyEnum,
+    this.overrideStrategyEnum,
+  });
+
+  @override
+  PricingStrategy deserialize(dynamic json) {
+    return PricingStrategy(
+      price: json.containsKey("price") && json["price"] != null ? json["price"] : null,
+      currency: json.containsKey("currency") && json["currency"] != null  ? json["currency"] : null,
+      buyingStrategyEnum: json.containsKey("buying_strategy") ? json["buying_strategy"] : null,
+      timeStrategyEnum: json.containsKey("time_strategy") ? json["time_strategy"] : null,
+      overrideStrategyEnum: json.containsKey("override_strategy") ? json["override_strategy"] : null,
+    );
+  }
+  @override
+  Map<String, dynamic> serialize() {
+    return {
+      "price": price,
+      "currency": currency,
+      "buying_strategy": buyingStrategyEnum,
+      "time_strategy": timeStrategyEnum,
+      "override_strategy": overrideStrategyEnum,
+    }; 
+  }
+}
+
+class Model extends SerializerDeserializer<Model> {
+  dynamic value;
+  String? type;
+  bool readonly = false;
+
+  Model({
+    this.value,
+    this.type,
+    this.readonly = false,
+  });
+
+  @override deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Model(); }
+    return Model(
+      value: json.containsKey("value") ? json["value"] : null,
+      type: json.containsKey("type") ? json["type"] : null,
+      readonly: json.containsKey("readonly") ? json["readonly"] : false,
+    );
+  }
+  @override Map<String, dynamic> serialize() => {
+    "value": value,
+    "type": type,
+    "readonly": readonly,
+  };
+}
+
+Type? getTopicType(String topic) {
+  if (topic == "processing") { return ProcessingItem; }
+  else if (topic == "data") { return DataItem; }
+  else if (topic == "compute") { return ComputeItem; }
+  else if (topic == "storage") { return StorageItem; }
+  else if (topic == "workflow") { return WorkflowItem; }
+  else { return null; }
+}
+
+String getTopic(Type type) {
+  if (type == AbstractItem) { return "resource"; }
+  if (type == ProcessingItem) { return "processing"; }
+  if (type == DataItem) { return "data"; }
+  if (type == ComputeItem) { return "compute"; }
+  if (type == StorageItem) { return "storage"; }
+  if (type == WorkflowItem) { return "workflow"; }
+  return "";
+}
+
+bool isComputing(String topic) => topic == "processing";
+bool isData(String topic) => topic == "data";
+bool isCompute(String topic) => topic == "compute";
+bool isStorage(String topic) => topic == "storage";
+bool isWorkflow(String topic) => topic == "workflow";
+
+Color getColor(String topic) => isData(topic) ? Colors.blue : isComputing(topic) ? Colors.green : 
+                                isCompute(topic) ? Colors.orange : isStorage(topic) ? redColor : Colors.grey;

lib/models/resources/storage.dart

@@ -0,0 +1,166 @@
+
+import 'package:flutter/material.dart';
+import 'package:oc_front/core/services/enum_service.dart';
+import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/resources/resources.dart';
+
+class StorageItem extends AbstractItem<StoragePricing, StoragePartnership, StorageInstance, StorageItem> {
+  StorageItem({
+    this.acronym,
+    this.typeEnum,
+  }): super();  
+
+ @override String get topic => "storage";
+  // special attributes
+  String? acronym;
+  int? typeEnum;
+
+  @override deserialize(dynamic data) {
+    try { data = data as Map<String, dynamic>;
+    } catch (e) { return StorageItem(); }   
+    var w = StorageItem(
+      acronym: data.containsKey("acronym") && data["acronym"] != null ? data["acronym"] : null,
+      typeEnum: data.containsKey("storage_type") && data["storage_type"] != null ? EnumService.get("storage/type", data["storage_type"]) : null,
+    );
+    w.mapFromJSON(data, StorageInstance());
+    if (w.logo != null) { // get image dimensions
+      var image = Image.network(w.logo!);
+      image.image
+        .resolve(const ImageConfiguration())
+        .addListener(
+            ImageStreamListener(
+                (ImageInfo info, bool _) {
+                  w.width = info.image.width.toDouble();
+                  w.height = info.image.height.toDouble();
+                }));
+    }
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "acronym": acronym,
+      "storage_type": EnumService.enums["storage/type"] != null 
+        && EnumService.enums["storage/type"]!["$typeEnum"] != null ? 
+        EnumService.enums["storage/type"]!["$typeEnum"] : typeEnum,
+    };
+  }
+
+  @override Map<String, dynamic> serialize() {
+    var obj = infos();
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class StorageInstance extends AbstractInstance<StoragePricing, StoragePartnership> {
+  String? source;
+  bool local = false;
+  String? securityLevel;
+  int? storageSizeEnum;
+  int? size;
+  bool encryption = false;
+  String? redundancy;
+  String? throughput;
+
+  StorageInstance({
+    this.source,
+    this.local = false,
+    this.securityLevel,
+    this.storageSizeEnum,
+    this.size,
+    this.encryption = false,
+    this.redundancy,
+    this.throughput,
+  }): super();
+
+  @override
+  StorageInstance deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return StorageInstance(); }
+    var w = StorageInstance(
+      source: json.containsKey("source") && json["source"] != null ? json["source"] : null,
+      local: json.containsKey("local") && json["local"] != null ? json["local"] : false,
+      securityLevel: json.containsKey("security_level") && json["security_level"] != null ? json["security_level"] : null,
+      storageSizeEnum: json.containsKey("size_type") ? EnumService.get("storage/size", json["size_type"]) : null,
+      size: json.containsKey("size") && json["size"] != null ? json["size"] : null,
+      encryption: json.containsKey("encryption") && json["encryption"] != null ? json["encryption"] : false,
+      redundancy: json.containsKey("redundancy") && json["redundancy"] != null ? json["redundancy"] : null,
+      throughput: json.containsKey("throughput") && json["throughput"] != null ? json["throughput"] : null,
+    );
+    w.mapFromJSON(json, StoragePartnership());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {
+      "local": local,
+      "security_level": securityLevel,
+      "size_type": EnumService.enums["storage/size"] != null 
+      && EnumService.enums["storage/size"]!["$storageSizeEnum"] != null ? 
+      EnumService.enums["storage/size"]!["$storageSizeEnum"] : storageSizeEnum,
+      "size": size,
+      "encryption": encryption,
+      "redundancy": redundancy,
+      "throughput": throughput,
+      "inputs": toListJson(inputs),
+      "outputs": toListJson(outputs),
+    };
+  } 
+
+
+  @override
+  Map<String, dynamic> serialize() {
+    var obj = infos();
+    obj["source"] = source;
+    obj["size_type"] = storageSizeEnum;
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class StoragePartnership extends AbstractPartnerShip<StoragePricing> {
+  double? maxSizeGBAllowed;
+  bool onlyEncryptedAllowed = false;
+
+  StoragePartnership({
+    this.maxSizeGBAllowed,
+    this.onlyEncryptedAllowed = false,
+  }): super();
+
+  @override
+  StoragePartnership deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return StoragePartnership(); }
+    var w = StoragePartnership(
+      maxSizeGBAllowed: json.containsKey("allowed_gb") && json["allowed_gb"] != null ? json["allowed_gb"] : null,
+      onlyEncryptedAllowed: json.containsKey("personal_data_allowed") && json["personal_data_allowed"] != null ? json["personal_data_allowed"] : false,
+    );
+    w.mapFromJSON(json, StoragePricing());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    Map<String, dynamic> obj = {
+      "allowed_gb": maxSizeGBAllowed,
+      "personal_data_allowed": onlyEncryptedAllowed,
+    };
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class StoragePricing extends AbstractPricing {
+  @override StoragePricing deserialize(json) {
+    var w = StoragePricing();
+    w.mapFromJSON(json);
+    return w;
+  }
+  @override
+  Map<String, dynamic> serialize() {
+    return toJSON();
+  }
+}

lib/models/resources/workflow.dart

@@ -0,0 +1,101 @@
+
+import 'package:flutter/material.dart';
+import 'package:oc_front/models/resources/resources.dart';
+
+class WorkflowItem extends AbstractItem<WorkflowPricing, WorkflowPartnership, WorkflowInstance, WorkflowItem> {
+  // special attributes
+  String? workflowID;
+  
+  WorkflowItem({
+    this.workflowID,
+  }): super();  
+
+  @override String get topic => "workflow";
+
+  @override deserialize(dynamic data) {
+    try { data = data as Map<String, dynamic>;
+    } catch (e) { return WorkflowItem(); }   
+    var w = WorkflowItem(
+      workflowID: data.containsKey("workflow_id") && data["workflow_id"] != null ? data["workflow_id"] : null,
+    );
+    w.mapFromJSON(data, WorkflowInstance());
+    if (w.logo != null) { // get image dimensions
+      var image = Image.network(w.logo!);
+      image.image
+        .resolve(const ImageConfiguration())
+        .addListener(
+            ImageStreamListener(
+                (ImageInfo info, bool _) {
+                  w.width = info.image.width.toDouble();
+                  w.height = info.image.height.toDouble();
+                }));
+    }
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {};
+  }
+
+  @override Map<String, dynamic> serialize() {
+    Map<String, dynamic> obj ={
+      "workflow_id": workflowID,
+    };
+    obj.addAll(toJSON());
+    return obj;
+  }
+}
+
+class WorkflowInstance extends AbstractInstance<WorkflowPricing, WorkflowPartnership> {
+  WorkflowInstance(): super();
+
+  @override
+  WorkflowInstance deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return WorkflowInstance(); }
+    var w = WorkflowInstance();
+    w.mapFromJSON(json, WorkflowPartnership());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> infos() {
+    return {};
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    return toJSON();
+  }
+}
+
+class WorkflowPartnership extends AbstractPartnerShip<WorkflowPricing> {
+  WorkflowPartnership(): super();
+
+  @override
+  WorkflowPartnership deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return WorkflowPartnership(); }
+    var w = WorkflowPartnership();
+    w.mapFromJSON(json, WorkflowPricing());
+    return w;
+  }
+
+  @override
+  Map<String, dynamic> serialize() {
+    return toJSON();
+  }
+}
+
+class WorkflowPricing extends AbstractPricing {
+  @override WorkflowPricing deserialize(json) {
+    var w = WorkflowPricing();
+    w.mapFromJSON(json);
+    return w;
+  }
+  @override
+  Map<String, dynamic> serialize() {
+    return toJSON();
+  }
+}

lib/models/response.dart

@@ -1,5 +1,10 @@
 import 'package:oc_front/models/abstract.dart';
 import 'package:oc_front/models/logs.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/data.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/resources/storage.dart';
 import 'package:oc_front/models/search.dart';
 import 'package:oc_front/models/shared.dart';
 import 'package:oc_front/models/workflow.dart';
@@ -10,7 +15,7 @@ Map<Type, SerializerDeserializer> refs = <Type, SerializerDeserializer> {
   Search: Search(),
   Workspace: Workspace(),
   DataItem: DataItem(),
-  DataCenterItem: DataCenterItem(),
+  ComputeItem: ComputeItem(),
   StorageItem: StorageItem(),
   ProcessingItem: ProcessingItem(),
   Workflow: Workflow(),
@@ -18,7 +23,9 @@ Map<Type, SerializerDeserializer> refs = <Type, SerializerDeserializer> {
   WorkflowExecutions: WorkflowExecutions(),
   LogsResult: LogsResult(),
   Check: Check(),
-  SharedWorkspace: SharedWorkspace(),
+  CollaborativeArea: CollaborativeArea(),
+  SimpleData: SimpleData(),
+  EnumData: EnumData(),
 };
 
 class APIResponse<T extends SerializerDeserializer> {
@@ -40,7 +47,11 @@ class APIResponse<T extends SerializerDeserializer> {
 
   APIResponse<T> deserialize(dynamic j) {
     dynamic data;
-    try { data = j["data"];
+    try { 
+      if (j["data"] == null) { data = j; }
+      else {
+        data = j["data"];
+      }
     } catch (e) { data = j; }
     try {
       return APIResponse<T>(
@@ -48,20 +59,49 @@ class APIResponse<T extends SerializerDeserializer> {
         code: j.containsKey("code") && j["code"] != null ? j["code"] : 200,
         error: j.containsKey("error") && j["error"] != null ? j["error"] : "",
       );
-    } catch (e) { return APIResponse<T>( data: refs[T]!.deserialize(data), ); }
+    } catch (e) { 
+      return APIResponse<T>( data: refs[T]?.deserialize(data), ); 
+    }
   }
 }
 
+class SimpleData extends SerializerDeserializer<SimpleData> {
+  SimpleData({ this.value });
+  dynamic value;
+  @override deserialize(dynamic json) { 
+    return SimpleData(value: json); 
+  }
+  @override Map<String, dynamic> serialize() => { };
+}
+
+class EnumData extends SerializerDeserializer<EnumData> {
+  EnumData({ this.value = const {} });
+  Map<String, dynamic> value = {};
+  @override deserialize(dynamic json) { 
+    return EnumData(value: json as Map<String, dynamic>); 
+  }
+  @override Map<String, dynamic> serialize() => { };
+}
+
 class RawData extends SerializerDeserializer<RawData> {
   RawData({ this.values = const []});
   List<dynamic> values = [];
-  @override deserialize(dynamic json) { return RawData(values: json ?? []); }
+  @override deserialize(dynamic json) { 
+    try {
+      return RawData(values: json ?? []); 
+    } catch (e) { 
+      print(e);
+      print(json);
+      return RawData(); 
+    }
+  }
   @override Map<String, dynamic> serialize() => { };
 }
 
 abstract class ShallowData {
   String getID();
   String getName();
+  Map<String, dynamic> serialize();
 }
 
 class Shallow {

lib/models/schedule.dart

@@ -0,0 +1,37 @@
+import 'package:oc_front/models/abstract.dart';
+
+class Scheduler extends SerializerDeserializer<Scheduler> {
+  DateTime? start;
+  DateTime? end;
+  double? duration;
+  String? cron;
+
+  Scheduler({
+    this.start,
+    this.end,
+    this.duration,
+    this.cron,
+  });
+
+  @override
+  Scheduler deserialize(json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return Scheduler(); }
+    var w = Scheduler(
+      start: json.containsKey("start") && json["start"] != null ? DateTime.parse(json["start"]) : null,
+      end: json.containsKey("end") && json["end"] != null ? DateTime.parse(json["end"]) : null,
+      duration: json.containsKey("duration_s") && json["duration_s"] != null ? json["duration_s"] : -1,
+      cron: json.containsKey("cron") && json["cron"] != null ? json["cron"] : null,
+    );
+    return w;
+  }
+
+  @override Map<String, dynamic> serialize() {
+    return {
+      "start": start?.toIso8601String(),
+      "end": end?.toIso8601String(),
+      "duration_s": duration,
+      "cron": cron,
+    };
+  }
+}

lib/models/search.dart

@@ -1,853 +1,33 @@
-import 'dart:async';
-import 'dart:ui' as ui;
-import 'package:flutter/material.dart';
-import 'package:flutter_flow_chart/flutter_flow_chart.dart';
 import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/data.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/storage.dart';
 
-const List<ProcessingItem> _emptyComputing = [];
-const List<DataItem> _emptyData = [];
-const List<DataCenterItem> _emptyDataCenter = [];
-const List<StorageItem> _emptyStorage = [];
 class Search extends SerializerDeserializer<Search> {
   Search({
-    this.computing = _emptyComputing,
-    this.datacenter = _emptyDataCenter,
-    this.data = _emptyData,
-    this.storage = _emptyStorage,
+    this.computing = const [],
+    this.compute = const [],
+    this.data = const [],
+    this.storage = const [],
   });
   List<ProcessingItem> computing;
-  List<DataCenterItem> datacenter;
+  List<ComputeItem> compute;
   List<DataItem> data;
   List<StorageItem> storage;
   @override deserialize(dynamic json) {
     json = json as Map<String, dynamic>;
     return Search(
       computing: json.containsKey("processing") ? fromListJson(json["processing"], ProcessingItem()) : [],
-      datacenter: json.containsKey("datacenter") ? fromListJson(json["datacenter"], DataCenterItem()) : [],
+      compute: json.containsKey("compute") ? fromListJson(json["compute"], ComputeItem()) : [],
       data: json.containsKey("data") ? fromListJson(json["data"], DataItem()) : [],
       storage: json.containsKey("storage") ? fromListJson(json["storage"], StorageItem()) : [],
     );
   }
   @override Map<String, dynamic> serialize() => {
     "processing": toListJson<ProcessingItem>(computing),
-    "datacenter": toListJson<DataCenterItem>(datacenter),
+    "compute": toListJson<ComputeItem>(compute),
     "data": toListJson<DataItem>(data),
     "storage": toListJson<StorageItem>(storage),
   };
 }
-const List<String> _empty = [];
-
-class Resource implements SerializerDeserializer<Resource> {
-  List<DataItem> datas = [];
-  List<ProcessingItem> processings = [];
-  List<StorageItem> storages = [];
-  List<DataCenterItem> datacenters = [];
-  List<WorkflowItem> workflows = [];
-
-  Resource({
-    this.datas = const [],
-    this.processings = const [],
-    this.storages = const [],
-    this.datacenters = const [],
-    this.workflows = const [],
-  });
-
-  @override Resource deserialize(json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return Resource(); }
-    return Resource(
-      datacenters: json.containsKey("datacenter_resource") ? fromListJson(json["datacenter_resource"], DataCenterItem()) : [],
-      datas: json.containsKey("data_resource") ? fromListJson(json["data_resource"], DataItem()) : [],
-      processings: json.containsKey("processing_resource") ? fromListJson(json["processing_resource"], ProcessingItem()) : [],
-      storages: json.containsKey("storage_resource") ? fromListJson(json["storage_resource"], StorageItem()) : [],
-      workflows: json.containsKey("workflow_resource") ? fromListJson(json["workflow_resource"], WorkflowItem()) : [],
-    );
-  }
-
-  @override Map<String, dynamic> serialize() {
-    return {
-      "datacenter_resource": toListJson<DataCenterItem>(datacenters),
-      "data_resource": toListJson<DataItem>(datas),
-      "processing_resource": toListJson<ProcessingItem>(processings),
-      "storage_resource": toListJson<StorageItem>(storages),
-      "workflow_resource": toListJson<WorkflowItem>(workflows),
-    };
-  }
-}
-
-abstract class AbstractItem<T extends FlowData> extends FlowData implements SerializerDeserializer<T> {
-  String? id;
-  String? name;
-  String? logo;
-  String? owner;
-  String? ownerLogo;
-  String? source;
-  String? description;
-  String? shortDescription;
-  double? price;
-  String? licence;
-  List<dynamic> inputs = [];
-  List<dynamic> outputs = [];
-  ResourceModel? model;
-  String topic = "";
-
-  AbstractItem({
-    this.id,
-    this.name,
-    this.logo,
-    this.owner,
-    this.ownerLogo,
-    this.price,
-    this.source,
-    this.licence,
-    this.description,
-    this.model,
-    this.shortDescription,
-    this.inputs = const [],
-    this.outputs = const [],
-  });
-
-  @override String getID() {
-    return id ?? "";
-  }
-
-  @override String getName() {
-    return name ?? "";
-  }
-}
-
-class Model extends SerializerDeserializer<Model> {
-  dynamic value;
-  String? type;
-  bool readonly = false;
-
-  Model({
-    this.value,
-    this.type,
-    this.readonly = false,
-  });
-
-   @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return Model(); }
-    return Model(
-      value: json.containsKey("value") ? json["value"] : null,
-      type: json.containsKey("type") ? json["type"] : null,
-      readonly: json.containsKey("readonly") ? json["readonly"] : false,
-    );
-  }
-  @override Map<String, dynamic> serialize() => {
-    "value": value,
-    "type": type,
-    "readonly": readonly,
-  };
-}
-
-class ResourceModel extends SerializerDeserializer<ResourceModel> {
-  String? id;
-  String? type;
-  Map<String, Model>? model;
-
-  ResourceModel({
-    this.id,
-    this.type,
-    this.model,
-  });
-
-   @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return ResourceModel(); }
-    return ResourceModel(
-      id: json.containsKey("id") ? json["id"] : null,
-      type: json.containsKey("type") ? json["type"] : null,
-      model: json.containsKey("model") ? fromMapJson(json["model"], Model()) : {},
-    );
-  }
-  @override Map<String, dynamic> serialize() => {
-    "id": id,
-    "type": type,
-    "model": toMapJson<Model>(model ?? {}),
-  };
-}
-
-Type? getTopicType(String topic) {
-  if (topic == "processing") { return ProcessingItem; }
-  else if (topic == "data") { return DataItem; }
-  else if (topic == "datacenter") { return DataCenterItem; }
-  else if (topic == "storage") { return StorageItem; }
-  else if (topic == "workflow") { return WorkflowItem; }
-  else { return null; }
-}
-
-String getTopic(Type type) {
-  if (type == AbstractItem) { return "resource"; }
-  if (type == ProcessingItem) { return "processing"; }
-  if (type == DataItem) { return "data"; }
-  if (type == DataCenterItem) { return "datacenter"; }
-  if (type == StorageItem) { return "storage"; }
-  if (type == WorkflowItem) { return "workflow"; }
-  return "";
-}
-
-bool isComputing(String topic) => topic == "processing";
-bool isData(String topic) => topic == "data";
-bool isDataCenter(String topic) => topic == "datacenter";
-bool isStorage(String topic) => topic == "storage";
-bool isWorkflow(String topic) => topic == "workflow";
-
-class ProcessingItem extends SerializerDeserializer<ProcessingItem> implements AbstractItem<ProcessingItem> {
-  ProcessingItem({
-    this.id,
-    this.name,
-    this.logo,
-    this.owner,
-    this.ownerLogo,
-    this.price,
-    this.source,
-    this.licence,
-    this.description,
-    this.shortDescription,
-    this.inputs = _empty,
-    this.outputs = _empty,
-
-    this.cpus = const [],
-    this.gpus = const [],
-    this.ram,
-    this.storage,
-    this.parrallel = false,
-    this.scallingModel,
-    this.diskIO,
-
-    this.model,
-  });
-  @override ResourceModel? model;
-  @override String? id;
-  @override String? name;
-  @override String? logo;
-  @override String? source;
-  @override String? ownerLogo;
-  @override String? owner;
-  @override String topic = "processing";
-  @override double? price;
-  @override String? licence;
-  @override List<dynamic> inputs;
-  @override List<dynamic> outputs;
-  @override String? description;
-  @override String? shortDescription;
-
-  // Special Attributes
-  List<CPU> cpus = [];
-  List<GPU> gpus = [];
-  RAM? ram;
-  int? storage;
-  bool parrallel = false;
-  int? scallingModel;
-  String? diskIO;
-
-  @override String getID() {
-    return id ?? "";
-  }
-
-  @override String getName() {
-    return name ?? "";
-  }
-  double? width;
-  double? height;
-  @override
-  double? getWidth() {
-    return width;
-  }
-  @override
-  double? getHeight() {
-    return height;
-  }
-
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return ProcessingItem(); }
-    var w = ProcessingItem(
-      id: json.containsKey("id") ? json["id"] : null,
-      name: json.containsKey("name") ? json["name"] : null,
-      logo: json.containsKey("logo") ? json["logo"] : null,
-      owner: json.containsKey("owner") ? json["owner"] : null,
-      ownerLogo: json.containsKey("owner_logo") ? json["owner_logo"] : null,
-      price: json.containsKey("price") ? json["price"]?.toDouble() : null,
-      licence: json.containsKey("licence") ? json["licence"] : null,
-      description: json.containsKey("description") ? json["description"] : null,
-      shortDescription: json.containsKey("short_description") ? json["short_description"] : null,
-      inputs: json["inputs"] ?? [],
-      outputs: json["outputs"] ?? [],
-      source: json.containsKey("source") ? json["source"] : null,
-
-      model: json.containsKey("resource_model") ? ResourceModel().deserialize(json["resource_model"]) : null,
-      cpus: json.containsKey("cpus") ? fromListJson(json["cpus"], CPU()) : [],
-      gpus: json.containsKey("gpus") ? fromListJson(json["gpus"], GPU()) : [],
-      ram: json.containsKey("ram") ? RAM().deserialize(json["ram"]) : null,
-      storage: json.containsKey("storage") ? json["storage"] : null,
-      parrallel: json.containsKey("parrallel") ? json["parrallel"] : false,
-      scallingModel: json.containsKey("scalling_model") ? json["scalling_model"] : null,
-      diskIO: json.containsKey("disk_io") ? json["disk_io"] : null,
-    );
-    if (w.logo != null) {
-      //
-      var image = Image.network(w.logo!);
-      image.image
-        .resolve(const ImageConfiguration())
-        .addListener(
-            ImageStreamListener(
-                (ImageInfo info, bool _) {
-                  w.width = info.image.width.toDouble();
-                  w.height = info.image.height.toDouble();
-                }));
-    }
-    return w;
-  }
-  @override Map<String, dynamic> serialize() => {
-    "id": id,
-    "name": name,
-    "logo": logo,
-    "owner": owner,
-    "owner_logo": ownerLogo,
-    "price": price,
-    "licence": licence,
-    "description": description,
-    "short_description": shortDescription,
-    "inputs": inputs,
-    "outputs": outputs,
-    "source": source,
-    "resource_model": model?.serialize(),
-    "cpus": toListJson<CPU>(cpus),
-    "gpus": toListJson<GPU>(gpus),
-    "ram": ram?.serialize(),
-    "storage": storage,
-    "parrallel": parrallel,
-    "scalling_model": scallingModel,
-    "disk_io": diskIO,
-  };
-}
-
-class WorkflowItem extends SerializerDeserializer<WorkflowItem> implements AbstractItem<WorkflowItem> {
-  WorkflowItem({
-    this.id,
-    this.name,
-    this.logo,
-    this.owner,
-    this.ownerLogo,
-    this.price,
-    this.source,
-    this.licence,
-    this.description,
-    this.shortDescription,
-    this.inputs = _empty,
-    this.outputs = _empty,
-    this.model,
-    this.workflowID,
-  });
-  @override ResourceModel? model;
-  @override String? id;
-  @override String? name;
-  @override String? logo;
-  @override String? source;
-  @override String? ownerLogo;
-  @override String? owner;
-  @override String topic = "workflow";
-  @override double? price;
-  @override String? licence;
-  @override List<dynamic> inputs;
-  @override List<dynamic> outputs;
-  @override String? description;
-  @override String? shortDescription;
-
-  String? workflowID;
-  @override String getID() {
-    return id ?? "";
-  }
-
-  double? width;
-  double? height;
-  @override
-  double? getWidth() {
-    return width;
-  }
-  @override
-  double? getHeight() {
-    return height;
-  }
-
-  @override String getName() {
-    return name ?? "";
-  }
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return WorkflowItem(); }
-    var w =  WorkflowItem(
-      id: json.containsKey("id") ? json["id"] : null,
-      name: json.containsKey("name") ? json["name"] : null,
-      logo: json.containsKey("logo") ? json["logo"] : null,
-      owner: json.containsKey("owner") ? json["owner"] : null,
-      ownerLogo: json.containsKey("owner_logo") ? json["owner_logo"] : null,
-      price: json.containsKey("price") ? json["price"]?.toDouble() : null,
-      licence: json.containsKey("licence") ? json["licence"] : null,
-      description: json.containsKey("description") ? json["description"] : null,
-      shortDescription: json.containsKey("short_description") ? json["short_description"] : null,
-      inputs: json["inputs"] ?? [],
-      outputs: json["outputs"] ?? [],
-      source: json.containsKey("source") ? json["source"] : null,
-      model: json.containsKey("resource_model") ? ResourceModel().deserialize(json["resource_model"]) : null,
-      workflowID: json.containsKey("workflow_id") ? json["workflow_id"] : null,
-    );
-    if (w.logo != null) {
-      //
-      var image = Image.network(w.logo!);
-      image.image
-        .resolve(const ImageConfiguration())
-        .addListener(
-            ImageStreamListener(
-                (ImageInfo info, bool _) {
-                  w.width = info.image.width.toDouble();
-                  w.height = info.image.height.toDouble();
-                }));
-    }
-    return w;
-  }
-  @override Map<String, dynamic> serialize() => {
-    "id": id,
-    "name": name,
-    "logo": logo,
-    "owner": owner,
-    "owner_logo": ownerLogo,
-    "price": price,
-    "licence": licence,
-    "description": description,
-    "short_description": shortDescription,
-    "inputs": inputs,
-    "outputs": outputs,
-    "source": source,
-    "resource_model": model?.serialize(),
-    "workflow_id": workflowID,
-  };
-}
-
-class DataItem extends SerializerDeserializer<DataItem> implements AbstractItem<DataItem> {
-  DataItem({
-    this.id,
-    this.name,
-    this.logo,
-    this.owner,
-    this.ownerLogo,
-    this.price,
-    this.source,
-    this.licence,
-    this.description,
-    this.shortDescription,
-    this.inputs = _empty,
-    this.outputs = _empty,
-    this.model,
-    this.protocols = const [],
-    this.dataType,
-    this.exemple,
-  });
-  @override String? id;
-  @override String? name;
-  @override String? logo;
-  @override String? source;
-  @override String? ownerLogo;
-  @override String? owner;
-  @override String topic = "data";
-  @override double? price;
-  @override String? licence;
-  @override List<dynamic> inputs;
-  @override List<dynamic> outputs;
-  @override String? description;
-  @override String? shortDescription;
-  @override ResourceModel? model;
-  // Special Attributes
-  List<String> protocols = [];
-  String? dataType;
-  String? exemple;
-  @override String getName() {
-    return name ?? "";
-  }
-  @override String getID() {
-    return id ?? "";
-  }
-
-  double? width;
-  double? height;
-  @override
-  double? getWidth() {
-    return width;
-  }
-  @override
-  double? getHeight() {
-    return height;
-  }
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return DataItem(); }
-    var w = DataItem(
-      id: json.containsKey("id") ? json["id"] : null,
-      name: json.containsKey("name") ? json["name"] : null,
-      logo: json.containsKey("logo") ? json["logo"] : null,
-      owner: json.containsKey("owner") ? json["owner"] : null,
-      ownerLogo: json.containsKey("owner_logo") ? json["owner_logo"] : null,
-      price: json.containsKey("price") ? json["price"]?.toDouble() : null,
-      licence: json.containsKey("licence") ? json["licence"] : null,
-      description: json.containsKey("description") ? json["description"] : null,
-      shortDescription: json.containsKey("short_description") ? json["short_description"] : null,
-      inputs: json["inputs"] ?? [],
-      outputs: json["outputs"] ?? [],
-      source: json.containsKey("source") ? json["source"] : null,
-      model: json.containsKey("resource_model") ? ResourceModel().deserialize(json["resource_model"]) : null,
-      protocols: json.containsKey("protocols") ? json["protocols"] : [],
-      dataType: json.containsKey("data_type") ? json["data_type"] : null,
-      exemple: json.containsKey("exemple") ? json["exemple"] : null,
-    );
-    if (w.logo != null) {
-      //
-      var image = Image.network(w.logo!);
-      image.image
-        .resolve(const ImageConfiguration())
-        .addListener(
-            ImageStreamListener(
-                (ImageInfo info, bool _) {
-                  w.width = info.image.width.toDouble();
-                  w.height = info.image.height.toDouble();
-                }));
-    }
-    return w;
-  }
-  @override Map<String, dynamic> serialize() => {
-    "id": id,
-    "name": name,
-    "logo": logo,
-    "owner": owner,
-    "owner_logo": ownerLogo,
-    "price": price,
-    "licence": licence,
-    "description": description,
-    "short_description": shortDescription,
-    "inputs": inputs,
-    "outputs": outputs,
-    "source": source,
-    "resource_model": model?.serialize(),
-    "protocols": protocols,
-    "data_type": dataType,
-    "exemple": exemple,
-  };
-}
-
-class DataCenterItem extends SerializerDeserializer<DataCenterItem> implements AbstractItem<DataCenterItem> {
-  DataCenterItem({
-    this.id,
-    this.name,
-    this.logo,
-    this.owner,
-    this.ownerLogo,
-    this.price,
-    this.source,
-    this.licence,
-    this.description,
-    this.shortDescription,
-    this.inputs = _empty,
-    this.outputs = _empty,
-    this.model,
-    this.cpus = const [],
-    this.gpus = const [],
-    this.ram,
-  });
-  @override String? id;
-  @override String? name;
-  @override String? logo;
-  @override String? source;
-  @override String? ownerLogo;
-  @override String? owner;
-  @override String topic = "datacenter";
-  @override double? price;
-  @override String? licence;
-  @override List<dynamic> inputs;
-  @override List<dynamic> outputs;
-  @override String? description;
-  @override String? shortDescription;
-  @override ResourceModel? model;
-  // Special Attributes 
-  List<CPU> cpus = [];
-  List<GPU> gpus = [];
-  RAM? ram;
-  @override String getID() {
-    return id ?? "";
-  }
-  @override String getName() {
-    return name ?? "";
-  }
-  double? width;
-  double? height;
-  @override
-  double? getWidth() {
-    return width;
-  }
-  @override
-  double? getHeight() {
-    return height;
-  }
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return DataCenterItem(); }  
-
-    var w = DataCenterItem(
-      id: json.containsKey("id") ? json["id"] : null,
-      name: json.containsKey("name") ? json["name"] : null,
-      logo: json.containsKey("logo") ? json["logo"] : null,
-      owner: json.containsKey("owner") ? json["owner"] : null,
-      ownerLogo: json.containsKey("owner_logo") ? json["owner_logo"] : null,
-      price: json.containsKey("price") ? json["price"]?.toDouble() : null,
-      licence: json.containsKey("licence") ? json["licence"] : null,
-      description: json.containsKey("description") ? json["description"] : null,
-      shortDescription: json.containsKey("short_description") ? json["short_description"] : null,
-      inputs: json["inputs"] ?? [],
-      outputs: json["outputs"] ?? [],
-      source: json.containsKey("source") ? json["source"] : null,
-      model: json.containsKey("resource_model") ? ResourceModel().deserialize(json["resource_model"]) : null,
-      cpus: json.containsKey("cpus") ? fromListJson(json["cpus"], CPU()) : [],
-      gpus: json.containsKey("gpus") ? fromListJson(json["gpus"], GPU()) : [],
-      ram: json.containsKey("ram") ? RAM().deserialize(json["ram"]) : null,
-    );
-    if (w.logo != null) {
-      //
-      var image = Image.network(w.logo!);
-      image.image
-        .resolve(const ImageConfiguration())
-        .addListener(
-            ImageStreamListener(
-                (ImageInfo info, bool _) {
-                  w.width = info.image.width.toDouble();
-                  w.height = info.image.height.toDouble();
-                }));
-    }
-    return w;
-  }
-  @override Map<String, dynamic> serialize() => {
-    "id": id,
-    "name": name,
-    "logo": logo,
-    "owner": owner,
-    "owner_logo": ownerLogo,
-    "price": price,
-    "licence": licence,
-    "description": description,
-    "short_description": shortDescription,
-    "inputs": inputs,
-    "outputs": outputs,
-    "source": source,
-    "resource_model": model?.serialize(),
-    "cpus": toListJson<CPU>(cpus),
-    "gpus": toListJson<GPU>(gpus),
-    "ram": ram?.serialize(),
-  };
-}
-class CPU extends SerializerDeserializer<CPU> {
-  CPU({
-    this.cores,
-    this.platform,
-    this.architecture,
-    this.minimumMemory,
-    this.shared = false,
-  });
-  double? cores;
-  String? platform;
-  bool shared = false;
-  String? architecture;
-  double? minimumMemory;
-
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return CPU(); }  
-    return CPU(
-      cores: json.containsKey("cores") ? json["cores"]?.toDouble() : null,
-      platform: json.containsKey("platform") ? json["platform"] : null,
-      architecture: json.containsKey("architecture") ? json["architecture"] : null,
-      minimumMemory: json.containsKey("minimumMemory") ? json["minimumMemory"]?.toDouble() : null,
-      shared: json.containsKey("shared") ? json["shared"] : false,
-    );
-  }
-  @override Map<String, dynamic> serialize() => {
-    "cores": cores,
-    "platform": platform,
-    "architecture": architecture,
-    "minimumMemory": minimumMemory,
-    "shared": shared,
-  };
-}
-class GPU extends SerializerDeserializer<GPU> {
-  GPU({
-    this.cudaCores,
-    this.memory,
-    this.model,
-    this.tensorCores,
-  });
-  double? cudaCores;
-  double? memory;
-  String? model;
-  double? tensorCores;
-
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return GPU(); }  
-    return GPU(
-      cudaCores: json.containsKey("cuda_cores") ? json["cuda_cores"]?.toDouble() : null,
-      memory: json.containsKey("memory") ? json["memory"]?.toDouble() : null,
-      model: json.containsKey("model") ? json["model"] : null,
-      tensorCores: json.containsKey("tensor_cores") ? json["tensor_cores"]?.toDouble() : null,
-    );
-  }
-  @override Map<String, dynamic> serialize() => {
-    "cuda_cores": cudaCores,
-    "memory": memory,
-    "model": model,
-    "tensor_cores": tensorCores,
-  };
-}
-class RAM extends SerializerDeserializer<RAM> {
-  RAM({
-    this.ecc = false,
-    this.size,
-  });
-  bool ecc = false;
-  double? size;
-
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return RAM(); }  
-    return RAM(
-      ecc: json.containsKey("ecc") ? json["ecc"] : false,
-      size: json.containsKey("size") ? json["size"]?.toDouble() : null,
-    );
-  }
-  @override Map<String, dynamic> serialize() => {
-    "ecc": ecc,
-    "size": size,
-  };
-}
-class StorageItem extends SerializerDeserializer<StorageItem> implements AbstractItem<StorageItem> {
-  StorageItem({
-    this.id,
-    this.name,
-    this.logo,
-    this.owner,
-    this.ownerLogo,
-    this.price,
-    this.source,
-    this.licence,
-    this.description,
-    this.shortDescription,
-    this.inputs = _empty,
-    this.outputs = _empty,
-    this.acronym,
-    this.type,
-    this.size,
-    this.url,
-    this.encryption = false,
-    this.redundancy,
-    this.throughput,
-    this.model,
-  });  
-  @override String? id;
-  @override String? name;
-  @override String? logo;
-  @override String? source;
-  @override String? ownerLogo;
-  @override String? owner;
-  @override String topic = "storage";
-  @override double? price;
-  @override String? licence;
-  @override List<dynamic> inputs;
-  @override List<dynamic> outputs;
-  @override String? description;
-  @override String? shortDescription;
-  @override ResourceModel? model;
-  // special attributes
-  String? acronym;
-  String? type;
-  int? size;
-  String? url;
-  bool encryption = false;
-  String? redundancy;
-  String? throughput;
-  @override String getName() {
-    return name ?? "";
-  }
-  @override String getID() {
-    return id ?? "";
-  }
-  double? width;
-  double? height;
-  @override
-  double? getWidth() {
-    return width;
-  }
-  @override
-  double? getHeight() {
-    return height;
-  }
-  @override deserialize(dynamic json) {
-    try { json = json as Map<String, dynamic>;
-    } catch (e) { return StorageItem(); }   
-    var w = StorageItem(
-      id: json.containsKey("id") ? json["id"] : null,
-      name: json.containsKey("name") ? json["name"] : null,
-      logo: json.containsKey("logo") ? json["logo"] : null,
-      owner: json.containsKey("owner") ? json["owner"] : null,
-      ownerLogo: json.containsKey("owner_logo") ? json["owner_logo"] : null,
-      price: json.containsKey("price") ? json["price"]?.toDouble() : null,
-      licence: json.containsKey("licence") ? json["licence"] : null,
-      description: json.containsKey("description") ? json["description"] : null,
-      shortDescription: json.containsKey("short_description") ? json["short_description"] : null,
-      inputs: json["inputs"] ?? [],
-      outputs: json["outputs"] ?? [],
-      source: json.containsKey("source") ? json["source"] : null,
-      model: json.containsKey("resource_model") ? ResourceModel().deserialize(json["resource_model"]) : null,
-      acronym: json.containsKey("acronym") ? json["acronym"] : null,
-      type: json.containsKey("type") ? json["type"] : null,
-      size: json.containsKey("size") ? json["size"] : null,
-      url: json.containsKey("url") ? json["url"] : null,
-      encryption: json.containsKey("encryption") ? json["encryption"] : false,
-      redundancy: json.containsKey("redundancy") ? json["redundancy"] : null,
-      throughput: json.containsKey("throughput") ? json["throughput"] : null,
-    );
-    if (w.logo != null) {
-      //
-      var image = Image.network(w.logo!);
-      image.image
-        .resolve(const ImageConfiguration())
-        .addListener(
-            ImageStreamListener(
-                (ImageInfo info, bool _) {
-                  w.width = info.image.width.toDouble();
-                  w.height = info.image.height.toDouble();
-                }));
-    }
-    return w;
-  }
-  @override Map<String, dynamic> serialize() => {
-    "id": id,
-    "name": name,
-    "logo": logo,
-    "owner": owner,
-    "owner_logo": ownerLogo,
-    "price": price,
-    "licence": licence,
-    "description": description,
-    "short_description": shortDescription,
-    "inputs": inputs,
-    "outputs": outputs,
-    "source": source,
-    "resource_model": model?.serialize(),
-    "acronym": acronym,
-    "type": type,
-    "size": size,
-    "url": url,
-    "encryption": encryption,
-    "redundancy": redundancy,
-    "throughput": throughput,
-  };
-}

lib/models/shared.dart

@@ -3,7 +3,49 @@ import 'package:oc_front/models/response.dart';
 import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/models/workspace.dart';
 
-class SharedWorkspace extends SerializerDeserializer<SharedWorkspace> {
+/* 
+  based on :
+  type CollaborativeAreaRule struct {
+	ShareMode   string    `json:"share_mode,omitempty" bson:"share_mode,omitempty"`     // Share is the share of the rule
+	CreatedAt   time.Time `json:"created_at,omitempty" bson:"created_at,omitempty"`     // CreatedAt is the time the rule was created
+	Creator     string    `json:"creator,omitempty" bson:"creator,omitempty"`           // Creator is the creator of the rule
+	ExploitedBy string    `json:"exploited_by,omitempty" bson:"exploited_by,omitempty"` // ExploitedBy is the exploited by of the rule
+}
+*/
+class CollaborativeAreaRule extends SerializerDeserializer<CollaborativeAreaRule> {
+  String? shareMode;
+  DateTime? createdAt;
+  String? creator;
+  String? exploitedBy;
+
+  CollaborativeAreaRule(
+      {this.shareMode,
+      this.createdAt,
+      this.creator,
+      this.exploitedBy,});
+  
+  @override
+  CollaborativeAreaRule deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return CollaborativeAreaRule(); }   
+    return CollaborativeAreaRule(
+      shareMode: json.containsKey("share_mode") ? json["share_mode"] : null,
+      createdAt: json.containsKey("created_at") ? DateTime.parse(json["created_at"]) : null,
+      creator: json.containsKey("creator") ? json["creator"] : null,
+      exploitedBy: json.containsKey("exploited_by") ? json["exploited_by"] : null,
+    );
+  }
+
+  @override
+  Map<String, dynamic> serialize() => {
+    "share_mode": shareMode,
+    "created_at": createdAt?.toIso8601String(),
+    "creator": creator,
+    "exploited_by": exploitedBy,
+  };
+}
+
+class CollaborativeArea extends SerializerDeserializer<CollaborativeArea> {
   String? id;
   String? name;
   String? description;
@@ -13,9 +55,10 @@ class SharedWorkspace extends SerializerDeserializer<SharedWorkspace> {
   List<Workspace> workspaces = [];
   List<Workflow> workflows = [];
   List<Peer> peers = [];
-  List<Rule> rules = [];
+  List<dynamic> rules = [];
+  CollaborativeAreaRule? rule;
 
-  SharedWorkspace(
+  CollaborativeArea(
       {this.id,
       this.name,
       this.description,
@@ -25,23 +68,25 @@ class SharedWorkspace extends SerializerDeserializer<SharedWorkspace> {
       this.workspaces = const [],
       this.workflows = const [],
       this.peers = const [],
+      this.rule,
       this.rules = const []});
 
   @override
   deserialize(dynamic json) {
     try { json = json as Map<String, dynamic>;
-    } catch (e) { return SharedWorkspace(); }   
-    return SharedWorkspace(
+    } catch (e) { return CollaborativeArea(); }   
+    return CollaborativeArea(
+      rule : json.containsKey("collaborative_area") ? CollaborativeAreaRule().deserialize(json["collaborative_area"]) : CollaborativeAreaRule(),
       id: json.containsKey("id") ? json["id"] : null,
       name: json.containsKey("name") ? json["name"] : null,
+      creatorID: json.containsKey("creator_id") ? json["creator_id"] : null,
       description: json.containsKey("description") ? json["description"] : null,
-      creatorID: json.containsKey("peer_id") ? json["peer_id"] : null,
       version: json.containsKey("version") ? json["version"] : null,
       attributes: json.containsKey("attributes") ? json["attributes"] : {},
-      workspaces: json.containsKey("shared_workspaces") ? fromListJson(json["shared_workspaces"], Workspace()) : [],
-      workflows: json.containsKey("shared_workflows") ? fromListJson(json["shared_workflows"], Workflow()) : [],
-      peers: json.containsKey("shared_peers") ? fromListJson(json["shared_peers"], Peer()) : [],
-      rules: json.containsKey("shared_rules") ? fromListJson(json["shared_rules"], Rule()) : [],
+      workspaces: json.containsKey("shared_workspaces") && json["shared_workspaces"] != null ? fromListJson(json["shared_workspaces"], Workspace()) : [],
+      workflows: json.containsKey("shared_workflows") && json["shared_workflows"] != null ? fromListJson(json["shared_workflows"], Workflow()) : [],
+      peers: json.containsKey("shared_peers") && json["shared_peers"] != null ? fromListJson(json["shared_peers"], Peer()) : [],
+      rules: json.containsKey("shared_rules") && json["shared_rules"] != null ? json["shared_rules"] : [],
     );
   }
   @override
@@ -52,6 +97,7 @@ class SharedWorkspace extends SerializerDeserializer<SharedWorkspace> {
     "creator_id": creatorID,
     "version": version,
     "attributes": attributes,
+    "rule": rule?.serialize(),
     "workspaces": workspaces.map((e) => e.id).toList(),
     "workflows": workflows.map((e) => e.id).toList(),
     "peers": peers.map((e) => e.id).toList(),

lib/models/workflow.dart

@@ -1,40 +1,41 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 import 'package:flutter_flow_chart/flutter_flow_chart.dart';
-import 'package:oc_front/core/models/workspace_local.dart';
 import 'package:oc_front/models/abstract.dart';
 import 'package:oc_front/models/logs.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/data.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/resources/storage.dart';
+import 'package:oc_front/models/resources/workflow.dart';
 import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/search.dart';
+import 'package:oc_front/widgets/forms/sub_keys_forms.dart';
 
 class Check extends SerializerDeserializer<Check> {
-  bool is_available = false;
+  bool isAvailable = false;
 
   Check({
-    this.is_available = false,
+    this.isAvailable = false,
   });
 
   @override deserialize(dynamic json) {
     try { json = json as Map<String, dynamic>;
     } catch (e) { return Check(); }   
     return Check(
-      is_available: json.containsKey("is_available") ? json["is_available"] : false,
+      isAvailable: json.containsKey("is_available") ? json["is_available"] : false,
     );
   }
   @override Map<String, dynamic> serialize() {
     return {
-      "is_available": is_available,
+      "is_available": isAvailable,
     };
   }
 }
 
-
 class WorkflowExecutions extends SerializerDeserializer<WorkflowExecutions> {
   List<WorkflowExecution> executions = [];
-  String? executionData;
-  int? status;
-  String? workflowId;
-
+  
   WorkflowExecutions({
     this.executions = const [],
   });
@@ -56,7 +57,7 @@ class WorkflowExecutions extends SerializerDeserializer<WorkflowExecutions> {
 class WorkflowExecution extends SerializerDeserializer<WorkflowExecution> {
   String? id;
   String? name;
-  String? executionData;
+  String? startDate;
   String? endDate;
   int? status;
   String? workflowId;
@@ -66,7 +67,7 @@ class WorkflowExecution extends SerializerDeserializer<WorkflowExecution> {
 
   WorkflowExecution({
     this.id,
-    this.executionData,
+    this.startDate,
     this.status,
     this.workflowId,
     this.name,
@@ -79,8 +80,8 @@ class WorkflowExecution extends SerializerDeserializer<WorkflowExecution> {
     return WorkflowExecution(
       id: json.containsKey("id") ? json["id"] : "",
       endDate: json.containsKey("end_date") ? json["end_date"] : "",
-      executionData: json.containsKey("execution_date") ? json["execution_date"] : "",
-      status: json.containsKey("status") ? json["status"] : 1,
+      startDate: json.containsKey("execution_date") ? json["execution_date"] : "",
+      status: json.containsKey("state") ? json["state"] : 1,
       workflowId: json.containsKey("workflow_id") ? json["workflow_id"] : "",
       name: json.containsKey("name") ? json["name"] : "",
     );
@@ -91,7 +92,7 @@ class WorkflowExecution extends SerializerDeserializer<WorkflowExecution> {
       "id": id,
       "name": name,
       "end_date": endDate,
-      "execution_data": executionData,
+      "execution_data": startDate,
       "status": status,
       "workflow_id": workflowId,
     };
@@ -103,32 +104,28 @@ class Workflow extends SerializerDeserializer<Workflow>  implements ShallowData
   String? id;
   String? name;
   List<dynamic> data;
-  List<dynamic> datacenter;
+  List<dynamic> compute;
   List<dynamic> storage;
   List<dynamic> processing;
   List<dynamic> workflows;
   Graph? graph;
-  Scheduler? schedule;
-  bool scheduleActive = false;
   List<dynamic> shared;
 
   Workflow({
     this.id,
     this.name = "",
     this.data = const [],
-    this.datacenter = const [],
+    this.compute = const [],
     this.storage = const [],
     this.processing = const [],
     this.workflows = const [],
     this.graph,
-    this.schedule,
-    this.scheduleActive = false,
     this.shared = const [],
   });
 
   @override String getID() => id ?? "";
   @override String getName() => name ?? "";
-  @override String getDescription() => "";
+  String getDescription() => "";
 
   @override deserialize(dynamic json) {
     try { json = json as Map<String, dynamic>;
@@ -138,13 +135,11 @@ class Workflow extends SerializerDeserializer<Workflow>  implements ShallowData
       name: json.containsKey("name") ? json["name"] : "",
       workflows: json.containsKey("workflows") ? json["workflows"] : [],
       processing: json.containsKey("processings") ? json["processings"] : [],
-      datacenter: json.containsKey("datacenters") ? json["datacenters"] : [],
+      compute: json.containsKey("computes") ? json["computes"] : [],
       data: json.containsKey("datas") ? json["datas"] : [],
-      scheduleActive: json.containsKey("schedule_active") ? json["schedule_active"] : false,
       storage: json.containsKey("storages") ? json["storages"] : [],
       shared: json.containsKey("shared") ? json["shared"] : [],
       graph: json.containsKey("graph") ? Graph().deserialize(json["graph"]) : null,
-      schedule: json.containsKey("schedule") ?  Scheduler().deserialize(json["schedule"]) : null,
     );
   }
   @override Map<String, dynamic> serialize() {
@@ -152,12 +147,10 @@ class Workflow extends SerializerDeserializer<Workflow>  implements ShallowData
       "id": id,
       "name": name,
       "datas": data,
-      "datacenters" : datacenter,
       "storages": storage,
-      "processings": processing,
+      "computes" : compute,
       "workflows": workflows,
-      "schedule_active": scheduleActive,
-      "schedule": schedule?.serialize(),
+      "processings": processing,
     };
     if (graph != null) {
       obj["graph"] = graph!.serialize();
@@ -168,24 +161,17 @@ class Workflow extends SerializerDeserializer<Workflow>  implements ShallowData
   void fromDashboard(Map<String, dynamic> j) {
     id = j["id"];
     name = j["name"];
-    scheduleActive = j["schedule_active"];
     if (j.containsKey("graph")) { 
       graph = Graph();
       graph!.fromDashboard(j["graph"]);
     }
-    if (j.containsKey("schedule")) {
-      schedule = Scheduler();
-      schedule!.fromDashboard(j["schedule"]);
-    }
   }
   Map<String, dynamic> toDashboard() {
     return {
       "id": id,
       "name": name,
-      "graph": graph?.toDashboard(),
-      "schedule_active": scheduleActive,
-      "schedule": schedule?.toDashboard(),
       "shared": shared,
+      "graph": graph?.toDashboard(),
     };
   }
 }
@@ -221,7 +207,7 @@ class Scheduler extends SerializerDeserializer<Scheduler> {
         end = DateTime.parse(j["end"]);
       }
       
-    } catch (e) {}
+    } catch (e) { /**/ }
   }
   Map<String, dynamic> toDashboard() {
     return {
@@ -279,6 +265,159 @@ class Graph extends SerializerDeserializer<Graph> {
     this.links = const [],
   });
 
+  Map<String, List<dynamic>> getInfosToUpdate(SubMapFormsType type) {
+      Map<String, List<dynamic>> infos = {};
+      for (var item in items.values) {
+        var inst = item.getElement()?.getSelectedInstance();
+        if (inst == null) { return infos; }
+        infos[item.id ?? ""] = (type == SubMapFormsType.INPUT ? inst.inputs : ( 
+          type == SubMapFormsType.OUTPUT ? inst.outputs : inst.env)).map( (e) => e.serialize()).toList();
+      }
+      return infos;
+  }
+
+  Map<String, List<dynamic>> getEnvToUpdate() {
+      return getInfosToUpdate(SubMapFormsType.ENV);
+  }
+
+  Map<String, List<dynamic>> getInputToUpdate() {
+      return getInfosToUpdate(SubMapFormsType.INPUT);
+  }
+
+  Map<String, List<dynamic>> getOutputToUpdate() {
+      return getInfosToUpdate(SubMapFormsType.OUTPUT);
+  }
+
+
+    GraphItem getItemByElementID(String id) {
+      return items[id] ?? GraphItem();
+    }
+  Map<String,GraphItem?> getArrowByElementID(String id) {
+    Map<String,GraphItem?> arr = {};
+    for (var link in links) {
+      var nested = false;
+      var reverse = false;
+      String? from = link.source?.id;
+      String? to = link.destination?.id;
+      bool isInLink = (from?.contains(id) ?? false) || (to?.contains(id) ?? false);
+      if (isInLink && (["storage", "compute"].contains(getItemByElementID(from ?? "").getElement()?.getType()) 
+      || ["storage", "compute"].contains(getItemByElementID(to ?? "").getElement()?.getType()))) {
+        nested = true;
+        reverse = link.source?.id?.contains(id) ?? false;
+      }
+      if (nested || isInLink) {
+          arr[reverse ? (to ?? "") : (from ?? "") ] = getItemByElementID(reverse ? (to ?? "") : (from ?? "") );
+      }
+    }
+    return arr;
+  }
+
+  void fillEnv(AbstractItem? mainItem, GraphItem? item, SubMapFormsType type, Map<String,int> alreadySeen) {
+    if (mainItem == null || item == null) {
+      return;
+    }
+    AbstractItem? el = item.getElement();
+    if (el?.getSelectedInstance() == null) {
+      return;
+    }
+    var inst = el!.getSelectedInstance()!;
+    
+    var inst2 = mainItem.getSelectedInstance()!;
+    var what = type == SubMapFormsType.INPUT ? inst.inputs : ( 
+      type == SubMapFormsType.OUTPUT ? inst.outputs : inst.env);
+    var what2 = type == SubMapFormsType.INPUT ? inst2.inputs : ( 
+      type == SubMapFormsType.OUTPUT ? inst2.outputs : inst2.env);
+    for (var e in what2) {
+      if (e.attr != null && e.value == null) {
+        e.value = inst2.serialize()[e.attr!];
+      }
+    }
+    // should find arrow env info and add it to the env
+    List<Param> extParams = [];
+    var arrows = links.where( (e) => (e.source?.id?.contains(item.id ?? "") ?? false) || (e.destination?.id?.contains(item.id ?? "") ?? false));
+    for (var arrow in arrows) {
+      for (var info in arrow.infos) {
+        var i = info as Map<String, dynamic>;
+        for (var entry in i.entries) {
+          if (entry.value == null) { continue; }
+
+          var varName =  "LINK_${el.getName().toUpperCase().replaceAll(" ", "_")}_${entry.key.toUpperCase()}";
+          /*alreadySeen[varName] = (alreadySeen[varName] ?? -1) + 1;
+          if ((alreadySeen[varName] ?? 0) > 1) {
+            varName = "${varName}_${alreadySeen[varName]}";
+          }*/
+          if ((entry.value is String) && !isEnvAttr(entry.value, what2)) {
+            extParams.add(Param( name: varName,
+              attr: entry.key, value: entry.value, origin: item.id, readOnly: true));
+          }
+        }
+      }
+    }
+    for ( var param in what) {
+      if (param.attr == null) { continue; }
+      var varName = param.name != null && (param.name!.contains("LINK_") 
+            || param.name!.contains("DATA_")
+            || param.name!.contains("PROCESSING_")
+            || param.name!.contains("STORAGE_")
+            || param.name!.contains("WORKFLOW_")
+            || param.name!.contains("COMPUTE") ) ? param.name : "${el.topic.toUpperCase()}_${el.getName().toUpperCase().replaceAll(" ", "_")}_${param.attr!.toUpperCase()}";
+      /*alreadySeen[varName] = (alreadySeen[varName] ?? -1) + 1;
+      if ((alreadySeen[varName] ?? 0) > 0) {
+        varName = "${varName}_${alreadySeen[varName]}";
+      }*/
+      dynamic env;
+      if (param.value == null) { 
+        var s =  el.serialize();
+        s.addAll(el.getSelectedInstance()?.serialize() ?? {});
+        env = s[param.attr!];
+      } else {
+        env = param.value;
+      }
+      // bool isSrc = param.origin == null;
+      //if (isSrc) { continue; }
+      if (!isEnvAttr(env, what2)) {
+        extParams.add(Param( name: varName,
+          attr: param.attr, value: env, origin: item.id, readOnly: true));
+      }
+    }
+    for (var param in extParams) {
+      what2.add(param);
+    }
+  }
+
+  bool isEnvAttr(String value, List<Param> params) {
+    for (var e in params) {
+      if (value == e.value) { return true; }
+    }
+    return false;
+  }
+
+  void fill() {
+    Map<String, int> alreadySeen = {};
+    var its = items.values.toList();
+    for (var type in [SubMapFormsType.INPUT, SubMapFormsType.OUTPUT, SubMapFormsType.ENV]) {
+      for (var item in its) {
+        var envs = type == SubMapFormsType.INPUT ? item.getElement()?.getSelectedInstance()?.inputs : (
+          type == SubMapFormsType.OUTPUT ? item.getElement()?.getSelectedInstance()?.outputs : item.getElement()?.getSelectedInstance()?.env);
+        if (envs != null) {
+            envs.removeWhere( (e) => e.readOnly && e.name != null 
+            && (e.name!.contains("LINK_") 
+            || e.name!.contains("DATA_")
+            || e.name!.contains("PROCESSING_")
+            || e.name!.contains("STORAGE_")
+            || e.name!.contains("WORKFLOW_")
+            || e.name!.contains("COMPUTE") ));
+        }
+      }
+      for (var item in [...its, ...its.reversed]) {
+        var itss = getArrowByElementID(item.id ?? "");
+        for (var i in itss.values) {
+          fillEnv(item.getElement(), i, type, alreadySeen);
+        }
+      }
+    }
+  }
+
   void fromDashboard(Map<String, dynamic> j) {
     items = {};
     for (var el in (j["elements"] as Map<dynamic, dynamic>).values) {
@@ -292,9 +431,11 @@ class Graph extends SerializerDeserializer<Graph> {
       return d;
     }).toList();
     j["zoom"] = zoom;
+    fill();
   }
 
   Map<String, dynamic> toDashboard() {
+    fill();
     List<Map<String, dynamic>> elements = [];
     List<Map<String, dynamic>> arrows = [];
     for (var el in items.values) {
@@ -313,28 +454,70 @@ class Graph extends SerializerDeserializer<Graph> {
   @override deserialize(dynamic json) {
     try { json = json as Map<String, dynamic>;
     } catch (e) { return Graph(); }   
-    return Graph(
+    var g =  Graph(
       zoom: json.containsKey("zoom") ? double.parse(json["zoom"].toString()) : 0,
       links: json.containsKey("links") ? fromListJson(json["links"], GraphLink()) : [],
       items: json.containsKey("items") ? fromMapJson<GraphItem>(json["items"], GraphItem()) : {},
     );
+    g.fill();
+    return g;
+  }
+  @override Map<String, dynamic> serialize() {
+    fill();
+    return {
+      "zoom": zoom,
+      "items": toMapJson(items),
+      "links": toListJson(links),
+    };
+  }
+}
+
+class StorageProcessingGraphLink extends SerializerDeserializer<StorageProcessingGraphLink> {
+  bool write = false;
+  String? source;
+  String? destination;
+  String? filename;
+
+  StorageProcessingGraphLink({
+    this.write = false,
+    this.source,
+    this.destination,
+    this.filename,
+  });
+
+  @override deserialize(dynamic json) {
+    try { json = json as Map<String, dynamic>;
+    } catch (e) { return StorageProcessingGraphLink(); }   
+    return StorageProcessingGraphLink(
+      write: json.containsKey("write") ? json["write"] : false,
+      source: json.containsKey("source") ? json["source"] : "",
+      destination: json.containsKey("destination") ? json["destination"] : "",
+      filename: json.containsKey("filename") && json["filename"] != null ? json["filename"] : "",
+    );
+  }
+  @override Map<String, dynamic> serialize() {
+    return {
+      "write": write,
+      "source": source,
+      "destination": destination,
+      "filename": filename,
+    };
   }
-  @override Map<String, dynamic> serialize() => {
-    "zoom": zoom,
-    "items": toMapJson(items),
-    "links": toListJson(links),
-  };
 }
 
 class GraphLink extends SerializerDeserializer<GraphLink> {
   Position? source;
   Position? destination;
   GraphLinkStyle? style;
+  List<StorageProcessingGraphLink> infos = [];
+  List<Param> env = [];
 
   GraphLink({
     this.source,
     this.destination,
     this.style,
+    this.infos = const [],
+    this.env = const [],
   });
 
   void fromDashboard(Map<String, dynamic> j) {
@@ -342,6 +525,8 @@ class GraphLink extends SerializerDeserializer<GraphLink> {
     destination = Position(id: j["to"]["id"], x: j["to"]["x"], y: j["to"]["y"]);
     style = GraphLinkStyle();
     style!.fromDashboard(j["params"]);
+    infos = fromListJson(j["infos"], StorageProcessingGraphLink());
+    env = fromListJson(j["env"], Param());
   }
 
   Map<String, dynamic> toDashboard() {
@@ -357,6 +542,8 @@ class GraphLink extends SerializerDeserializer<GraphLink> {
         "y": destination?.y ?? 0,
       },
       "params": style?.toDashboard(),
+      "infos":  toListJson(infos),
+      "env": env.map( (el) => el.serialize()).toList(),
     };
   }
 
@@ -364,9 +551,11 @@ class GraphLink extends SerializerDeserializer<GraphLink> {
     try { json = json as Map<String, dynamic>;
     } catch (e) { return GraphLink(); }   
     return GraphLink(
-      source: json.containsKey("source") ? Position().deserialize(json["source"]) : null,
-      destination: json.containsKey("destination") ? Position().deserialize(json["destination"]) : null,
-      style: json.containsKey("style") ? GraphLinkStyle().deserialize(json["style"]) : null,
+      source: json.containsKey("source") && json["source"] != null  ? Position().deserialize(json["source"]) : null,
+      destination: json.containsKey("destination") && json["destination"] != null  ? Position().deserialize(json["destination"]) : null,
+      style: json.containsKey("style") && json["style"] != null  ? GraphLinkStyle().deserialize(json["style"]) : null,
+      infos: json.containsKey("storage_link_infos") && json["storage_link_infos"] != null ? fromListJson(json["storage_link_infos"], StorageProcessingGraphLink()) : [],
+      env: json.containsKey("env") && json["env"] != null ? fromListJson(json["env"], Param()) : [],
     );
   }
   @override Map<String, dynamic> serialize() {
@@ -380,6 +569,8 @@ class GraphLink extends SerializerDeserializer<GraphLink> {
     if (style != null) {
       obj["style"] = style!.serialize();
     }
+    obj["storage_link_infos"] = toListJson(infos);
+    obj["env"] = toListJson(env);
     return obj;
   }
 }
@@ -497,7 +688,7 @@ class GraphItem extends SerializerDeserializer<GraphItem> {
   DataItem? data;
   ProcessingItem? processing;
   StorageItem? storage;
-  DataCenterItem? datacenter;
+  ComputeItem? compute;
   WorkflowItem? workflow;
 
   GraphItem({
@@ -508,42 +699,41 @@ class GraphItem extends SerializerDeserializer<GraphItem> {
     this.data,
     this.processing,
     this.storage,
-    this.datacenter,
+    this.compute,
     this.workflow,
   });
 
+  AbstractItem? getElement() {
+    if (data != null) { return data!; }
+    if (processing != null) { return processing!; }
+    if (storage != null) { return storage!; }
+    if (compute != null) { return compute!; }
+    if (workflow != null) { return workflow!; }
+    return null;
+  }
+
+
   void fromDashboard(Map<String, dynamic> j) {
     id = j["id"];
     position = Position(x: j["x"], y: j["y"]);
     width = j["width"];
     height = j["height"];
     
-    var abs = WorkspaceLocal.getItem(j["element"]?["id"] ?? "", true) as AbstractItem<FlowData>?;
-    if (abs != null) {
-      if (abs.topic == "data") { 
-        data = DataItem().deserialize(abs.serialize()); 
-        data!.model = ResourceModel().deserialize(j["element"]["resource_model"]);
-      } else if (abs.topic == "processing") { 
-        processing = ProcessingItem().deserialize(abs.serialize());
-        processing!.model = ResourceModel().deserialize(j["element"]["resource_model"]);
-      } else if (abs.topic == "datacenter") { 
-        datacenter = DataCenterItem().deserialize(abs.serialize()); 
-        datacenter!.model = ResourceModel().deserialize(j["element"]["resource_model"]);
-      } else if (abs.topic == "storage") { 
-        storage = StorageItem().deserialize(abs.serialize()); 
-        storage!.model = ResourceModel().deserialize(j["element"]["resource_model"]);
-      } else if (abs.topic == "workflow") { 
-        workflow = WorkflowItem().deserialize(abs.serialize()); 
-        workflow!.model = ResourceModel().deserialize(j["element"]["resource_model"]);
+    if (j["element"] != null) {
+      if (j["element"]["type"] == "data") {  data = DataItem().deserialize(j["element"]); 
+      } else if (j["element"]["type"] == "processing") {  processing = ProcessingItem().deserialize(j["element"]);
+      } else if (j["element"]["type"] == "compute") { compute = ComputeItem().deserialize(j["element"]); 
+      } else if (j["element"]["type"] == "storage") { storage = StorageItem().deserialize(j["element"]); 
+      } else if (j["element"]["type"] == "workflow") { workflow = WorkflowItem().deserialize(j["element"]); 
       } else {
-        datacenter = null;
+        compute = null;
         data = null;
         processing = null;
         storage = null;
         workflow = null;
       }
     } else {
-        datacenter = null;
+        compute = null;
         data = null;
         processing = null;
         storage = null;
@@ -553,7 +743,8 @@ class GraphItem extends SerializerDeserializer<GraphItem> {
 
   Map<String, dynamic> toDashboard() {
     Map<String, dynamic> element = {};
-    for(var el in [data, processing, storage, datacenter, workflow]) {
+    List<AbstractItem?> items = [data, processing, storage, compute, workflow];
+    for(var el in items) {
       if (el != null && el.getID() != "") {
         element = el.serialize();
         break;
@@ -580,7 +771,7 @@ class GraphItem extends SerializerDeserializer<GraphItem> {
       data: json.containsKey("data") ? DataItem().deserialize(json["data"]) : null,
       processing: json.containsKey("processing") ? ProcessingItem().deserialize(json["processing"]) : null,
       storage: json.containsKey("storage") ? StorageItem().deserialize(json["storage"]) : null,
-      datacenter: json.containsKey("datacenter") ? DataCenterItem().deserialize(json["datacenter"]) : null,
+      compute: json.containsKey("compute") ? ComputeItem().deserialize(json["compute"]) : null,
       workflow: json.containsKey("workflow") ? WorkflowItem().deserialize(json["workflow"]) : null,
     );
   }
@@ -592,7 +783,7 @@ class GraphItem extends SerializerDeserializer<GraphItem> {
       "data": data?.serialize(),
       "processing": processing?.serialize(),
       "storage": storage?.serialize(),
-      "datacenter": datacenter?.serialize(),
+      "compute": compute?.serialize(),
       "workflow": workflow?.serialize(),
       "position": position?.serialize(),
     };

lib/models/workspace.dart

@@ -1,14 +1,17 @@
-import 'package:flutter_flow_chart/flutter_flow_chart.dart';
 import 'package:oc_front/models/abstract.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/data.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/storage.dart';
+import 'package:oc_front/models/resources/workflow.dart';
 import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/search.dart';
 
 class Workspace extends SerializerDeserializer<Workspace> implements ShallowData {
   String? id;
   String? name;
   bool? active;
   List<DataItem> datas;
-  List<DataCenterItem> datacenters;
+  List<ComputeItem> computes;
   List<StorageItem> storages;
   List<ProcessingItem> processings;
   List<WorkflowItem> workflows;
@@ -20,7 +23,7 @@ class Workspace extends SerializerDeserializer<Workspace> implements ShallowData
     this.active = false,
     this.workflows = const [],
     this.datas = const [],
-    this.datacenters = const [],
+    this.computes = const [],
     this.storages = const [],
     this.processings = const [],
     this.shared,
@@ -39,18 +42,20 @@ class Workspace extends SerializerDeserializer<Workspace> implements ShallowData
       active: json.containsKey("active") ? json["active"] : false,
       processings: json.containsKey("processing_resources") ? fromListJson(json["processing_resources"], ProcessingItem()) : [],
       storages: json.containsKey("storage_resources") ? fromListJson(json["storage_resources"], StorageItem()) : [],
-      datacenters: json.containsKey("datacenter_resources") ? fromListJson(json["datacenter_resources"], DataCenterItem()) : [],
+      computes: json.containsKey("compute_resources") ? fromListJson(json["compute_resources"], ComputeItem()) : [],
       datas: json.containsKey("data_resources") ? fromListJson(json["data_resources"], DataItem()) : [],
       workflows: json.containsKey("workflow_resources") ? fromListJson(json["workflow_resources"], WorkflowItem()) : []
     );
   }
-  @override Map<String, dynamic> serialize() => {
-    "id": id,
-    "name": name,
-    "processings": processings.map((e) => e.id).toList(),
-    "storages": storages.map((e) => e.id).toList(),
-    "datacenters": datacenters.map((e) => e.id).toList(),
-    "datas": datas.map((e) => e.id).toList(),
-    "workflows": workflows.map((e) => e.id).toList(),
-  };
+  @override Map<String, dynamic> serialize() { 
+    return {
+      "id": id,
+      "name": name,
+      "processings": processings.map((e) => e.id).toList(),
+      "storages": storages.map((e) => e.id).toList(),
+      "computes": computes.map((e) => e.id).toList(),
+      "datas": datas.map((e) => e.id).toList(),
+      "workflows": workflows.map((e) => e.id).toList(),
+    };
+  }
 }

lib/pages/abstract_page.dart

@@ -2,7 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 abstract class AbstractFactory {
+  GlobalKey getKey();
   Widget factory(GoRouterState state, List<String> args);
   bool searchFill();
-  void search(BuildContext context);
+  void search(BuildContext context, bool special);
+  String? getSearch();
+  void back(BuildContext context);
 }

lib/pages/catalog.dart

@@ -1,38 +1,80 @@
+import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:oc_front/core/models/shared_workspace_local.dart';
-import 'package:oc_front/core/models/workspace_local.dart';
+import 'package:oc_front/widgets/catalog.dart';
+import 'package:localstorage/localstorage.dart';
+import 'package:oc_front/pages/abstract_page.dart';
+import 'package:oc_front/models/resources/resources.dart';
 import 'package:oc_front/core/sections/header/header.dart';
 import 'package:oc_front/core/services/specialized_services/resource_service.dart';
-import 'package:oc_front/core/services/specialized_services/shared_service.dart';
-import 'package:oc_front/core/services/specialized_services/workspace_service.dart';
-import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/search.dart';
-import 'package:oc_front/pages/shared.dart';
-import 'package:oc_front/widgets/catalog.dart';
-import 'package:oc_front/pages/abstract_page.dart';
-import 'package:oc_front/core/sections/header/search.dart';
-import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
-import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
+
 
 class CatalogFactory implements AbstractFactory {
-  static List<AbstractItem> items = [];
+  @override GlobalKey getKey() { return key; }
   static GlobalKey<CatalogPageWidgetState> key = GlobalKey<CatalogPageWidgetState>();
-  @override bool searchFill() {  return CatalogFactory.items.isEmpty; }
-  @override Widget factory(GoRouterState state, List<String> args) { return CatalogPageWidget(); }
-  @override void search(BuildContext context) {
-    CatalogFactory.key.currentState?.widget.search.search(context, [ SearchConstants.get()! ], {}).then((value) {
-      if (value.data == null) { return; }
-      CatalogFactory.items = [ ...value.data!.workflows,
-        ...value.data!.processings, ...value.data!.datas, ...value.data!.storages, ...value.data!.datacenters,];
-      searchWidgetKey.currentState?.setState(() {});
+  @override void back(BuildContext context) {
+    var s = (localStorage.getItem("search") ?? "");
+    if (s != "") {
+      localStorage.setItem("search", s.split(",").sublist(1).join(","));
+      SearchConstants.set(s.split(",").sublist(1).join(","));
+      if ((localStorage.getItem("search") ?? "") == "") {
+        SearchConstants.remove();
+        key.currentState?.widget.isSearch = true;
+        key.currentState?.widget.items = [];
+        HeaderConstants.headerKey.currentState?.setState(() {});
+        HeaderConstants.headerWidget?.setState(() {});
+        CatalogFactory.key.currentState?.setState(() {}); 
+      } else {
+        CatalogFactory().search(context, false);
+      }
+    } else {
+      SearchConstants.remove();
+      key.currentState?.widget.isSearch = true;
+      key.currentState?.widget.items = [];
+      HeaderConstants.headerKey.currentState?.setState(() {});
+      HeaderConstants.headerWidget?.setState(() {});
       CatalogFactory.key.currentState?.setState(() {});
+    }
+  }
+  @override bool searchFill() {  return (key.currentState?.widget.items.isEmpty ?? true) && (key.currentState?.widget.isSearch ?? true); }
+  @override Widget factory(GoRouterState state, List<String> args) { return CatalogPageWidget(); }
+  @override String? getSearch() { 
+    if ((localStorage.getItem("search") ?? "") == "") { return null; }
+    return localStorage.getItem("search")!.split(",")[0]; 
+  }
+  @override void search(BuildContext context, bool special) {
+    if (special) { return; } // T
+    key.currentState?.widget.isSearch = true;
+    var s = (localStorage.getItem("search") ?? "");
+    if (s != "") {
+      if (SearchConstants.get() == null) { 
+        localStorage.setItem("search", s); 
+      } else if (s.split(",")[0] != SearchConstants.get()) {
+        localStorage.setItem("search", "${SearchConstants.get()!},$s");
+      }
+    } else if ((SearchConstants.get() ?? "") == "") {  return;
+    } else {  localStorage.setItem("search", SearchConstants.get()!); }
+    CatalogFactory.key.currentState?.widget.search.search(context, [ 
+      localStorage.getItem("search")!.split(",")[0] ], {}).then((value) {
+        if (value.data == null) {
+          key.currentState?.widget.items = [];
+        } else {
+          key.currentState?.widget.isSearch = false;
+          key.currentState?.widget.items = [ ...value.data!.workflows,
+            ...value.data!.processings, ...value.data!.datas, ...value.data!.storages, ...value.data!.computes,];
+        }
+      HeaderConstants.headerKey.currentState?.setState(() {});
+      HeaderConstants.headerWidget?.setState(() {});
+      CatalogFactory.key.currentState?.setState(() {});       // ignore: invalid_use_of_protected_member 
     });
   }
 }
 
+// ignore: must_be_immutable
 class CatalogPageWidget extends StatefulWidget {
   double? itemWidth;
+  bool isSearch = true;
+  List<AbstractItem> items = [];
   final ResourceService search = ResourceService();
   CatalogPageWidget ({
     this.itemWidth,
@@ -41,76 +83,21 @@ class CatalogPageWidget extends StatefulWidget {
 }
 class CatalogPageWidgetState extends State<CatalogPageWidget> {  
   @override Widget build(BuildContext context) {
+    if (widget.items.isEmpty) { 
+      if (widget.isSearch) { return Container(); }
+      return Container(
+        width: getMainWidth(context), 
+        height: getMainHeight(context) - 50,
+        color: Colors.grey.shade300, 
+        child: const Center(child: Text("NO RESOURCES FOUND", 
+          style: TextStyle(fontSize: 30, color: Colors.grey))
+      ),
+    ); }
     return Column( children : [
-        CatalogFactory.items.isEmpty ? Container() : 
-        Row( children: [ 
-          ShallowDropdownInputWidget(
-                current: WorkspaceLocal.current,
-                width: MediaQuery.of(context).size.width / 3,
-                all: () async => WorkspaceLocal.getWorkspacesShallow(),
-                type: SharedWorkspaceType.workspace,
-                change: (String? change) {
-                  WorkspaceLocal.changeWorkspace(change.toString());
-                },
-                color: Colors.white,
-                filled: const Color.fromRGBO(38, 166, 154, 1),
-                hintColor: Colors.grey.shade300,
-                canRemove: (String? remove) => remove != null,
-                remove: (String? remove) async {
-                  if (remove == null) { return; }
-                  WorkspaceLocal.deleteWorkspace(remove);
-                },
-            ),
-          ShallowTextInputWidget(
-                width: MediaQuery.of(context).size.width / 3,
-                type: SharedWorkspaceType.workspace,
-                color: Colors.white,
-                filled: const Color.fromRGBO(38, 166, 154, 1),
-                hintColor: Colors.grey.shade300,
-                canRemove: (p0) => p0 != null,
-                remove: (p0) async {
-                  await WorkspaceService().delete(context, p0, {}).then( (e) => WorkspaceLocal.deleteWorkspace(p0));
-                },
-                canLoad: (String? remove) => remove != null,
-                load: (Map<String?, dynamic> add) async {
-                  if (add["name"] == null) { return; }
-                  WorkspaceLocal.createWorkspace(add["name"], context);
-                },
-            ),
-            ShallowDropdownInputWidget(
-            iconLoad: Icons.share_rounded,
-            tooltipLoad: 'share',
-            tooltipRemove: 'unshare',
-            color: Colors.white,
-            filled: const Color.fromRGBO(38, 166, 154, 1),
-            hintColor: Colors.grey.shade300,
-            type: SharedWorkspaceType.workspace,
-            all: () async => SharedWorkspaceLocal.workspaces.values.map( 
-              (e) => Shallow(id: e.id ?? "", name: e.name ?? "") ).toList(),
-            current: WorkspaceLocal.workspaces[WorkspaceLocal.current]?.shared,
-            width: (MediaQuery.of(context).size.width / 3),
-            canLoad: (String? change) => SharedWorkspaceLocal.workspaces[change] == null 
-              || !SharedWorkspaceLocal.workspaces[change]!.workspaces.map( 
-                (e) => e.id ).contains(WorkspaceLocal.current),
-            canRemove: (String? change) => SharedWorkspaceLocal.workspaces[change] == null 
-              || SharedWorkspaceLocal.workspaces[change]!.workspaces.map( 
-                (e) => e.id ).contains(WorkspaceLocal.current), 
-            load: (String val) async {
-              await SharedService().addWorkspace(context, val, WorkspaceLocal.current ?? "");
-              // ignore: use_build_context_synchronously
-              SharedWorkspaceLocal.init(context, false);
-            },
-            remove: (String val) async {
-              await SharedService().removeWorkspace(context, val, WorkspaceLocal.current ?? "");
-               // ignore: use_build_context_synchronously
-              SharedWorkspaceLocal.init(context, false);
-            })
-        ]),
-        SizedBox( 
-        width: MediaQuery.of(context).size.width,
-          height: CatalogFactory.items.isEmpty ? 0 :  MediaQuery.of(context).size.height - HeaderConstants.height - 50,
-        child: SingleChildScrollView( child: CatalogWidget(items: CatalogFactory.items, itemWidth: widget.itemWidth) )),
+        SizedBox( width: getMainWidth(context),
+          height: getMainHeight(context) - 50,
+        child: SingleChildScrollView( child: CatalogWidget(items: CatalogFactory.key.currentState?.widget.items, itemWidth: widget.itemWidth) )),
       ]
     );
   }
-}
+}

lib/pages/catalog_item.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:localstorage/localstorage.dart';
 import 'package:oc_front/core/models/workspace_local.dart';
-import 'package:oc_front/models/search.dart';
+import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/core/services/router.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/models/resources/resources.dart';
 import 'package:oc_front/pages/abstract_page.dart';
 import 'package:oc_front/pages/catalog.dart';
 import 'package:oc_front/widgets/items/item.dart';
@@ -9,21 +13,38 @@ import 'package:oc_front/widgets/items/item_row.dart';
 
 class CatalogItemFactory implements AbstractFactory {
   static GlobalKey<CatalogItemPageWidgetState> key = GlobalKey<CatalogItemPageWidgetState>();
+  @override GlobalKey getKey() { return key; }
+  @override void back(BuildContext context) { 
+    search(context, false);
+  }
+  @override String? getSearch() { 
+    if ((localStorage.getItem("search") ?? "") == "") { return null; }
+    return localStorage.getItem("search")!.split(",")[0]; 
+  }
   @override bool searchFill() { return false; }
   @override Widget factory(GoRouterState state, List<String> args) { 
     var id = state.pathParameters[args.first];
     try {
-      var item = CatalogFactory.items.firstWhere( (element) => element.id == id );
-      return CatalogItemPageWidget(item : item); 
+      var item = CatalogFactory.key.currentState?.widget.items.firstWhere( (element) => element.id == id );
+      return CatalogItemPageWidget(item : item!); 
     } catch (e) { 
       var item =  WorkspaceLocal.getItem(id ?? "", false);
-      if (item != null) { return CatalogItemPageWidget(item : item as AbstractItem); }
+      if (item != null) { return CatalogItemPageWidget(item : item); }
       return Container(); 
     }
   }
-  @override void search(BuildContext context) { }
+  @override void search(BuildContext context, bool special) {
+    if (special) { return; } // T
+      var s = SearchConstants.get();
+      AppRouter.catalog.go(context, {});
+      Future.delayed(Duration(milliseconds: 10), () {
+        SearchConstants.set(s);
+        CatalogFactory().search(context, false);
+      });
+  }
 }
 
+// ignore: must_be_immutable
 class CatalogItemPageWidget extends StatefulWidget {
   AbstractItem item;
   CatalogItemPageWidget ({ required this.item }) : super(key: CatalogItemFactory.key);
@@ -32,8 +53,8 @@ class CatalogItemPageWidget extends StatefulWidget {
 class CatalogItemPageWidgetState extends State<CatalogItemPageWidget> {
   @override Widget build(BuildContext context) {
     return Column( children: [
-      ItemRowWidget(contextWidth: MediaQuery.of(context).size.width, item: widget.item, readOnly: true,),
-      ItemWidget(item: widget.item,),
+      ItemRowWidget(contextWidth: getMainWidth(context), item: widget.item, readOnly: true,),
+      ItemWidget(item: widget.item),
     ]);
   }
 }

lib/pages/datacenter.dart

@@ -1,22 +1,177 @@
+import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:oc_front/core/services/specialized_services/booking_service.dart';
+import 'package:oc_front/main.dart';
+import 'package:intl/intl.dart' as intl;
 import 'package:oc_front/pages/abstract_page.dart';
+import 'package:oc_front/widgets/sheduler_items/schedule.dart';
 
 class DatacenterFactory implements AbstractFactory {
-  static GlobalKey<DataCenterPageWidgetState> key = GlobalKey<DataCenterPageWidgetState>();
+  @override GlobalKey getKey() { return key; }
+  @override String? getSearch() { return ""; }
+  @override void back(BuildContext context) { }
+  static GlobalKey<ComputePageWidgetState> key = GlobalKey<ComputePageWidgetState>();
   @override bool searchFill() { return false; }
-  @override Widget factory(GoRouterState state, List<String> args) { return DataCenterPageWidget(); }
-  @override void search(BuildContext context) { }
+  @override Widget factory(GoRouterState state, List<String> args) { return ComputePageWidget(); }
+  @override void search(BuildContext context, bool special) { }
 }
 
-class DataCenterPageWidget extends StatefulWidget {
-  DataCenterPageWidget () : super(key: DatacenterFactory.key);
-  @override DataCenterPageWidgetState createState() => DataCenterPageWidgetState();
+// ignore: must_be_immutable
+class ComputePageWidget extends StatefulWidget {
+  bool isList = true;
+  DateTime start = DateTime.now();
+  DateTime end = DateTime.now().add(const Duration(days: 180));
+  final BookingExecutionService _service = BookingExecutionService();
 
-  static Widget factory() { return DataCenterPageWidget(); }
+  ComputePageWidget () : super(key: DatacenterFactory.key);
+  @override ComputePageWidgetState createState() => ComputePageWidgetState();
+
+  static Widget factory() { return ComputePageWidget(); }
 }
-class DataCenterPageWidgetState extends State<DataCenterPageWidget> {
+class ComputePageWidgetState extends State<ComputePageWidget> {
+  List<Color> colors = [Colors.blue, Colors.orange, redColor, Colors.green, redColor];
+  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS", "MISSED"];
+  
   @override Widget build(BuildContext context) {
-    return Column( children: []);
+        GlobalKey<ScheduleWidgetState> k = GlobalKey<ScheduleWidgetState>();
+        return Column( children: [
+          Container( color: lightColor,
+            height: 50, width: getMainWidth(context),
+            child: Padding(padding: const EdgeInsets.symmetric(horizontal: 50),
+              child: Row( children: [
+                Padding(padding: const EdgeInsets.only(right: 30),
+                  child: Tooltip( message: widget.isList ? "calendar view" : "list view",
+                    child: InkWell( child: Icon( widget.isList ? Icons.calendar_month : Icons.list, color: Colors.white 
+                      , size: 25 ),
+                      onTap: () { 
+                        widget.isList = !widget.isList;
+                        k.currentState?.setState(() { k.currentState?.widget.isList = widget.isList; });
+                      })
+                  ),
+                ), 
+                Container(padding: const EdgeInsets.only(left: 20),
+                  width: getMainWidth(context) / 5,
+                  height: 30,
+                  child: DateTimeField( 
+                                validator: (value) {
+                                  return null;
+                                },
+                                resetIcon: null,
+                                onShowPicker: (context, currentValue) async { 
+                                  var date = await showDatePicker(                                    
+                                    builder: (BuildContext context, Widget? child) {
+                                      Widget w = Theme(
+                                        data: ThemeData(
+                                          cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
+                                          dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
+                                          colorScheme: ColorScheme.light(
+                                            background: midColor,
+                                            tertiary: Colors.grey,
+                                            secondary: Colors.grey,
+                                            primary: Colors.black),
+                                        ),
+                                        child: child ?? Container(),
+                                      );
+                                      return w;
+                                    },
+                                    context: context,
+                                    firstDate: DateTime(1900),
+                                    initialDate: widget.start,
+                                    lastDate: DateTime(2100)
+                                  );
+                                  return date;
+                                },
+                                
+                                format: intl.DateFormat('y-M-dd hh:mm:ss'),
+                                initialValue: widget.start,
+                                onChanged: (value) { 
+                                  if (value == null) { return; }
+                                  setState(() { widget.start = value; });
+                                },
+                                style: const TextStyle(fontSize: 12),
+                                decoration: const  InputDecoration(
+                                  fillColor: Colors.white,
+                                  floatingLabelBehavior: FloatingLabelBehavior.always,
+                                  filled: true,
+                                  alignLabelWithHint: false,
+                                  hintText: "enter start date...",
+                                  labelText: "",
+                                  errorStyle: TextStyle(fontSize: 0),
+                                  hintStyle: TextStyle(fontSize: 10),
+                                  labelStyle: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500),
+                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+                                  border: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+                                  contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                                ),
+                          )
+                ),
+                Container(padding: const EdgeInsets.only(left: 20), 
+                  child: const Text("TO", style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.w500))),
+                Container( padding: const EdgeInsets.only(left: 20, right: 20),
+                  width: getMainWidth(context) / 5,
+                  height: 30,
+                  child: DateTimeField( 
+                                validator: (value) {
+                                  return null;
+                                },
+                                resetIcon: null,
+                                onShowPicker: (context, currentValue) async { 
+                                  var date = await showDatePicker(                                    
+                                    builder: (BuildContext context, Widget? child) {
+                                      Widget w = Theme(
+                                        data: ThemeData(
+                                          cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
+                                          dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
+                                          colorScheme: ColorScheme.light(
+                                            background: midColor,
+                                            tertiary: Colors.grey,
+                                            secondary: Colors.grey,
+                                            primary: Colors.black),
+                                        ),
+                                        child: child ?? Container(),
+                                      );
+                                      return w;
+                                    },
+                                    context: context,
+                                    firstDate: DateTime(1900),
+                                    initialDate: widget.end,
+                                    lastDate: DateTime(2100)
+                                  );
+                                  return date;
+                                },
+                                format: intl.DateFormat('y-M-dd hh:mm:ss'),
+                                initialValue: widget.end,
+                                onChanged: (value) { 
+                                  if (value == null) { return; }
+                                  setState(() { widget.start = value; });
+                                },
+                                style: const TextStyle(fontSize: 12),
+                                decoration: const  InputDecoration(
+                                  fillColor: Colors.white,
+                                  floatingLabelBehavior: FloatingLabelBehavior.always,
+                                  filled: true,
+                                  alignLabelWithHint: false,
+                                  hintText: "enter end date...",
+                                  labelText: "",
+                                  errorStyle: TextStyle(fontSize: 0),
+                                  hintStyle: TextStyle(fontSize: 10),
+                                  labelStyle: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500),
+                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+                                  border: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
+                                  contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                                ),
+                          )
+                ),
+                Tooltip( message: "refresh scheduler",
+                  child: InkWell(
+                    onTap: () => setState(() {}),
+                    child: const Icon(Icons.refresh, color: Colors.white,),
+                  ),
+                )
+              ]))
+          ),
+          ScheduleWidget( key: k, start: widget.start, end : widget.end, isList: widget.isList, isBox: false)
+        ]);
   }
 }

lib/pages/map.dart

@@ -1,17 +1,32 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:latlong2/latlong.dart';
 import 'package:flutter_map/flutter_map.dart';
+import 'package:oc_front/core/services/specialized_services/datacenter_service.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/resources/storage.dart';
 import 'package:oc_front/pages/abstract_page.dart';
+import 'package:oc_front/widgets/items/item_row.dart';
+
 
 class  MapFactory implements AbstractFactory {
+  @override GlobalKey getKey() { return key; }
+  @override String? getSearch() { return ""; }
+  @override void back(BuildContext context) { }
   static GlobalKey<MapPageWidgetState> key = GlobalKey<MapPageWidgetState>();
   @override bool searchFill() { return false; }
   @override Widget factory(GoRouterState state, List<String> args) { return MapPageWidget(); }
-  @override void search(BuildContext context) { }
+  @override void search(BuildContext context, bool special) { }
 }
-
+double menuSize = 0;
 class MapPageWidget extends StatefulWidget {
+  bool isShowed = false;
+  final DatacenterService _service = DatacenterService();
   MapPageWidget(): super(key: MapFactory.key);
   @override MapPageWidgetState createState() => MapPageWidgetState();
   static void search(BuildContext context) { }
@@ -21,26 +36,193 @@ class MapPageWidgetState extends State<MapPageWidget> {
   double currentZoom = 2.0;
   LatLng currentCenter = const LatLng(51.5, -0.09);
   static final MapController _mapController = MapController();
-  void _zoom() {
-    currentZoom = currentZoom - 1;
-    _mapController.move(currentCenter, currentZoom);
-}
+  bool selected = true;
 
   @override Widget build(BuildContext context) {
-    return Expanded( 
-      child : FlutterMap(
-        mapController: _mapController,
-        options: MapOptions(
-                  initialCenter: currentCenter,
-                  initialZoom: currentZoom,
+    return FutureBuilder(future: widget._service.all(context), builder: (BuildContext context, AsyncSnapshot snapshot) {
+        Map<String, Map<AbstractItem, LatLng>> coordinates = {};
+        List<Marker> markerCoordinates = [];
+        if (snapshot.data != null&& snapshot.data!.data != null && snapshot.data!.data!.values.isNotEmpty) {
+          for (var element in snapshot.data!.data!.values) {
+            if (element["type"] == "storage") { 
+              StorageItem resource = StorageItem().deserialize(element);
+              var instance = resource.getSelectedInstance();
+              if (instance == null || instance.location == null) { continue; }
+              if (coordinates[resource.topic] == null) { coordinates[resource.topic] = {}; }
+              coordinates[resource.topic]![resource] = LatLng(instance.location!.latitude ?? 0, instance.location!.longitude ?? 0);
+            } else if (element["type"] == "compute") {
+              ComputeItem resource = ComputeItem().deserialize(element);
+              var instance = resource.getSelectedInstance();
+              if (instance == null || instance.location == null) { continue; }
+              if (coordinates[resource.topic] == null) { coordinates[resource.topic] = {}; }
+              var lr = Random().nextInt(max(1, 100)) / 10000;
+              var lfr = Random().nextInt(max(1, 100)) / 10000;
+              coordinates[resource.topic]![resource] = LatLng((instance.location!.latitude ?? 0) + lr, (instance.location!.longitude ?? 0) + lfr);
+            }
+          }
+          for (var topic in coordinates.keys) {
+            for (var coord in coordinates[topic]!.keys) {
+              markerCoordinates.add(Marker(
+                width: 25,
+                height: 30,
+                point: coordinates[topic]![coord]!,
+                child: HoverMenu( width: 110, title: Container(  alignment: Alignment.center,
+                    constraints: BoxConstraints( maxHeight: 100, maxWidth: 100 ), 
+                    child: Icon(FontAwesomeIcons.locationDot, 
+                      shadows: <Shadow>[Shadow(color: Color.fromRGBO(0, 0, 0, 1), blurRadius: 10.0)],
+                      color: getColor(topic)) ),
+                    items: [ Container(color: Colors.white, 
+                      child: ItemRowWidget(low: true, contextWidth: 290, item: coord))  ]
+                  ),
+              ));
+            }
+          }
+          Rect rect = Rect.fromCenter( center: MediaQuery.of(context).size.center(Offset.zero),
+            width: selected ? menuSize : 0, height: (getMainHeight(context) - 50) > 0 ? (getMainHeight(context) - 50) : 0);
+          return Expanded( 
+            child : FlutterMap(
+                mapController: _mapController,
+                options: MapOptions(
+                          initialCenter: currentCenter,
+                          initialZoom: currentZoom,
+                        ),
+                children: [
+                    TileLayer(
+                      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                    ),
+                    MarkerLayer(
+                      markers: markerCoordinates,
+                    ),
+                ],
+              ),
+          );
+        } else {
+          return const CircularProgressIndicator();
+        }
+      }
+    );
+  }
+}
+
+class HoverMenuController {
+  HoverMenuState? currentState;
+
+  void hideSubMenu() {
+    currentState?.hideSubMenu();
+  }
+}
+
+class HoverMenu extends StatefulWidget {
+  final Widget title;
+  final double? width;
+  final List<Widget> items;
+  final HoverMenuController? controller;
+  bool isHovered = false;
+
+
+  HoverMenu({
+    Key? key,
+    required this.title,
+    this.items = const [],
+    this.width,
+    this.controller,
+  }) : super(key: key);
+
+  @override
+  HoverMenuState createState() => HoverMenuState();
+}
+
+class HoverMenuState extends State<HoverMenu> {
+  OverlayEntry? _overlayEntry;
+  final _focusNode = FocusNode();
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode.addListener(_onFocusChanged);
+
+    if (widget.controller != null) {
+      widget.controller?.currentState = this;
+    }
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _onFocusChanged() {
+    if (_focusNode.hasFocus) {
+      _overlayEntry = _createOverlayEntry();
+      Overlay.of(context).insert(_overlayEntry!);
+    } else {
+      _overlayEntry?.remove();
+      _removeOverlay();
+    }
+  }
+
+  void _removeOverlay() {
+    widget.isHovered = false;
+  }
+
+  void hideSubMenu() {
+    _focusNode.unfocus();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      style: TextButton.styleFrom(
+                  elevation: 0.0,
+                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
+                  splashFactory: NoSplash.splashFactory,
+                  padding: EdgeInsets.zero,
+                  foregroundColor: Colors.transparent,
+                  surfaceTintColor: Colors.transparent,
+                  backgroundColor: Colors.transparent,
+                  shadowColor: Colors.transparent,
                 ),
-        children: [
-            TileLayer(
-              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-              userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-            )
-        ],
-      )
+      focusNode: _focusNode,
+      onHover: (isHovered) {
+        if (isHovered && !widget.isHovered) {
+          _focusNode.requestFocus();
+          isHovered = true;
+        } else {
+          _focusNode.unfocus();
+          widget.isHovered = false;
+        }
+      },
+      onPressed: () {},
+      child: widget.title,
+    );
+  }
+
+  OverlayEntry _createOverlayEntry() {
+    final renderBox = context.findRenderObject() as RenderBox;
+    final size = renderBox.size;
+    final offset = renderBox.localToGlobal(Offset.zero);
+
+    return OverlayEntry(
+      maintainState: true,
+      builder: (context) => Positioned(
+        left: offset.dx - 300,
+        top: offset.dy + size.height,
+        width: 300,
+        child: TextButton(
+            style: TextButton.styleFrom( 
+              padding: EdgeInsets.zero,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
+              splashFactory: NoSplash.splashFactory,
+              backgroundColor: Colors.transparent,
+            ),
+            onPressed: () {},
+            child: ListView(
+                padding: EdgeInsets.zero,
+                shrinkWrap: true,
+                children: widget.items)),
+      ),
     );
   }
 }

lib/pages/scheduler.dart

@@ -2,19 +2,22 @@ import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart' as intl;
 import 'package:go_router/go_router.dart';
-import 'package:oc_front/core/services/specialized_services/logs_service.dart';
 import 'package:oc_front/core/services/specialized_services/workflow_execution_service.dart';
-import 'package:oc_front/models/workflow.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/pages/abstract_page.dart';
 import 'package:oc_front/widgets/sheduler_items/schedule.dart';
 
 class  SchedulerFactory implements AbstractFactory {
+  @override GlobalKey getKey() { return key; }
+  @override String? getSearch() { return ""; }
+  @override void back(BuildContext context) { }
   static GlobalKey<SchedulerPageWidgetState> key = GlobalKey<SchedulerPageWidgetState>();
   @override bool searchFill() { return false; }
   @override Widget factory(GoRouterState state, List<String> args) { return SchedulerPageWidget(); }
-  @override void search(BuildContext context) { }
+  @override void search(BuildContext context, bool special) { }
 }
 
+// ignore: must_be_immutable
 class SchedulerPageWidget extends StatefulWidget {
   bool isList = true;
   DateTime start = DateTime.now();
@@ -25,75 +28,12 @@ class SchedulerPageWidget extends StatefulWidget {
   static void search(BuildContext context) { }
   static Widget factory() { return SchedulerPageWidget(); }
 }
-class SchedulerPageWidgetState extends State<SchedulerPageWidget> {
-  List<Color> colors = [Colors.blue, Colors.orange, Colors.red, Colors.green];
-  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS"];
-  
+class SchedulerPageWidgetState extends State<SchedulerPageWidget> {  
   @override Widget build(BuildContext context) {
-    return FutureBuilder(
-      future: widget._service.search(context, [ 
-        "${widget.start.year}-${widget.start.month > 9 ? widget.start.month : "0${widget.start.month}"}-${widget.start.day > 9 ? widget.start.day : "0${widget.start.day}"}", 
-        "${widget.end.year}-${widget.end.month > 9 ? widget.end.month : "0${widget.end.month}"}-${widget.end.day > 9 ? widget.end.day : "0${widget.end.day}"}"], {}),
-      builder: (ctx, as) { 
-        Map<String, List<WorkflowExecution>> data = {};
-        if (as.hasData && as.data!.data != null) {
-          for (var element in as.data!.data!.executions) {
-            if (element.executionData == null) { continue; }
-            DateTime dateTime = DateTime.parse(element.executionData!);
-            DateTime date = DateTime(dateTime.year, dateTime.month, dateTime.day);
-            var str = "${date.toIso8601String()}Z";
-            if (data[str] == null) { data[str] = []; }
-            data[str]!.add(element);
-            data[str]!.sort((a, b) => DateTime.parse(a.executionData!).compareTo(DateTime.parse(b.executionData!)));
-          }
-        }
         GlobalKey<ScheduleWidgetState> k = GlobalKey<ScheduleWidgetState>();
-        for (var da in data.keys) {
-          for (var exec in data[da]!) {
-            String start = "";
-            String end = "";
-            try {
-              if (exec.endDate != null && exec.endDate != "") {
-                var startD = DateTime.parse(exec.executionData!);
-                var endD = DateTime.parse(exec.endDate!);
-                var diff = endD.difference(startD);
-                if (diff.inDays < 30) {
-                  var rest = ((30 - diff.inDays) ~/ 2) - 1;
-                  start = (startD.subtract(Duration(days: rest)).microsecondsSinceEpoch).toString();
-                  end = (endD.add(Duration(days: rest)).microsecondsSinceEpoch).toString();
-                } else {
-                  start = (startD.microsecondsSinceEpoch).toString();
-                  end = (startD.add( const Duration(days: 29)).microsecondsSinceEpoch).toString();
-                }
-              } else {
-                start = (DateTime.parse(exec.executionData!).subtract( const Duration(days: 14)).microsecondsSinceEpoch).toString();
-                end = (DateTime.parse(exec.executionData!).add( const Duration(days: 14)).microsecondsSinceEpoch).toString();
-              }
-            } catch(e) { /* */ }
-            k.currentState?.setState(() { k.currentState?.widget.loading = true; });
-            LogsService().search(context, [], {
-              "workflow_execution_id": exec.id,
-              "start": start,
-              "end": end
-            }).then((value) {
-              if (value.data != null) {
-                var d = value.data!;
-                for( var r in d.result) {
-                  for (var element in r.logs) {
-                    element.level = r.level;
-                    exec.logs ??= [];
-                    exec.logs!.add(element);
-                  }
-                  exec.logs?.sort((a, b) => a.timestamp!.compareTo(b.timestamp!));
-                }
-              }  
-              k.currentState?.setState(() { k.currentState?.widget.loading = false; });      
-            });
-          }          
-        }
         return Column( children: [
-          Container( color: const Color.fromRGBO(38, 166, 154, 1),
-            height: 50, width: MediaQuery.of(context).size.width,
+          Container( color: lightColor,
+            height: 50, width: getMainWidth(context),
             child: Padding(padding: const EdgeInsets.symmetric(horizontal: 50),
               child: Row( children: [
                 Padding(padding: const EdgeInsets.only(right: 30),
@@ -107,7 +47,7 @@ class SchedulerPageWidgetState extends State<SchedulerPageWidget> {
                   ),
                 ), 
                 Container(padding: const EdgeInsets.only(left: 20),
-                  width: MediaQuery.of(context).size.width / 5,
+                  width: getMainWidth(context) / 5,
                   height: 30,
                   child: DateTimeField( 
                                 validator: (value) {
@@ -122,7 +62,7 @@ class SchedulerPageWidgetState extends State<SchedulerPageWidget> {
                                           cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           colorScheme: ColorScheme.light(
-                                            background: Colors.grey.shade300,
+                                            background: midColor,
                                             tertiary: Colors.grey,
                                             secondary: Colors.grey,
                                             primary: Colors.black),
@@ -165,7 +105,7 @@ class SchedulerPageWidgetState extends State<SchedulerPageWidget> {
                 Container(padding: const EdgeInsets.only(left: 20), 
                   child: const Text("TO", style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.w500))),
                 Container( padding: const EdgeInsets.only(left: 20, right: 20),
-                  width: MediaQuery.of(context).size.width / 5,
+                  width: getMainWidth(context) / 5,
                   height: 30,
                   child: DateTimeField( 
                                 validator: (value) {
@@ -180,7 +120,7 @@ class SchedulerPageWidgetState extends State<SchedulerPageWidget> {
                                           cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           colorScheme: ColorScheme.light(
-                                            background: Colors.grey.shade300,
+                                            background: midColor,
                                             tertiary: Colors.grey,
                                             secondary: Colors.grey,
                                             primary: Colors.black),
@@ -227,8 +167,7 @@ class SchedulerPageWidgetState extends State<SchedulerPageWidget> {
                 )
               ]))
           ),
-          ScheduleWidget( key: k, data: data, start: widget.start, end : widget.end, isList: widget.isList, )
+          ScheduleWidget( key: k, start: widget.start, end : widget.end, isList: widget.isList, )
         ]);
-    });
   }
 }

lib/pages/shared.dart

@@ -1,34 +1,41 @@
 import 'dart:async';
-
+import 'package:intl/intl.dart';
+import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:oc_front/core/models/shared_workspace_local.dart';
+import 'package:oc_front/models/shared.dart';
+import 'package:oc_front/models/workflow.dart';
+import 'package:oc_front/widgets/catalog.dart';
+import 'package:oc_front/models/response.dart';
+import 'package:oc_front/pages/abstract_page.dart';
+import 'package:oc_front/models/resources/resources.dart';
 import 'package:oc_front/core/models/workspace_local.dart';
 import 'package:oc_front/core/sections/header/header.dart';
-import 'package:oc_front/core/services/router.dart';
+import 'package:oc_front/core/services/perms_service.dart';
+import 'package:oc_front/widgets/items/shallow_item_row.dart';
+import 'package:oc_front/widgets/dialog/shallow_creation.dart';
+import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
+import 'package:oc_front/core/models/shared_workspace_local.dart';
+import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
 import 'package:oc_front/core/services/specialized_services/peer_service.dart';
 import 'package:oc_front/core/services/specialized_services/shared_service.dart';
 import 'package:oc_front/core/services/specialized_services/workflow_service.dart';
-import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/shared.dart';
-import 'package:oc_front/pages/abstract_page.dart';
-import 'package:oc_front/widgets/catalog.dart';
-import 'package:oc_front/widgets/dialog/shallow_creation.dart';
-import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
-import 'package:oc_front/widgets/items/shallow_item_row.dart';
-import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
 
-enum SharedWorkspaceType { global, shared_workspace, workspace, workflow, peer, resource }
+enum CollaborativeAreaType { global, collaborative_area, workspace, workflow, peer, resource }
 
 class  SharedFactory implements AbstractFactory {
+  @override GlobalKey getKey() { return key; }
+  @override String? getSearch() { return ""; }
+  @override void back(BuildContext context) { }
   static GlobalKey<SharedPageWidgetState> key = GlobalKey<SharedPageWidgetState>();
   @override bool searchFill() { return false; }
   @override Widget factory(GoRouterState state, List<String> args) { return SharedPageWidget(); }
-  @override void search(BuildContext context) { }
+  @override void search(BuildContext context, bool special) { }
 }
 
 class SharedPageWidget extends StatefulWidget {
-  SharedWorkspaceType type = SharedWorkspaceType.global;
+  CollaborativeAreaType type = CollaborativeAreaType.global;
+  bool showDialog = false;
   SharedPageWidget(): super(key: SharedFactory.key);
   @override SharedPageWidgetState createState() => SharedPageWidgetState();
   static void search(BuildContext context) { }
@@ -36,159 +43,94 @@ class SharedPageWidget extends StatefulWidget {
 }
 class SharedPageWidgetState extends State<SharedPageWidget> {
   SharedService service = SharedService();
-  Widget getMenuItem(SharedWorkspaceType workspaceType, IconData icon) {
-    var s = workspaceType == SharedWorkspaceType.global ? "dashboard" : workspaceType == SharedWorkspaceType.workspace ? "shared workspaces" : workspaceType == SharedWorkspaceType.workflow ? "shared workflows" : "peers engaged";
+  Widget getMenuItem(CollaborativeAreaType workspaceType, IconData icon) {
+    var s = workspaceType == CollaborativeAreaType.global ? "dashboard" : workspaceType == CollaborativeAreaType.workspace ? "shared workspaces" : workspaceType == CollaborativeAreaType.workflow ? "shared workflows" : "peers engaged";
     return Tooltip( message: s,
       child: InkWell( mouseCursor: SystemMouseCursors.click,
         onTap: () => setState(() {
           widget.type = workspaceType;
         }),
         child: Container( width: 50, height: 50,
-        color: widget.type == workspaceType ? Color.fromRGBO(38, 166, 154, 1) : Colors.transparent,
+        color: widget.type == workspaceType ? darkColor : Colors.transparent,
         padding: const EdgeInsets.symmetric(vertical: 10), 
         child : Icon(icon, 
           color: widget.type == workspaceType ? Colors.white : Colors.white, size: 20))));
   }
-
   @override Widget build(BuildContext context) {
     GlobalKey<ShallowTextInputWidgetState> key = GlobalKey<ShallowTextInputWidgetState>();
-    if (SharedWorkspaceLocal.current == null) { 
+    if (CollaborativeAreaLocal.current == null) { 
       Future.delayed( const Duration(microseconds: 100), () {
-        HeaderConstants.setTitle("Choose a Shared Workspace");
+        HeaderConstants.setTitle("Choose a Collaborative Area");
         HeaderConstants.setDescription("select a shared workspace to continue");
       });
-      Future.delayed( const Duration(milliseconds: 100), () {
-        showDialog(
-          barrierDismissible: false,
-          context: context, builder: (BuildContext ctx) => AlertDialog(
-            titlePadding: EdgeInsets.zero,
-            insetPadding: EdgeInsets.zero,
-            backgroundColor: Colors.white,
-            shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
-            title: ShallowCreationDialogWidget(
-              formKey: key,
-              canClose: () => SharedWorkspaceLocal.current != null,
-              context: context,
-              load: (p0) async {
-                SharedWorkspaceLocal.current = p0;
-                HeaderConstants.setTitle("Shared Workspace <${SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.name ?? ""}>");
-                HeaderConstants.setDescription(SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.description ?? "");
-                Future.delayed(const Duration(seconds: 1), () => SharedFactory.key.currentState?.setState(() {}));
-              },
-              form: [
-                ShallowTextInputWidget(
-                  change :(p0) => key.currentState?.setState(() {}),
-                  canLoad: (po) => po != null && po.isNotEmpty,
-                  type: SharedWorkspaceType.shared_workspace,
-                  width: MediaQuery.of(context).size.width <= 540 ? MediaQuery.of(context).size.width - 140 : 400,
-                  attr: "description",
-                  color: Colors.black,
-                  hintColor: Colors.grey,
-                  filled: Colors.grey.shade300,
-                )
-              ],
-              create: (p0) async => await SharedService().post(context, p0, {}).then((value) {
-                if (value.data != null) {
-                    SharedWorkspaceLocal.current = value.data!.id;
-                }
-                SharedWorkspaceLocal.init(context, true);
+      if (!widget.showDialog) {
+        Future.delayed( const Duration(milliseconds: 100), () {
+          widget.showDialog = true;
+          showDialog(
+            barrierDismissible: false,
+            context: context, 
+            builder: (BuildContext ctx) => AlertDialog(
+              titlePadding: EdgeInsets.zero,
+              insetPadding: EdgeInsets.zero,
+              backgroundColor: Colors.white,
+              shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
+              title: ShallowCreationDialogWidget(
+                formKey: key,
+                canClose: () => CollaborativeAreaLocal.current != null,
+                context: context,
+                load: (p0) async {
+                  CollaborativeAreaLocal.current = p0;
+                  HeaderConstants.setTitle("Collaborative Area <${CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.name ?? ""}>");
+                  HeaderConstants.setDescription(CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.description ?? "");
+                  Future.delayed(const Duration(seconds: 1), () => SharedFactory.key.currentState?.setState(() { widget.showDialog = false; }));
+                },
+                form: [
+                  ShallowTextInputWidget(
+                    change :(p0) => key.currentState?.setState(() {}),
+                    canLoad: (po) => po != null && po.isNotEmpty,
+                    type: CollaborativeAreaType.collaborative_area,
+                    width: getMainWidth(context) <= 540 ? getMainWidth(context) - 140 : 400,
+                    attr: "description",
+                    color: Colors.black,
+                    hintColor: Colors.grey,
+                    hint: "enter collaborative area description...",
+                    filled: midColor,
+                  )
+                ],
+                create: PermsService.getPerm(Perms.COLLABORATIVE_AREA_CREATE) ? (p0) async => await SharedService().post(context, p0, {}).then((value) {
+                  if (value.data != null) {
+                      CollaborativeAreaLocal.current = value.data!.id;
+                  }
+                  CollaborativeAreaLocal.init(context, true);
 
-                HeaderConstants.setTitle("Shared Workspace <${SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.name ?? ""}>");
-                HeaderConstants.setDescription(SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.description ?? "");
-                Future.delayed(const Duration(seconds: 1), () => SharedFactory.key.currentState?.setState(() {}));
-              }),
-              type: SharedWorkspaceType.shared_workspace,
-              all: () async => SharedWorkspaceLocal.workspaces.values.map( 
-                (e) => Shallow(id: e.id ?? "", name: e.name ?? "") ).toList(),
-            )));
-      });
+                  HeaderConstants.setTitle("Collaborative Area <${CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.name ?? ""}>");
+                  HeaderConstants.setDescription(CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.description ?? "");
+                  Future.delayed(const Duration(seconds: 1), () => SharedFactory.key.currentState?.setState(() { widget.showDialog = false;  }));
+                }) : null,
+                type: CollaborativeAreaType.collaborative_area,
+                all: () async { 
+                  await CollaborativeAreaLocal.init(context, true);
+                  return CollaborativeAreaLocal.workspaces.values.map( 
+                  (e) => Shallow(id: e.id ?? "", name: e.name ?? "") ).toList();
+                }
+              )));
+        });
+      }
     } else {
       Future.delayed( const Duration(milliseconds: 100), () {
-        HeaderConstants.setTitle("Shared Workspace <${SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.name ?? ""}>");
-        HeaderConstants.setDescription(SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.description ?? "");
+        HeaderConstants.setTitle("Collaborative Area <${CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.name ?? ""}>");
+        HeaderConstants.setDescription(CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.description ?? "");
       });
     }
     Widget w = WorkspaceSharedPageWidget(type: widget.type);
     List<Widget> addMenu = [];
-    SharedWorkspace? current = SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current ?? ""];
-    if (widget.type == SharedWorkspaceType.workspace) {
-      addMenu.add( Row( mainAxisAlignment: MainAxisAlignment.end,
-        children : [ ShallowDropdownInputWidget( 
-          tooltipLoad: "share",
-          tooltipRemove: "unshare",
-          iconLoad: Icons.share,
-          type: widget.type, 
-          current: WorkspaceLocal.current,
-          all: () async => WorkspaceLocal.getWorkspacesShallow(),
-          width: MediaQuery.of(context).size.width / 3,
-          canLoad: (String? change) => current == null || !current.workspaces.map( (e) => e.id ).contains(change),
-          canRemove: (String? change) => current == null || current.workspaces.map( (e) => e.id ).contains(change), 
-          load: (String val) async {
-            await service.addWorkspace(context, SharedWorkspaceLocal.current ?? "", val);
-            SharedWorkspaceLocal.init(context, false);
-          },
-          remove: (String val) async {
-            await service.removeWorkspace(context, SharedWorkspaceLocal.current ?? "", val);
-            SharedWorkspaceLocal.init(context, false);
-          })
-      ]));
-    }
-    if (widget.type == SharedWorkspaceType.workflow) {
-      addMenu.add( Row( mainAxisAlignment: MainAxisAlignment.end,
-        children : [ ShallowDropdownInputWidget( 
-          tooltipLoad: "share",
-          tooltipRemove: "unshare",
-          iconLoad: Icons.share,
-          type: widget.type, all: () async {
-            List<Shallow> shals = [];
-            await WorflowService().all(context).then((value) {
-                if (value.data != null) {
-                  shals = value.data!.values.map((e) => Shallow(id: e["id"], name: e["name"])).toList();
-                }
-              });
-            return shals;
-          },
-          width: MediaQuery.of(context).size.width / 3,
-          canLoad: (String? change) => current == null || !current.workflows.map( (e) => e.id ).contains(change),
-          canRemove: (String? change) => current == null || current.workflows.map( (e) => e.id ).contains(change), 
-          load: (String change) async {
-            await service.addWorkflow(context, SharedWorkspaceLocal.current ?? "", change);
-          },
-          remove: (String change) async {
-            await service.removeWorkflow(context, SharedWorkspaceLocal.current ?? "", change);
-          })
-      ]));
-    }
-    if (widget.type == SharedWorkspaceType.peer) {
-      addMenu.add( Row( mainAxisAlignment: MainAxisAlignment.end,
-        children : [ ShallowDropdownInputWidget( 
-          tooltipLoad: "add",
-          iconLoad: Icons.add,
-          type: widget.type, all: () async {
-            List<Shallow> shals = [];
-            await PeerService().all(context).then((value) {
-                if (value.data != null) {
-                  shals = value.data!.values.map((e) => Shallow(id: e["id"], name: e["name"])).toList();
-                }
-              });
-            return shals;
-          },
-          width: MediaQuery.of(context).size.width / 3,
-          canLoad: (String? change) => current == null || !current.peers.map( (e) => e.id ).contains(change),
-          canRemove: (String? change) => current == null || current.peers.map( (e) => e.id ).contains(change), 
-          load: (String change) async {
-            await service.addPeer(context, SharedWorkspaceLocal.current ?? "", change);
-          },
-          remove: (String change) async {
-            await service.removePeer(context, SharedWorkspaceLocal.current ?? "", change);
-          })
-      ]));
-    }
+    CollaborativeArea? current = CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current ?? ""];
+    addMenu.add(getDropdown(widget.type, current, this, context, false));
     return Column( children: [ 
         Container(
           height: 50,
-          color: const Color.fromRGBO(38, 166, 154, 1),
-          width: MediaQuery.of(context).size.width,
+          color: lightColor,
+          width: getMainWidth(context),
           padding: const EdgeInsets.only(left: 50),
           child: Stack( alignment: Alignment.centerLeft, children: [
                           Tooltip( message: "open file", child: Padding( padding: const EdgeInsets.only(right: 15), 
@@ -204,37 +146,34 @@ class SharedPageWidgetState extends State<SharedPageWidget> {
                                       shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
                                       title: ShallowCreationDialogWidget(
                                         formKey: key,
-                                        canClose: () => SharedWorkspaceLocal.current != null,
+                                        canClose: () => CollaborativeAreaLocal.current != null,
                                         context: context,
                                         load: (p0) async {
-                                          SharedWorkspaceLocal.current = p0;
-                                          HeaderConstants.setTitle("Shared Workspace <${SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.name ?? ""}>");
-                                          HeaderConstants.setDescription(SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.description ?? "");
+                                          CollaborativeAreaLocal.current = p0;
+                                          HeaderConstants.setTitle("Collaborative Area <${CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.name ?? ""}>");
+                                          HeaderConstants.setDescription(CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.description ?? "");
                                           Future.delayed(const Duration(seconds: 1), () => SharedFactory.key.currentState?.setState(() {}));
                                         },
                                         form: [
                                           ShallowTextInputWidget(
                                             change :(p0) => key.currentState?.setState(() {}),
-                                            type: SharedWorkspaceType.shared_workspace,
-                                            width: MediaQuery.of(context).size.width <= 540 ? MediaQuery.of(context).size.width - 140 : 400,
+                                            type: CollaborativeAreaType.collaborative_area,
+                                            width: getMainWidth(context) <= 540 ? getMainWidth(context) - 140 : 400,
                                             attr: "description",
                                             color: Colors.black,
                                             hintColor: Colors.grey,
-                                            filled: Colors.grey.shade300,
+                                            filled: midColor,
                                           )
                                         ],
-                                        create: (p0) async => await SharedService().post(context, p0, {}).then( (e) {
+                                        create: PermsService.getPerm(Perms.COLLABORATIVE_AREA_CREATE) ? (p0) async => await SharedService().post(context, p0, {}).then( (e) async {
                                           if (e.data != null) {
-                                            SharedWorkspaceLocal.current = e.data!.id;
+                                            CollaborativeAreaLocal.current = e.data!.id;
                                           }
-                                          SharedWorkspaceLocal.init(context, true);
-
-                                          HeaderConstants.setTitle("Shared Workspace <${SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.name ?? ""}>");
-                                          HeaderConstants.setDescription(SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current]?.description ?? "");
-                                          Future.delayed(const Duration(seconds: 1), () => SharedFactory.key.currentState?.setState(() {}));
-                                        }),
-                                        type: SharedWorkspaceType.shared_workspace,
-                                        all: () async => SharedWorkspaceLocal.workspaces.values.map( 
+                                          await CollaborativeAreaLocal.init(context, true);
+                                          setState(() {});
+                                        }) : null,
+                                        type: CollaborativeAreaType.collaborative_area,
+                                        all: () async => CollaborativeAreaLocal.workspaces.values.map( 
                                           (e) => Shallow(id: e.id ?? "", name: e.name ?? "") ).toList(),
                                       ));
                                   });
@@ -245,21 +184,25 @@ class SharedPageWidgetState extends State<SharedPageWidget> {
         Row( 
         children: [
           Container(
-            color: Colors.black,
-            height: MediaQuery.of(context).size.height - HeaderConstants.height - 50,
+            decoration: BoxDecoration(
+              color: Colors.black,
+              border: Border(left: BorderSide(color: lightColor))
+            ),
+            height: getMainHeight(context) - 50,
             width: 50,
             child: Column(
               children: [
-                getMenuItem(SharedWorkspaceType.global, Icons.dashboard),
-                getMenuItem(SharedWorkspaceType.workspace, Icons.workspaces),
-                getMenuItem(SharedWorkspaceType.workflow, Icons.rebase_edit),
-                getMenuItem(SharedWorkspaceType.peer, Icons.group),
+                getMenuItem(CollaborativeAreaType.global, Icons.dashboard),
+                getMenuItem(CollaborativeAreaType.workspace, Icons.workspaces),
+                getMenuItem(CollaborativeAreaType.workflow, Icons.rebase_edit),
+                getMenuItem(CollaborativeAreaType.peer, Icons.group),
               ])
           ),
           Container( 
-            height: MediaQuery.of(context).size.height - HeaderConstants.height - 50,
-            width:  MediaQuery.of(context).size.width -50,
-            color: widget.type == SharedWorkspaceType.workflow || widget.type == SharedWorkspaceType.peer ? Colors.grey.shade300 : Colors.white,
+            height: getMainHeight(context)  - 50,
+            width:  getMainWidth(context) -50,
+            color: widget.type == CollaborativeAreaType.workflow || widget.type == CollaborativeAreaType.peer 
+            || widget.type == CollaborativeAreaType.global ? midColor : Colors.white,
             child: SingleChildScrollView( child: w ))
         ]
       ) ]
@@ -268,68 +211,242 @@ class SharedPageWidgetState extends State<SharedPageWidget> {
 }
 
 class WorkspaceSharedPageWidget extends StatefulWidget {
-  SharedWorkspaceType type = SharedWorkspaceType.global;
+  CollaborativeAreaType type = CollaborativeAreaType.global;
   WorkspaceSharedPageWidget({ required this.type }): super(key: null);
   @override WorkspaceSharedPageWidgetState createState() => WorkspaceSharedPageWidgetState();
 }
 class WorkspaceSharedPageWidgetState extends State<WorkspaceSharedPageWidget> {
 
-  @override Widget build(BuildContext context) {
-    if (SharedWorkspaceLocal.current == null) { 
-      return Container();
-    }
-    var space = SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current ?? ""]!;
+  List<Widget> getCardWorkspaceItems(Map<String, List<AbstractItem>> data) {
     List<Widget> items = [];
-    List<ShallowData> data = [];
-    if (widget.type == SharedWorkspaceType.global) {
-    } else if (widget.type == SharedWorkspaceType.workspace) {
-      data = space.workspaces;
-    } else if (widget.type == SharedWorkspaceType.workflow) {
-      data = space.workflows;
-    } else if (widget.type == SharedWorkspaceType.peer) {
-      data = space.peers;
+    for (var w1 in data.keys) {
+      for (var w in data[w1]!) {
+      List<Widget> badges = [];
+      List<Widget> bbadges = [];
+      badges.add(Container( margin: const EdgeInsets.only(left: 5), padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+        decoration: BoxDecoration( 
+          borderRadius: BorderRadius.circular(4),
+          color: getColor(w.topic) 
+        ),
+        child:Text(w.topic, style: TextStyle( color: Colors.white, fontSize: 11) )));
+      bbadges.add(Container(  margin: const EdgeInsets.only(left: 5), 
+        decoration: BoxDecoration( color: Colors.grey, borderRadius: BorderRadius.circular(4) ),
+        padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5), child: Text(w1, style: TextStyle( color: Colors.white, fontSize: 11) )));
+      items.add(ShallowItemFlowDataRowWidget(
+        color: Colors.grey.shade200,
+        item: w, badges: badges, bottomBadges: bbadges,
+        icon:  Icons.shopping_cart,
+        contextWidth: 200
+      ));
+    }}
+    return items;
+  }
+
+  List<Widget> getCardItems(List<ShallowData> data) {
+    List<Widget> items = [];
+    List<ShallowData> neoData = [];
+    for (var d in data) {
+      try { neoData.firstWhere( (e) => e.getID() == d.getID());
+      } catch (e) { neoData.add(d); }
     }
-    var current = SharedWorkspaceLocal.workspaces[SharedWorkspaceLocal.current];
-    for (var w in data) {
-      if (widget.type == SharedWorkspaceType.workspace) {
-        if (WorkspaceLocal.workspaces[w.getID()] == null) { continue; }
-        items.add(WorkspaceSharedItemPageWidget(name: "Workspace <${WorkspaceLocal.workspaces[w.getID()]!.name}>", id: w.getID()));
-      } else if (widget.type == SharedWorkspaceType.workflow || widget.type == SharedWorkspaceType.peer) {
-        List<IconData> badges = [];
-        if (widget.type == SharedWorkspaceType.peer && w.getID() == current?.creatorID) {
-          badges.add(Icons.star);
-        }
-        items.add(ShallowItemRowWidget(
-          item: w, badges: badges,
-          edit: widget.type == SharedWorkspaceType.workflow ? (String? change) {
-              if (change != null) {
-                WorkspaceLocal.changeWorkspaceByName(change.split("~")[1]);  
-              }
-              Future.delayed(const Duration(seconds: 1), () => AppRouter.workflowIDItem.go(context, { "id": change ?? "" }));
-            } : null,
-          delete: (String? change) async {
-            if (change == null) { return; }
-            if (widget.type == SharedWorkspaceType.peer) {
-              await SharedService().removePeer(context, SharedWorkspaceLocal.current ?? "", change);
-            } else {
-              await SharedService().removePeer(context, SharedWorkspaceLocal.current ?? "", change);
-            }
-          },
-          icon: widget.type == SharedWorkspaceType.workflow ? Icons.work_history_rounded : Icons.person,
-          contextWidth: 200)
+    for (var w in neoData) {
+      List<Widget> badges = [];
+      if (w is Peer && (
+          w.getID() != CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current ?? ""]?.rule?.creator
+          || w.getID() != CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current ?? ""]?.creatorID)) {
+        badges.add(Padding( padding: const EdgeInsets.only(left: 5), child: Icon(Icons.star, color: Colors.orange.shade300 )));
+      } else if (widget.type == CollaborativeAreaType.workspace) {
+        badges.add(Container( margin: const EdgeInsets.only(left: 5), padding: EdgeInsets.all(5), color: Colors.grey.shade200,
+        child: Icon(Icons.star, color: Colors.orange.shade300,)));
+      }
+      items.add(ShallowItemRowWidget(
+        color: Colors.grey.shade200,
+        item: w, badges: badges,
+        delete: w is Peer ? (PermsService.getPerm(Perms.PEER_UNSHARE) && (
+          w.getID() != CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current ?? ""]?.rule?.creator
+          && w.getID() != CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current ?? ""]?.creatorID) ? (String? change) async {
+          await SharedService().removePeer(context, CollaborativeAreaLocal.current ?? "", change ?? "");
+          await CollaborativeAreaLocal.init(context, false);
+          setState(() {});
+        } : null) : (w is Workflow && PermsService.getPerm(Perms.WORKSPACE_UNSHARE)) ? (String? change) async {
+          await SharedService().removeWorkflow(context, CollaborativeAreaLocal.current ?? "", change ?? "");
+          await CollaborativeAreaLocal.init(context, false);
+          setState(() {});
+        } : null,
+        icon: w is Workflow ? Icons.work_history_rounded : Icons.person,
+        contextWidth: 200
+      ));
+    }
+    return items;
+  }
+
+  @override Widget build(BuildContext context) {
+    var space = CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current ?? ""];
+    if (widget.type == CollaborativeAreaType.global) {
+      if (space == null) {
+        return Container(
+          color: midColor,
+          height: getMainHeight(context) - 50,
+          width: getMainWidth(context) - 50,
+          alignment: Alignment.center,
+          padding: const EdgeInsets.all(50)
         );
       }
-     }
-     if (items.isEmpty) {
+      final DateFormat formatter = DateFormat('dd-MM-yyyy');
+      Peer? creator;
+      SharedService service = SharedService();
+      try { creator = space.peers.firstWhere( (e) => (space.rule?.creator ?? "") == e.id);
+      } catch (e) { /**/ }
+      Map<String, List<AbstractItem>> datas = {};
+      for (var w in space.workspaces) {
+        datas[w.getName()] =<AbstractItem> [
+                    ...w.computes,
+                    ...w.datas,
+                    ...w.processings,
+                    ...w.storages,
+                    ...w.workflows
+                  ];
+      }
+      return Padding( padding: EdgeInsets.all(30),
+          child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ 
+            Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+              Text((CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current]?.name ?? "").toUpperCase(), 
+              style: TextStyle(color: Colors.grey, fontSize: 25, fontWeight: FontWeight.bold), textAlign: TextAlign.center, 
+              softWrap: true, overflow: TextOverflow.ellipsis,),
+            ]),
+            Container( 
+              width: getMainWidth(context) - 50,
+              margin: EdgeInsets.symmetric(vertical: 20),
+              color: Colors.white,
+              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
+              child: Text(space.description ?? "", 
+                  style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w400, color: Colors.grey))
+            ),
+            Padding( padding: EdgeInsets.only(left: 30), child: Text("COLLABORATIVE AREA ACCESS RULES", textAlign: TextAlign.start,
+            style: TextStyle(color: darkColor, fontSize: 20, fontWeight: FontWeight.bold), overflow: TextOverflow.clip)),
+            Container( 
+              width: getMainWidth(context) - 50,
+              margin: EdgeInsets.symmetric(vertical: 20),
+              color: Colors.white,
+              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
+              child: Column(
+                children: [
+                  Row(children: [ Text("Share mode : "), Text( space.rule?.shareMode ?? "closed", style: TextStyle( fontWeight: FontWeight.bold ) )],),
+                  Row(children: [ Text("Created : "), Text( formatter.format(space.rule?.createdAt ?? DateTime.now()), style: TextStyle( fontWeight: FontWeight.bold )) ],),
+                  creator != null ? Row(children: [ Text("Area master : "), Text( creator.getName(), style: TextStyle( fontWeight: FontWeight.bold ) )  ],) 
+                  : Container(),
+                  Row(children: [ Text("User count : "), Text( "${space.peers.length}", style: TextStyle( fontWeight: FontWeight.bold ))  ],),
+                  Row(children: [ Text("Users profile : "), Text( space.rule?.exploitedBy ?? "any", style: TextStyle( fontWeight: FontWeight.bold ) )  ],),
+                ],
+              )
+            ),
+            
+            Row( children: [
+              Padding( padding: EdgeInsets.only(left: 30), child: Text("COLLABORATIVE AREA PEERS", textAlign: TextAlign.start,
+            style: TextStyle(color: darkColor, fontSize: 20, fontWeight: FontWeight.bold), overflow: TextOverflow.clip)), 
+            PermsService.getPerm(Perms.PEER_SHARE) ? Container( 
+              margin: EdgeInsets.only(left: 20), padding: EdgeInsets.only(left: 15),
+              decoration: BoxDecoration(
+                border: Border(left: BorderSide(color: Colors.grey))
+              ), child: getDropdown(CollaborativeAreaType.peer, CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current], this, context, true)
+              ) : Container()]),
+            Container( 
+              width: getMainWidth(context) - 50,
+              margin: EdgeInsets.symmetric(vertical: 20),
+              color: Colors.white,
+              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
+              child: Wrap( alignment: WrapAlignment.center, children: getCardItems(space.peers)),
+            ),
+            space.rules.isNotEmpty ? Padding( padding: EdgeInsets.only(left: 30), child: Text("RULES", textAlign: TextAlign.start,
+            style: TextStyle(color: darkColor, fontSize: 20, fontWeight: FontWeight.bold), overflow: TextOverflow.clip)) : Container(),
+            space.rules.isNotEmpty ? Container( 
+              width: getMainWidth(context) - 50,
+              margin: EdgeInsets.symmetric(vertical: 20),
+              color: Colors.white,
+              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
+              child: Column( children: space.rules.map( (e) {
+                return Row( children: [
+                  Padding( padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+                    child:Text("-", style: TextStyle(color: Colors.black, fontSize: 15, fontWeight: FontWeight.bold), overflow: TextOverflow.clip)),
+                  Text(e ?? "", style: TextStyle(color: Colors.grey, fontSize: 15), overflow: TextOverflow.clip)
+                ]);
+              }).toList() )
+            ) : Container(),
+            Row( children: [
+              Padding( padding: EdgeInsets.only(left: 30), child: Text("WORKSPACES / RESOURCES", textAlign: TextAlign.start,
+            style: TextStyle(color: darkColor, fontSize: 20, fontWeight: FontWeight.bold), overflow: TextOverflow.clip)), 
+            PermsService.getPerm(Perms.WORKSPACE_SHARE) ? Container( 
+              margin: EdgeInsets.only(left: 20), padding: EdgeInsets.only(left: 15),
+              decoration: BoxDecoration(
+                border: Border(left: BorderSide(color: Colors.grey))
+              ), child: getDropdown(CollaborativeAreaType.workspace, CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current], this, context, true)) : Container() ]),
+            Container( 
+              width: getMainWidth(context) - 50,
+              margin: EdgeInsets.symmetric(vertical: 20),
+              color: Colors.white,
+              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
+              child: Wrap( alignment: WrapAlignment.center, children: getCardWorkspaceItems(datas))
+              ),
+            Row( children: [
+              Padding( padding: EdgeInsets.only(left: 30), child: Text("WORKFLOWS", textAlign: TextAlign.start,
+            style: TextStyle(color: darkColor, fontSize: 20, fontWeight: FontWeight.bold), overflow: TextOverflow.clip)), 
+            PermsService.getPerm(Perms.WORKFLOW_SHARE) ? Container( 
+              margin: EdgeInsets.only(left: 20), padding: EdgeInsets.only(left: 15),
+              decoration: BoxDecoration(
+                border: Border(left: BorderSide(color: Colors.grey))
+              ), child: getDropdown(CollaborativeAreaType.workflow, CollaborativeAreaLocal.workspaces[CollaborativeAreaLocal.current], this, context, true)) : Container()]),
+            Container( 
+              width: getMainWidth(context) - 50,
+              margin: EdgeInsets.symmetric(vertical: 20),
+              color: Colors.white,
+              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
+              child: Wrap( alignment: WrapAlignment.center, children: getCardItems(space.workflows))
+              ),
+          ],)
+        );
+    }
+    
+    if (CollaborativeAreaLocal.current == null) { 
+      return Container(
+        color: midColor,
+        height: getMainHeight(context) - 50,
+        width: getMainWidth(context) - 50,
+        alignment: Alignment.center,
+        padding: const EdgeInsets.all(50)
+      );
+    }
+    List<Widget> items = [];
+    List<ShallowData> data = [];
+    if (widget.type == CollaborativeAreaType.workspace) {
+      data = space?.workspaces ?? [];
+    } else if (widget.type == CollaborativeAreaType.workflow) {
+      data = space?.workflows ?? [];
+    } else if (widget.type == CollaborativeAreaType.peer) {
+      data = space?.peers ?? [];
+    }
+    if (widget.type == CollaborativeAreaType.workspace) {
+      List<ShallowData> neoData = [];
+      for (var d in data) {
+        try { neoData.firstWhere( (e) => e.getID() == d.getID());
+        } catch (e) { neoData.add(d); }
+      }
+      for (var w in neoData) {
+        if (WorkspaceLocal.workspaces[w.getID()] == null) { continue; }
+        items.add(WorkspaceSharedItemPageWidget(name: "Workspace <${WorkspaceLocal.workspaces[w.getID()]!.name}>", id: w.getID())); 
+      }
+    } else {
+      items = getCardItems(data);
+    }
+    if (items.isEmpty) {
         return Container( 
-          color: Colors.grey.shade300,
-          height: MediaQuery.of(context).size.height - HeaderConstants.height - 50,
-          width: MediaQuery.of(context).size.width - 50,
+          color: midColor,
+          height: getMainHeight(context) - 50,
+          width: getMainWidth(context) - 50,
           alignment: Alignment.center,
           padding: const EdgeInsets.all(50),
           child: Text("NO ITEMS SHARED", style: const TextStyle(fontSize: 25, fontWeight: FontWeight.w600, color: Colors.white)));
      }
-     if (widget.type == SharedWorkspaceType.workflow || widget.type == SharedWorkspaceType.peer) {
+     if (widget.type == CollaborativeAreaType.workflow || widget.type == CollaborativeAreaType.peer) {
       return Padding( 
         padding: const EdgeInsets.all(50),
         child: Stack( alignment: Alignment.topLeft, children : items));
@@ -338,6 +455,7 @@ class WorkspaceSharedPageWidgetState extends State<WorkspaceSharedPageWidget> {
   }
 }
 
+// ignore: must_be_immutable
 class WorkspaceSharedItemPageWidget extends StatefulWidget {
   bool open = true;
   String id = "";
@@ -349,28 +467,153 @@ class WorkspaceSharedItemPageWidgetState extends State<WorkspaceSharedItemPageWi
     @override Widget build(BuildContext context) {
       return Column( children: [
         Container( 
-          width: MediaQuery.of(context).size.width - 50,
+          width: getMainWidth(context) - 50,
             height: 50,
             padding: const EdgeInsets.symmetric(horizontal: 20),
-            decoration: BoxDecoration(color: Colors.grey.shade300),
+            decoration: BoxDecoration(color: midColor, border: Border(bottom: BorderSide(color: Colors.white))),
             child: Stack( 
                 alignment: Alignment.centerLeft,
                 children: [
                   Row( 
                     children: [
-                      const Padding(padding: EdgeInsets.only(right: 20), child: Icon(Icons.shopping_cart_outlined, size: 18, color: Colors.white)),
+                      const Padding(padding: EdgeInsets.only(right: 20), child: Icon(Icons.shopping_cart_outlined, size: 18, color: Colors.grey)),
                     Text(widget.name, 
-                      style: const TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w600)),
+                      style: const TextStyle(fontSize: 15, color: Colors.grey, fontWeight: FontWeight.w600)),
                     ]
                   ),
-                  Positioned( right: 0, top: 5, child: IconButton( icon: Icon(widget.open ? Icons.arrow_drop_up : Icons.arrow_drop_down, color: Colors.white),
+                  Positioned( right: 0, top: 5, child: IconButton( icon: Icon(widget.open ? Icons.arrow_drop_up : Icons.arrow_drop_down, color: Colors.grey),
                     onPressed: () => setState(() {
                       widget.open = !widget.open;
                   })))
               ])
             ),
-          widget.open ? CatalogWidget(itemWidth: MediaQuery.of(context).size.width - 50, 
+          widget.open ? CatalogWidget(itemWidth: getMainWidth(context) - 50, 
           items: WorkspaceLocal.byWorkspace(widget.id)) : Container()
         ]);
     }
-}
+}
+
+  Widget getDropdown(CollaborativeAreaType type, CollaborativeArea? current, State<dynamic> state, BuildContext context, bool mainPage ) {
+    if (type == CollaborativeAreaType.workspace) {
+      return Row( mainAxisAlignment: MainAxisAlignment.end,
+        children : [ Container( padding: EdgeInsets.only(left:  mainPage ? 0 : 20), decoration: BoxDecoration(
+          border:  mainPage ? null : Border(left: BorderSide(color: Colors.white))
+        ), child: ShallowDropdownInputWidget( 
+          tooltipLoad: "share",
+          tooltipRemove: "unshare",
+          iconLoad: Icons.share,
+          type: type, 
+          filled: mainPage ? Colors.white : lightColor,
+          hintColor:  mainPage ? Colors.grey : midColor,
+          color: mainPage ? Colors.black : Colors.white,
+          prefixIcon: Icon(Icons.shopping_cart, color: Colors.white),
+          current: WorkspaceLocal.current,
+          all: () async => WorkspaceLocal.getWorkspacesShallow(),
+          width: getMainWidth(context) / 3,
+          canLoad: (String? change) => current != null && !current.workspaces.map( (e) => e.id ).contains(change),
+          canRemove: (String? change) => current != null && current.workspaces.map( (e) => e.id ).contains(change), 
+          load: PermsService.getPerm(Perms.WORKSPACE_SHARE) ? (String val) async {
+            await SharedService().addWorkspace(context, CollaborativeAreaLocal.current ?? "", val);
+            await CollaborativeAreaLocal.init(context, false);
+            state.setState(() {});
+            if (mainPage) {
+              SharedFactory.key.currentState?.setState(() {});
+            }
+          } : null,
+          remove: PermsService.getPerm(Perms.WORKSPACE_UNSHARE) ? (String val) async {
+            await SharedService().removeWorkspace(context, CollaborativeAreaLocal.current ?? "", val);
+            await CollaborativeAreaLocal.init(context, false);
+            state.setState(() {});
+            if (mainPage) {
+              SharedFactory.key.currentState?.setState(() {});
+            }
+          } : null))
+      ]);
+    }
+    if (type == CollaborativeAreaType.workflow) {
+      return Row( mainAxisAlignment: MainAxisAlignment.end,
+        children : [ Container( padding: EdgeInsets.only(left:  mainPage ? 0 : 20), decoration: BoxDecoration(
+          border:  mainPage ? null : Border(left: BorderSide(color: Colors.white))
+        ), child: ShallowDropdownInputWidget( 
+          tooltipLoad: "share",
+          tooltipRemove: "unshare",
+          iconLoad: Icons.share,
+          filled: mainPage ? Colors.white : lightColor,
+          hintColor:  mainPage ? Colors.grey : midColor,
+          color: mainPage ? Colors.black : Colors.white,
+          type: type, all: () async {
+            List<Shallow> shals = [];
+            await WorflowService().all(context).then((value) {
+                if (value.data != null) {
+                  shals = value.data!.values.map((e) => Shallow(id: e["id"], name: e["name"])).toList();
+                }
+              });
+            return shals;
+          },
+          width: getMainWidth(context) / 3,
+          canLoad: (String? change) => current != null && !current.workflows.map( (e) => e.id ).contains(change),
+          canRemove: (String? change) => current != null && current.workflows.map( (e) => e.id ).contains(change),
+          load: PermsService.getPerm(Perms.WORKFLOW_SHARE) ? (String change) async {
+            await SharedService().addWorkflow(context, CollaborativeAreaLocal.current ?? "", change);
+            await CollaborativeAreaLocal.init(context, false);
+            state.setState(() {});
+            if (mainPage) {
+              SharedFactory.key.currentState?.setState(() {});
+            }
+          } : null,
+          remove: PermsService.getPerm(Perms.WORKFLOW_UNSHARE) ? (String change) async {
+            await SharedService().removeWorkflow(context, CollaborativeAreaLocal.current ?? "", change);
+            await CollaborativeAreaLocal.init(context, false);
+            state.setState(() {});
+            if (mainPage) {
+              SharedFactory.key.currentState?.setState(() {});
+            }
+          } : null))
+      ]);
+    }
+    if (type == CollaborativeAreaType.peer) {
+      return Row( mainAxisAlignment: MainAxisAlignment.end,
+        children : [
+        Container( padding: EdgeInsets.only(left: mainPage ? 0 : 20), decoration: BoxDecoration(
+          border:  mainPage ? null : Border(left: BorderSide(color : Colors.white))
+        ), child: ShallowDropdownInputWidget( 
+          tooltipLoad: "add",
+          iconLoad: Icons.add,
+          filled: mainPage ? Colors.white : lightColor,
+          hintColor:  mainPage ? Colors.grey : midColor,
+          color: mainPage ? Colors.black : Colors.white,
+          type: type, all: () async {
+            List<Shallow> shals = [];
+            await PeerService().all(context).then((value) {
+                if (value.data != null) {
+                  shals = value.data!.values.where( (e) {
+                      return e["id"] != current?.creatorID;
+                    }
+                  ).map((e) => Shallow(id: e["id"], name: e["name"])).toList();
+                }
+              });
+            return shals;
+          },
+          width: getMainWidth(context) / 3,
+          canLoad: (String? change) => current != null && !current.peers.map( (e) => e.id ).contains(change),
+          canRemove: (String? change) => current != null && current.peers.map( (e) => e.id ).contains(change), 
+          load: PermsService.getPerm(Perms.PEER_SHARE) ? (String change) async {
+            await SharedService().addPeer(context, CollaborativeAreaLocal.current ?? "", change);
+            await CollaborativeAreaLocal.init(context, false);
+            state.setState(() {});
+            if (mainPage) {
+              SharedFactory.key.currentState?.setState(() {});
+            }
+          } : null,
+          remove: PermsService.getPerm(Perms.PEER_UNSHARE) ?  (String change) async {
+            await SharedService().removePeer(context, CollaborativeAreaLocal.current ?? "", change);
+            await CollaborativeAreaLocal.init(context, false);
+            state.setState(() {});
+            if (mainPage) {
+              SharedFactory.key.currentState?.setState(() {});
+            }
+          } : null))
+      ]);
+    }
+    return Container();
+  }

lib/pages/workflow.dart

@@ -1,37 +1,46 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
-import 'package:oc_front/core/models/shared_workspace_local.dart';
 import 'package:oc_front/core/models/workspace_local.dart';
-import 'package:oc_front/core/sections/header/header.dart';
-import 'package:oc_front/core/services/specialized_services/shared_service.dart';
+import 'package:oc_front/core/services/perms_service.dart';
 import 'package:oc_front/core/services/specialized_services/workflow_service.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/data.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/resources/storage.dart';
+import 'package:oc_front/models/resources/workflow.dart';
 import 'package:oc_front/models/response.dart';
-import 'package:oc_front/models/search.dart';
 import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/pages/abstract_page.dart';
 import 'package:oc_front/pages/shared.dart';
 import 'package:oc_front/widgets/dialog/shallow_creation.dart';
-import 'package:oc_front/widgets/forms/processing_forms.dart';
+import 'package:oc_front/widgets/forms/resource_forms.dart';
 import 'package:oc_front/widgets/forms/scheduler_forms.dart';
+import 'package:oc_front/widgets/forms/storage_processing_link_forms.dart';
 import 'package:oc_front/widgets/items/item_row.dart';
 import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
 
-Dashboard dash = Dashboard(
-  name: "workflow_${DateTime.now().toString().replaceAll(" ", "_").substring(0, DateTime.now().toString().length - 7)}");
+Dashboard dash = Dashboard(name: "");
 class WorkflowFactory implements AbstractFactory {
+  @override GlobalKey getKey() { return key; }
+  @override String? getSearch() { return ""; }
+  @override void back(BuildContext context) { }
   static GlobalKey<WorkflowPageWidgetState> key = GlobalKey<WorkflowPageWidgetState>();
   @override bool searchFill() { return false; }
   @override Widget factory(GoRouterState state, List<String> args) { 
     String? id;
     try { id = state.pathParameters[args.first];
-    } catch (e) { }
+    } catch (e) { /**/ }
     return WorkflowPageWidget(id: id); 
   }
-  @override void search(BuildContext context) { }
+  @override void search(BuildContext context, bool special) { }
 }
 bool getAll = true;
 
+// ignore: must_be_immutable
 class WorkflowPageWidget extends StatefulWidget {
   String? id;
   WorkflowPageWidget ({ this.id }) : super(key: WorkflowFactory.key);
@@ -44,7 +53,7 @@ final WorflowService _service = WorflowService();
   Widget itemBuild(Object item) {
     var e = item as AbstractItem;
     return Tooltip( message: item.name ?? "",
-      child:  e.logo != null ? Image.network(e.logo ?? "", fit: BoxFit.fill) 
+      child: e.logo != null ? Image.network(e.logo ?? "", fit: BoxFit.fill) 
         : Image.network('https://get-picto.com/wp-content/uploads/2024/01/logo-instagram-png.webp', 
       fit: BoxFit.fill));
   }
@@ -52,10 +61,70 @@ final WorflowService _service = WorflowService();
     var e = item as AbstractItem;
     return Container(color: Colors.white, child: ItemRowWidget(low: true, contextWidth: 290, item: e));
   }
-  List<Widget> getForms(FlowData? obj) {
-    return obj == null ? [] : [
-      ProcessingFormsWidget(item: obj as AbstractItem, dash: dash),
-    ];
+  Widget getArrowForms(ArrowPainter? arrow) {
+    if (arrow == null) { return Container(); }
+    var from = dash.getElement(arrow.fromID);
+    var to = dash.getElement(arrow.toID);
+    if ((from?.element?.getType() == "storage" && to?.element?.getType() == "processing") 
+    || (from?.element?.getType() == "processing" && to?.element?.getType() == "storage")) {
+      return StorageProcessingLinkFormsWidget( dash: dash, item: arrow);
+    }
+    return Container();
+  }
+  List<Widget> getForms(FlowData? obj, String id) {
+    var objAbs = obj as AbstractItem?;
+    if (objAbs == null) { return []; }
+    List<Widget> res = [ ResourceFormsWidget(item: objAbs, dash: dash, elementID: id) ];
+    return [ Wrap( 
+      alignment: WrapAlignment.center,
+      children: [
+      Container( padding: const EdgeInsets.all(10), width: 250, height: 60,
+        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
+        child: const Column( mainAxisAlignment: MainAxisAlignment.center, children: [
+          Text("ELEMENT INFO", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
+          Text("<general>", style: TextStyle(fontSize: 12), textAlign: TextAlign.center),
+      ])), 
+      ...res
+    ]) ];
+  }
+
+  Widget? getTopRight(FlowData? obj) {
+    var objAbs = obj as AbstractItem?;
+    if (objAbs == null) { return null; }
+    if (objAbs.topic == "compute") {
+      var instance = objAbs as ComputeItem;
+      if (instance.infrastructureEnum != null) {
+        if (instance.infrastructureEnum == 0) {
+          return Icon(FontAwesomeIcons.docker, size: 16);
+        } else if (instance.infrastructureEnum == 1) {
+          return Icon(FontAwesomeIcons.lifeRing, size: 16);
+        } else if (instance.infrastructureEnum == 2) {
+          return Icon(FontAwesomeIcons.cubes, size: 16);
+        } else if (instance.infrastructureEnum == 3) {
+          return Icon(FontAwesomeIcons.hardDrive, size: 16);
+        } else if (instance.infrastructureEnum == 4) {
+          return Icon(FontAwesomeIcons.v, size: 16);
+        }
+      }
+    }
+    return null;
+  }
+
+  Widget? getBottomLeftBadge(FlowData? obj) {
+    var objAbs = obj as AbstractItem?;
+    if (objAbs == null) { return null; }
+    if (objAbs.topic == "processing" ) {
+      return Icon(FontAwesomeIcons.gear, size: 16);
+    } else if (objAbs.topic == "data" ) {
+      return Icon(FontAwesomeIcons.file, size: 16);
+    } else if (objAbs.topic == "storage" ) {
+      return Icon(FontAwesomeIcons.database, size: 16);
+    } else if (objAbs.topic == "compute" ) {
+      return Icon(FontAwesomeIcons.microchip, size: 16);
+    } else if (objAbs.topic == "workflows" ) {
+      return Icon(FontAwesomeIcons.diagramProject, size: 16);
+    }
+    return null;
   }
 
   List<Widget> getDashInfoForms() {
@@ -66,40 +135,44 @@ final WorflowService _service = WorflowService();
 
   Future<void> loadDash(String selected) async {
     dash.shouldSave = false;
+    dash.name = "";
+    var name = "";
     if (selected.split("~").length > 1) {
-      dash.name = selected.split("~")[1];
+      name = selected.split("~")[1];
       dash.id = selected.split("~")[0];
     } else {
-      dash.name = selected;
+      name = selected;
     }
-    await _service.get(context, dash.id ?? "").then((value) {
+    await _service.get(context, dash.id ?? "").then((value) async {
       if (value.data != null) {
+        // ignore: use_build_context_synchronously
+        await WorkspaceLocal.init(context, false);
+        WorkspaceLocal.changeWorkspaceByName("${value.data?.name ?? ""}_workspace");
         dash.clear();
-        dash.deserialize(value.data!.toDashboard());
-        Future.delayed(const Duration(seconds: 1), () => dash.shouldSave = true);
+        dash.deserialize(value.data!.toDashboard(), false);
+        Future.delayed(const Duration(seconds: 1), () {
+          dash.name = name;
+          dash.shouldSave = true;
+          dash.selectedMenuKey.currentState?.setState(() { });
+        });
       }
     });
   }
 
-  Future<void> saveDash(String? id) async {
-    if (id == null || !dash.isOpened || !dash.shouldSave) { return; }
-    var datas = WorkspaceLocal.byTopic("data", true).where(
-        (element) => dash.elements.map( (e) => e.element?.getID()).contains(element.id) );
-    var dataCenter = WorkspaceLocal.byTopic("datacenter", true).where(
-        (element) => dash.elements.map( (e) => e.element?.getID()).contains(element.id) );
-    var storage = WorkspaceLocal.byTopic("storage", true).where(
-        (element) => dash.elements.map( (e) => e.element?.getID()).contains(element.id) );
-    var computing = WorkspaceLocal.byTopic("processing", true).where(
-        (element) => dash.elements.map( (e) => e.element?.getID()).contains(element.id) );
-    var workflows = WorkspaceLocal.byTopic("workflows", true).where(
-        (element) => dash.elements.map( (e) => e.element?.getID()).contains(element.id) );
+  Future<void> saveDash(String? id, BuildContext? context) async {
+    if (id == null || !dash.isOpened || !dash.shouldSave || !PermsService.getPerm(Perms.WORKFLOW_EDIT)) { return; }
+    var datas =  dash.elements.where( (e) => e.element?.serialize()["type"] == "data");
+    var compute = dash.elements.where( (e) => e.element?.serialize()["type"] == "compute");
+    var storage = dash.elements.where( (e) => e.element?.serialize()["type"] == "storage");
+    var processing = dash.elements.where( (e) => e.element?.serialize()["type"] == "processing");
+    var workflows = dash.elements.where( (e) => e.element?.serialize()["type"] == "workflow");
     var updateW = Workflow(
       name: dash.name,
       graph: Graph(),
       data: datas.map((e) => e.id).toSet().toList(),
-      datacenter: dataCenter.map((e) => e.id).toSet().toList(),
+      compute: compute.map((e) => e.id).toSet().toList(),
       storage: storage.map((e) => e.id).toSet().toList(),
-      processing: computing.map((e) => e.id).toSet().toList(),
+      processing: processing.map((e) => e.id).toSet().toList(),
       workflows: workflows.map((e) => e.id).toSet().toList(),
     );
     updateW.fromDashboard(dash.serialize());
@@ -108,8 +181,8 @@ final WorflowService _service = WorflowService();
       item.position?.x = (item.position?.x ?? 0) + (item.width! / 2) + 7.5;
       item.position?.y = (item.position?.y ?? 0) + (item.height! / 2) + 7.5;
       for (var i in (updateW.graph?.links ?? [] as List<GraphLink>).where((element) => id == element.source?.id)) {
-        i.source?.x = (i.source?.x ?? 0) + (item.width! / 2) + 7;
-        i.source?.y = (i.source?.y ?? 0) + (item.width! / 2) + 7;
+        i.source?.x = (i.source?.x ?? 0) + (item.width! / 2) + 7.5;
+        i.source?.y = (i.source?.y ?? 0) + (item.width! / 2) + 7.5;
       }
       for (var i in (updateW.graph?.links ?? [] as List<GraphLink>).where((element) => id == element.destination?.id)) {
         i.destination?.x = (i.destination?.x ?? 0) + (item.width! / 2) + 7.5;
@@ -117,72 +190,51 @@ final WorflowService _service = WorflowService();
       }
     }
     updateW.graph?.zoom = dash.getZoomFactor();
-    print("SAVE DASH");
     dash.addToHistory();
-    await _service.put(context, id, updateW.serialize(), {}).then( (e) {
-      if (dash.addChange) {
-        dash.addChange = false;
-        WorkspaceLocal.init(context, false);
-        dash.selectedLeftMenuKey.currentState?.setState(() { });
-      }
-    });  
+      _service.put(null, id, updateW.serialize(), {}).then( (e) async {
+        dash.applyInfos(updateW.graph?.getEnvToUpdate() ?? {}, updateW.toDashboard());
+        if (dash.addChange) {
+          dash.addChange = false;
+          // ignore: use_build_context_synchronously
+          await WorkspaceLocal.init(context, false);
+          WorkspaceLocal.changeWorkspaceByName("${dash.name}_workspace");
+          dash.selectedLeftMenuKey.currentState?.setState(() { });
+        }
+      });  
   }
 
   FlowData? transformToData(Map<String, dynamic> data) {
-    var d = WorkspaceLocal.getItem(data["id"] ?? "", true);
-    if (d == null) { return null; }
-    d.model = ResourceModel().deserialize(data["resource_model"]);
-    if (d.topic == "data") { return d as DataItem; }
-    if (d.topic == "datacenter") { return d as DataCenterItem; }
-    if (d.topic == "storage") { return d as StorageItem; }
-    if (d.topic == "processing") { return d as ProcessingItem; }
-    if (d.topic == "workflows") { return d as WorkflowItem; }
+    if (data["type"] == "data") { return DataItem().deserialize(data); }
+    if (data["type"] == "compute") { return ComputeItem().deserialize(data); }
+    if (data["type"] == "storage") { return StorageItem().deserialize(data); }
+    if (data["type"] == "processing") { return ProcessingItem().deserialize(data); }
+    if (data["type"] == "workflows") { return WorkflowItem().deserialize(data); }
     return null;
   }
 
   Widget onDashboardMenu(Dashboard dash) {
-    return ShallowDropdownInputWidget(
-            iconLoad: Icons.share,
-            tooltipLoad: 'share',
-            tooltipRemove: 'unshare',
-            filled: const Color.fromRGBO(38,166, 154, 1),
-            color: Colors.white,
-            hintColor: Colors.grey.shade300,
-            type: SharedWorkspaceType.workflow,
-            all: () async => SharedWorkspaceLocal.workspaces.values.map( 
-              (e) => Shallow(id: e.id ?? "", name: e.name ?? "") ).toList(),
-            current: WorkspaceLocal.workspaces[WorkspaceLocal.current]?.shared,
-            width: (MediaQuery.of(context).size.width / 3),
-            canLoad: (String? change) {
-              return SharedWorkspaceLocal.workspaces[change] == null 
-              || !SharedWorkspaceLocal.workspaces[change]!.workflows.map( (e) => e.id 
-                ).contains(dash.id);
-            },
-            canRemove: (String? change) => SharedWorkspaceLocal.workspaces[change] == null 
-              || SharedWorkspaceLocal.workspaces[change]!.workflows.map( (e) => e.id 
-                ).contains(dash.id), 
-            load: (String val) async {
-              await SharedService().addWorkflow(context, val, dash.id ?? "");
-              SharedWorkspaceLocal.init(context, false);
-              dash.selectedMenuKey.currentState?.setState(() { });
-            },
-            remove: (String val) async {
-              await SharedService().removeWorkflow(context, val, dash.id ?? "");
-              SharedWorkspaceLocal.init(context, false);
-              dash.selectedMenuKey.currentState?.setState(() { });
-            });
-  }
-  Widget menuExtension() {
-    var quart = MediaQuery.of(context).size.width / 6;
-    return ShallowDropdownInputWidget(
-                current: WorkspaceLocal.current,
-                width: quart > 80 ? quart : 80,
-                all: () async => WorkspaceLocal.getWorkspacesShallow(),
-                type: SharedWorkspaceType.workspace,
-                change: (String? change) {
-                  WorkspaceLocal.changeWorkspace(change.toString());
-                }
-            );
+    return Container( padding: EdgeInsets.only(left: 50),
+                decoration: BoxDecoration( border: Border( left: BorderSide( color: Colors.white ))),
+                child: ShallowDropdownInputWidget(
+                  filled: lightColor,
+                  hintColor: Colors.grey.shade200,
+                  color: Colors.white,
+                  prefixIcon: Padding( padding: EdgeInsets.only(right: 10), child: Icon(Icons.shopping_cart, color: Colors.grey.shade200)),
+                  current: WorkspaceLocal.current,
+                  width: 300,
+                  all: () async => WorkspaceLocal.getWorkspacesShallow(),
+                  type: CollaborativeAreaType.workspace,
+                  change: (String? change) {
+                    WorkspaceLocal.changeWorkspace(change.toString());
+                  },
+                  canLoad: (p0) => true,
+                  load: (p0) async {
+                    dash.isInfo = !dash.isInfo;
+                    dash.flutterChartKey.currentState?.setState(() { });
+                  },
+                  tooltipLoad: "open workspace manager",
+                  iconLoad: dash.isInfo ? Icons.remove_red_eye_outlined : Icons.remove_red_eye,
+          ));
   }
   Widget onDashboardAlertOpened(BuildContext context, Dashboard dash) {
     return ShallowCreationDialogWidget(
@@ -191,25 +243,30 @@ final WorflowService _service = WorflowService();
       load: (p0) async {
         dash.isOpened = true;
         if (dash.load != null) {
-          WorkspaceLocal.changeWorkspaceByName(p0.split("~")[1]);  
+            WorkspaceLocal.changeWorkspaceByName(p0.split("~")[1]);  
             await dash.load!(p0);         
           } 
+          dash.inDialog = false;
           dash.notifyListeners();
       },
-      create: (p0) async => await _service.post(context, p0, {}).then( (value) {
+      create: PermsService.getPerm(Perms.WORKFLOW_CREATE) ? (p0) async => await _service.post(context, p0, {}).then( (value) async {
           dash.clear();
           dash.id = value.data?.getID() ?? "";
           dash.name = value.data?.getName() ?? "";
+          dash.inDialog = false;
           dash.notifyListeners();
-          WorkspaceLocal.init(context, true);
+          await WorkspaceLocal.init(context, true);
           dash.isOpened = true;
+          Future.delayed(const Duration(seconds: 1), () {
+            dash.load!("${dash.id}~${dash.name}");
+          });
         }
-      ),
+      ) : null,
       maptoDropdown: (e) => DropdownMenuItem<String>(
                               value: "${e.id}~${e.name}",
                               child: Text(e.name),
                             ),
-      type: SharedWorkspaceType.workflow,
+      type: CollaborativeAreaType.workflow,
       all: () async {
         List<Shallow> res = [];
         await _service.all(context).then(
@@ -226,26 +283,68 @@ final WorflowService _service = WorflowService();
   @override Widget build(BuildContext context) {
     dash.load = loadDash;
     dash.save = saveDash;
+    dash.dashColor = lightColor;
+    dash.midDashColor = midColor;
     dash.transformToData = transformToData;
     dash.infoItemWidget = getForms;
+    dash.infoLinkWidget = getArrowForms;
     dash.infoWidget = getDashInfoForms;
-    var quart = MediaQuery.of(context).size.width / 6;
-    dash.defaultName = "workflow_${DateTime.now().toString().replaceAll(" ", "_"
-      ).substring(0, DateTime.now().toString().length - 7)}";
+    dash.widthOffset = 50;
+    dash.arrowStyleRules = [
+      (dash) {
+        for (var arrow in dash.arrows) {
+          try {
+            var from = dash.elements.firstWhere((element) => arrow.fromID.split("_")[0] == element.id).element;
+            var to = dash.elements.firstWhere((element) => arrow.toID.split("_")[0] == element.id).element;
+            if ((from is ProcessingItem && to is ComputeItem) || (to is ProcessingItem && from is ComputeItem)) {
+              arrow.params.color = Colors.orange;
+              arrow.params.dashSpace = 2;
+              arrow.params.dashWidth = 2;
+            } else if ((from is ProcessingItem && to is StorageItem) || (to is ProcessingItem && from is StorageItem)) {
+              arrow.params.color = redColor;
+              arrow.params.dashSpace = 2;
+              arrow.params.dashWidth = 2;
+            } else if ((from is ProcessingItem && to is DataItem) || (to is ProcessingItem && from is DataItem)) {
+              arrow.params.color = Colors.blue;
+              arrow.params.dashSpace = 2;
+              arrow.params.dashWidth = 2;
+            } else {
+              arrow.params.color = Colors.black;
+              arrow.params.dashSpace = 0;
+              arrow.params.dashWidth = 0;
+            }
+          } catch (e) {
+            arrow.params.color = Colors.black;
+            arrow.params.dashSpace = 0;
+            arrow.params.dashWidth = 0;
+          }
+        }
+        return dash.arrows;
+      }
+    ];
+    dash.saveRules = [
+      (dash) {
+        dash.error = null;
+        
+        return true;
+      }
+    ];
     return FlowChart<AbstractItem>(
+                key: dash.flutterChartKey,
+                itemLeftBottomBadges: getBottomLeftBadge,
+                itemrightTopBadges: getTopRight,
                 onDashboardAlertOpened: onDashboardAlertOpened,
                 dashboard: dash,
                 current: widget.id,
                 itemWidget: itemBuild,
                 menuWidget: onDashboardMenu,
-                categories: const ["processing", "data", "datacenter", "storage", "workflows"],
+                categories: const ["processing", "data", "compute", "storage", "workflows"],
                 draggableItemBuilder: (cat) => WorkspaceLocal.byTopic(cat, false),
                 itemWidgetTooltip: itemTooltipBuild,
-                innerMenuWidth: quart > 80 ? quart : 80,
-                width: MediaQuery.of(context).size.width,
-                height: MediaQuery.of(context).size.height - HeaderConstants.height,
+                innerMenuWidth: 350,
+                width: getMainWidth(context),
+                height: getMainHeight(context),
                 onNewConnection: (p1, p2) { },
-                menuExtension: menuExtension,
                 onDashboardTapped: (context, position) { },
                 onScaleUpdate: (newScale) { },
                 onDashboardSecondaryTapped: (context, position) { },

lib/widgets/catalog.dart

@@ -1,13 +1,14 @@
+import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
-import 'package:oc_front/core/models/workspace_local.dart';
-import 'package:oc_front/models/search.dart';
 import 'package:oc_front/widgets/items/item_row.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
 
 class CatalogWidget extends StatefulWidget {
   double? itemWidth;
   bool readOnly = false;
   final List<AbstractItem>? items;
-  CatalogWidget ({ Key? key, this.items, this.itemWidth, this.readOnly = false }): super(key: key);
+  CatalogWidget ({ super.key, this.items, this.itemWidth, this.readOnly = false });
   @override CatalogWidgetState createState() => CatalogWidgetState();
 }
 class CatalogWidgetState extends State<CatalogWidget> {
@@ -15,7 +16,7 @@ class CatalogWidgetState extends State<CatalogWidget> {
     var items = widget.items ?? WorkspaceLocal.items;
     List<ItemRowWidget> itemRows = items.map((e) => ItemRowWidget(
       readOnly: widget.readOnly,
-      contextWidth: widget.itemWidth ?? MediaQuery.of(context).size.width, item: e)).toList();
+      contextWidth: widget.itemWidth ?? getMainWidth(context), item: e)).toList();
     return Column( children: itemRows);
   }
 }

lib/widgets/dialog/alert.dart

@@ -1,5 +1,6 @@
 
 import 'package:flutter/material.dart';
+import 'package:oc_front/main.dart';
 
 class InfoAlertBannerChild extends StatelessWidget {
   final String text;
@@ -9,7 +10,7 @@ class InfoAlertBannerChild extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       width: double.infinity,
-      constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.8),
+      constraints: BoxConstraints(maxWidth: getMainWidth(context) * 0.8),
       decoration: const BoxDecoration(
         color: Colors.greenAccent,
         borderRadius: BorderRadius.all(Radius.circular(5)),
@@ -38,9 +39,9 @@ class AlertAlertBannerChild extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       width: double.infinity,
-      constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.8),
-      decoration: const BoxDecoration(
-        color: Colors.redAccent,
+      constraints: BoxConstraints(maxWidth: getMainWidth(context) * 0.8),
+      decoration: BoxDecoration(
+        color: redColor,
         borderRadius: BorderRadius.all(
           Radius.circular(5),
         ),

lib/widgets/dialog/login.dart

@@ -1,74 +1,140 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:go_router/go_router.dart';
+import 'package:oc_front/core/services/auth.service.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/pages/workflow.dart';
 
 class LoginWidget extends StatefulWidget {
   LoginWidget ({ Key? key }): super(key: key);
   @override LoginWidgetState createState() => LoginWidgetState();
 }
 class LoginWidgetState extends State<LoginWidget> {
+  TextEditingController usernameCtrl = TextEditingController();
+  TextEditingController passwordCtrl = TextEditingController();
+
+  String? error;
+  bool loading = false;
+  FocusNode focusNode = FocusNode();
   @override Widget build(BuildContext context) {
-    return AlertDialog(
-        backgroundColor: Colors.white,
-        shape: const RoundedRectangleBorder(
-                    borderRadius: BorderRadius.all(Radius.circular(0))),
-        content: Padding(padding: const EdgeInsets.all(20), child: Column(mainAxisSize: MainAxisSize.min, children: [
-      const Center(child: Padding( padding: EdgeInsets.only(bottom: 10), 
-        child: Icon(Icons.person_search, size: 80, color: Colors.grey,))),
-      const Center(child: Text("WELCOME ON OPENCLOUD", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600,
-        color: Color.fromRGBO(38, 166, 154, 1)),)),
-      Container(
-        padding: const EdgeInsets.symmetric(vertical: 20),
-        decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.black))),
-      ),
-      Container( margin: const EdgeInsets.only(bottom: 10), child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
+    return KeyboardListener(focusNode: focusNode, 
+    onKeyEvent: (value) async {
+      if (value is KeyDownEvent && value.logicalKey == LogicalKeyboardKey.enter) {
+        if (usernameCtrl.text == "" || passwordCtrl.text == "") { return; }
+        error = null;
+        setState(() {
+          loading = true;
+        });
+        await AuthService.login(usernameCtrl.text, passwordCtrl.text).catchError( (e) {
+          setState(() {
+            loading = false;
+            error = "Invalid username or password";
+          });
+        }).then( (e) {
+          if (error == null) {
+              // ignore: use_build_context_synchronously
+              setState(() {
+                loading = false;
+              });
+              loginIsSet = false;
+              dash.inDialog = false;
+              context.pop();
+              mainKey?.currentState?.setState(() {});
+            }
+        });
+      }
+    },
+    child: Container( padding: const EdgeInsets.all(50), child: Column(children: [
+      getMainHeight(context) < 600 ? Container() : SizedBox( width: getMainWidth(context) / 4, height: getMainHeight(context) / 4,
+      child: FittedBox(
+          child:const Center(child: Icon(Icons.person_search, size: 150, color: Colors.grey,)))),
+      Center(child: Padding( padding: const EdgeInsets.only(top: 5, bottom: 20), 
+        child: Text("WELCOME ON OPENCLOUD", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600,
+        color: lightColor ), overflow: TextOverflow.ellipsis, ))),
+      Container( margin: const EdgeInsets.only(bottom: 10), 
+      child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
         children: [ 
         Container( 
           width: MediaQuery.of(context).size.width / 3,
           alignment : Alignment.center,  
           child: TextField(
+          controller: usernameCtrl,
+          onChanged: (v) => setState(() {}),
           decoration: InputDecoration(
-            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
-            border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
-            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
+            border: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
+            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
             hintText: "username...",
             contentPadding: const EdgeInsets.symmetric(horizontal: 20),
-            fillColor: Colors.grey.shade300,
+            fillColor: midColor,
             filled: true,
             hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
-          style: const TextStyle(fontSize: 12.5, color: Colors.grey)),),
+          style: const TextStyle(fontSize: 12.5, color: Colors.black)),),
         Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.person, color: Colors.white))
       ]))),
-      Container( margin: const EdgeInsets.only(bottom: 20), child: Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
+      Center(child: Row( mainAxisAlignment: MainAxisAlignment.center,
         children: [ 
         Container( 
           width: MediaQuery.of(context).size.width / 3,
           alignment : Alignment.center,  
           child: TextField(
+          controller: passwordCtrl,
           obscureText: true,
+          onChanged: (value) {
+            setState(() {});
+          },
           decoration: InputDecoration(
-            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
-            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
-            border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey.shade300), borderRadius: BorderRadius.zero),
+            focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
+            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
+            border: OutlineInputBorder(borderSide: BorderSide(color: midColor), borderRadius: BorderRadius.zero),
             hintText: "password...",
             contentPadding: const EdgeInsets.symmetric(horizontal: 20),
-            fillColor: Colors.grey.shade300,
+            fillColor: midColor,
             filled: true,
             hintStyle: const TextStyle(fontSize: 12.5, color: Colors.grey)),
-          style: const TextStyle(fontSize: 12.5, color: Colors.grey)),),
+          style: const TextStyle(fontSize: 12.5, color: Colors.black)),),
         Container(width: 50, height: 50, color: Colors.black, child: const Icon(Icons.password, color: Colors.white))
-      ]))),
-      Row( mainAxisAlignment: MainAxisAlignment.center, children: [
-        Padding( padding: const EdgeInsets.only(right: 10), child: 
-          InkWell(onTap: () { context.pop(); }, 
-          mouseCursor: SystemMouseCursors.click,
-          child: Container(
-            margin: const EdgeInsets.only(top: 20),
-            width: MediaQuery.of(context).size.width / 3,
-            padding: const EdgeInsets.symmetric(vertical: 20),
-            color: const Color.fromRGBO(38, 166, 154, 1), 
-        child: const Center( child: Text("LOGIN", style: TextStyle(color: Colors.white, fontSize: 15),))))),
-      ])
+      ])),
+      Column( children: [
+        Center( child: Padding( padding: EdgeInsets.only(bottom: 10, top: error == null ? 27 : 10), child: 
+          error == null ? Container() : Text(error ?? "", style: TextStyle(color: redColor, fontSize: 12.5)))),
+        Row( mainAxisAlignment: MainAxisAlignment.center, children: [
+          Padding( padding: const EdgeInsets.only(right: 10, bottom: 30), child: 
+            InkWell(onTap: () async { 
+              if (usernameCtrl.text == "" || passwordCtrl.text == "") { return; }
+              error = null;
+              setState(() {
+                loading = true;
+              });
+              await AuthService.login(usernameCtrl.text, passwordCtrl.text).catchError( (e) {
+                setState(() {
+                  loading = false;
+                  error = "Invalid username or password";
+                });
+              }).then( (e) {
+                if (error == null) {
+                    // ignore: use_build_context_synchronously
+                  setState(() {
+                    loading = false;
+                  });
+                  loginIsSet = false;
+                  dash.inDialog = false;
+                  context.pop();
+                  mainKey?.currentState?.setState(() {});
+                }
+              });
+            },
+            mouseCursor: SystemMouseCursors.click,
+            child: Container(
+              width: MediaQuery.of(context).size.width / 3,
+              padding: const EdgeInsets.symmetric(vertical: 20),
+              color: usernameCtrl.text == "" || passwordCtrl.text == "" ? Colors.grey : lightColor, 
+          child: Center( child: loading ? SpinKitWave(color: Colors.white, size: 20) : Text("LOGIN", style: TextStyle(
+            color: usernameCtrl.text == "" || passwordCtrl.text == "" ? midColor :Colors.white, 
+            fontSize: 15) ))))),
+        ])
+      ]),
     ],)));
   }
 }

lib/widgets/dialog/shallow_creation.dart

@@ -1,15 +1,18 @@
 import 'package:flutter/material.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/models/response.dart';
 import 'package:oc_front/core/services/router.dart';
 import 'package:oc_front/pages/shared.dart';
+import 'package:oc_front/pages/workflow.dart';
 import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
 import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
 
+// ignore: must_be_immutable
 class ShallowCreationDialogWidget extends StatefulWidget {
   GlobalKey<ShallowTextInputWidgetState>? formKey;
   BuildContext context;
   bool Function()? canClose;
-  SharedWorkspaceType type = SharedWorkspaceType.workspace;
+  CollaborativeAreaType type = CollaborativeAreaType.workspace;
   Future<List<Shallow>> Function()? all;
   Future<void> Function(String)? load;
   Future<void> Function(Map<String,dynamic>)? create;
@@ -25,7 +28,7 @@ class ShallowCreationDialogState extends State<ShallowCreationDialogWidget> {
   GlobalKey<FormFieldState> key = GlobalKey<FormFieldState>();
   GlobalKey<FormFieldState> key2 = GlobalKey<FormFieldState>();
   @override Widget build(BuildContext context) {
-    var t = widget.type == SharedWorkspaceType.workspace ? "workspace" : (widget.type == SharedWorkspaceType.workflow ? "workflow" : (widget.type == SharedWorkspaceType.shared_workspace ? "shared workspace" :"peer"));
+    var t = widget.type == CollaborativeAreaType.workspace ? "workspace" : (widget.type == CollaborativeAreaType.workflow ? "workflow" : (widget.type == CollaborativeAreaType.collaborative_area ? "collaborative area" :"peer"));
     return Container(
       color: Colors.white,
       padding: const EdgeInsets.only( top: 0, bottom: 20, left: 20, right: 20),
@@ -42,6 +45,7 @@ class ShallowCreationDialogState extends State<ShallowCreationDialogWidget> {
                   Tooltip( message: "back", child: InkWell( 
                   mouseCursor: SystemMouseCursors.click,
                   onTap: () { 
+                    dash.inDialog = false;
                     AppRouter.catalog.go(context, {}); 
                   },
                   child: const Icon(Icons.arrow_back, color: Colors.black))),
@@ -49,7 +53,10 @@ class ShallowCreationDialogState extends State<ShallowCreationDialogWidget> {
                 widget.canClose != null && !widget.canClose!() ? Container() :  Row ( mainAxisAlignment: MainAxisAlignment.end, children: [
                   Tooltip( message: "close", child: InkWell( 
                   mouseCursor: SystemMouseCursors.click,
-                  onTap: () { Navigator.pop(context); },
+                  onTap: () { 
+                    dash.inDialog = false;
+                    Navigator.pop(context); 
+                  },
                   child: const Icon(Icons.close, color: Colors.black))),
                 ]), 
               ],),
@@ -57,9 +64,11 @@ class ShallowCreationDialogState extends State<ShallowCreationDialogWidget> {
             ShallowDropdownInputWidget(
               all: widget.all, 
               type: widget.type,
-              width: MediaQuery.of(context).size.width <= 540 ? MediaQuery.of(context).size.width - 140 : 400,
+              hint: "select a $t",
+              width: getMainWidth(context) <= 540 ? getMainWidth(context) - 140 : 400,
               load: (e) async {
                 await widget.load!(e);
+                dash.inDialog = false;
                 Navigator.pop(widget.context);
               },
               iconLoad: Icons.open_in_browser_outlined,
@@ -71,24 +80,26 @@ class ShallowCreationDialogState extends State<ShallowCreationDialogWidget> {
               deletion: true,
               color: Colors.black,
               hintColor: Colors.grey,
-              filled: Colors.grey.shade300,
+              filled: midColor,
             ),
             Container( height: 10),
-            ShallowTextInputWidget(
+            widget.create != null ? ShallowTextInputWidget(
               key: widget.formKey,
               type: widget.type,
-              width: MediaQuery.of(context).size.width <= 540 ? MediaQuery.of(context).size.width - 140 : 400,
+              hint: "create a new $t",
+              width: getMainWidth(context) <= 540 ? getMainWidth(context) - 140 : 400,
               load: (e) async {
                 await widget.create!(e);
+                dash.inDialog = false;
                 Navigator.pop(widget.context);
               },
               forms: widget.form,
               canLoad: (p0) => p0 != null && p0.isNotEmpty,
               color: Colors.black,
               hintColor: Colors.grey,
-              filled: Colors.grey.shade300,
-            ),
-            ...widget.form.map( (e) => Container( margin: const EdgeInsets.only(top: 10), child: e)),
+              filled: midColor,
+            ) : Container(),
+             ...(widget.create != null ? widget.form.map( (e) => Container( margin: const EdgeInsets.only(top: 10), child: e)) : []),
           ]
         )
     );

lib/widgets/forms/container_forms.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/widgets/forms/sub_expose_forms.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+// ignore: must_be_immutable
+class ContainerFormsWidget extends StatefulWidget {
+  int instanceID = 0;
+  Dashboard dash;
+  AbstractItem item;
+  String elementID;
+  ContainerFormsWidget({ super.key, required this.item, required this.dash, required this.elementID });
+  @override ContainerFormsWidgetState createState() => ContainerFormsWidgetState();
+}
+
+class ContainerFormsWidgetState extends State<ContainerFormsWidget> {
+  @override Widget build(BuildContext context) {
+    List<Widget> widgets = [];
+    var instance = widget.item.getSelectedInstance();
+    if (instance != null && instance is ProcessingInstance && instance.access?.container != null) {
+      var container = instance.access!.container!;
+      widgets.add(Container(
+        padding: const EdgeInsets.only(bottom: 10),
+        width: 180,
+        child: Column( 
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text("<CONTAINER>", style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
+            SubTextInputWidget(subkey: "image", width: 180, empty: false, change: (value) { },
+              initialValue: container.image, readOnly: true),
+            SubTextInputWidget(subkey: "command", width: 180, empty: false, change: (value) {
+                container.command = value;
+                for (var el in widget.dash.elements) {
+                    if (el.id == widget.elementID) {
+                      el.element = widget.item;
+                      break;
+                    }
+                }
+                widget.dash.saveDash(widget.dash.id, context);
+              }, initialValue: container.command, readOnly: false,),
+            SubTextInputWidget(subkey: "args", width: 180, empty: false, change: (value) {
+                container.args = value;
+                for (var el in widget.dash.elements) {
+                    if (el.id == widget.elementID) {
+                      el.element = widget.item;
+                      break;
+                    }
+                }
+                widget.dash.saveDash(widget.dash.id, context);
+              }, 
+              initialValue: container.args, readOnly: false,)
+          ],)
+        ));
+        widgets.add(Container(
+        width: 200, decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey))),
+      ));
+      widgets.add(Container(
+            padding: const EdgeInsets.symmetric(vertical: 10),
+            width: 180,
+            child: Column( 
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                const Padding(padding: EdgeInsets.only(bottom: 5), child: Text("<EXPOSE>", 
+                  style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold), textAlign: TextAlign.center)),
+                Row( children: [
+                  InkWell( onTap: () {
+                      container.exposes.add(Expose());
+                      var el = widget.dash.getElement(widget.elementID);
+                      el!.element = widget.item as dynamic;
+                      setState(() {});
+                    }, child:
+                    Container( margin: const EdgeInsets.only(top: 5),
+                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.grey, width: 1)),
+                      width: 125, height: 30,
+                      child: const Row( mainAxisAlignment: MainAxisAlignment.center,
+                        children: [ Padding( padding: EdgeInsets.only(right: 5), child: Icon(Icons.add)), Text("add expose")]),
+                    )
+                  ),
+                  InkWell( onTap: () {
+                    if (container.exposes.isEmpty) { return; }
+                      container.exposes = container.exposes.sublist(0, container.exposes.length - 1);
+                      var el = widget.dash.getElement(widget.elementID);
+                      el!.element = widget.item as dynamic;
+                      setState(() {});
+                    }, child:
+                    Container( margin: const EdgeInsets.only(left: 5, top: 5),
+                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.grey, width: 1)),
+                      width: 45, height: 30,
+                      child: const Row( mainAxisAlignment: MainAxisAlignment.center,
+                        children: [ Icon(Icons.delete, color: Colors.black) ]),
+                    )
+                  )
+                ]),
+              ],)
+          ));
+      for (var expose in container.exposes) {
+        widgets.add(SubExposeFormsWidget( readOnly: true, width: 180, dash: widget.dash, empty: widgets.isEmpty, 
+        item: expose, elementID: widget.elementID));
+      }
+    }
+    return Column(children: widgets);
+  }
+}

lib/widgets/forms/credentials_forms.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+// ignore: must_be_immutable
+class CredentialsFormsWidget extends StatefulWidget {
+  int instanceID = 0;
+  Dashboard dash;
+  AbstractItem item;
+  String elementID;
+  CredentialsFormsWidget({ super.key, required this.item, required this.dash, required this.elementID });
+  @override CredentialsFormsWidgetState createState() => CredentialsFormsWidgetState();
+}
+
+class CredentialsFormsWidgetState extends State<CredentialsFormsWidget> {
+  @override Widget build(BuildContext context) {
+    List<Widget> widgets = [];
+    var instance = widget.item.getSelectedInstance();
+    if (instance != null  && instance.credential != null) {
+      var creds = instance.credential!;
+      widgets.add(Container( margin: EdgeInsets.only(bottom: 15),
+        width: 200, decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey))),
+      ));
+      widgets.add(Container(
+        padding: const EdgeInsets.only(bottom: 10),
+        width: 180,
+        child: Column( 
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text("<CREDENTIALS>", style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
+            SubTextInputWidget(subkey: "login", width: 180, empty: false, change: (value) {
+              creds.password = value;
+                for (var el in widget.dash.elements) {
+                    if (el.id == widget.elementID) {
+                      el.element = widget.item;
+                      break;
+                    }
+                }
+                widget.dash.saveDash(widget.dash.id, context);
+            },  initialValue: creds.login),
+            SubTextInputWidget(subkey: "password", width: 180, empty: false, change: (value) {
+                creds.password = value;
+                for (var el in widget.dash.elements) {
+                    if (el.id == widget.elementID) {
+                      el.element = widget.item;
+                      break;
+                    }
+                }
+                widget.dash.saveDash(widget.dash.id, context);
+              }, initialValue: creds.password, readOnly: false,),
+          ],)
+        ));
+        widgets.add(Container( padding: EdgeInsets.only(bottom: 15), width: 200 ));
+    }
+    return Column(children: widgets);
+  }
+}

lib/widgets/forms/data_forms.dart

@@ -1,73 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:oc_front/models/search.dart';
-
-class DataFormsWidget extends StatefulWidget {
-  DataItem item;
-  String purpose = ""; 
-  Function validate = () {};
-  DataFormsWidget ({ super.key, required this.item });
-  @override DataFormsWidgetState createState() => DataFormsWidgetState();
-}
-class DataFormsWidgetState extends State<DataFormsWidget> {
-  @override Widget build(BuildContext context) {
-    return Column( children: [
-      Tooltip( message: "protocols",
-        child: Container(
-                              margin: const EdgeInsets.only(left: 10),
-                              width: 45, height: 25,
-                              child: TextFormField( textAlign: TextAlign.center,
-                              initialValue: widget.item.protocols.join(","),
-                              onChanged: (value) { 
-                                widget.item.protocols = value.split(",");
-                              },
-                              style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
-                                fillColor: Colors.white,
-                                filled: true,
-                                labelText: "protocols",
-                                labelStyle: TextStyle(fontSize: 10),
-                                border: OutlineInputBorder(),
-                                contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                              ),
-                          ))),
-      Tooltip( message: "datatype",
-        child: Container(
-                              margin: const EdgeInsets.only(left: 10),
-                              width: 45, height: 25,
-                              child: TextFormField( textAlign: TextAlign.center,
-                              initialValue: widget.item.dataType,
-                              onChanged: (value) { 
-                                widget.item.dataType = value;
-                              },
-                              style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
-                                fillColor: Colors.white,
-                                filled: true,
-                                labelText: "datatype",
-                                labelStyle: TextStyle(fontSize: 10),
-                                border: OutlineInputBorder(),
-                                contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                              ),
-                          ))),
-      Tooltip( message: "example",
-        child: Container(
-                              margin: const EdgeInsets.only(left: 10),
-                              width: 45, height: 25,
-                              child: TextFormField( textAlign: TextAlign.center,
-                              initialValue: widget.item.exemple,
-                              onChanged: (value) { 
-                                widget.item.exemple = value;
-                              },
-                              style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
-                                fillColor: Colors.white,
-                                filled: true,
-                                labelText: "example",
-                                labelStyle: TextStyle(fontSize: 10),
-                                border: OutlineInputBorder(),
-                                contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                              ),
-                          )))
-    ]);
-  }
-}

lib/widgets/forms/processing_forms.dart

@@ -1,136 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_flow_chart/flutter_flow_chart.dart';
-import 'package:oc_front/models/search.dart';
-import 'package:oc_front/pages/workflow.dart';
-
-Map<String, Map<String, AbstractItem>> proxyWfItem = {};
-
-class ProcessingFormsWidget extends StatefulWidget {
-  AbstractItem item;
-  Dashboard dash;
-  ProcessingFormsWidget ({ super.key, required this.item, required this.dash });
-  @override ProcessingFormsWidgetState createState() => ProcessingFormsWidgetState();
-}
-class ProcessingFormsWidgetState extends State<ProcessingFormsWidget> {
-  @override Widget build(BuildContext context) {
-    List<Widget> children = [];
-    var l = widget.item.model?.model?.keys ?? [];
-    for (var child in l) {
-      if (widget.item.model!.model![child]!.type != "string") { continue; }
-      children.add(
-        Tooltip( message: child,
-          child: Container( margin: EdgeInsets.only(top: children.isEmpty ? 0 : 15),
-                                width: 200, height: 30,
-                                child: TextFormField( textAlign: TextAlign.start,
-                                initialValue: widget.item.model?.model?[child]?.value,
-                                onChanged: (value) { 
-                                  widget.item.model ?? Model();
-                                  Future.delayed(const Duration(seconds: 2), () {
-                                    if (widget.item.model!.model?[child]?.value == value) {
-                                       dash.save!(dash.id);
-                                    }
-                                  });
-                                  widget.item.model?.model?[child]?.value = value;
-                                },
-                                style: const TextStyle(fontSize: 12),
-                                decoration: InputDecoration(
-                                  hintText: "enter $child...",
-                                  fillColor: Colors.white,
-                                  filled: true,
-                                  labelText: child,
-                                  alignLabelWithHint: false,
-                                  errorStyle: const TextStyle(fontSize: 0),
-                                  hintStyle: const TextStyle(fontSize: 10),
-                                  labelStyle: const TextStyle(fontSize: 10),
-                                  floatingLabelBehavior: FloatingLabelBehavior.always,
-                                  enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  border: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                                ),
-                            )))
-      );
-    }
-    if (widget.dash.scheduler["mode"] != null && widget.dash.scheduler["mode"] == 1) {
-      children.add(
-        Tooltip( message: "hostname",
-          child: Container( margin: EdgeInsets.only(top: children.isEmpty ? 0 : 15),
-                                width: 200, height: 30,
-                                child: TextFormField( textAlign: TextAlign.start,
-                                onChanged: (value) { 
-                                  widget.item.model ?? Model();
-                                  Future.delayed(const Duration(seconds: 2), () {
-                                    if (widget.item.model!.model?["hostname"]?.value == value) {
-                                       dash.save!(dash.id);
-                                    }
-                                  });
-                                  widget.item.model?.model?["hostname"]?.value = value;
-                                },
-                                style: const TextStyle(fontSize: 12),
-                                decoration: const InputDecoration(
-                                  hintText: "enter hostname...",
-                                  fillColor: Colors.white,
-                                  filled: true,
-                                  labelText: "hostname",
-                                  alignLabelWithHint: false,
-                                  errorStyle: TextStyle(fontSize: 0),
-                                  hintStyle: TextStyle(fontSize: 10),
-                                  labelStyle: TextStyle(fontSize: 10),
-                                  floatingLabelBehavior: FloatingLabelBehavior.always,
-                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                                ),
-                            )))
-      );
-      children.add(
-        Tooltip( message: "port",
-          child: Container( margin: EdgeInsets.only(top: children.isEmpty ? 0 : 15),
-                                width: 200, height: 50,
-                                child: TextFormField( textAlign: TextAlign.start,
-                                onChanged: (value) { 
-                                  widget.item.model ?? Model();
-                                  Future.delayed(const Duration(seconds: 2), () {
-                                    if (widget.item.model!.model?["port"]?.value == value) {
-                                       dash.save!(dash.id);
-                                    }
-                                  });
-                                  try {
-                                    widget.item.model?.model?["port"]?.value = int.parse(value);
-                                  } catch (e) { /**/ }
-                                },
-                                keyboardType: TextInputType.number,
-
-                                inputFormatters: <TextInputFormatter>[
-                                  FilteringTextInputFormatter.digitsOnly
-                                ], // Only numbers can be entered
-                                maxLength: 4,
-                                style: const TextStyle(fontSize: 12),
-                                decoration: const InputDecoration(
-                                  hintText: "enter port...",
-                                  fillColor: Colors.white,
-                                  filled: true,
-                                  labelText: "port",
-                                  alignLabelWithHint: false,
-                                  errorStyle: TextStyle(fontSize: 0),
-                                  hintStyle: TextStyle(fontSize: 10),
-                                  labelStyle: TextStyle(fontSize: 10),
-                                  floatingLabelBehavior: FloatingLabelBehavior.always,
-                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                                ),
-                            )))
-      );
-    }
-    return Column( children: [
-      Container( padding: const EdgeInsets.all(10), width: 250, height: 60, margin: const EdgeInsets.only(bottom: 15),
-        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
-        child: const Column( mainAxisAlignment: MainAxisAlignment.center, children: [
-          Text("ELEMENT INFO", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
-          Text("<general>", style: TextStyle(fontSize: 12), textAlign: TextAlign.center),
-      ])),
-      ...children
-    ]);
-  }
-}

lib/widgets/forms/resource_forms.dart

@@ -0,0 +1,92 @@
+import 'package:oc_front/main.dart';
+import 'package:flutter/material.dart';
+import 'package:oc_front/models/workflow.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/core/services/perms_service.dart';
+import 'package:oc_front/widgets/forms/credentials_forms.dart';
+import 'package:oc_front/widgets/forms/sub_keys_forms.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+import 'package:oc_front/widgets/forms/container_forms.dart';
+import 'package:oc_front/widgets/inputs/sub_dropdown_input%20.dart';
+
+// ignore: must_be_immutable
+class ResourceFormsWidget extends StatefulWidget {
+  AbstractItem item;
+  Dashboard dash;
+  String elementID;
+  ResourceFormsWidget ({ super.key, required this.item, required this.dash, required this.elementID });
+  @override ResourceFormsWidgetState createState() => ResourceFormsWidgetState();
+}
+
+class ResourceFormsWidgetState extends State<ResourceFormsWidget> {
+  List<Widget> getWidgets(Map<String, dynamic> infos) {
+    List<Widget> widgets = [];
+    for (var key in infos.keys) {
+      if (infos[key] == null && infos[key] != 0) { continue; }
+      if (infos[key] is Map) { widgets.addAll(getWidgets(infos[key]));
+      } if (infos[key] is List) {
+        if (infos[key].isEmpty) { continue; }
+        widgets.add(SubTextInputWidget(subkey: key.replaceAll("_", " "), width: 180, empty: false, readOnly: true,
+              change: (value) {}, initialValue: (infos[key] as List<dynamic>).join(",") ));
+      } else if (infos[key] is Map) {
+          widgets.addAll(getWidgets(infos[key] as Map<String, dynamic>));
+      } else {
+        widgets.add(SubTextInputWidget(subkey: key.replaceAll("_", " "), width: 180, empty: false, readOnly: true,
+          change: (value) {}, initialValue: infos[key] is List ? infos[key].join(",") : "${infos[key]}" ));
+      }
+    }
+    if (widgets.isNotEmpty) {
+      widgets.add(SizedBox( width: 200, height: 15) );
+    }
+    return widgets;
+  }
+
+  Widget getInputAndOutputVariableForms(bool readOnly) {
+    List<Widget> res = [];
+    res.add(SubKeysMapFormsWidget(dash: widget.dash, type: SubMapFormsType.INPUT, item: widget.item, elementID: widget.elementID, 
+      readOnly: readOnly));
+    res.add(SubKeysMapFormsWidget(dash: widget.dash, type: SubMapFormsType.OUTPUT, item: widget.item, elementID: widget.elementID, 
+      readOnly: readOnly));
+    res.add(SubKeysMapFormsWidget(dash: widget.dash, type: SubMapFormsType.ENV, item: widget.item, elementID: widget.elementID, 
+        readOnly: readOnly));
+    return Column( children: res );
+  }
+
+
+  @override Widget build(BuildContext context) {
+    List<Widget> instancesCat = [];
+    List<Widget> childrenReadOnly = getWidgets(widget.item.infos());
+    List<DropdownMenuItem<String>> dpItems = [];
+    for (var (i, instance) in widget.item.instances.indexed) {
+      dpItems.add(DropdownMenuItem(value: '$i', child: Text('${instance.name}', overflow: TextOverflow.ellipsis,)));
+    }
+    if (dpItems.isNotEmpty) {
+      childrenReadOnly.add(Padding( padding: EdgeInsets.only(top: 20),
+        child : Container(
+          width: 200, decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey))),
+        )));
+      childrenReadOnly.add(Padding(padding: EdgeInsets.only(bottom: 15), child: 
+        SubDropdownInputWidget( dropdownMenuEntries: dpItems, subkey: "", width: 180, empty: false, 
+          initialValue: "${widget.item.selectedInstance}", change: (value) {
+            if (value != null) { setState(() { widget.item.selectedInstance = int.parse(value); }); }
+          },
+        ))
+      );
+      if (widget.item.instances.length > (widget.item.selectedInstance)) {
+        childrenReadOnly.addAll(getWidgets(widget.item.instances[(widget.item.selectedInstance)].infos()));
+      }
+    }
+    instancesCat.add(ContainerFormsWidget(dash: widget.dash, item: widget.item, elementID: widget.elementID));
+    instancesCat.add(CredentialsFormsWidget(dash: widget.dash, item: widget.item, elementID: widget.elementID));
+    if (instancesCat.isNotEmpty) {
+      instancesCat.add(Container(
+          width: 200, decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey))),
+        ));
+    }
+    bool readOnly = !PermsService.getPerm(Perms.WORKFLOW_EDIT);
+    // missing env input and output variables
+    return SizedBox( height: getHeight(context) - 330, child: SingleChildScrollView( child:  Column( 
+      children: [ getInputAndOutputVariableForms(readOnly), ...childrenReadOnly,  ...instancesCat,  ])));
+  }
+}

lib/widgets/forms/scheduler_forms.dart

@@ -1,65 +1,220 @@
-import 'package:alert_banner/exports.dart';
-import 'package:cron/cron.dart';
-import 'package:intl/intl.dart' as intl;
-import 'package:flutter/material.dart';
-import 'package:flutter_flow_chart/flutter_flow_chart.dart';
-import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
-import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
-import 'package:oc_front/core/models/shared_workspace_local.dart';
-import 'package:oc_front/core/services/specialized_services/workflow_service.dart';
 
-import 'package:oc_front/core/services/specialized_services/check_service.dart';
+import 'package:cron/cron.dart';
+import 'package:oc_front/core/services/specialized_services/workflow_execution_service.dart';
+import 'package:oc_front/core/services/specialized_services/workflow_scheduler_service.dart';
+import 'package:oc_front/main.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart' as intl;
+import 'package:alert_banner/exports.dart';
+import 'package:oc_front/models/resources/compute.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/pages/shared.dart';
 import 'package:oc_front/pages/workflow.dart';
 import 'package:oc_front/widgets/dialog/alert.dart';
+import 'package:oc_front/widgets/dialog/confirm_box.dart';
+import 'package:oc_front/core/services/perms_service.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
 import 'package:oc_front/widgets/inputs/shallow_text_input.dart';
+import 'package:oc_front/core/models/shared_workspace_local.dart';
+import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
+import 'package:oc_front/core/services/specialized_services/check_service.dart';
+import 'package:oc_front/core/services/specialized_services/workflow_service.dart';
 
+// ignore: must_be_immutable
 class SchedulerFormsWidget extends StatefulWidget {
+  Scheduler schedule = Scheduler();
   Dashboard item;
-  String purpose = ""; 
   bool? booking;
+  bool valid = false;
+  bool shouldSearch = true;
+  int scheduleFutureCount = 0;
+  int scheduleBeforeCount = 0;
+  String? error;
+  String? errorEndDate;
+  String? errorCron;
   Function validate = () {};
+  final SchedulerService _schedulerService = SchedulerService();
+  final WorkflowExecutionService _executionService = WorkflowExecutionService();
   SchedulerFormsWidget ({ super.key, required this.item, });
   @override SchedulerFormsWidgetState createState() => SchedulerFormsWidgetState();
 }
 class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
   CheckService check = CheckService();
-  @override Widget build(BuildContext context) {
-    try {
-      if (widget.item.scheduler["mode"] == null) { widget.item.scheduler["mode"] = 1; }
-    } catch (e) {
-      widget.item.scheduler = { "mode": 1 };
+  void save(List<GlobalKey<FormFieldState>> formKeys) {
+    print("save");
+    widget.error = null;
+    widget.errorEndDate = null;
+    widget.errorCron = null;
+    if (dash.elements.isEmpty || dash.elements.where((element) => element.element is ProcessingItem).isEmpty) {
+      dash.error = "You need at least one processing element";
+    } 
+    var processings = dash.elements.where((element) => element.element is ProcessingItem);
+    var computes = dash.elements.where((element) => element.element is ComputeItem);
+    for (var p in processings) {
+      var links =  dash.arrows.where((element) => element.fromID.contains(p.id) || element.toID.contains(p.id));
+      try {
+        List<ComputeItem> c = [];
+        for (var link in links) {
+          c.addAll(computes.where( (e) => link.toID.contains(e.id) || link.fromID.contains(e.id)).map( (e) => e.element as ComputeItem));
+        }
+        if (c.isEmpty) { throw Exception("no compute element linked"); }
+      } catch (e) {
+        dash.error = "You need to link each processing element to a compute element";
+      }
     }
+    if (dash.error != null) {
+      showAlertBanner( context, () {}, AlertAlertBannerChild(text: dash.error.toString()),// <-- Put any widget here you want!
+                       alertBannerLocation:  AlertBannerLocation.bottom,);
+      setState(() {});
+      return;
+    }
+    for (var k in formKeys) {
+      if (k.currentState != null) {
+        if (!k.currentState!.validate()) {
+          return;
+        } else { k.currentState!.save();}
+      }
+    }
+    DateTime now = DateTime.now().add(const Duration(minutes: 1));
+    if (widget.schedule.start == null || widget.schedule.start!.isBefore(now)) {
+      widget.schedule.start = now.toUtc();
+      if (widget.schedule.end != null) {
+        widget.schedule.end = now.add(const Duration(minutes: 1)).toUtc();
+      }
+    }
+    Duration durationBefore = widget.schedule.start!.difference(DateTime.now().toUtc()) + Duration(seconds: 5);
+    widget._schedulerService.schedule(context, widget.item.id ?? "", widget.schedule.serialize(), {}).then((value) {
+      setState(() { widget.valid = true; });
+      Future.delayed(durationBefore, () {
+        try {
+          setState(() {});
+        } catch (e) { /* */ }
+      });
+      Future.delayed(const Duration(seconds: 10), () {
+        try {
+          setState(() { widget.valid = false; });
+        } catch (e) { /* */ }
+      });
+    });
+  }
+  void checkBooking(List<GlobalKey<FormFieldState>> formKeys, void Function(List<GlobalKey<FormFieldState>> )? f){
+    if (widget.schedule.start == null) {
+      DateTime now = DateTime.now().add(const Duration(minutes: 5));
+      widget.schedule.start = now.toUtc();
+    }
+    var s = widget.schedule.start!.toUtc().toIso8601String();
+    var e = "";
+    if (widget.schedule.end == null) {
+      e = widget.schedule.start!.add(const Duration(seconds: 5)).toUtc().toIso8601String();
+    } else {
+      e = widget.schedule.end!.toUtc().toIso8601String();
+    }
+    check.search(context, [widget.item.id ?? "", s.substring(0, 19), e.substring(0, 19)], {}).then(
+      (v) {
+        if (v.data == null) { return; }
+        widget.booking = v.data!.isAvailable;
+        if (v.data!.isAvailable) {
+          if (f != null) { f(formKeys); 
+          } else {
+            showAlertBanner( context, () {}, 
+              const InfoAlertBannerChild(text: "no booking found at this date"),// <-- Put any widget here you want!
+              alertBannerLocation:  AlertBannerLocation.bottom,);
+          } 
+        } else {
+          showAlertBanner( context, () {}, 
+          const AlertAlertBannerChild(text: "booking found at this date"),// <-- Put any widget here you want!
+           alertBannerLocation:  AlertBannerLocation.bottom,);
+        }
+        setState(() {});
+      }
+    );
+  }
+
+  @override Widget build(BuildContext context) {
+    if (widget.shouldSearch && widget.item.name != "") {
+      widget.shouldSearch = false;
+      widget._executionService.search(null, [widget.item.name], {}).then((value) {
+        if (value.data != null) {
+          try {
+            setState(() {  
+            widget.scheduleFutureCount = 0;
+            widget.scheduleBeforeCount = 0;
+            for (var exec in value.data!.executions) {
+              if (exec.startDate != null && DateTime.parse(exec.startDate!).isAfter(DateTime.now().toUtc())) {
+                widget.scheduleFutureCount++;
+              } else {
+                widget.scheduleBeforeCount++;
+              }
+            }
+          });
+          } catch (e) { /* */ }
+          
+        }
+      });
+    } else {
+      Future.delayed(const Duration(milliseconds: 100), () {
+        widget.shouldSearch = true;
+      });
+    }
+    bool isService = true;
+    try {
+      widget.item.elements.firstWhere((element) => (element.element?.serialize()["is_service"] ?? false) == true);
+    } catch (e) {
+      isService = false;
+    }
+    bool readOnly = !PermsService.getPerm(Perms.WORKFLOW_EDIT);
     DateTime? start;
     DateTime? end;
-    if (widget.item.scheduler["start"] != null) {
-      start = DateTime.parse(widget.item.scheduler["start"]!);
-      if (start.isBefore(DateTime.now()) && !dash.scheduleActive) {
+
+    Duration delayed = const Duration(minutes: 5);
+    if (widget.schedule.start != null) {
+      start = widget.schedule.start!;
+      if (start.isBefore(DateTime.now())) {
         start = DateTime.now().add(const Duration(minutes: 5));
-        widget.item.scheduler["start"] = start.toUtc().toIso8601String();
+        widget.schedule.start = start.toUtc();
+      }
+      if (start.isBefore(DateTime.now())) {
+        // get difference between now and start
+        delayed = start.difference(DateTime.now());
       }
     }
-    if (widget.item.scheduler["end"] != null) {
-      end = DateTime.parse(widget.item.scheduler["end"]!);
-      if (end.isBefore(DateTime.now()) && !dash.scheduleActive) {
+    if (widget.schedule.end != null) {
+      end = widget.schedule.end!;
+      if (end.isBefore(DateTime.now())) {
         end = DateTime.now().add(const Duration(minutes: 5));
-        widget.item.scheduler["end"] = end.toUtc().toIso8601String();
+        widget.schedule.end = end.toUtc();
+      }
+      if (end.isBefore(DateTime.now())) {
+        // get difference between now and start
+        delayed = end.difference(DateTime.now());
+        Future.delayed(delayed, () {
+          WorkflowFactory.key.currentState?.setState(() { });
+        });
       }
     }
-    List<GlobalKey<FormFieldState>> formKeys = [GlobalKey<FormFieldState>(), GlobalKey<FormFieldState>(), 
-      GlobalKey<FormFieldState>(), GlobalKey<FormFieldState>()];
+    List<GlobalKey<FormFieldState>> formKeys = [GlobalKey<FormFieldState>(), GlobalKey<FormFieldState>(), GlobalKey<FormFieldState>(), GlobalKey<FormFieldState>()];
     var shallow = ShallowTextInputWidget(
-        width: 250 - 1,
-        current: dash.name,
-        type: SharedWorkspaceType.workflow,
-        canRemove: (p0) => p0 != null && p0.isEmpty,
-        remove: (p0) async {
-          await WorflowService().delete(context, widget.item.id ?? "", {}).then((value) {
-            dash.clear();
-            dash.isOpened = false;
-            dash.chartKey.currentState?.widget.flowChart.setState(() { });
+        width: 200 - 1, readOnly: readOnly,
+        current: widget.item.name,
+        type: CollaborativeAreaType.workflow,
+        canRemove: PermsService.getPerm(Perms.WORKFLOW_DELETE) ? (p0) => p0 != null && p0.isNotEmpty : null,
+        remove: PermsService.getPerm(Perms.WORKFLOW_DELETE) ? (p0) async {
+          showDialog(context: context, builder: (context) {
+            return ConfirmBoxWidget(
+              purpose: "Are you sure you want to delete this workflow?",
+              validate: () async {
+                await WorflowService().delete(context, widget.item.id ?? "", {}).then((value) {
+                  dash.id = null;
+                  dash.name = "";
+                  dash.isOpened = false;
+                  dash.clear();
+                  dash.chartKey.currentState?.widget.flowChart.setState(() { });
+                });
+              },
+            );
           });
-        },
+        } : null,
       );
     shallow.change =(p0) => Future.delayed( const Duration(seconds: 2), () async {
       if (shallow.compare == p0) {
@@ -69,73 +224,24 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
       }
     });
     return Column( children: [
-      Container( padding: const EdgeInsets.all(10), width: 250, height: 60,
+      Container( padding: const EdgeInsets.all(10), width: 200, height: 60,
         decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
         child: const Column( mainAxisAlignment: MainAxisAlignment.center, children: [
           Text("WORKFLOW INFO", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
           Text("<general>", style: TextStyle(fontSize: 12), textAlign: TextAlign.center),
       ])),
-      Container( 
+      widget.item.name == "" ? Container() : Container( 
         decoration: BoxDecoration( border: Border(
-          left: BorderSide(color: Colors.grey.shade300, width: 1),
+          left: BorderSide(color: midColor, width: 1),
           bottom: const BorderSide(color: Colors.grey))),
         child: shallow ),
-      const SizedBox(height: 20, width: 250 ),
-      AdvancedSwitch(
-          width: 140, 
-          initialValue: widget.item.scheduler["mode"] == 1, 
-          activeColor: Colors.green, inactiveColor: Colors.green,
-          activeChild: const Text("service", style: TextStyle(color: Colors.white)), 
-            inactiveChild: const Text("cron task", style: TextStyle(color: Colors.white)),  
-          borderRadius:  const BorderRadius.all(Radius.circular(15)), height: 30.0, disabledOpacity: 0.5,
-          onChanged: (value) { 
-            Future.delayed(const Duration(milliseconds: 100), () =>
-            setState(() {
-              widget.item.scheduler["mode"] = value == true ? 1 : 0;
-              if ((widget.item.scheduler["mode"] == 1 )) { widget.item.scheduler.remove("cron"); }
-              widget.item.save!(widget.item.id);
-            }));
-          },),
-      Container(height: 5),
-      Tooltip( message: "event name",
+      const SizedBox(height: 20, width: 200 ),
+      isService ? Text("Warning a processing is a service, if no end execution it will run forever.") : Container(),
+      Tooltip( message: "start executions",
         child: Container( height: 40, margin: const EdgeInsets.only(top: 5),
-                              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
-                              child: TextFormField( key: formKeys[0],
-                              initialValue: "${widget.item.scheduler["mode"] == 1 ? "" : "cron_"}${widget.item.scheduler["name"] ?? "${widget.item.name}_event"}",
-                              enabled: !dash.scheduleActive,
-                              onChanged: (value) { 
-                                Future.delayed(const Duration(seconds: 100), () {
-                                  if (widget.item.scheduler["name"] == value) { 
-                                    widget.item.save!(widget.item.id);  
-                                  }
-                                });
-                                widget.item.scheduler["name"] = value;
-                              },
-                              onSaved: (value) { 
-                                widget.item.scheduler["name"] = value ?? "${widget.item.scheduler["mode"] == 1 ? "" : "cron_"}${widget.item.scheduler["name"] ?? "${widget.item.name}_event"}";
-                              },
-                              validator: (value) => value == null || value.isEmpty ? "not empty" :  null,
-                              style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
-                                floatingLabelBehavior: FloatingLabelBehavior.always,
-                                fillColor: Colors.white,
-                                filled: true,
-                                hintText: "enter event name...",
-                                labelText: "event name*",
-                                errorStyle: TextStyle(fontSize: 0),
-                                hintStyle: TextStyle(fontSize: 10),
-                                labelStyle: TextStyle(fontSize: 10),
-                                error: null,
-                                enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                              ),
-                          ))),
-      Tooltip( message: "start event",
-        child: Container( height: 40, margin: const EdgeInsets.only(top: 5),
-                              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
+                              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                               child: DateTimeField( key: formKeys[1],
-                                enabled: !dash.scheduleActive,
+                                enabled: !readOnly,
                                 resetIcon: null,
                                 onShowPicker: (context, currentValue) async { 
                                   var date = await showDatePicker(                                    
@@ -145,7 +251,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                           cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           colorScheme: ColorScheme.light(
-                                            background: Colors.grey.shade300,
+                                            background: midColor,
                                             tertiary: Colors.grey,
                                             secondary: Colors.grey,
                                             primary: Colors.black),
@@ -155,7 +261,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                       return w;
                                     },
                                     context: context,
-                                    firstDate: dash.scheduleActive ? DateTime(1900) : DateTime.now().add(const Duration(minutes: 5)),
+                                    firstDate: DateTime.now().add(const Duration(minutes: 5)),
                                     initialDate: DateTime.parse( start?.toLocal().toIso8601String() 
                                       ?? currentValue?.toIso8601String() 
                                       ?? DateTime.now().add(const Duration(minutes: 5)).toUtc().toIso8601String()).toLocal(),
@@ -179,7 +285,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                             cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                             dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                             colorScheme: ColorScheme.light(
-                                              background: Colors.grey.shade300,
+                                              background: midColor,
                                               tertiary: Colors.grey,
                                               secondary: Colors.grey,
                                               primary: Colors.black),
@@ -192,25 +298,26 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                       if (time == null) { return DateTime.now().add( const Duration(minutes: 1)); }
                                       count++;
                                       date = DateTime(date.year, date.month, date.day, time.hour, time.minute);
-                                      widget.item.scheduler["start"] = date.toUtc().toIso8601String();  
+                                      widget.schedule.start = date.toUtc();  
                                     }
-                                    widget.item.save!(widget.item.id);   
+                                    widget.item.saveDash(widget.item.id, context);   
                                   }
                                   return date;
                                 },
                                 format: intl.DateFormat('y-M-dd HH:mm:ss'),  
                                 initialValue: start?.toLocal() ?? DateTime.now(),
                                 onChanged: (value) {  },
-                                validator: (value) => value == null ? "not empty" :  null,
+                                validator: (value) {
+                                  return value == null ? "not empty" :  null;
+                                },
                                 style: const TextStyle(fontSize: 12),
                                 decoration: const InputDecoration(
                                   floatingLabelBehavior: FloatingLabelBehavior.always,
                                   fillColor: Colors.white,
                                   filled: true,
                                   alignLabelWithHint: false,
-                                  hintText: "enter start event...",
-                                  labelText: "start event*",
-                                  errorStyle: TextStyle(fontSize: 0),
+                                  hintText: "enter start executions...",
+                                  labelText: "start executions*",
                                   hintStyle: TextStyle(fontSize: 10),
                                   labelStyle: TextStyle(fontSize: 10),
                                   enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
@@ -218,17 +325,22 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                   contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                                 ),
                           ))),
-      Tooltip( message: "end event",
+      Tooltip( message: "end executions",
         child: Container( height: 40, margin: const EdgeInsets.only(top: 5), 
-                              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
+                              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                               child: DateTimeField( key: formKeys[2],
-                                enabled: !dash.scheduleActive,
+                                enabled: !readOnly,
                                 validator: (value) {
-                                  return value == null && !(widget.item.scheduler["mode"] == 1 ) ? "not empty" :  null;
+                                  if (value == null && widget.schedule.cron != null && widget.schedule.cron!.isNotEmpty) {
+                                    setState(() {
+                                      widget.errorEndDate = 'missing start date';
+                                    });   
+                                  }
+                                  return value == null && widget.schedule.cron != null && widget.schedule.cron!.isNotEmpty ? "not empty" :  null;
                                 },
                                 onChanged: (value) { 
                                   if (value == null) {
-                                    widget.item.scheduler.remove("end");
+                                    widget.schedule.end = null;
                                   }
                                 },
                                 resetIcon: const Icon(Icons.close, size: 15),
@@ -240,7 +352,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                           cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                           colorScheme: ColorScheme.light(
-                                            background: Colors.grey.shade300,
+                                            background: midColor,
                                             tertiary: Colors.grey,
                                             secondary: Colors.grey,
                                             primary: Colors.black),
@@ -250,7 +362,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                       return w;
                                     },
                                     context: context,
-                                    firstDate: dash.scheduleActive ? DateTime(1900) : DateTime.now().add(const Duration(minutes: 5)),
+                                    firstDate: DateTime.now().add(const Duration(minutes: 5)),
                                     initialDate: DateTime.parse( end?.toLocal().toIso8601String() 
                                       ?? currentValue?.toIso8601String() 
                                       ?? DateTime.now().add(const Duration(minutes: 5)).toUtc().toIso8601String()).toLocal(),
@@ -263,12 +375,13 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                     var count = 0;
                                     while(date!.microsecondsSinceEpoch <= (DateTime.now().microsecondsSinceEpoch) 
                                       || time == null
-                                      || (date.microsecondsSinceEpoch) <= (DateTime.parse(widget.item.scheduler["start"] ?? DateTime.now().toIso8601String()).microsecondsSinceEpoch)) {
-                                      if (count > 0) {
-                                        showAlertBanner( context, () {}, 
+                                      || (date.microsecondsSinceEpoch) <= (widget.schedule.start  ?? DateTime.now()).microsecondsSinceEpoch) {
+                                      if (count > 0) { 
+                                        showAlertBanner( context, () {},  // ignore: use_build_context_synchronously
                                         const AlertAlertBannerChild(text: "must be at least 1 minute from now to let system check info && upper starting date"),// <-- Put any widget here you want!
                                          alertBannerLocation:  AlertBannerLocation.bottom,);
                                       }
+                                      // ignore: use_build_context_synchronously
                                       time = await showTimePicker(context: context, 
                                         initialTime: TimeOfDay(hour: date.hour, minute: date.minute),
                                         builder: (BuildContext context, Widget? child) {
@@ -277,7 +390,7 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                             cardTheme: CardTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                             dialogTheme: DialogTheme(elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0))),
                                             colorScheme: ColorScheme.light(
-                                              background: Colors.grey.shade300,
+                                              background: midColor,
                                               tertiary: Colors.grey,
                                               secondary: Colors.grey,
                                               primary: Colors.black),
@@ -290,9 +403,9 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                       if (time == null) { return null; }
                                       count++;
                                       date = DateTime(date.year, date.month, date.day, time.hour, time.minute);
-                                      widget.item.scheduler["end"] = date.toUtc().toIso8601String();   
+                                      widget.schedule.end = date.toUtc();   
                                     }
-                                    widget.item.save!(widget.item.id);                          
+                                    widget.item.saveDash(widget.item.id, context);                          
                                   }
                                   return date;
                                 },
@@ -304,153 +417,131 @@ class SchedulerFormsWidgetState extends State<SchedulerFormsWidget> {
                                   floatingLabelBehavior: FloatingLabelBehavior.always,
                                   filled: true,
                                   alignLabelWithHint: false,
-                                  hintText: "enter end event...",
-                                  labelText: "end event${!(widget.item.scheduler["mode"] == 1) ? "*" : ""}",
-                                  errorStyle: const TextStyle(fontSize: 0),
+                                  hintText: "enter end executions...",
+                                  labelText: "end executions",
                                   hintStyle: const TextStyle(fontSize: 10),
                                   labelStyle: const TextStyle(fontSize: 10),
-                                  enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                  border: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
+                                  focusedErrorBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorEndDate != null ? Colors.red : Colors.black)),
+                                  errorBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorEndDate != null ? Colors.red : Colors.black)),
+                                  focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorEndDate != null ? Colors.red : Colors.black)),
+                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorEndDate != null ? Colors.red : Colors.grey)),
+                                  border: OutlineInputBorder(borderSide: BorderSide(color: widget.errorEndDate != null ? Colors.red : Colors.grey)),
                                   contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                                 ),
                           ))),
-      widget.item.scheduler["mode"] == 1 ? Container() : Tooltip( message: "schedule",
+      Tooltip( message: "cron command",
         child: Container( height: 40, margin: const EdgeInsets.only(top: 5),
-                              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
+                              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                               child: TextFormField( key: formKeys[3],
-                              enabled: !dash.scheduleActive,
-                              initialValue: widget.item.scheduler["cron"],
+                              enabled: !readOnly,
+                              initialValue: widget.schedule.cron,
                               onChanged: (value) { 
                                 Future.delayed(const Duration(seconds: 100), () {
-                                  if (widget.item.scheduler["cron"] == value) { 
-                                    widget.item.save!(widget.item.id);  
+                                  if (widget.schedule.cron  == value) { 
+                                    widget.item.saveDash(widget.item.id, context);  
                                   }
                                 });
-                                widget.item.scheduler["cron"] = value;
+                                widget.schedule.cron = value;
                               },
                               onSaved: (value) { 
                                 if (value != null) {
-                                  widget.item.scheduler["cron"] = value;
+                                  widget.schedule.cron = value;
                                 }
                               },
                               validator: (value) { 
                                 var cron = Cron();
-                                try {
-                                  cron.schedule(Schedule.parse(value ?? ""), () {});
-                                } catch (e) {
-                                  return "invalid cron";
+                                if (value != null && value.isNotEmpty) {
+                                  try {
+                                    cron.schedule(Schedule.parse(value), () {});
+                                  } catch (e) {
+                                    setState(() {
+                                      widget.errorCron = e.toString();
+                                    }); 
+                                    return "invalid cron";
+                                  }
                                 }
-                                return value == null || value.isEmpty ? "not empty" :  null;
+                                return null;
                               },
                               style: const TextStyle(fontSize: 12),
-                              decoration: const InputDecoration(
+                              decoration: InputDecoration(
                                 floatingLabelBehavior: FloatingLabelBehavior.always,
                                 fillColor: Colors.white,
                                 filled: true,
-                                hintText: "enter schedule...",
-                                labelText: "schedule*",
-                                errorStyle: TextStyle(fontSize: 0),
+                                hintText: "enter cron command...",
+                                labelText: "cron",
+                                errorStyle: TextStyle(height: 0),
                                 hintStyle: TextStyle(fontSize: 10),
                                 labelStyle: TextStyle(fontSize: 10),
-                                error: null,
-                                enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
-                                border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
+                                focusedErrorBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorCron != null ? Colors.red : Colors.black)),
+                                errorBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorCron != null ? Colors.red : Colors.black)),
+                                focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorCron != null ? Colors.red : Colors.black)),
+                                enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: widget.errorCron != null ? Colors.red : Colors.grey)),
+                                border: OutlineInputBorder(borderSide: BorderSide(color: widget.errorCron != null ? Colors.red : Colors.grey)),
                                 contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                               ),
                           ))),
       Container(
-        width: 250,
+        width: 200,
         height: 20,
-        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
+        decoration: BoxDecoration(border: Border(bottom: BorderSide(color: 
+        PermsService.getPerm(Perms.WORKFLOW_BOOKING)? Colors.grey : Colors.transparent, width: 1))),
       ),
       const SizedBox(
-        width: 250,
+        width: 200,
         height: 10,
       ),
-      Tooltip( message: "check booking",
-                              child: InkWell( mouseCursor: SystemMouseCursors.click, 
-                              onTap: () {
-                                if (dash.scheduleActive) { return; }
-                                if (dash.scheduler["start"] == null ) {
-                                  DateTime now = DateTime.now().add(const Duration(minutes: 5));
-                                  dash.scheduler["start"] = now.toUtc().toIso8601String();
-                                }
-                                var s = DateTime.parse(dash.scheduler["start"]).toUtc().toIso8601String();
-                                var e = "";
-                                if (dash.scheduler["end"] == null) {
-                                  e = DateTime.parse(dash.scheduler["start"]).add(const Duration(seconds: 5)).toUtc().toIso8601String();
-                                } else {
-                                  e = DateTime.parse(dash.scheduler["end"]).toUtc().toIso8601String();
-                                }
-                                check.search(context, [widget.item.id ?? "", s.substring(0, 19), e.substring(0, 19)], {}).then(
-                                  (v) {
-                                    if (v.data == null) { return; }
-                                    widget.booking = v.data!.is_available;
-                                    if (v.data!.is_available) {
-                                      showAlertBanner( context, () {}, 
-                                      const InfoAlertBannerChild(text: "no booking found at this date"),// <-- Put any widget here you want!
-                                       alertBannerLocation:  AlertBannerLocation.bottom,);
-                                    } else {
-                                      showAlertBanner( context, () {}, 
-                                      const AlertAlertBannerChild(text: "booking found at this date"),// <-- Put any widget here you want!
-                                       alertBannerLocation:  AlertBannerLocation.bottom,);
-                                    }
-                                    setState(() {});
-                                  }
-                                );
-                              }, child: Container( margin: const EdgeInsets.only(bottom: 5),
-                                decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
-                                  border: Border.all(color: widget.booking == null && !dash.scheduleActive ? Colors.black :  (widget.booking == true || dash.scheduleActive  ? Colors.green : Colors.red), width: 1)),
+      PermsService.getPerm(Perms.WORKFLOW_BOOKING)? Tooltip( message: "check booking", child: InkWell( mouseCursor: SystemMouseCursors.click, 
+        onTap: () { PermsService.getPerm(Perms.WORKFLOW_BOOKING) ? checkBooking(formKeys, null) : null;
+        }, child: Container( margin: const EdgeInsets.only(bottom: 5, left: 10, right: 10),
+                              decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
+                                  border: Border.all(color: widget.booking == null ? (
+                                    PermsService.getPerm(Perms.WORKFLOW_BOOKING) && PermsService.getPerm(Perms.WORKFLOW_EDIT) ? Colors.black : Colors.grey) : (
+                                      widget.booking == true  ? Colors.green : redColor), width: 1)),
                                 width: 200, height: 30,
-                                child: Icon(
-                                  Icons.verified_outlined, 
-                                  color: widget.booking == null && !dash.scheduleActive ? Colors.black :  (widget.booking == true || dash.scheduleActive ? Colors.green : Colors.red)),
+                                child: Icon( Icons.verified_outlined, 
+                                  color: widget.booking == null ? Colors.black :  (widget.booking == true ? Colors.green : redColor)),
                               ))
-                            ),
-      Tooltip( message: dash.scheduleActive ? "unbook" : "book",
-                              child: InkWell( mouseCursor: SystemMouseCursors.click, 
+                            ): Container(),
+      PermsService.getPerm(Perms.WORKFLOW_BOOKING) ? Tooltip( message: "book", child: InkWell( mouseCursor: SystemMouseCursors.click, 
                               onTap: () {
-                                dash.scheduleActive = !dash.scheduleActive;
-                                for (var k in formKeys) {
-                                  if (k.currentState != null) {
-                                    if (!k.currentState!.validate()) {
-                                      return;
-                                    } else { k.currentState!.save();}
-                                  }
-                                }
-                                DateTime now = DateTime.now().add(const Duration(minutes: 1));
-                                if (dash.scheduler["start"] == null || DateTime.parse(dash.scheduler["start"]!).isBefore(now)) {
-                                  dash.scheduler["start"] = now.toUtc().toIso8601String();
-                                  if (dash.scheduler["end"] != null) {
-                                    dash.scheduler["end"] = now.add(const Duration(minutes: 1)).toUtc().toIso8601String();
-                                  }
-                                }
-                                widget.item.save!(widget.item.id);
-                                setState(() {   });
-                              }, child: Container( margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+                                setState(() {  save(formKeys); });
+                              }, child: Container( margin: const EdgeInsets.only(top: 5, bottom: 10, left: 10, right: 10),
                                 decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
-                                  border: Border.all(color: dash.scheduleActive ? Colors.green : Colors.black)),
+                                  border: Border.all(color: dash.error != null ? Colors.red : ( PermsService.getPerm(Perms.WORKFLOW_BOOKING) ?(widget.valid ? Colors.green : Colors.black) : Colors.grey ))),
                                 width: 200, height: 30,
-                                child: Icon(
-                                  dash.scheduleActive ? Icons.cancel_schedule_send : Icons.schedule_send, color: dash.scheduleActive ? Colors.green : Colors.black),
+                                child: Icon(Icons.schedule_send, color: dash.error != null ? Colors.red : (widget.valid ? Colors.green : Colors.black)),
                               ))
-                            ),
+                            ) : Container(),
+      Column( children: [
+        Container(
+          height: 15, width: 200,
+          decoration: const BoxDecoration(border: Border(top: BorderSide(color: Colors.grey))),
+        ),
+        Container( alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 10),
+          child:Text( textAlign: TextAlign.center, overflow: TextOverflow.ellipsis,
+            style: const TextStyle(fontSize: 13, color: Colors.grey ),
+            "Was booked ${widget.scheduleBeforeCount} times.")),
+        Container( alignment: Alignment.center, padding: const EdgeInsets.only(left: 10, right: 10, bottom: 15),
+          child:Text( textAlign: TextAlign.center, overflow: TextOverflow.ellipsis,
+            style: const TextStyle(fontSize: 13, color: Colors.grey ),
+            "Is booked ${widget.scheduleFutureCount} times.")),
+      ]),
       widget.item.info["shared"] != null && (widget.item.info["shared"] as List<dynamic>).isNotEmpty ? Column( children: [
         Container(
-          height: 20,
-          width: 250,
-          decoration: const BoxDecoration(border: Border(top: BorderSide(color: Colors.black))),
+          height: 30,
+          width: 200,
+          decoration: const BoxDecoration(border: Border(top: BorderSide(color: Colors.grey))),
         ),
-        Container( alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 20),
-          child:Text( textAlign: TextAlign.center, overflow: TextOverflow.ellipsis,
+        Container( alignment: Alignment.center,
+          child:Text( overflow: TextOverflow.ellipsis,
             style: const TextStyle(fontSize: 14, color: Colors.black, fontWeight: FontWeight.bold),
-            "Workflow is shared in ${(widget.item.info["shared"] as List<dynamic>).length} workspace(s)")),
-        ...(widget.item.info["shared"] as List<dynamic>).where( (e) => SharedWorkspaceLocal.getSharedWorkspace(e) != null 
+            "Is shared ${(widget.item.info["shared"] as List<dynamic>).length} time(s).")),
+        ...(widget.item.info["shared"] as List<dynamic>).where( (e) => CollaborativeAreaLocal.getCollaborativeArea(e) != null 
         ).map((e) {
-          var sw = SharedWorkspaceLocal.getSharedWorkspace(e);
-          return Container( alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
+          var sw = CollaborativeAreaLocal.getCollaborativeArea(e);
+          return Container( alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
             child: Row(  children: [ 
-              const Padding(padding: EdgeInsets.only(right: 10), child: Icon(Icons.work, color: Colors.grey, size: 15)),
+              const Padding(padding: EdgeInsets.only( left: 10, right: 10), child: Icon(Icons.work, color: Colors.grey, size: 15)),
               Text(style: const TextStyle(fontSize: 12, color: Colors.grey),
               "Workspace: ${sw != null && sw.name != null ? 
               "${sw.name!.substring(0, sw.name!.length > 15 ? 12 : sw.name!.length)}${sw.name!.length > 15 ? "..." : ""}" : ""}") ]));

lib/widgets/forms/storage_processing_link_forms.dart

@@ -0,0 +1,154 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/models/workflow.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+// ignore: must_be_immutable
+class StorageProcessingLinkFormsWidget extends StatefulWidget {
+  Dashboard dash;
+  ArrowPainter item;
+  bool readOnly = false;
+  StorageProcessingLinkFormsWidget ({ super.key, required this.dash, required this.item, this.readOnly = false });
+  @override StorageProcessingLinkFormsWidgetState createState() => StorageProcessingLinkFormsWidgetState();
+}
+
+class StorageProcessingLinkFormsWidgetState extends State<StorageProcessingLinkFormsWidget> {
+
+  List<Param> getParams(String fromID, String toID) {
+    List<Param> arr = [];
+    var els = widget.dash.elements.where( (e) => fromID.contains(e.id) || toID.contains(e.id));
+    for (var element in els) {
+      var g = GraphItem();
+      g.fromDashboard(element.serialize());
+      var e = g.getElement();
+      if (e == null) { continue; }
+      if (e.getSelectedInstance() != null) {
+        for (var env in e.getSelectedInstance()!.env) {
+          if (env.name?.contains("LINK") ?? true) { continue; }
+          arr.add(env);
+        }
+      }
+    }
+    return arr.where( (e) => e.name != null && e.value != null).toList();
+  }
+
+
+  @override Widget build(BuildContext context) {
+    List<Widget> children = [
+      Padding( padding: const EdgeInsets.only(top: 10),
+          child: Text("<ENV VARIABLES>", 
+            style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold), textAlign: TextAlign.center)),
+    ];
+    var params = getParams(widget.item.fromID, widget.item.toID);
+    widget.item.env = params.map( (e) => e.serialize()).toList();
+    for (var param in params) {
+      children.add(SubTextInputWidget(subkey: param.name ?? "", width: 180, empty: false, readOnly: true,
+          change: (value) {}, initialValue: param.value ?? "", copyLabel: true));
+    }
+    children.add(Container(width: 200, padding: const EdgeInsets.only(top: 10, bottom: 10),
+          decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1)))));
+    List<Widget> inf = [];
+    int count = 0;
+    for(var info in widget.item.infos) {
+      count++;
+      inf.add(Padding( padding: EdgeInsets.only(top: 10, bottom: 5), 
+        child : Row( crossAxisAlignment: CrossAxisAlignment.center, children: [
+            Padding(padding: EdgeInsets.only(left: 10, right: 10), child: Text("N°$count")),
+            Container(width: 140, decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))))
+          ])));
+      for (var key in (info as Map<String, dynamic>).keys) {
+          if (info[key] is bool) {
+            inf.add(AdvancedSwitch(
+              width: 150.0,
+              height: 25.0,
+              initialValue: info[key] as bool? ?? false,
+              enabled: !widget.readOnly,
+              activeChild: Text(key, style: const TextStyle(color: Colors.white)),
+              inactiveChild: Text(key == "write" ? "read" : "no $key", style: const TextStyle(color: Colors.white)),
+              activeColor: Colors.green,
+              inactiveColor: redColor,
+              onChanged: (v) {
+                try { 
+                  info[key] = v;
+                  Future.delayed(const Duration(seconds: 1), () {
+                    for (var a in widget.dash.arrows) {
+                      if (a.fromID == widget.item.fromID && a.toID == widget.item.toID) {
+                        a.infos = widget.item.infos;
+                      }
+                    }
+                    widget.dash.saveDash(widget.dash.id, context);
+                  });
+                } catch (e) { /* */ }
+                
+              },
+            ));
+          } else if (info[key] is String?) {
+            inf.add(SubTextInputWidget(subkey: key, width: 180, empty: false, change: (v) {
+              try {
+                info[key] = v;
+                Future.delayed(const Duration(seconds: 1), () {
+                  if (info[key] != v) { return; }
+                  for (var a in widget.dash.arrows) {
+                    if (a.fromID == widget.item.fromID && a.toID == widget.item.toID) {
+                      a.infos = widget.item.infos;
+                    }
+                  }
+                  widget.dash.saveDash(widget.dash.id, context);
+                });
+              } catch (e) {
+                print(e);
+              }
+                
+            }, initialValue: "${info[key] ?? ""}", readOnly: false, noLabel: false));
+          }
+          
+          
+      }
+    }
+    return SizedBox( height: getHeight(context) - 230, child: SingleChildScrollView( child: Column(children: [
+      ...children,
+      Row( mainAxisAlignment: MainAxisAlignment.center, children: [
+              InkWell( onTap: () {
+                  widget.item.infos.add({
+                            "write": false,
+                            "source": null,
+                            "destination": null,
+                            "filename": null,
+                  });
+                  setState(() {
+                    widget.dash.saveDash(widget.dash.id, context);
+                  });
+                }, child: Container( margin: const EdgeInsets.only(top: 10),
+                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
+                    border: Border.all(color: Colors.grey, width: 1)),
+                    width: 125, height: 30,
+                    child: Row( mainAxisAlignment: MainAxisAlignment.center,
+                      children: [ Padding( padding: EdgeInsets.only(right: 5), child: Icon(Icons.add, color: Colors.black,)), 
+                      Text("link infos",
+                        style: TextStyle( color: Colors.black))]),
+                  ),  
+              ),
+              InkWell( onTap: () {
+                      if (widget.item.infos.isEmpty) { return; }
+                      setState(() { 
+                        widget.item.infos.removeLast();
+                        widget.dash.saveDash(widget.dash.id, context); 
+                      });
+                    }, child:
+                    Container( margin: const EdgeInsets.only(left: 5, top: 10),
+                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
+                        border: Border.all(color: widget.item.infos.isEmpty ? Colors.grey : Colors.black , width: 1)),
+                      width: 50, height: 30,
+                      child: Row( mainAxisAlignment: MainAxisAlignment.center,
+                        children: [ Icon( Icons.delete, size: 18,
+                          color: widget.item.infos.isEmpty ? Colors.grey : Colors.black ) ]),
+                    )
+                  ), 
+            ]),
+          ...inf
+        ] ) ));
+  }
+}

lib/widgets/forms/sub_add_forms.dart

@@ -0,0 +1,174 @@
+
+import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/widgets/forms/sub_keys_forms.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+// ignore: must_be_immutable
+class SubAddFormsWidget extends StatefulWidget {
+  bool readOnly;
+  SubMapFormsType type;
+  String elementID = "";
+  AbstractItem item;
+  Dashboard dash; 
+  bool empty = false;
+  List<Param> forms = [];
+  SubAddFormsWidget ({ super.key, required this.dash, this.readOnly = false,
+    this.empty = false, required this.item, required this.elementID,
+    required this.type });
+  @override SubAddFormsWidgetState createState() => SubAddFormsWidgetState();
+}
+class SubAddFormsWidgetState extends State<SubAddFormsWidget> {
+  Param? addedparam;
+  @override Widget build(BuildContext context) {
+    AbstractInstance instance = widget.item.getSelectedInstance()!;
+    var f = (widget.type == SubMapFormsType.INPUT ? instance.inputs : ( 
+      widget.type == SubMapFormsType.OUTPUT ? instance.outputs : instance.env)).where( (e) => !e.readOnly).toList();
+    widget.forms = f;
+    if (addedparam != null) {
+      widget.forms.add(addedparam!);
+    }
+    List<Widget> children = [];
+    for (var param in widget.forms) {
+      children.add(Row( mainAxisAlignment: MainAxisAlignment.center, children: [
+        SubTextInputWidget(subkey: "key", readOnly: widget.readOnly,
+          initialValue: param.name, width: 81, empty: widget.empty, 
+          change: (value) { 
+            setState(() {
+              param.name = value;
+              param.attr = value;
+              if (addedparam?.value != null && addedparam?.name != null) {
+                addedparam = null;
+              }
+              var sel = widget.item.getSelectedInstance();
+              if (sel != null) {
+                if (widget.type == SubMapFormsType.INPUT) { sel.inputs = [ 
+                    ...sel.inputs.where( (e) => e.readOnly),
+                    ...widget.forms.where((e) => e.name != null && e.value != null)
+                  ];
+                } else if (widget.type == SubMapFormsType.OUTPUT) {  
+                  sel.outputs = [
+                    ...sel.outputs.where( (e) => e.readOnly),
+                    ...widget.forms.where((e) => e.name != null && e.value != null)
+                  ];
+                } else { 
+                  sel.env = [
+                    ...sel.env.where( (e) => e.readOnly),
+                    ...widget.forms.where((e) => e.name != null && e.value != null)
+                  ]; 
+                }
+            }
+            Future.delayed(const Duration(milliseconds: 100), () {
+              if (param.name == value) {
+                widget.dash.saveDash(widget.dash.id, context);
+              }
+            });
+            var el = widget.dash.getElement(widget.elementID);
+            el!.element = widget.item as dynamic;
+            setState(() {});
+          });
+        }),
+        const Padding(padding: EdgeInsets.only(left: 5, right: 5, top: 15), child: Text("=", textAlign: TextAlign.center,)),
+        SubTextInputWidget(subkey: "value", initialValue: param.value, width: 81, empty: widget.empty, 
+          readOnly: widget.readOnly, change: (value) { 
+            param.value = value;
+            if (addedparam?.value != null && addedparam?.name != null) {
+              addedparam = null;
+            }
+            var sel = widget.item.getSelectedInstance();
+            if (sel != null) {
+                if (widget.type == SubMapFormsType.INPUT) { sel.inputs = [ 
+                    ...sel.inputs.where( (e) => e.readOnly),
+                    ...widget.forms.where((e) => e.name != null && e.value != null)
+                  ];
+                } else if (widget.type == SubMapFormsType.OUTPUT) {  
+                  sel.outputs = [
+                    ...sel.outputs.where( (e) => e.readOnly),
+                    ...widget.forms.where((e) => e.name != null && e.value != null)
+                  ];
+                } else { 
+                  sel.env = [
+                    ...sel.env.where( (e) => e.readOnly ),
+                    ...widget.forms.where((e) => e.name != null && e.value != null)
+                  ]; 
+                }
+            }
+            var el = widget.dash.getElement(widget.elementID);
+            el!.element = widget.item as dynamic;
+            setState(() {});
+            Future.delayed(const Duration(milliseconds: 100), () {
+              if (param.value == value) {
+                widget.dash.saveDash(widget.dash.id, context);
+              }
+            });
+        }),     
+      ]));
+    }
+    return Column( crossAxisAlignment: CrossAxisAlignment.center, children : [
+      widget.readOnly ? Container() : Row( mainAxisAlignment: MainAxisAlignment.center, children: [
+              InkWell( onTap: () {
+                  if (widget.forms.isNotEmpty && (widget.forms[widget.forms.length - 1].name == null
+                  || widget.forms[widget.forms.length - 1].value == null)) { return;}
+                  widget.forms.add(Param(readOnly: false));
+                  addedparam = widget.forms.last;
+                  var el = widget.dash.getElement(widget.elementID);
+                  el!.element = widget.item as dynamic;
+                  setState(() {});
+                }, child: Container( margin: const EdgeInsets.only(top: 10),
+                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
+                    border: Border.all(color: widget.forms.isNotEmpty && (widget.forms[widget.forms.length - 1].name == null
+                  || widget.forms[widget.forms.length - 1].value == null) ? Colors.grey : Colors.grey, width: 1)),
+                    width: 125, height: 30,
+                    child: Row( mainAxisAlignment: MainAxisAlignment.center,
+                      children: [ Padding( padding: EdgeInsets.only(right: 5), child: Icon(Icons.add, color: widget.forms.isNotEmpty && (widget.forms[widget.forms.length - 1].name == null
+                  || widget.forms[widget.forms.length - 1].value == null) ? Colors.grey : Colors.black,)), 
+                      Text(widget.type == SubMapFormsType.ENV ? "env" : (widget.type == SubMapFormsType.INPUT ? "input" : "output"),
+                        style: TextStyle( color: widget.forms.isNotEmpty && (widget.forms[widget.forms.length - 1].name == null
+                  || widget.forms[widget.forms.length - 1].value == null) ? Colors.grey : Colors.black))]),
+                  ),  
+              ),
+              InkWell( onTap: () {
+                      if (addedparam != null) {
+                        addedparam = null;
+                        return setState(() {});
+                      }
+                      if (widget.forms.isEmpty) { return; }
+                      widget.forms.sublist(0, widget.forms.length - 1);
+                      var el = widget.dash.getElement(widget.elementID);
+                      var sel = widget.item.getSelectedInstance();
+                      if (sel != null) {
+                          widget.forms.removeLast();
+                          if (widget.type == SubMapFormsType.INPUT) { sel.inputs = [ 
+                              ...sel.inputs.where( (e) => e.readOnly),
+                              ...widget.forms.where((e) => e.name != null && e.value != null)
+                            ];
+                          } else if (widget.type == SubMapFormsType.OUTPUT) {  
+                            sel.outputs = [
+                              ...sel.outputs.where( (e) => e.readOnly),
+                              ...widget.forms.where((e) => e.name != null && e.value != null)
+                            ];
+                          } else { 
+                            sel.env = [
+                              ...sel.env.where( (e) => e.readOnly),
+                              ...widget.forms.where((e) => e.name != null && e.value != null)
+                            ]; 
+                          }
+                      }
+                      el!.element = widget.item as dynamic;
+                      setState(() { widget.dash.saveDash(widget.dash.id, context); });
+                    }, child:
+                    Container( margin: const EdgeInsets.only(left: 5, top: 10),
+                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), 
+                        border: Border.all(color: widget.forms.isEmpty ? Colors.grey : Colors.black , width: 1)),
+                      width: 50, height: 30,
+                      child: Row( mainAxisAlignment: MainAxisAlignment.center,
+                        children: [ Icon( Icons.delete, size: 18,
+                          color: widget.forms.isEmpty ? Colors.grey : Colors.black ) ]),
+                    )
+                  ), 
+            ]),
+      ...children
+    ]); 
+  }
+}

lib/widgets/forms/sub_expose_forms.dart

@@ -0,0 +1,69 @@
+
+import 'package:flutter/material.dart';
+import 'package:oc_front/models/resources/processing.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+
+// ignore: must_be_immutable
+class SubExposeFormsWidget extends StatefulWidget {
+  bool readOnly;
+  Expose item;
+  Dashboard dash; 
+  String elementID = "";
+  double width = 180;
+  bool empty = false;
+  SubExposeFormsWidget ({ super.key, required this.dash, this.readOnly = false,
+    this.empty = false, required this.item, required this.elementID, required this.width });
+  @override SubExposeFormsWidgetState createState() => SubExposeFormsWidgetState();
+}
+class SubExposeFormsWidgetState extends State<SubExposeFormsWidget> {
+  @override Widget build(BuildContext context) {
+    return Column( children : [
+      Container( margin: const EdgeInsets.only(left: 10, right: 10, top: 5),
+                  decoration: BoxDecoration(border: Border.all(color: Colors.grey, width: 1)),
+                  width: 180
+        ),
+        SubTextInputWidget(subkey: "reference port", readOnly: widget.readOnly,
+        initialValue: widget.item.port != null ? '${widget.item.port}' : null, 
+        width: widget.width, empty: widget.empty, change: (value) { 
+                  try {
+                    widget.item.port = int.parse(value);
+                    Future.delayed(const Duration(seconds: 2), () {
+                      if (widget.item.port == int.parse(value) && int.parse(value) != 0) {
+                        widget.dash.saveDash(widget.dash.id, context);
+                      }
+                    });
+                  } catch (e) {  widget.item.port = null; }
+                  var el = widget.dash.getElement(widget.elementID);
+                  el!.element = widget.item as dynamic;
+                }),
+        SubTextInputWidget(
+        readOnly: widget.readOnly,
+        subkey: "PAT", initialValue: widget.item.PAT != null ? '${widget.item.PAT}' : null, 
+        width: widget.width, empty: widget.empty, change: (value) { 
+                  try {
+                    widget.item.PAT = int.parse(value);
+                    Future.delayed(const Duration(seconds: 2), () {
+                      if (widget.item.PAT == int.parse(value) && int.parse(value) != 0) {
+                        widget.dash.saveDash(widget.dash.id, context);
+                      }
+                    });
+                  } catch (e) { widget.item.PAT = null;  }
+                  var el = widget.dash.getElement(widget.elementID);
+                  el!.element = widget.item as dynamic;
+                }),
+        SubTextInputWidget(subkey: "reverse path", initialValue: widget.item.PAT != null ? '${widget.item.PAT}' : null, 
+        readOnly: widget.readOnly,
+        width: widget.width, empty: widget.empty, change: (value) { 
+                  try {
+                    widget.item.path = value;
+                    Future.delayed(const Duration(seconds: 2), () {
+                      if (widget.item.path == value) {  widget.dash.saveDash(widget.dash.id, context); }
+                    });
+                  } catch (e) { widget.item.path = null;  }
+                  var el = widget.dash.getElement(widget.elementID);
+                  el!.element = widget.item as dynamic;
+                }),
+    ]); 
+  }
+}

lib/widgets/forms/sub_keys_forms.dart

@@ -0,0 +1,97 @@
+
+import 'package:flutter/material.dart';
+import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/main.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/workflow.dart';
+import 'package:oc_front/widgets/forms/sub_add_forms.dart';
+import 'package:oc_front/widgets/inputs/sub_text_input.dart';
+enum SubMapFormsType { 
+  ENV, 
+  INPUT,
+  OUTPUT 
+}
+// ignore: must_be_immutable
+class SubKeysMapFormsWidget extends StatefulWidget {
+  bool readOnly = false;
+  AbstractItem item;
+  Dashboard dash; 
+  bool empty = false;
+  SubMapFormsType type;
+  String elementID = "";
+  SubKeysMapFormsWidget({ super.key, required this.dash, required this.type, this.readOnly = false,
+    this.empty = false, required this.item, required this.elementID });
+  @override SubKeysMapFormsWidgetState createState() => SubKeysMapFormsWidgetState();
+}
+class SubKeysMapFormsWidgetState extends State<SubKeysMapFormsWidget> {
+  bool _save = false;
+
+  List<Param> getParams(String fromID, String toID) {
+    List<Param> arr = [];
+    var els = widget.dash.elements.where( (e) => fromID.contains(e.id) || toID.contains(e.id));
+    for (var element in els) {
+      var g = GraphItem();
+      g.fromDashboard(element.serialize());
+      var e = g.getElement();
+      if (e != null && e.getSelectedInstance() != null) {
+        arr = [...arr, ...e.getSelectedInstance()!.env];
+      }
+    }
+    return arr;
+  }
+  List<Widget> getInstanceInOutput(AbstractItem? item, SubMapFormsType type) {
+    List<Widget> children = [];
+    if (item == null || item.getSelectedInstance() == null) {
+      return [];
+    } 
+    AbstractInstance instance = item.getSelectedInstance()!;
+    List<Param> params = widget.type == SubMapFormsType.INPUT ? instance.inputs : ( widget.type == SubMapFormsType.OUTPUT ? instance.outputs : instance.env);
+    for ( var param in params) {
+      if (!param.readOnly) { continue; }
+      dynamic env;
+      if (param.value == null && param.attr != null) { 
+        var s = item.serialize();
+        s.addAll(item.getSelectedInstance()?.serialize() ?? {});
+        env = s[param.attr!];
+      } else {  env = param.value; }
+      _save = true;
+      if (env is bool) {
+        var ctrl = ValueNotifier<bool>(env);
+        children.add(AdvancedSwitch(
+              width: 150.0,
+              height: 25.0,
+              controller: ctrl,
+              enabled: false,
+              activeChild: Text(param.name!, style: const TextStyle(color: Colors.white)),
+              inactiveChild: Text("no ${param.name!}", style: const TextStyle(color: Colors.white)),
+              activeColor: Colors.green,
+              inactiveColor: redColor,
+              onChanged: (value) {},
+        ));
+      } else {
+        children.add(SubTextInputWidget( subkey: param.name!, width: 180, empty: false, change: (value) { }, 
+                     initialValue: env, readOnly: true, noLabel: false, copyLabel: true ));
+      }
+    }
+    return children;
+  }
+
+  @override Widget build(BuildContext context) {
+    List<Widget> children = [];
+    var newwidget = getInstanceInOutput(widget.item, widget.type);
+    children.add(Column( children : [
+        Padding( padding: const EdgeInsets.only(top: 10),
+          child: Text("<${widget.type == SubMapFormsType.INPUT ? "INPUT" : (widget.type == SubMapFormsType.OUTPUT ? "OUTPUT" : "")} ENV VARIABLES>", 
+            style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold), textAlign: TextAlign.center)),
+        ...newwidget,
+        SubAddFormsWidget(dash: widget.dash, item: widget.item, elementID: widget.elementID, type: widget.type),
+        Container(width: 200, padding: const EdgeInsets.only(top: 10, bottom: 10),
+          decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1)))),
+    ]));
+    if (_save) {
+      widget.dash.saveDash(widget.dash.id, context);
+    }
+    return Column( children : children ); 
+  }
+}

lib/widgets/inputs/shallow_dropdown_input.dart

@@ -1,9 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/models/response.dart';
 import 'package:oc_front/pages/shared.dart';
+
 class ShallowDropdownInputWidget extends StatefulWidget {
   double? width;
-  SharedWorkspaceType type = SharedWorkspaceType.workspace;
+  double? height;
+  CollaborativeAreaType type = CollaborativeAreaType.workspace;
   Future<List<Shallow>> Function()? all;
   Future<void> Function(String)? load;
   Future<void>  Function(String)? remove;
@@ -12,10 +15,10 @@ class ShallowDropdownInputWidget extends StatefulWidget {
   void Function(String?)? change;
   DropdownMenuItem Function(Shallow)? maptoDropdown;
   String? current;
-
+  Widget? prefixIcon;
   IconData? iconLoad;
   IconData? iconRemove;
-
+  String? label;
   String? hint;
 
   String? tooltipLoad;
@@ -27,9 +30,9 @@ class ShallowDropdownInputWidget extends StatefulWidget {
 
   bool deletion = false;
 
-  ShallowDropdownInputWidget ({ Key? key, this.width, this.current, required this.all,
-  this.iconLoad, this.iconRemove, this.hint, this.filled, this.hintColor, this.color,
-  this.tooltipLoad, this.tooltipRemove, this.deletion = false, this.maptoDropdown,
+  ShallowDropdownInputWidget ({ Key? key, this.width, this.current, required this.all, this.prefixIcon,
+  this.iconLoad, this.iconRemove, this.hint, this.filled, this.hintColor, this.color, this.height,
+  this.tooltipLoad, this.tooltipRemove, this.deletion = false, this.maptoDropdown, this.label,
   required this.type, this.canLoad, this.canRemove, this.load, this.remove, this.change }): super(key: key);
   @override ShallowDropdownInputWidgetState createState() => ShallowDropdownInputWidgetState();
 }
@@ -38,7 +41,7 @@ class ShallowDropdownInputWidgetState extends State<ShallowDropdownInputWidget>
     if (widget.deletion && widget.remove == null) {
       widget.remove =(p0) async => widget.current = null;
     }
-    var t = widget.type == SharedWorkspaceType.workspace ? "workspace" : (widget.type == SharedWorkspaceType.workflow ? "workflow" : "peer");
+    var t = widget.type == CollaborativeAreaType.workspace ? "workspace" : (widget.type == CollaborativeAreaType.workflow ? "workflow" : "peer");
     return FutureBuilder(future: widget.all!(), builder: (b, s) {
       List<DropdownMenuItem> items = [];
       if (widget.maptoDropdown != null) {
@@ -50,13 +53,14 @@ class ShallowDropdownInputWidgetState extends State<ShallowDropdownInputWidget>
           Tooltip( message: widget.hint ?? "current $t", child:
           Theme(
             data: Theme.of(context).copyWith(
-              canvasColor: Colors.grey.shade300,
+              canvasColor: widget.filled ??Colors.white,
             ),
-            child: Container( height: 50, width: (widget.width ?? MediaQuery.of(context).size.width) - (widget.load == null ? 0 : 50) - (widget.remove == null ? 0 : 50), 
+            child: Container( height: widget.height ?? 50, 
+            width: (widget.width ?? getMainWidth(context)) - (widget.load == null ? 0 : 50) - (widget.remove == null ? 0 : 50), 
             decoration: const BoxDecoration(
               color: Colors.white,
             ),  
-            child:  DropdownButtonFormField(
+            child: Center(child: DropdownButtonFormField(
                       onChanged: (value) {
                         setState(() {
                           widget.current = value;
@@ -69,13 +73,17 @@ class ShallowDropdownInputWidgetState extends State<ShallowDropdownInputWidget>
                       isExpanded: true,
                       style: TextStyle(color: widget.color ?? Colors.black, fontSize: 15),
                       hint: Text(widget.hint ?? "load $t...", 
-                        style: TextStyle(color: widget.hintColor ??Colors.grey.shade300, fontSize: 14)),
+                        style: TextStyle(color: widget.hintColor ??midColor, fontSize: 14)),
                       icon:  Icon(                // Add this
                         Icons.arrow_drop_down,  // Add this
-                        color: widget.hintColor ?? Colors.grey ,   // Add this
+                        color: widget.hintColor ?? Colors.grey ,   // Add thisprefixIcon
                        ),
                       decoration: InputDecoration( 
                         filled: true,
+                        label: widget.label == null ? null : Text(widget.label!),
+                        alignLabelWithHint: false,
+                        prefixIconColor: Colors.grey,
+                        prefixIcon: widget.prefixIcon,
                         suffixIconColor: widget.hintColor ?? Colors.grey ,
                         focusedBorder: InputBorder.none,
                         fillColor: widget.filled ??Colors.white,
@@ -84,13 +92,14 @@ class ShallowDropdownInputWidgetState extends State<ShallowDropdownInputWidget>
                         contentPadding: EdgeInsets.only(left: (widget.width ?? 400) < 200 ? 0 : 30, right: (widget.width ?? 400) < 200 ? 0 : 30, top: 18, bottom: 18),
                       ),
                       items: items, 
-                      )))),
+                    ))))),
           widget.load == null ? Container() : Tooltip(
             message: widget.tooltipLoad ?? "load $t",
             child:InkWell( 
             mouseCursor: SystemMouseCursors.click,
             onTap: () async {
-              if (widget.canLoad == null || !widget.canLoad!(widget.current) || widget.load == null || widget.current == null) {
+              if (widget.canLoad == null || !widget.canLoad!(widget.current) 
+              || widget.load == null || widget.current == null) {
                 return;
               }
               await widget.load!(widget.current!);
@@ -113,7 +122,7 @@ class ShallowDropdownInputWidgetState extends State<ShallowDropdownInputWidget>
                 setState(() {  });
             },
             child: Container( width: 50,height: 50,
-              decoration: BoxDecoration(color: Colors.black, border: Border(left: BorderSide(color: Colors.grey.shade300))),
+              decoration: BoxDecoration(color: Colors.black, border: Border(left: BorderSide(color: midColor))),
               child: Icon(widget.iconRemove ?? Icons.delete, color: widget.current == null || widget.canRemove == null || !widget.canRemove!(widget.current) ? Colors.grey : Colors.white)) )
           ),
         ]); });

lib/widgets/inputs/shallow_text_input.dart

@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:oc_front/models/response.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/pages/shared.dart';
+
 class ShallowTextInputWidget extends StatefulWidget {
   double? width;
-  SharedWorkspaceType type = SharedWorkspaceType.workspace;
+  CollaborativeAreaType type = CollaborativeAreaType.workspace;
   Future<void> Function(Map<String,dynamic>)? load;
   Future<void> Function(String)? loadStr;
   Future<void>  Function(String)? remove;
@@ -12,10 +13,12 @@ class ShallowTextInputWidget extends StatefulWidget {
   void Function(String?)? change;
   String? current;
   String? compare;
-
+  bool readOnly;
   IconData? iconLoad;
   IconData? iconRemove;
 
+  MainAxisAlignment alignment = MainAxisAlignment.start;
+
   String? hint;
 
   String? tooltipLoad;
@@ -28,7 +31,7 @@ class ShallowTextInputWidget extends StatefulWidget {
 
   String? attr;
 
-  ShallowTextInputWidget ({ Key? key, this.width, this.current, this.attr,
+  ShallowTextInputWidget ({ Key? key, this.width, this.current, this.attr, this.readOnly = false, this.alignment = MainAxisAlignment.start,
   this.iconLoad, this.iconRemove, this.hint, this.forms = const [], this.loadStr,
   this.tooltipLoad = "", this.tooltipRemove = "",
   this.filled, this.hintColor, this.color,
@@ -51,6 +54,8 @@ class ShallowTextInputWidget extends StatefulWidget {
   }
 }
 class ShallowTextInputWidgetState extends State<ShallowTextInputWidget> {
+  TextEditingController ctrl = TextEditingController();
+
   bool validForms() {
     for (var form in widget.forms) {
       if (!form.validate()) {
@@ -61,18 +66,18 @@ class ShallowTextInputWidgetState extends State<ShallowTextInputWidget> {
   }
 
   @override Widget build(BuildContext context) {
-    var t = widget.type == SharedWorkspaceType.workspace ? "workspace" : (widget.type == SharedWorkspaceType.workflow ? "workflow" : "peer");
-    return Row( children: [
+    var t = widget.type == CollaborativeAreaType.workspace ? "workspace" : (widget.type == CollaborativeAreaType.workflow ? "workflow" : "peer");
+    ctrl.text = widget.current ?? "";
+    return Row( mainAxisAlignment: widget.alignment, children: [
           Tooltip( message: widget.hint ?? "current $t", child:
           Theme(
             data: Theme.of(context).copyWith(
-              canvasColor: Colors.grey.shade300,
+              canvasColor: midColor,
             ),
-            child: Container( height: 50, width: (widget.width ?? MediaQuery.of(context).size.width) - (widget.load == null ? 0 : 50) - (widget.remove == null ? 0 : 50), 
-            decoration: BoxDecoration(
-              color: Colors.white,
-            ),       
+            child: Container( height: 50, width: (widget.width ?? getMainWidth(context)) - (widget.load == null ? 0 : 50) - (widget.remove == null ? 0 : 50), 
+            decoration: const BoxDecoration( color: Colors.white ),       
             child:  TextFormField(
+                      enabled: !widget.readOnly,
                       onChanged: (value) {
                         setState(() {
                           widget.current = value;
@@ -81,7 +86,7 @@ class ShallowTextInputWidgetState extends State<ShallowTextInputWidget> {
                           }
                         });
                       },
-                      initialValue: widget.current,
+                      controller: ctrl,
                       style: TextStyle(color: widget.color ?? Colors.black, fontSize: 15),
                       decoration: InputDecoration( 
                         filled: true,
@@ -129,7 +134,7 @@ class ShallowTextInputWidgetState extends State<ShallowTextInputWidget> {
                 setState(() {  });
             },
             child: Container( width: 50,height: 50,
-              decoration: BoxDecoration(color: Colors.black, border: Border(left: BorderSide(color: Colors.grey.shade300))),
+              decoration: BoxDecoration(color: Colors.black, border: Border(left: BorderSide(color: midColor))),
               child: Icon(widget.iconRemove ?? Icons.delete, color: widget.current == null || widget.canRemove == null || !widget.canRemove!(widget.current) ? Colors.grey : Colors.white)) )
           ),
         ]);

lib/widgets/inputs/sub_dropdown_input .dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class SubDropdownInputWidget extends StatefulWidget {
+  String subkey;
+  double width;
+  bool empty;
+  String? initialValue;
+  List<DropdownMenuItem<String>> dropdownMenuEntries = [];
+  void Function(String?)? change = (value) {};
+  SubDropdownInputWidget ({ super.key, required this.dropdownMenuEntries, this.initialValue,
+  required this.subkey, required this.width, required this.empty, required this.change });
+  @override SubDropdownInputWidgetState createState() => SubDropdownInputWidgetState();
+}
+class SubDropdownInputWidgetState extends State<SubDropdownInputWidget> {
+
+  @override Widget build(BuildContext context) {
+    return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Tooltip( message: widget.subkey,
+              child: Container( margin: EdgeInsets.only(top: widget.empty ? 0 : 15),
+                width: widget.width, height: 30,
+                child: DropdownButtonFormField( 
+                  isExpanded: true,
+                  items: widget.dropdownMenuEntries,
+                  value: widget.initialValue,
+                  onChanged: widget.change,
+                  style: const TextStyle(fontSize: 12,color: Colors.black, overflow: TextOverflow.ellipsis),
+                  decoration: InputDecoration(
+                    hintText: "select ${widget.subkey}...",
+                    fillColor: Colors.white,
+                    filled: true,
+                    labelText: widget.subkey,
+                    alignLabelWithHint: false,
+                    errorStyle: const TextStyle(fontSize: 0),
+                    hintStyle: const TextStyle(fontSize: 10),
+                    labelStyle: const TextStyle(fontSize: 10),
+                    floatingLabelBehavior: FloatingLabelBehavior.always,
+                    enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
+                    border: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                  ),
+                ))), 
+      ]);
+  }
+}

lib/widgets/inputs/sub_text_input.dart

@@ -0,0 +1,62 @@
+import 'package:alert_banner/exports.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:oc_front/widgets/dialog/alert.dart';
+
+class SubTextInputWidget extends StatefulWidget {
+  String subkey;
+  String? initialValue;
+  double width;
+  bool empty;
+  bool noLabel;
+  bool readOnly = false;
+  bool copyLabel = false;
+  void Function(String) change = (value) {};
+  SubTextInputWidget ({ Key? key, 
+  required this.subkey, this.readOnly = false, this.noLabel = false, this.copyLabel = false,
+   this.initialValue, required this.width, required this.empty, required this.change }): 
+    super(key: key);
+  @override SubTextInputWidgetState createState() => SubTextInputWidgetState();
+}
+class SubTextInputWidgetState extends State<SubTextInputWidget> {
+
+  @override Widget build(BuildContext context) {
+    if (widget.readOnly && widget.initialValue == null) {
+      return Container();
+    }
+    return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Tooltip( message: widget.subkey,
+              child: Container( margin: EdgeInsets.only(top: widget.empty ? 0 : 15),
+                width: widget.width - (widget.readOnly ? 40 : 0), height: 30,
+                child: TextFormField( textAlign: TextAlign.start,
+                  enabled: !widget.readOnly,
+                  initialValue: widget.initialValue,
+                  onChanged: widget.change,
+                  style: const TextStyle(fontSize: 12),
+                  decoration: InputDecoration(
+                    hintText: "enter ${widget.subkey}...",
+                    fillColor: Colors.white,
+                    filled: true,
+                    labelText: widget.noLabel ? "" : widget.subkey,
+                    alignLabelWithHint: false,
+                    errorStyle: const TextStyle(fontSize: 0),
+                    hintStyle: const TextStyle(fontSize: 10),
+                    labelStyle: const TextStyle(fontSize: 12),
+                    floatingLabelBehavior: FloatingLabelBehavior.always,
+                    enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
+                    border: const OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                  ),
+                ))),
+      widget.readOnly ? InkWell( onTap: () {
+                    Clipboard.setData(ClipboardData(text: widget.copyLabel ? "\$${widget.subkey}" : widget.initialValue!));
+                    showAlertBanner(context, () {}, const InfoAlertBannerChild(text: "successfully add to clipboard"), // <-- Put any widget here you want!
+                      alertBannerLocation:  AlertBannerLocation.bottom,);
+                  }, child: Container( margin: EdgeInsets.only(left: 5, top: widget.empty ? 0 : 15),
+                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.grey, width: 1)),
+                    width: 35, height: 30,
+                    child: const Row( mainAxisAlignment: MainAxisAlignment.center,
+                      children: [ Icon(Icons.copy, color: Colors.black, size: 15,) ]),
+                  )) : Container()  
+      ]);
+  }
+}

lib/widgets/items/infos.dart

@@ -0,0 +1,24 @@
+
+import 'package:flutter/material.dart';
+import 'package:oc_front/models/resources/resources.dart';
+
+// ignore: must_be_immutable
+class InfosWidget extends StatefulWidget {
+  AbstractItem item;
+  InfosWidget ({ super.key, required this.item });
+  @override InfosWidgetState createState() => InfosWidgetState();
+}
+class InfosWidgetState extends State<InfosWidget> {
+  @override Widget build(BuildContext context) {
+    List<Widget> children = [];
+    var obj = widget.item.infos();
+    for (var key in obj.keys) {
+      children.add(
+        Padding(padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 100),
+          child: Text("$key : ${obj[key] ?? "no $key"}", 
+          style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w600))),
+      );
+    }
+    return Wrap( children: children);
+  } 
+}

lib/widgets/items/item.dart

@@ -1,8 +1,12 @@
-
+import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
-import 'package:oc_front/models/search.dart';
-import 'package:oc_front/widgets/items/items_details/data_item.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/models/response.dart';
+import 'package:oc_front/pages/shared.dart';
+import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
+import 'package:oc_front/widgets/inputs/sub_dropdown_input%20.dart';
 
+// ignore: must_be_immutable
 class ItemWidget extends StatefulWidget {
   AbstractItem item;
   ItemWidget ({ super.key, required this.item });
@@ -10,28 +14,88 @@ class ItemWidget extends StatefulWidget {
 }
 class ItemWidgetState extends State<ItemWidget> {
   @override Widget build(BuildContext context) {
-    Widget w = Container();
-    /*  if (isData(widget.item.topic)) { w = DataItemWidget(item: widget.item as DataItem); }
-    else if (isComputing(widget.item.topic)) { w = DataItemWidget(item: widget.item as DataItem); }
-    else if (isDataCenter(widget.item.topic)) { w = DataItemWidget(item: widget.item as DataItem); }
-    else if (isStorage(widget.item.topic)) { w = DataItemWidget(item: widget.item as DataItem); } */
-
-    return Container(
-            height: MediaQuery.of(context).size.height - 300,
+    List<Widget> widgets = [
+      Container( margin: EdgeInsets.only(bottom: 20),
+        decoration: BoxDecoration(border: Border(bottom: BorderSide(color: midColor))),
+        width: getMainWidth(context) / 2,
+        child: Center(child: Padding( padding: EdgeInsets.only(bottom: 20), 
+          child: Text("RESOURCE INFORMATIONS", style: TextStyle(fontSize: 18, color: Colors.grey, fontWeight: FontWeight.w500)))))
+    ];
+    var infos = widget.item.infos();
+    var count = 0;
+    for (var info in infos.keys) {
+      count++;
+      widgets.add(Padding( padding: EdgeInsets.symmetric(vertical: 5), child : Row(children: [
+        Padding(  padding: EdgeInsets.only(left: 50, right: 10), child : Text("${info.toUpperCase().replaceAll("_", " ")} :", style: TextStyle(fontSize: 15, color: Colors.grey))),
+        Text("${infos[info] is bool ? (infos[info] == true ? "yes" : "no") : infos[info] ?? "unknown"}", 
+          overflow: TextOverflow.ellipsis,
+          style: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500))
+      ])));
+    }
+    if (count == 0 ) {
+        widgets.add(Center(child: Padding( padding: EdgeInsets.symmetric(vertical: 5), child : Row(children: [
+          Padding(  padding: EdgeInsets.only(left: 50, right: 10), child : Text("NO INFORMATION", style: TextStyle(fontSize: 15, color: Colors.grey))),
+        ]))));
+      }
+    List<Widget> widgetsInstance = [];
+    List<Shallow> dpItems = [];
+    for (var (i, instance) in widget.item.instances.indexed) {
+      dpItems.add(Shallow(id: "$i", name: instance.name ?? ""));   
+    }
+    if (dpItems.isNotEmpty) {
+      widgetsInstance.add(Center( child: Padding(padding: EdgeInsets.only(bottom: 15), child: 
+        ShallowDropdownInputWidget( all: () async => dpItems, width: (getWidth(context) / 2) - 25, 
+        label: "instances", type: CollaborativeAreaType.resource, height: 65,
+          current: "${widget.item.selectedInstance}", change: (value) {
+            if (value != null) { setState(() { widget.item.selectedInstance = int.parse(value); }); }
+          },
+        ))
+      ));
+    }
+    if (widget.item.instances.length > widget.item.selectedInstance) {
+      var instance = widget.item.instances[widget.item.selectedInstance];
+      widgetsInstance.add(Container(height: 20, width: getWidth(context) / 2,));
+      var count = 0;
+      for (var info in instance.infos().keys) {
+        if (instance.infos()[info] == null || instance.infos()[info] is List || instance.infos()[info] is Map) { continue; }
+        count++;
+        widgetsInstance.add(Center(child: Padding( padding: EdgeInsets.symmetric(vertical: 5), child : Row(children: [
+          Padding(  padding: EdgeInsets.only(left: 50, right: 10), child : Text("${info.toUpperCase().replaceAll("_", " ")} :", style: TextStyle(fontSize: 15, color: Colors.grey))),
+          Text("${instance.infos()[info] is bool ? (instance.infos()[info] == true ? "yes" : "no") : instance.infos()[info] ?? "unknown"}", 
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500))
+        ]))));
+      }
+      if (count == 0 ) {
+        widgetsInstance.add(Padding( padding: EdgeInsets.symmetric(vertical: 5), child : Row(children: [
+          Padding(  padding: EdgeInsets.only(left: 50, right: 10), child : Text("NO INSTANCE INFORMATION", style: TextStyle(fontSize: 15, color: Colors.grey))),
+        ])));
+      }
+    }
+    Widget w = Column( mainAxisSize: MainAxisSize.max, children: widgets );
+    Widget w2 = Column( mainAxisSize: MainAxisSize.max, children: widgetsInstance );
+    return SizedBox(
+            height: getHeight(context) - 200,
             child: SingleChildScrollView(
-              child: Column( children: [
+              child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [
               widget.item.description == null ? Container() : Container(
-                width: MediaQuery.of(context).size.width,
+                width: getMainWidth(context),
                 alignment: Alignment.center,
-                decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey.shade300))),
-                padding: const EdgeInsets.all(30), 
-                child: Text(widget.item.description!, 
+                height: 100,
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  border: Border(bottom: BorderSide(color: midColor))),
+                padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 50), 
+                child: Text(widget.item.description!.length > 350 ? "${widget.item.description!.substring(0, 347)}..." : widget.item.description!,
                 style: TextStyle(fontSize: 15, color: Colors.grey, fontWeight: FontWeight.w500))), 
-              Container(padding: const EdgeInsets.all(30),
-                  color: Colors.grey.shade300,
-                  width: MediaQuery.of(context).size.width / 2,
-                  child: w
-            )
+              Row( children: [ 
+                Container(padding: const EdgeInsets.symmetric(vertical: 20),
+                  height: getHeight(context) - 300,
+                  decoration: BoxDecoration(border: Border(right: BorderSide(color: midColor))),
+                  alignment: Alignment.topLeft, width: getMainWidth(context) / 2,  child: w),
+                Container(height: getHeight(context) - 300,
+                  alignment: Alignment.topRight, width: getMainWidth(context) / 2, child: w2)
+              ])
           ]
         )
       )

lib/widgets/items/item_row.dart

@@ -1,8 +1,8 @@
-import 'dart:convert';
+import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
-import 'package:oc_front/models/search.dart';
-import 'package:oc_front/core/models/workspace_local.dart';
 import 'package:oc_front/core/services/router.dart';
+import 'package:oc_front/models/resources/resources.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
 
 const List<GlobalKey<State>> _empty = [];
 // ignore: must_be_immutable
@@ -19,7 +19,7 @@ class ItemRowWidget extends StatefulWidget {
 class ItemRowWidgetState extends State<ItemRowWidget> {
   @override Widget build(BuildContext context) {
     double imageSize = widget.contextWidth <= 400 ? 0 : 80;
-    var ratio = MediaQuery.of(context).size.width != widget.contextWidth ? 0.5 : 1; // 2;
+    var ratio = getMainWidth(context) != widget.contextWidth ? 0.5 : 1; // 2;
     var itemWidth = (((widget.contextWidth - imageSize) / 3) - 80) / ratio;
     itemWidth = itemWidth > 100 ? 100 : ( itemWidth < 40 ? 40 : itemWidth );
     var endWidth = (itemWidth * ratio) + 80;
@@ -31,15 +31,15 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
       width: widget.contextWidth,
       height: 100,
       padding: EdgeInsets.only(left: imageSize == 0 ? 20 : 0),
-      decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey.shade300)) ),
+      decoration: BoxDecoration( border: Border(bottom: BorderSide(color: midColor)) ),
       child: Row( children: [
           widget.low ? Container( padding: const EdgeInsets.only(left: 10),) : Container( padding: const EdgeInsets.all(10), 
             constraints: BoxConstraints(maxWidth: imageSize, minWidth: imageSize),
             child: image ?? Image.network('https://get-picto.com/wp-content/uploads/2024/01/logo-instagram-png.webp', 
               height: imageSize, width: imageSize)),
-          Container(
+          SizedBox(
             width: widget.low ? widget.contextWidth - 20 :  widget.contextWidth - (imageSize + 20) - endWidth,
-            child: Padding(padding: widget.contextWidth != MediaQuery.of(context).size.width ? 
+            child: Padding(padding: widget.contextWidth != getMainWidth(context) ? 
             const EdgeInsets.symmetric(horizontal: 10) : const EdgeInsets.symmetric(horizontal: 20),
               child: Column(crossAxisAlignment: CrossAxisAlignment.start, 
                 mainAxisAlignment: MainAxisAlignment.center, children: [
@@ -47,26 +47,23 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
                   widget.low ? Container() : Container(padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                     margin: const EdgeInsets.only(right: 20),
                     decoration: BoxDecoration(
-                      color: isData(widget.item.topic) ? Colors.blue : 
-                      isComputing(widget.item.topic) ? Colors.green : 
-                      isDataCenter(widget.item.topic) ? Colors.orange : 
-                      isStorage(widget.item.topic) ? Colors.red : Colors.grey,
+                      color: getColor(widget.item.topic),
                       borderRadius: BorderRadius.circular(4),
                     ),
-                    child: Text( MediaQuery.of(context).size.width < 600 ? "" : widget.item.topic.toString(), 
+                    child: Text( getMainWidth(context) < 600 ? "" : widget.item.topic.toString(), 
                       style: const TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w600)),
                   ),
                   Expanded( child: Text(widget.item.name?.toUpperCase() ?? "", 
                     style: TextStyle(fontSize: widget.low ? 14 : 20, overflow: TextOverflow.ellipsis, fontWeight: FontWeight.w600, color: Color(0xFFF67C0B9))),
                   )
                 ]),
-                Text( "From ${widget.item.owner ?? "unknown owner"}", 
+                widget.item.owners.isEmpty ? Container() : Text( "From ${widget.item.owners.map( (e) => e.name).join(", ")}", 
                   style: const TextStyle(fontSize: 14, color: Colors.grey, overflow: TextOverflow.ellipsis)),
                 Text(widget.item.shortDescription ?? "", style: const TextStyle(fontSize: 12, overflow: TextOverflow.ellipsis)),
               ],)
             )
           ),
-          widget.low ? Container() : Container(
+          widget.low ? Container() : SizedBox(
             width: endWidth,
             child: Row( 
               mainAxisAlignment: MainAxisAlignment.center,
@@ -85,12 +82,13 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
                   constraints: const BoxConstraints(maxWidth: 80),
                   width: itemWidth,
                   decoration: BoxDecoration(
-                    boxShadow: [BoxShadow(color: Colors.grey.shade300, spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1))],
-                    color: (WorkspaceLocal.hasItem(widget.item) ? Colors.red : const Color.fromRGBO(38, 166, 154, 1)),
+                    boxShadow: [BoxShadow(color: midColor, spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1))],
+                    color: (WorkspaceLocal.hasItem(widget.item) ? redColor : lightColor ),
                     borderRadius: BorderRadius.circular(4),
                   ),
                   child: Icon(WorkspaceLocal.hasItem(widget.item) ? Icons.remove_shopping_cart : Icons.add_shopping_cart, 
-                    color: Colors.white, size: 20 )) 
+                    color: Colors.white, size: 20 )
+                ) 
             ),
             ...(ratio > 1 ? [Padding( padding: const EdgeInsets.only(left: 20), 
               child: InkWell( 
@@ -101,8 +99,8 @@ class ItemRowWidgetState extends State<ItemRowWidget> {
                   constraints: const BoxConstraints(maxWidth: 80, minWidth: 40),
                   width: itemWidth,
                   decoration: BoxDecoration(
-                    boxShadow: [BoxShadow(color: Colors.grey.shade300, spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1))],
-                    color: Colors.grey.shade300,
+                    boxShadow: [BoxShadow(color: midColor, spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1))],
+                    color: midColor,
                     borderRadius: BorderRadius.circular(4),
                   ),
                   child: const Icon(Icons.favorite_border, color: Colors.white, size: 20 )) 

lib/widgets/items/items_details/data_item.dart

@@ -1,24 +0,0 @@
-
-import 'package:flutter/material.dart';
-import 'package:oc_front/models/search.dart';
-
-class DataItemWidget extends StatefulWidget {
-  DataItem item;
-  DataItemWidget ({ super.key, required this.item });
-  @override DataItemWidgetState createState() => DataItemWidgetState();
-}
-class DataItemWidgetState extends State<DataItemWidget> {
-  @override Widget build(BuildContext context) {
-    return Wrap( children: [
-      Padding(padding: EdgeInsets.symmetric(vertical: 20, horizontal: 100),
-        child: Text("type : ${widget.item.dataType ?? "unknown type"}", 
-          style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600))),
-      Padding(padding: EdgeInsets.symmetric(horizontal: 100, vertical: 20), 
-        child: Text("protocol : ${widget.item.protocols.isEmpty ? "no protocol founded" : widget.item.protocols.join(",")}", 
-          style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600))),
-      Padding(padding: EdgeInsets.symmetric(horizontal: 100, vertical: 20), 
-        child: Text("ex : ${widget.item.exemple ?? "no example"}", 
-          style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600))),
-    ]);
-  } 
-}

lib/widgets/items/shallow_item_row.dart

@@ -1,6 +1,8 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/models/response.dart';
 
 const List<GlobalKey<State>> _empty = [];
@@ -8,15 +10,16 @@ const List<GlobalKey<State>> _empty = [];
 class ShallowItemRowWidget extends StatefulWidget {
   bool readOnly = false;
   double contextWidth = 0;
+  Color? color;
   ShallowData item;
   IconData? icon;
   bool low = false;
   bool show = false;
-  List<IconData> badges = [];
+  List<Widget> badges = [];
   void Function(String?)? delete;
   void Function(String?)? edit;
   List<GlobalKey<State>> keys = [];
-  ShallowItemRowWidget ({ super.key, this.low = false, this.icon, this.delete, this.edit, this.badges = const [],
+  ShallowItemRowWidget ({ super.key, this.low = false, this.icon, this.delete, this.edit, this.color, this.badges = const [],
     required this.contextWidth, this.readOnly = false, required this.item, this.keys = _empty });
   @override ShallowItemRowWidgetState createState() => ShallowItemRowWidgetState();
 }
@@ -31,8 +34,80 @@ class ShallowItemRowWidgetState extends State<ShallowItemRowWidget> {
       }),
       child: Container(
       height: widget.contextWidth, width: widget.contextWidth,
-      padding: const EdgeInsets.all(20),
-      decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), color: Colors.white,
+      padding: const EdgeInsets.all(10),
+      margin: const EdgeInsets.all(10),
+      decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), color: widget.color ?? Colors.white,
+        boxShadow: const [BoxShadow(color: Colors.grey, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 1))]),
+      child: Stack( children: [ 
+        widget.show ? Positioned( left: 0, top: 0,
+          child: Row( children: [
+            Padding( padding: const EdgeInsets.only(right: 5),
+              child: widget.edit == null ? Container() : InkWell( mouseCursor:  SystemMouseCursors.click,
+              onTap: () =>  widget.edit!(widget.item.getID() + "~" + widget.item.getName()), child: const Icon(Icons.edit, color: Colors.grey,))),
+            Padding( padding: const EdgeInsets.only(right: 5),
+              child: widget.delete == null ? Container() : InkWell( mouseCursor:  SystemMouseCursors.click,
+              onTap: () => widget.delete!(widget.item.getID()), child: const Icon(Icons.delete, color: Colors.grey,))),
+          ] )) : Container(),
+        Positioned( right: 0, top: 0, child: Row( children: widget.badges )),
+        Column( children: [
+          widget.low || widget.icon == null ? Container( padding: const EdgeInsets.only(left: 10),) : Container( padding: const EdgeInsets.all(10), 
+            constraints: BoxConstraints(maxWidth: widget.contextWidth, minWidth: widget.contextWidth),
+            child: Icon( widget.icon!, size: widget.contextWidth / 1.9, color: const Color(0xFFF67C0B9),)),
+            Container(
+              child: Padding(padding: widget.contextWidth != getMainWidth(context) ? 
+              const EdgeInsets.symmetric(horizontal: 10) : const EdgeInsets.symmetric(horizontal: 20),
+                child: Column(crossAxisAlignment: CrossAxisAlignment.start, 
+                  mainAxisAlignment: MainAxisAlignment.center, children: [
+                  Row( children: [ 
+                    Expanded( child: Center( child: Text(widget.item.getName().toUpperCase(), 
+                      style: const TextStyle(fontSize: 15, 
+                      overflow: TextOverflow.ellipsis, 
+                      fontWeight: FontWeight.w600, color: Colors.grey)),
+                    ))
+                  ]),
+                ],)
+              )
+            ),
+          ])
+        ]))));
+    return widget.readOnly || widget.low ? w : InkWell( mouseCursor:  SystemMouseCursors.click,
+      onTap: () { },
+      child: w );
+  } 
+}
+
+class ShallowItemFlowDataRowWidget extends StatefulWidget {
+  bool readOnly = false;
+  double contextWidth = 0;
+  Color? color;
+  FlowData item;
+  IconData? icon;
+  bool low = false;
+  bool show = false;
+  List<Widget> badges = [];
+  List<Widget> bottomBadges = [];
+  void Function(String?)? delete;
+  void Function(String?)? edit;
+  List<GlobalKey<State>> keys = [];
+  ShallowItemFlowDataRowWidget ({ super.key, this.low = false, this.icon, this.delete, this.bottomBadges = const [], 
+    this.edit, this.color, this.badges = const [],
+    required this.contextWidth, this.readOnly = false, required this.item, this.keys = _empty });
+  @override ShallowItemFlowDataRowWidgetState createState() => ShallowItemFlowDataRowWidgetState();
+}
+class ShallowItemFlowDataRowWidgetState extends State<ShallowItemFlowDataRowWidget> {
+  @override Widget build(BuildContext context) {
+    Widget w = Tooltip( message: widget.item.getName(), child: MouseRegion( 
+      onHover: (e) => setState(() {
+        widget.show = true;
+      }),
+      onExit: (e) => setState(() {
+        widget.show = false;
+      }),
+      child: Container(
+      height: widget.contextWidth, width: widget.contextWidth,
+      padding: const EdgeInsets.all(10),
+      margin: const EdgeInsets.all(10),
+      decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), color: widget.color ?? Colors.white,
         boxShadow: const [BoxShadow(color: Colors.grey, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 1))]),
       child: Stack( children: [ 
         widget.show ? Positioned( left: 0, top: 0,
@@ -45,13 +120,15 @@ class ShallowItemRowWidgetState extends State<ShallowItemRowWidget> {
               onTap: () => widget.delete!(widget.item.getID()), child: const Icon(Icons.delete, color: Colors.grey,))),
           ] )) : Container(),
         Positioned( right: 0, top: 0,
-          child: Row( children: widget.badges.map( (e) => Padding( padding: const EdgeInsets.only(left: 5), child: Icon(e, color: Colors.orange.shade300,))).toList() )),
+          child: Row( children: widget.badges )),
+        Positioned( left: 0, bottom: 0,
+          child: Row( children: widget.bottomBadges )),
         Column( children: [
           widget.low || widget.icon == null ? Container( padding: const EdgeInsets.only(left: 10),) : Container( padding: const EdgeInsets.all(10), 
             constraints: BoxConstraints(maxWidth: widget.contextWidth, minWidth: widget.contextWidth),
             child: Icon( widget.icon!, size: widget.contextWidth / 1.9, color: const Color(0xFFF67C0B9),)),
             Container(
-              child: Padding(padding: widget.contextWidth != MediaQuery.of(context).size.width ? 
+              child: Padding(padding: widget.contextWidth != getMainWidth(context) ? 
               const EdgeInsets.symmetric(horizontal: 10) : const EdgeInsets.symmetric(horizontal: 20),
                 child: Column(crossAxisAlignment: CrossAxisAlignment.start, 
                   mainAxisAlignment: MainAxisAlignment.center, children: [

lib/widgets/logs.dart

@@ -1,28 +1,94 @@
 import 'package:alert_banner/exports.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:json_string/json_string.dart';
-import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/models/logs.dart';
+import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/widgets/dialog/alert.dart';
+import 'package:json_string/json_string.dart';
+import 'package:oc_front/core/services/specialized_services/logs_service.dart';
 
+bool isLoading = true;
+Map<String, bool> valid = {};
 class LogsWidget extends StatefulWidget {
-  final List<Log> items;
   String? level;
   String search = "";
-  LogsWidget ({ Key? key, this.search = "", required this.items, this.level }): super(key: key);
+  WorkflowExecution? exec;
+  List<Log> logs = [];
+  LogsWidget ({ Key? key, this.search = "", this.level, this.exec }): super(key: key);
   @override LogsWidgetState createState() => LogsWidgetState();
 }
+
 class LogsWidgetState extends State<LogsWidget> {
   @override Widget build(BuildContext context) {
-    List<LogWidget> itemRows = widget.items.where((element) => (element.message?.toLowerCase().contains(widget.search.toLowerCase()) ?? true)
-      && (widget.level?.contains(element.level ?? "") ?? true) ).map((e) => LogWidget(item: e)).toList();
-    return Stack( children: [ 
-      SingleChildScrollView( child: itemRows.isEmpty ? 
-      Container( height: MediaQuery.of(context).size.height - 100 - HeaderConstants.height,
-        child: const Center( child: Text("no log registered", style: TextStyle(color: Colors.grey, fontSize: 25 ),)))
-      :  Column(  children:  [...itemRows, Container(height: 50,) ] ) ),
-    ]);
+    if (!isLoading) {
+      isLoading = true; 
+      Future.delayed(const Duration(milliseconds: 100), () {
+        try { setState(() { });
+        } catch (e) { /**/ }
+      });
+      return Container( height: getMainHeight(context) - 100,
+        child: Center( child: CircularProgressIndicator()) );
+    }
+    if (widget.exec == null) {
+      return Container();
+    } else {
+      String start = "";
+      String end = "";
+      try {
+        if (widget.exec!.endDate != null && widget.exec!.endDate != "") {
+          var startD = DateTime.parse(widget.exec!.startDate!);
+          var endD = DateTime.parse(widget.exec!.endDate!);
+          var diff = endD.difference(startD);
+          if (diff.inDays < 30) {
+            var rest = ((30 - diff.inDays) ~/ 2) - 1;
+            start = (startD.subtract(Duration(days: rest)).microsecondsSinceEpoch).toString();
+            end = (endD.add(Duration(days: rest)).microsecondsSinceEpoch).toString();
+          } else {
+            start = (startD.microsecondsSinceEpoch).toString();
+            end = (startD.add( const Duration(days: 29)).microsecondsSinceEpoch).toString();
+          }
+        } else {
+          start = (DateTime.parse(widget.exec!.startDate!).subtract( const Duration(days: 14)).microsecondsSinceEpoch).toString();
+          end = (DateTime.parse(widget.exec!.startDate!).add( const Duration(days: 14)).microsecondsSinceEpoch).toString();
+        }
+      } catch(e) { /* */ }
+      Future.delayed(const Duration(minutes: 1), () {
+        try { setState(() {});
+        } catch (e) { /**/ }
+      });
+      return FutureBuilder(future: LogsService().search(context, [], {
+              "workflow_execution_id":  widget.exec!.id,
+              "start": start,
+              "end":  end
+            }), builder: (a, b) {
+              List<Log> logs = [];
+              if (b.data != null && b.data!.data != null) {
+                isLoading = false;
+                var d = b.data!.data!;
+                for( var r in d.result) {
+                  for (var element in r.logs) {
+                    element.level = r.level;
+                    logs.add(element);
+                  }
+                  logs.sort((a, b) => a.timestamp!.compareTo(b.timestamp!));
+                }
+              }  
+              List<LogWidget> itemRows = logs.where((element) => (element.message?.toLowerCase().contains(widget.search.toLowerCase()) ?? true)
+                && (widget.level?.contains(element.level ?? "") ?? true) ).map((e) => LogWidget(item: e)).toList();
+              if (isLoading) {
+                return Container( height: getMainHeight(context) - 100,
+                    child: Center( child: CircularProgressIndicator()) );
+              }
+              return Stack( children: [ 
+                  SingleChildScrollView( child: itemRows.isEmpty ? 
+                  Container( height: getMainHeight(context) - 100,
+                    child: const Center( child: Text("no log registered", style: TextStyle(color: Colors.grey, fontSize: 25 ),)))
+                  :  Column(  children:  [...itemRows, Container(height: 50,) ] ) ),
+                ]);
+      });
+    }
+    
   }
 }
 
@@ -47,7 +113,7 @@ class LogWidgetState extends State<LogWidget> {
       crossAxisAlignment: CrossAxisAlignment.center,
         children: [
         Container( width: 10, height: 15, color: widget.item.level?.toLowerCase() == "info" ? Colors.green : 
-          ( widget.item.level?.toLowerCase() == "error" ? Colors.red : ( 
+          ( widget.item.level?.toLowerCase() == "error" ? redColor : ( 
             widget.item.level?.toLowerCase() == "warning" ? Colors.orange : Colors.blue))),
         InkWell( mouseCursor: map.isEmpty ? MouseCursor.defer : SystemMouseCursors.click, onTap: () {
             if (map.isNotEmpty ) {

lib/widgets/menus/arrow_clipper.dart

@@ -1,17 +0,0 @@
-import 'package:flutter/material.dart';
-
-class ArrowClipper extends CustomClipper<Path> {
-  @override
-  Path getClip(Size size) {
-    Path path = Path();
-    path.moveTo(0, size.height);
-    path.lineTo(size.width / 2, size.height / 2);
-    path.lineTo(size.width, size.height);
-    return path;
-  }
-
-  @override
-  bool shouldReclip(CustomClipper<Path> oldClipper) {
-    return true;
-  }
-}

lib/widgets/menus/clipper_menu.dart

@@ -1,218 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:oc_front/core/services/router.dart';
-import 'package:oc_front/widgets/menus/arrow_clipper.dart';
-
-class TooltipWidget extends StatefulWidget {
-  int index = -1;
-  Size? buttonSize;
-  List<String> labels;
-  Offset? buttonPosition;
-  TooltipWidget ({ Key? key, 
-                  required this.labels,
-                  required this.index, 
-                  required this.buttonSize,
-                  required this.buttonPosition }): super(key: key);
-  @override TooltipWidgetState createState() => TooltipWidgetState();
-}
-class TooltipWidgetState extends State<TooltipWidget> {
-  @override Widget build(BuildContext context) {
-    double minimal = (widget.index < 0 ? 0 : 7 * widget.labels[widget.index].length).toDouble() + 30;
-    return Positioned(
-            top : ((widget.buttonPosition?.dy ?? 1 ) + 11) + (((widget.buttonSize?.height) ?? 1)* 1.5) * (widget.index + 1),
-            left: (widget.buttonPosition?.dx ?? 1) - minimal,
-            child: Container(
-              width: widget.index < 0 ? 0 : (widget.index < 0 ? 0 : minimal), 
-              height: (widget.buttonSize?.height ?? 1) - 2, 
-              color: Colors.black,
-              child: Text( widget.index < 0 ? "" : widget.labels[widget.index], 
-                style: const TextStyle(
-                  color: Colors.white, 
-                  decoration: TextDecoration.none,
-                  fontSize: 14, 
-                  fontWeight: FontWeight.w300), 
-                textAlign: TextAlign.center, 
-                overflow: TextOverflow.ellipsis
-              ),
-            ));
-  }
-}
-
-GlobalKey<ClipperMenuWidgetState> headerMenuKey = GlobalKey<ClipperMenuWidgetState>();
-class ClipperMenuWidget extends StatefulWidget {
-  final BorderRadius borderRadius;
-  final Color backgroundColor;
-  final Color iconColor;
-  int index = -1;
-
-  ClipperMenuWidget({
-    required this.borderRadius,
-    this.backgroundColor = const Color.fromRGBO(38, 166, 154, 1),
-    this.iconColor = Colors.black,
-  }) : super(key: headerMenuKey);
-  @override
-  // ignore: library_private_types_in_public_api
-  ClipperMenuWidgetState createState() => ClipperMenuWidgetState();
-}
-
-class ClipperMenuWidgetState extends State<ClipperMenuWidget> with SingleTickerProviderStateMixin {
-  late GlobalKey _key;
-  bool isMenuOpen = false;
-  Offset? buttonPosition;
-  Size? buttonSize;
-  final GlobalKey<TooltipWidgetState> _tooltipKey = GlobalKey<TooltipWidgetState>();
-  OverlayEntry? _overlayEntry;
-  BorderRadius? _borderRadius;
-  AnimationController? _animationController;
-
-  @override
-  void initState() {
-    _animationController = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 250),
-    );
-    _borderRadius = widget.borderRadius; // BorderRadius.circular(4)
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    _animationController?.dispose();
-    super.dispose();
-  }
-
-  findButton() {
-    if (_key.currentContext != null) {
-      RenderBox renderBox = _key.currentContext?.findRenderObject()! as RenderBox;
-      buttonSize = renderBox.size;
-      buttonPosition = renderBox.localToGlobal(Offset.zero);
-    }
-  }
-
-  void closeMenu() {
-    try {
-      _overlayEntry?.remove();
-      _animationController?.reverse();
-      isMenuOpen = false;
-    } catch (e) { }
-    
-  }
-
-  void openMenu() {
-    findButton();
-    _animationController?.forward();
-    _overlayEntry = _overlayEntryBuilder();
-    if (_overlayEntry != null) { Overlay.of(context).insert(_overlayEntry!); }
-    isMenuOpen = true;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    _key = GlobalKey();
-    headerMenuKey = GlobalKey<ClipperMenuWidgetState>();
-    return Container(
-      key: _key,
-      padding: const EdgeInsets.all(0),
-      child: IconButton(
-        splashRadius: 4,
-        icon: _animationController == null ? 
-        const Icon(
-          Icons.close,
-        ) : AnimatedIcon(
-          icon: AnimatedIcons.menu_close,
-          progress: _animationController!,
-        ),
-        onPressed: () {
-          if (isMenuOpen) { closeMenu();
-          } else { openMenu(); }
-        },
-      ),
-    );
-  }
-
-  OverlayEntry _overlayEntryBuilder() {
-    var routes = AppRouter.zones.where(
-      (e) => e.path != AppRouter.currentRoute.path && e.label != null && e.icon != null).toList();
-    return OverlayEntry(
-      builder: (context) {
-        return Stack( children: [ 
-          TooltipWidget(
-            key: _tooltipKey,
-            labels: routes.map((e) => e.label!).toList(),
-            buttonPosition: buttonPosition, 
-            buttonSize: buttonSize, 
-            index: widget.index  
-          ),
-          Positioned(
-            top: (buttonPosition?.dy ?? 1 ) + (buttonSize?.height ?? 1),
-            left: buttonPosition?.dx,
-            width: buttonSize?.width,
-            child: Material(
-              color: Colors.transparent,
-              child: Stack(
-                children: <Widget>[
-                  Align(
-                    alignment: Alignment.topCenter,
-                    child: ClipPath(
-                      clipper: ArrowClipper(),
-                      child: Container(
-                        width: 17,
-                        height: 17,
-                        color: widget.backgroundColor ?? Color(0xFFF),
-                      ),
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.only(top: 15.0),
-                    child: Container(
-                      height: routes.length * ((buttonSize?.height ?? 1) * 1.5),
-                      decoration: BoxDecoration(
-                        boxShadow: const [BoxShadow(color: Colors.black54, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 1))],
-                        color: widget.backgroundColor,
-                        borderRadius: _borderRadius,
-                      ),
-                      child: Theme(
-                        data: ThemeData(
-                          iconTheme: IconThemeData( color: widget.iconColor ),
-                        ),
-                        child: Column(
-                          mainAxisSize: MainAxisSize.min,
-                          children: List.generate(routes.length, (index) {
-                            return GestureDetector(
-                              onTap: () {
-                                if (index >= 0) { routes[index].go(context, {}); } 
-                                closeMenu();
-                              },
-                              child: Container(
-                                decoration: index == (routes.length - 1) ? null : const BoxDecoration(
-                                    border: Border( bottom: BorderSide(color: Colors.white ), ),
-                                  ),
-                                  width: (buttonSize?.width ?? 1) * 1.5,
-                                  height: (buttonSize?.height ?? 1)  * 1.5,
-                                  child: MouseRegion( 
-                                    cursor: SystemMouseCursors.click,
-                                    onEnter: (state) { 
-                                        _tooltipKey.currentState?.setState(() { 
-                                        _tooltipKey.currentState?.widget.index = index;
-                                      });
-                                    },
-                                    onExit: (state) { 
-                                      _tooltipKey.currentState?.setState(() { _tooltipKey.currentState?.widget.index = -1; });
-                                    },
-                                    child: Icon( routes[index].icon, size: 19)
-                                  ),
-                                ),
-                            );
-                          }),
-                        ),
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          )
-        ]);
-      },
-    );
-  }
-}

lib/widgets/sheduler_items/schedule.dart

@@ -1,15 +1,13 @@
+import 'package:oc_front/main.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
-import 'package:flutter_box_transform/flutter_box_transform.dart';
-import 'package:oc_front/core/sections/header/header.dart';
-import 'package:oc_front/core/services/specialized_services/logs_service.dart';
-import 'package:oc_front/models/logs.dart';
-import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/widgets/logs.dart';
-import 'package:flutter_spinkit/flutter_spinkit.dart';
+import 'package:oc_front/models/workflow.dart';
+import 'package:flutter_box_transform/flutter_box_transform.dart';
 import 'package:oc_front/widgets/lib/tranformablebox.dart' as fork;
-import 'package:oc_front/widgets/sheduler_items/scheduler_calendar.dart';
 import 'package:oc_front/widgets/sheduler_items/scheduler_item.dart';
+import 'package:oc_front/widgets/sheduler_items/scheduler_calendar.dart';
+import 'package:oc_front/core/services/specialized_services/abstract_service.dart';
+import 'package:oc_front/core/services/specialized_services/workflow_execution_service.dart';
 
 double menuSize = 300;
 // ignore: must_be_immutable
@@ -18,19 +16,21 @@ class ScheduleWidget extends StatefulWidget {
   DateTime end;
   bool isDayPlanner = true;
   bool loading = true;
-  Map<String, List<WorkflowExecution>> data;
   bool isList = true;
-  ScheduleWidget ({ super.key, required this.data, required this.start, required this.end, this.isList = true, this.loading = false});
+  bool isBox = true;
+  String? selectedID;
+  AbstractService<WorkflowExecutions> service = WorkflowExecutionService();
+  ScheduleWidget ({ super.key, required this.start, required this.end,
+    this.isBox =true, this.isList = true, this.loading = false});
   @override ScheduleWidgetState createState() => ScheduleWidgetState();
 }
+
 String? selected;
 String? selectedReal;
 class ScheduleWidgetState extends State<ScheduleWidget> {
-  LogsService _service = LogsService();
   String search = "";
   String? level;
-  List<Color> colors = [Colors.blue, Colors.orange, Colors.red, Colors.green];
-  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS"];
+  List<Color> colors = [Colors.blue, Colors.orange, redColor, Colors.green, redColor];
 
   DateTime getFocusedDay() {
     if (selected != null) { return DateTime.parse(selected!); }
@@ -38,185 +38,207 @@ class ScheduleWidgetState extends State<ScheduleWidget> {
   }
 
   @override Widget build(BuildContext context) {
-    bool isInfo = MediaQuery.of(context).size.width <= 600 && selected != null;
-    double w = selected != null ? MediaQuery.of(context).size.width - menuSize : MediaQuery.of(context).size.width;
-    List<Widget> children = [];
-    if (selected != null) {
-      for (var wf in widget.data[selected!] ?? (<WorkflowExecution>[])) {
-        DateTime d2 = DateTime.parse(wf.executionData!).toLocal();
-        children.add( InkWell(
-          onTap: () => setState(() { selectedReal = wf.executionData; }),
-          child: Container( margin: const EdgeInsets.all(10),
-          decoration: BoxDecoration( 
-            border: Border.all(color: selectedReal != null && selectedReal == wf.executionData ? 
-              const Color.fromRGBO(38, 166, 154, 1) : Colors.transparent, width: 2),
-            borderRadius: BorderRadius.circular(4), color: Colors.white
+    return FutureBuilder(
+      future: widget.service.search(context, [ 
+        "${widget.start.year}-${widget.start.month > 9 ? widget.start.month : "0${widget.start.month}"}-${widget.start.day > 9 ? widget.start.day : "0${widget.start.day}"}", 
+        "${widget.end.year}-${widget.end.month > 9 ? widget.end.month : "0${widget.end.month}"}-${widget.end.day > 9 ? widget.end.day : "0${widget.end.day}"}"], {}),
+      builder: (ctx, as) { 
+        Map<String, List<WorkflowExecution>> data = {};
+        if (as.hasData && as.data!.data != null) {
+          for (var element in as.data!.data!.executions) {
+            if (element.startDate == null) { continue; }
+            DateTime dateTime = DateTime.parse(element.startDate!);
+            DateTime date = DateTime(dateTime.year, dateTime.month, dateTime.day);
+            var str = "${date.toIso8601String()}Z";
+            if (data[str] == null) { data[str] = []; }
+            data[str]!.add(element);
+            data[str]!.sort((a, b) => DateTime.parse(a.startDate!).compareTo(DateTime.parse(b.startDate!)));
+          }
+        }
+        bool isInfo = getMainWidth(context) <= 600 && selected != null && widget.isBox;
+        double w = selected != null && widget.isBox ? getMainWidth(context) - menuSize : getMainWidth(context);
+        List<Widget> children = [];
+        if (selected != null) {
+          for (var wf in data[selected!] ?? (<WorkflowExecution>[])) {
+            DateTime d2 = DateTime.parse(wf.startDate!).toLocal();
+            children.add( InkWell(
+              onTap: () => setState(() { 
+                selectedReal = wf.startDate; 
+              }),
+              child: Container( margin: const EdgeInsets.all(10),
+              decoration: BoxDecoration( 
+                border: Border.all(color: selectedReal != null && selectedReal == wf.startDate ? lightColor : Colors.transparent, width: 2),
+                borderRadius: BorderRadius.circular(4), color: Colors.white
+              ),
+              child: Container(
+                    padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
+                    child: Row(children: [
+                      Container( width: 10, height: 10,
+                        decoration: BoxDecoration( 
+                          color: colors[(wf.status ?? 1) - 1],
+                          borderRadius: BorderRadius.circular(4),
+                        ),
+                      ),
+                      SizedBox( width: (menuSize - 160),
+                        child: Padding( 
+                          padding: const EdgeInsets.only(left: 20), 
+                          child: Text(wf.name?.toUpperCase() ?? "", overflow: TextOverflow.ellipsis,
+                          style: const TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.w500)),
+                        )),
+                      SizedBox(
+                        child: Padding( 
+                          padding: const EdgeInsets.only(left: 20), 
+                          child: Text("${d2.hour > 9 ? d2.hour : "0${d2.hour}"}:${d2.minute > 9 ? d2.minute : "0${d2.minute}"}:${d2.second > 9 ? d2.second : "0${d2.second}"}", overflow: TextOverflow.ellipsis,
+                          style: const TextStyle(fontSize: 15,
+                            color: Colors.grey, fontWeight: FontWeight.w500))))
+                    ])
+                  ))
+            ));
+          }
+        }
+        
+        WorkflowExecution? sel;
+        if (selectedReal != null) {
+          try {
+            sel = data[selected!]!.firstWhere((element) => element.startDate == selectedReal);
+            widget.selectedID = sel.id;
+          } catch(e) { /* */ }
+        }
+        menuSize = isInfo ? getMainWidth(context) : (menuSize > getMainWidth(context) / 2 ? getMainWidth(context) / 2 : menuSize);
+        Rect rect = Rect.fromCenter( center: MediaQuery.of(context).size.center(Offset.zero),
+                  width: selected != null ? menuSize : 0, height: (getMainHeight(context) - 50) > 0 ? (getMainHeight(context) - 50) : 0);
+        return Row( children: [
+          isInfo ? Container() : SizedBox( width: w, 
+            child: widget.isList ? SchedulerItemWidget(data: data, parent: this, focusedDay: getFocusedDay(), width: w) 
+            : SchedulerCalendarWidget(data: data, start: widget.start, 
+              end: widget.end, parent: this, focusedDay: getFocusedDay(),)
           ),
-          child: Container(
-                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
-                child: Row(children: [
-                  Container( width: 10, height: 10,
-                    decoration: BoxDecoration( 
-                      color: colors[(wf.status ?? 1) - 1],
-                      borderRadius: BorderRadius.circular(4),
-                    ),
-                  ),
-                  SizedBox( width: (menuSize - 140),
-                    child: Padding( 
-                      padding: const EdgeInsets.only(left: 20), 
-                      child: Text(wf.name?.toUpperCase() ?? "", overflow: TextOverflow.ellipsis,
-                      style: const TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.w500)),
-                    )),
-                  SizedBox(
-                    child: Padding( 
-                      padding: const EdgeInsets.only(left: 20), 
-                      child: Text("${d2.hour > 9 ? d2.hour : "0${d2.hour}"}:${d2.minute > 9 ? d2.minute : "0${d2.minute}"}", overflow: TextOverflow.ellipsis,
-                      style: const TextStyle(fontSize: 15,
-                        color: Colors.grey, fontWeight: FontWeight.w500))))
-                ])
-              ))
-        ));
-      }
-      
-    }
-    List<Log> logs = [];
-    String? selectedID;
-    if (selectedReal != null) {
-      try {
-        var sel = widget.data[selected!]!.firstWhere((element) => element.executionData == selectedReal);
-        selectedID = sel.id;
-        logs = sel.logs ?? [];
-      } catch(e) { /* */ }
-    }
-    menuSize = isInfo ? MediaQuery.of(context).size.width : (menuSize > MediaQuery.of(context).size.width / 2 ? MediaQuery.of(context).size.width / 2 : menuSize);
-    Rect rect = Rect.fromCenter( center: MediaQuery.of(context).size.center(Offset.zero),
-              width: selected != null ? menuSize : 0, height: (MediaQuery.of(context).size.height - HeaderConstants.height - 50) > 0 ? (MediaQuery.of(context).size.height - HeaderConstants.height - 50) : 0);
-    return Row( children: [
-      isInfo ? Container() : SizedBox( width: w, 
-        child: widget.isList ? SchedulerItemWidget(data: widget.data, parent: this, focusedDay: getFocusedDay(), width: w) 
-        : SchedulerCalendarWidget(data: widget.data, start: widget.start, 
-          end: widget.end, parent: this, focusedDay: getFocusedDay(),)
-      ),
-      fork.TransformableBox(
-        rect: rect, constraints: BoxConstraints(
-          maxWidth: isInfo ? MediaQuery.of(context).size.width : (selected != null ? MediaQuery.of(context).size.width / 2 : 0),
-          minWidth: selected != null ? 300 : 0),
-        handleTapSize: 1, handleTapLeftSize: 0, allowFlippingWhileResizing: false, draggable: false, flip: null,
-        resizeModeResolver: () => ResizeMode.freeform,
-        visibleHandles: const {HandlePosition.left},
-        enabledHandles: const {HandlePosition.left},
-        clampingRect: Offset.zero & MediaQuery.sizeOf(context),
-        handleAlignment: HandleAlignment.inside,
-        onChanged: (result, event) { setState(() { menuSize = result.rect.width; }); },
-        contentBuilder: (context, rect, flip) { return Container(
-        height: MediaQuery.of(context).size.height - HeaderConstants.height - 50,
-        width: isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0),
-        color: Colors.grey.shade300,
-        child: Column(
-          children: [
-            Row( children: [
-              InkWell( onTap: () => setState(() { widget.isDayPlanner = true; }),
-              child: Tooltip( message: "day planning", child:
-                Container( height: 50, width: (isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0)) / (selectedReal != null ? 2 : 1 ),
-                  alignment: Alignment.center,
-                  decoration: BoxDecoration( 
-                    color: widget.isDayPlanner ? Colors.grey : Colors.transparent,
-                    border: Border(bottom: BorderSide(color: Colors.grey.shade400), right: BorderSide(color: Colors.grey.shade400))),
-                  child: Icon(Icons.calendar_today_outlined, color: widget.isDayPlanner ? Colors.white : Colors.grey),
-                )
-              )),
-              InkWell( onTap: () => setState(() { widget.isDayPlanner = false; }),
-              child: Tooltip( message: "monitor task", child:
-                Container( height: 50, width: selectedReal == null ? 0 : (
-                  (isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0)) / 2),
-                  alignment: Alignment.center,
-                  decoration: BoxDecoration( 
-                    color: !widget.isDayPlanner ? Colors.grey : Colors.transparent,
-                    border: Border(bottom: BorderSide(color: Colors.grey.shade400))
-                  ),
-                  child: Icon(Icons.monitor_heart_outlined, size: 25,
-                    color: !widget.isDayPlanner ? Colors.white : Colors.grey),
-                )
-              ))
-            ]),
-            SizedBox( width: isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0), height: MediaQuery.of(context).size.height - HeaderConstants.height - (!widget.isDayPlanner && !widget.loading ?  150 : 100 ),
-              child: Stack( children: [ 
-                SingleChildScrollView( child: Column( 
-                  mainAxisAlignment: children.isEmpty || widget.loading ? MainAxisAlignment.center : MainAxisAlignment.start,
-                  children: [ 
-                  ...( widget.isDayPlanner ? children : ( selectedID != null ? [
-                    widget.loading ?  const SpinKitCircle(color: Colors.white,) : LogsWidget(items: logs, search: search, level: level)
-                  ] : [])),
-                  children.isEmpty ? Container( height: 100, alignment: Alignment.center, child: const Text("No event found", style: TextStyle(color: Colors.grey, fontSize: 20))) : Container()
-                ]), 
-              ) ])
+          !widget.isBox  ? Container() : fork.TransformableBox(
+            rect: rect, constraints: BoxConstraints(
+              maxWidth: isInfo ? getMainWidth(context) : (selected != null ? getMainWidth(context) / 2 : 0),
+              minWidth: selected != null ? 300 : 0),
+            handleTapSize: 1, handleTapLeftSize: 0, allowFlippingWhileResizing: false, draggable: false, flip: null,
+            resizeModeResolver: () => ResizeMode.freeform,
+            visibleHandles: const {HandlePosition.left},
+            enabledHandles: const {HandlePosition.left},
+            clampingRect: Offset.zero & MediaQuery.sizeOf(context),
+            handleAlignment: HandleAlignment.inside,
+            onChanged: (result, event) { setState(() { menuSize = result.rect.width; }); },
+            contentBuilder: (context, rect, flip) { return Container(
+            height: getMainHeight(context) - 50,
+            width: isInfo ? getMainWidth(context) : (selected != null ? menuSize : 0),
+            color: midColor,
+            child: Column(
+              children: [
+                Row( children: [
+                  InkWell( onTap: () => setState(() { 
+                    widget.isDayPlanner = true; 
+                  }),
+                  child: Tooltip( message: "day planning", child:
+                    Container( height: 50, width: (isInfo ? getMainWidth(context) : (selected != null ? menuSize : 0)) / (selectedReal != null ? 2 : 1 ),
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration( 
+                        color: widget.isDayPlanner ? Colors.grey : Colors.transparent,
+                        border: Border(bottom: BorderSide(color: Colors.grey.shade400), right: BorderSide(color: Colors.grey.shade400))),
+                      child: Icon(Icons.calendar_today_outlined, color: widget.isDayPlanner ? Colors.white : Colors.grey),
+                    )
+                  )),
+                  InkWell( onTap: () => setState(() { 
+                    widget.isDayPlanner = false;  
+
+                  }),
+                  child: Tooltip( message: "monitor task", child:
+                    Container( height: 50, width: selectedReal == null ? 0 : (
+                      (isInfo ? getMainWidth(context) : (selected != null ? menuSize : 0)) / 2),
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration( 
+                        color: !widget.isDayPlanner ? Colors.grey : Colors.transparent,
+                        border: Border(bottom: BorderSide(color: Colors.grey.shade400))
+                      ),
+                      child: Icon(Icons.monitor_heart_outlined, size: 25,
+                        color: !widget.isDayPlanner ? Colors.white : Colors.grey),
+                    )
+                  ))
+                ]),
+                SizedBox( width: isInfo ? getMainWidth(context) : (selected != null ? menuSize : 0), height: getMainHeight(context) - (!widget.isDayPlanner && !widget.loading ?  150 : 100 ),
+                  child: Stack( children: [ 
+                    SingleChildScrollView( child: Column( 
+                      mainAxisAlignment: children.isEmpty || widget.loading ? MainAxisAlignment.center : MainAxisAlignment.start,
+                      children: [ 
+                      ...( widget.isDayPlanner ? children : ( widget.selectedID != null ? [
+                        LogsWidget(exec: sel, search: search, level: level)
+                      ] : [])),
+                      children.isEmpty ? Container( height: 100, alignment: Alignment.center, child: const Text("No event found", style: TextStyle(color: Colors.grey, fontSize: 20))) : Container()
+                    ]), 
+                  ) ])
+                ),
+                !widget.isDayPlanner && !widget.loading ? 
+                      Row( children: [ 
+                        Container(
+                        width: 150,
+                        height: 50,
+                        decoration: BoxDecoration(
+                          border: Border(left: BorderSide(color: midColor)),
+                        ),
+                        child: DropdownButtonFormField(
+                          isExpanded: true,
+                          value: level,
+                          style: const TextStyle(fontSize: 12),
+                          hint: const Text("by level...", style: TextStyle(fontSize: 12)),
+                          decoration: InputDecoration( 
+                            filled: true,
+                            focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
+                                borderSide: BorderSide(color: lightColor, width: 0),
+                            ),
+                            fillColor: Colors.white,
+                            contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 30),
+                            enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
+                                borderSide: BorderSide(color: midColor, width: 0),
+                            ),
+                            border: OutlineInputBorder( borderRadius: BorderRadius.zero,
+                              borderSide: BorderSide(color: midColor, width: 0)),
+                          ),
+                          items: [
+                            DropdownMenuItem(value: "debug,warning,error,info", child: Row( children: [ Container( width: 10, height: 15, color: Colors.grey), Text("  all", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
+                            DropdownMenuItem(value: "debug", child: Row( children: [ Container( width: 10, height: 15, color: Colors.blue), Text("  debug", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
+                            DropdownMenuItem(value: "warning", child: Row( children: [ Container( width: 10, height: 15, color: Colors.orange), Text("  warning", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
+                            DropdownMenuItem(value: "error", child: Row( children: [ Container( width: 10, height: 15, color: redColor), Text("  error", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
+                            DropdownMenuItem(value: "info", child: Row( children: [ Container( width: 10, height: 15, color: Colors.green), Text("  info", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
+                          ], 
+                          onChanged: (value) {
+                            setState(() {
+                              level = value;
+                            });
+                          })),
+                          Container(
+                          width: menuSize - 150,
+                          height: 50,
+                          decoration: BoxDecoration(
+                            border: Border(left: BorderSide(color: midColor)),
+                          ),
+                          child: TextField(
+                          onChanged: (value) { setState(() {
+                            search = value;
+                          });},
+                          style: const TextStyle(fontSize: 12),
+                          decoration: const InputDecoration(
+                            hintText: "by logs...",
+                            fillColor: Colors.white,
+                            filled: true,
+                            contentPadding: EdgeInsets.symmetric(horizontal: 30),
+                            hintStyle: TextStyle(
+                              color: Colors.black,
+                              fontSize: 12,
+                              fontWeight: FontWeight.w300
+                            ),
+                            border: InputBorder.none
+                          )
+                        )) ]
+                      )  : Container( ),
+              ],
             ),
-            !widget.isDayPlanner && !widget.loading ? 
-                  Row( children: [ 
-                    Container(
-                    width: 150,
-                    height: 50,
-                    decoration: BoxDecoration(
-                      border: Border(left: BorderSide(color: Colors.grey.shade300)),
-                    ),
-                    child: DropdownButtonFormField(
-                      isExpanded: true,
-                      value: level,
-                      style: const TextStyle(fontSize: 12),
-                      hint: const Text("by level...", style: TextStyle(fontSize: 12)),
-                      decoration: InputDecoration( 
-                        filled: true,
-                        focusedBorder: const OutlineInputBorder( borderRadius: BorderRadius.zero,
-                            borderSide: BorderSide(color: Color.fromARGB(38, 166, 154, 1), width: 0),
-                        ),
-                        fillColor: Colors.white,
-                        contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 30),
-                        enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
-                            borderSide: BorderSide(color: Colors.grey.shade300, width: 0),
-                        ),
-                        border: OutlineInputBorder( borderRadius: BorderRadius.zero,
-                          borderSide: BorderSide(color: Colors.grey.shade300, width: 0)),
-                      ),
-                      items: [
-                        DropdownMenuItem(value: "debug,warning,error,info", child: Row( children: [ Container( width: 10, height: 15, color: Colors.grey), Text("  all", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
-                        DropdownMenuItem(value: "debug", child: Row( children: [ Container( width: 10, height: 15, color: Colors.blue), Text("  debug", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
-                        DropdownMenuItem(value: "warning", child: Row( children: [ Container( width: 10, height: 15, color: Colors.orange), Text("  warning", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
-                        DropdownMenuItem(value: "error", child: Row( children: [ Container( width: 10, height: 15, color: Colors.red), Text("  error", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
-                        DropdownMenuItem(value: "info", child: Row( children: [ Container( width: 10, height: 15, color: Colors.green), Text("  info", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
-                      ], 
-                      onChanged: (value) {
-                        setState(() {
-                          level = value;
-                        });
-                      })),
-                      Container(
-                      width: menuSize - 150,
-                      height: 50,
-                      decoration: BoxDecoration(
-                        border: Border(left: BorderSide(color: Colors.grey.shade300)),
-                      ),
-                      child: TextField(
-                      onChanged: (value) { setState(() {
-                        search = value;
-                      });},
-                      style: const TextStyle(fontSize: 12),
-                      decoration: const InputDecoration(
-                        hintText: "by logs...",
-                        fillColor: Colors.white,
-                        filled: true,
-                        contentPadding: EdgeInsets.symmetric(horizontal: 30),
-                        hintStyle: TextStyle(
-                          color: Colors.black,
-                          fontSize: 12,
-                          fontWeight: FontWeight.w300
-                        ),
-                        border: InputBorder.none
-                      )
-                    )) ]
-                  )  : Container( ),
-          ],
-        ),
-      ); })
-     ]);
+          ); })
+        ]);
+      });
   } 
 }

lib/widgets/sheduler_items/scheduler_calendar.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/widgets/sheduler_items/schedule.dart';
 import 'package:table_calendar/table_calendar.dart';
@@ -23,8 +24,8 @@ class SchedulerCalendarWidget extends StatefulWidget {
   @override SchedulerCalendarWidgetState createState() => SchedulerCalendarWidgetState();
 }
 class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
-  List<Color> colors = [Colors.blue, Colors.orange, Colors.red, Colors.green];
-  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS"];
+  List<Color> colors = [Colors.blue, Colors.orange, redColor, Colors.green, redColor];
+  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS", "MISSED"];
   bool isEvent(Map<String, List<WorkflowExecution>> data, DateTime day) {
     if (data[day.toIso8601String()] == null || data[day.toIso8601String()]!.isEmpty) { return false; }
     return true;
@@ -34,13 +35,13 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
       widget.focusedDay.isAfter(widget.end) ? widget.end : widget.focusedDay );
     return Container( 
           padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
-          height: MediaQuery.of(context).size.height - HeaderConstants.height - 50, 
+          height: getMainHeight(context) - 50, 
           child: TableCalendar<Event>(
           firstDay: widget.start,
           lastDay: widget.end,
           focusedDay: widget.focusedDay,
           calendarStyle: const CalendarStyle(
-            markersMaxCount: 3,
+            markersMaxCount: 2,
             markersAnchor: 0,
             markersAlignment: Alignment.topCenter
           ),
@@ -61,7 +62,7 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
                     padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2),
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(4),
-                      color: Colors.grey.shade300,
+                      color: midColor,
                     ),
                     child: const Text("...", style: TextStyle(color: Colors.white, fontSize: 10)),
                   )));
@@ -69,13 +70,13 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
                 }
                 children.add(InkWell( onTap: () => widget.parent!.setState(() {
                   selected = day.toIso8601String();
-                  selectedReal = ev.executionData;
+                  selectedReal = ev.startDate;
                   if (selectedReal  == null) {
                     widget.parent!.widget.isDayPlanner = true;
                   }
                 }),
                   child: Container(
-                  margin: const EdgeInsets.only(bottom: 2.5, top: 25),
+                  margin: const EdgeInsets.only(bottom: 2.5),
                 padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2),
                 decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(4),
@@ -87,16 +88,17 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
               return Column(mainAxisAlignment: MainAxisAlignment.center, children: children);
             },
             defaultBuilder: (context, date, events) =>  Container(
-              alignment: Alignment.center,
+              alignment: !isEvent(widget.data, date) ? Alignment.center : Alignment.topCenter,
               margin:const EdgeInsets.all(2.0),
               decoration: BoxDecoration(
-                border: Border.all(color: Colors.grey.shade300),
+                border: Border.all(color: midColor),
                 shape: BoxShape.rectangle,
               ),
               child: !isEvent(widget.data, date) ? Text(
                 date.day.toString(),
                 style: const TextStyle(color: Colors.grey),
-              ) : Column( children: [ Container( padding: const EdgeInsets.symmetric(vertical: 5), child: Text(
+              ) : Column( 
+                children: [ Container( padding: const EdgeInsets.symmetric(vertical: 5), child: Text(
                 date.day.toString(),
                 style: const TextStyle(color: Colors.grey),
               )) ])
@@ -105,8 +107,8 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
               alignment: Alignment.center,
               margin: const EdgeInsets.all(2.0),
               decoration: BoxDecoration(
-                border: Border.all(color: Colors.grey.shade300),
-                color: Colors.grey.shade300,
+                border: Border.all(color: midColor),
+                color: midColor,
                 shape: BoxShape.rectangle,
               ),
               child: Text(
@@ -115,10 +117,10 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
               ),
             ),
             selectedBuilder: (context, date, events) => Container(
-              alignment: Alignment.center,
+              alignment: !isEvent(widget.data, date) ? Alignment.center : Alignment.topCenter,
               margin: const EdgeInsets.all(2.0),
               decoration: BoxDecoration(
-                border: Border.all(color: const Color.fromRGBO(38, 166, 154, 1), width: 2),
+                border: Border.all(color: lightColor, width: 2),
                 shape: BoxShape.rectangle,
               ),
               child: !isEvent(widget.data, date) ? Text(
@@ -131,7 +133,7 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
             ),
             todayBuilder: (context, date, events) => Container(
               margin: const EdgeInsets.all(2.0),
-              alignment: Alignment.center,
+              alignment: !isEvent(widget.data, date) ? Alignment.center : Alignment.topCenter,
               decoration: BoxDecoration(
                 color: const Color.fromRGBO(38, 166, 154, .5),
                 shape: BoxShape.rectangle,
@@ -156,9 +158,9 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
           shouldFillViewport: true,
           eventLoader: (day) {
             return widget.data[day.toIso8601String()] != null ? widget.data[day.toIso8601String()]!.map((e) {
-              DateTime dateTime = DateTime.parse(e.executionData!);
-              return Event("[${dateTime.hour > 9 ? dateTime.hour : "0${dateTime.hour}"}:${dateTime.minute > 9 ? dateTime.minute : "0${dateTime.minute}"}] ${e.name}", 
-                 colors[(e.status ?? 1) - 1], e.executionData );
+              DateTime dateTime = DateTime.parse(e.startDate!);
+              return Event("[${dateTime.hour > 9 ? dateTime.hour : "0${dateTime.hour}"}:${dateTime.minute > 9 ? dateTime.minute : "0${dateTime.minute}"}:${dateTime.second > 9 ? dateTime.second : "0${dateTime.second}"}] ${e.name}", 
+                 colors[(e.status ?? 1) - 1], e.startDate );
             }).toList() : [];
           },
         ));
@@ -167,10 +169,10 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
 
 class Event {
   final String title;
-  String? executionData;
+  String? startDate;
   Color color;
 
-  Event(this.title, this.color, this.executionData);
+  Event(this.title, this.color, this.startDate);
 
   @override
   String toString() => title;

lib/widgets/sheduler_items/scheduler_item.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_box_transform/flutter_box_transform.dart';
-import 'package:oc_front/core/sections/header/header.dart';
+import 'package:oc_front/main.dart';
 import 'package:oc_front/models/workflow.dart';
 import 'package:oc_front/widgets/sheduler_items/schedule.dart';
 
@@ -17,33 +16,34 @@ class SchedulerItemWidget extends StatefulWidget {
   @override SchedulerItemWidgetState createState() => SchedulerItemWidgetState();
 }
 class SchedulerItemWidgetState extends State<SchedulerItemWidget> {
-  List<Color> colors = [Colors.blue, Colors.orange, Colors.red, Colors.green];
-  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS"];
+  List<Color> colors = [Colors.blue, Colors.orange, redColor, Colors.green, redColor];
+  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS", "MISSED"];
 
   @override Widget build(BuildContext context) {
     List<Widget> children = [];
           for (var element in widget.data.keys.toList()..sort((a, b) => DateTime.parse(a).compareTo(DateTime.parse(b)))) {
             List<Widget> widgets = [];
             for (var ev in widget.data[element] ?? ([] as List<WorkflowExecution>)) {
-              widget.keys[ev.executionData!] = GlobalKey();
-              var d2 = DateTime.parse(ev.executionData!).toLocal();
+              widget.keys[ev.startDate!] = GlobalKey();
+              var d2 = DateTime.parse(ev.startDate!).toLocal();
               DateTime? d3;
               try { d3 = DateTime.parse(ev.endDate!).toLocal();
               } catch (e) { /* */ }
               widgets.add(InkWell(
                 onTap: () => widget.parent?.setState(() { 
-                  selected = selected != element || ev.executionData != selectedReal  ? element : null;  
-                  selectedReal = selected == null ? null : ev.executionData; 
+                  selected = selected != element || ev.startDate != selectedReal  ? element : null;  
+                  widget.parent!.widget.selectedID = selected;
+                  selectedReal = selected == null ? null : ev.startDate; 
+                  print("there");
                   if (selectedReal  == null) {
                     widget.parent!.widget.isDayPlanner = true;
                   }
                 }),  
-                child: Container( key: widget.keys[ev.executionData!],
+                child: Container( key: widget.keys[ev.startDate!],
                 padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
                 decoration: BoxDecoration( 
-                  border: selectedReal == ev.executionData ? 
-                    Border.all(color: const Color.fromRGBO(38, 166, 154, 1), width: 2)
-                    : Border(top: BorderSide(color: Colors.grey.shade300)),
+                  border: selectedReal == ev.startDate ? 
+                    Border.all(color: lightColor, width: 2) : Border(top: BorderSide(color: midColor)),
                 ),
                 child: Row(children: [
                   Container( width: 110,
@@ -56,24 +56,24 @@ class SchedulerItemWidgetState extends State<SchedulerItemWidget> {
                       overflow: TextOverflow.ellipsis, textAlign: TextAlign.center,
                       style: const TextStyle( color: Colors.white)) 
                   ),
-                  SizedBox( width: (widget.width - 312) / 2,
+                  SizedBox( width: (widget.width - 330) / 2,
                     child: Padding( 
                       padding: const EdgeInsets.only(left: 20), 
-                      child: Text(ev.name?.toUpperCase() ?? "", overflow: TextOverflow.ellipsis,
+                      child: Text("${ev.name?.toUpperCase().split("EXECUTION")[0].replaceAll("_", "") ?? ""} EXECUTION", overflow: TextOverflow.ellipsis,
                       style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500)),
                     )),
-                  SizedBox( width: (widget.width - 312) / 2,
+                  SizedBox( width: (widget.width - 340) / 2,
                     child: Padding( 
-                      padding: const EdgeInsets.only(left: 20), 
+                      padding: const EdgeInsets.only(left: 17), 
                       child: Container( padding: const EdgeInsets.symmetric(horizontal: 20), 
-                      child: Text(d3 != null ? "killed at ${d3.day}/${d3.month}/${d3.year} ${d3.hour}:${d3.minute}"
+                      child: Text(d3 != null ? "killed at ${d3.day}/${d3.month}/${d3.year} ${d3.hour}:${d3.minute}:${d3.second}"
                       : "infinite run till process end", overflow: TextOverflow.ellipsis,
                       style: const TextStyle( fontSize: 12, color: Colors.grey, fontWeight: FontWeight.w500))),
                     )),
                   SizedBox(
                     child: Padding( 
-                      padding: const EdgeInsets.only(left: 20), 
-                      child: Text("${d2.hour > 9 ? d2.hour : "0${d2.hour}"}:${d2.minute > 9 ? d2.minute : "0${d2.minute}"}", overflow: TextOverflow.ellipsis,
+                      padding: const EdgeInsets.only(left: 17), 
+                      child: Text("${d2.hour > 9 ? d2.hour : "0${d2.hour}"}:${d2.minute > 9 ? d2.minute : "0${d2.minute}"}:${d2.second > 9 ? d2.second : "0${d2.second}"}", overflow: TextOverflow.ellipsis,
                       style: const TextStyle(fontSize: 25,
                         color: Colors.grey, fontWeight: FontWeight.w500))))
                 ])
@@ -81,12 +81,12 @@ class SchedulerItemWidgetState extends State<SchedulerItemWidget> {
             }
             var date = DateTime.parse(element);
             children.add(Container( 
-              decoration: const BoxDecoration( 
-                border: Border(bottom: BorderSide(color: Colors.black)),
+              decoration: BoxDecoration( 
+                border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
               ),
-              child: Column( children: [ExpansionTile(
+              child: Column( children: [ ExpansionTile(
               enabled: widget.enabled,
-              shape: const ContinuousRectangleBorder(),
+              shape: const ContinuousRectangleBorder(side : BorderSide(color: Colors.grey)),
               iconColor: Colors.grey,
               initiallyExpanded: true,
               title: SizedBox(
@@ -110,11 +110,15 @@ class SchedulerItemWidgetState extends State<SchedulerItemWidget> {
             }
           });
           return Container( 
+            decoration: BoxDecoration( 
+              color: children.isNotEmpty ? Colors.transparent : midColor,
+              border: Border( right: BorderSide( color: children.isNotEmpty ? Colors.transparent : Colors.white) ),
+            ),
             alignment: children.isNotEmpty ? Alignment.topLeft : Alignment.center,
-            color: children.isNotEmpty ? Colors.transparent : Colors.grey.shade300,
-            width: children.isNotEmpty ? MediaQuery.of(context).size.width : null,
-            height: MediaQuery.of(context).size.height - HeaderConstants.height - 50,
-            child: children.isNotEmpty ? SingleChildScrollView( child:  Column( children: children)) : const Text("NO DATA FOUND", style: TextStyle(color: Colors.grey, fontSize: 30))
+            width: children.isNotEmpty ? getMainWidth(context) : null,
+            height: getMainHeight(context) - 50,
+            child: children.isNotEmpty ? SingleChildScrollView( child:  Column( children: children)) : const Text(
+              "NO DATA FOUND", style: TextStyle(color: Colors.grey, fontSize: 30))
           ); 
   } 
 }

library/flutter_flow_chart/.dart_tool/version

@@ -1 +1 @@
-3.19.6
+3.24.3

library/flutter_flow_chart/lib/flutter_flow_chart.dart

@@ -5,5 +5,5 @@ export 'src/dashboard.dart';
 export 'src/elements/connection_params.dart';
 export 'src/elements/flow_element.dart';
 export 'src/flow_chart.dart';
-export 'src/ui/draw_arrow.dart' show ArrowParams, ArrowStyle, ArrowDirection;
+export 'src/ui/draw_arrow.dart' show ArrowParams, ArrowStyle, ArrowDirection, ArrowPainter;
 export 'src/ui/grid_background.dart' show GridBackgroundParams;

library/flutter_flow_chart/lib/src/dashboard.dart

@@ -23,19 +23,18 @@ typedef ConnectionListener = void Function(
 /// It notifies changes to [FlowChart]
 //
 class Dashboard extends ChangeNotifier {
-  bool shouldSave = true;
   GlobalKey<FlowChartSelectedMenuState> selectedMenuKey = GlobalKey<FlowChartSelectedMenuState>();
   GlobalKey<FlowChartLeftMenuState> selectedLeftMenuKey = GlobalKey<FlowChartLeftMenuState>();
   GlobalKey<FlowChartMenuState> chartMenuKey = GlobalKey<FlowChartMenuState>();
   GlobalKey<ChartWidgetState> chartKey = GlobalKey<ChartWidgetState>();
+  GlobalKey<FlowChartState> flutterChartKey = GlobalKey<FlowChartState>();
+  bool inDialog = false;
   List<Map<String, dynamic>> tempHistory = [];
   List<Map<String, dynamic>> history = [];
-  Map<String, dynamic> scheduler = {};
+
   Map<String, dynamic> info = {};
-  bool scheduleActive = false;
   String? id;
-  String name;
-  String defaultName = "";
+  String name = "";
   bool isMenu = true;
   bool isInfo = true;
   bool isOpened = false;
@@ -46,18 +45,34 @@ class Dashboard extends ChangeNotifier {
   double defaultDashWidth = 0;
   double defaultBackWidth = 10;
   double defaultForwardWidth = 10;
-  Future<void> Function(String? id)? save;
-  List<Widget> Function(FlowData? obj)? infoItemWidget;
+  Future<void> Function(String? id, BuildContext? context)? save;
+  List<Widget> Function(FlowData? obj, String id)? infoItemWidget;
+  Widget Function(ArrowPainter item)? infoLinkWidget;
   List<Widget> Function()? infoWidget;
   FlowData? Function(Map<String, dynamic> json)? transformToData;
   bool addChange = false;
-  ///
+  bool shouldSave = true;
+  Color dashColor = Colors.grey;
+  Color midDashColor = Colors.grey.shade300;
+
+  /// The dashboard position
+  /// This is used to move the dashboard on the screen
+  double widthOffset = 0;
+  double heightOffset = 0;
+  List<bool Function(Dashboard)> saveRules = [];
+  List<List<ArrowPainter> Function(Dashboard)> arrowStyleRules = [];
+  
+  String? error;
+  
   Dashboard({
     this.id,
+    this.widthOffset = 0,
+    this.heightOffset = 0,
     this.transformToData,
     required this.name,
     this.save,
-    this.scheduler = const {},
+    this.dashColor = Colors.grey,
+    this.midDashColor = Colors.blueGrey,
     Offset? handlerFeedbackOffset,
     this.isMenu = true,
     this.defaultDashSpace = 0,
@@ -76,8 +91,7 @@ class Dashboard extends ChangeNotifier {
     // This is a workaround to set the handlerFeedbackOffset
     // to improve the user experience on devices with touch screens
     // This will prevent the handler being covered by user's finger
-    defaultName = name;
-    if (loadedGraph != null) { deserialize(loadedGraph!); }
+    if (loadedGraph != null) { deserialize(loadedGraph!, false); }
     if (handlerFeedbackOffset != null) {
       this.handlerFeedbackOffset = handlerFeedbackOffset;
     } else {
@@ -94,7 +108,17 @@ class Dashboard extends ChangeNotifier {
     tempHistory = [];
     history = [];
   }
-
+  Future<void> saveDash(String? id, BuildContext? context) async {
+    for (var element in saveRules) {
+      if (!element(this)) {
+        shouldSave = false;
+        break;
+      }
+    }
+    if (save != null && shouldSave) {
+      save!(id, context);
+    }
+  }
   Future<void> Function(String cat)? load;
 
   ///
@@ -102,14 +126,12 @@ class Dashboard extends ChangeNotifier {
     final d = Dashboard(
       name: map['name'] as String,
       isMenu: map['isMenu'] as bool,
-      scheduler: map['schedule'] as Map<String, String>? ?? {},
       defaultDashSpace: map['defaultDashSpace'] as double? ?? 0,
       defaultDashWidth: map['defaultDashWidth'] as double? ?? 0,
       defaultArrowDirection: ArrowDirection.values[
           map['defaultArrowDirection'] as int? ?? 0],
       defaultArrowStyle: ArrowStyle.values[map['arrowStyle'] as int? ?? 0],
     );
-    d..scheduleActive = map['schedule_active'] as bool? ?? false;
     d..arrows = List<ArrowPainter>.from(
         (map['arrows'] as List<dynamic>).map<ArrowPainter>(
           (x) => ArrowPainter.fromMap(x as Map<String, dynamic>),
@@ -124,7 +146,9 @@ class Dashboard extends ChangeNotifier {
         map['dashboardSizeWidth'] as double? ?? 0,
         map['dashboardSizeHeight'] as double? ?? 0,
       );
-
+    for (var f in d.arrowStyleRules) {
+      d.arrows = f(d);
+    }
     if (map['gridBackgroundParams'] != null) {
       d.gridBackgroundParams = GridBackgroundParams.fromMap(
         map['gridBackgroundParams'] as Map<String, dynamic>,
@@ -139,18 +163,20 @@ class Dashboard extends ChangeNotifier {
   }
 
   void copyFromMap(Map<String, dynamic> map) {
-    scheduleActive = map['schedule_active'] as bool? ?? false;
-    scheduler = map['schedule'] as Map<String, String>? ?? {};
+    debugPrintStack(stackTrace: StackTrace.current, label: 'my_label', maxFrames: 5);
     defaultArrowStyle = ArrowStyle.values[map['arrowStyle'] as int? ?? 0];
     defaultDashSpace = map['defaultDashSpace'] as double? ?? 0;
     defaultDashWidth = map['defaultDashWidth'] as double? ?? 0;
     defaultArrowDirection = ArrowDirection.values[
           map['defaultArrowDirection'] as int? ?? 0];
     arrows = List<ArrowPainter>.from(
-        (map['arrows'] as List<dynamic>).map<ArrowPainter>(
+          (map['arrows'] as List<dynamic>).map<ArrowPainter>(
           (x) => ArrowPainter.fromMap(x as Map<String, dynamic>),
         ),
       );
+    for (var f in arrowStyleRules) {
+      arrows = f(this);
+    }
     elements = List<FlowElement>.from(
         (map['elements'] as List<dynamic>).map<FlowElement>(
           (x) => FlowElement.fromMap(this, x as Map<String, dynamic>),
@@ -177,8 +203,7 @@ class Dashboard extends ChangeNotifier {
   
   /// The current elements in the dashboard
   List<FlowElement> elements;
-  List<FlowElement> get elementSelected =>
-      elements.where((element) => element.isSelected).toList();
+  List<FlowElement> get elementSelected => elements.where((element) => element.isSelected).toList();
 
   Offset _dashboardPosition;
 
@@ -204,15 +229,11 @@ class Dashboard extends ChangeNotifier {
 
   ///
   bool blockDefaultZoomGestures;
-
-  /// minimum zoom factor allowed
-  /// default is 0.25
-  /// setting it to 1 will prevent zooming out
-  /// setting it to 0 will remove the limit
   double minimumZoomFactor;
-
   final List<ConnectionListener> _connectionListeners = [];
 
+
+
   Map<String, dynamic> serialize() {
     Map<String, dynamic> d = {};
     Map<String, dynamic> graph = {};
@@ -221,30 +242,32 @@ class Dashboard extends ChangeNotifier {
     for(var el in elements) {
       graph['elements'][el.id] = el.serialize();
     }
+    for (var f in arrowStyleRules) {
+      arrows = f(this);
+    }
     graph['arrows'] = arrows.map((e) => e.serialize()).toList();
     d["id"]=id;
     d["name"]=name;
     d["graph"]=graph;
-    d["schedule"]=scheduler;
-    d["schedule_active"]=scheduleActive;
     return d;
   }
 
-  void deserialize(Map<String, dynamic> graph) {
+  void deserialize(Map<String, dynamic> graph, bool noHistory) {
     elements = [];
     arrows = [];
     info["shared"] = graph["shared"] ?? [];
-    scheduler = graph['schedule'] ?? {};
-    scheduleActive = graph['schedule_active'] ?? false;
     setZoomFactor(graph["graph"]?["zoom"] ?? 1.0);
     for(var el in graph['graph']?['elements'] ?? []) {
       List<ConnectionParams> nexts = [];
       var flow = FlowElement.deserialize(this, el);
       for(var ar in graph['graph']['arrows']) {
+        
         if (ar['from']['id'] != flow.id) { continue; }
         nexts.add(ConnectionParams(
           srcElementId: ar['from']['id'],
           destElementId: ar['to']['id'],
+          infos: ar['infos'],
+          env: ar['env'],
           arrowParams: ArrowParams.fromMap(ar["params"]),
           pivots: [
             Pivot(Offset(ar['from']['x'], (ar['from']['y']))), 
@@ -259,16 +282,35 @@ class Dashboard extends ChangeNotifier {
           arr.add(build);
         }
       }
-      try {
-        FlowData data = arr.firstWhere((element) => element.getID() == flow.element?.getID());
+      if (flow.element != null) {
         flow.kind = ElementKind.widget;
-        flow.widget = chartKey.currentState?.widget.flowChart.widget.itemWidget(data);
-      } catch (e) { print(e); }
+        flow.widget = chartKey.currentState?.widget.flowChart.widget.itemWidget(flow.element!);
+      }
       elements.add(flow);
     }
     selectedMenuKey.currentState?.setState(() { });
     chartMenuKey.currentState?.setState(() { });
-    addToHistory();
+    if (!noHistory) {
+      addToHistory();
+    }
+  }
+
+
+  void applyInfos(Map<String, List<dynamic>> elInfos, Map<String, dynamic> graph) {
+    for(var id in elInfos.keys) {
+      try {
+        var element = elements.firstWhere((element) => element.id == id);
+        element.element?.addEnv(elInfos[id] ?? []);
+      } catch (e) { /* */ }
+    }
+    for(var ar in graph['graph']['arrows']) {
+        var arr = arrows.where((a) => a.fromID == ar['from']['id'] && a.toID == ar['to']['id']).toList();
+        for (var a in arr) {
+          a.infos = ar['infos'];
+          a.env = ar['env'];
+        }
+      }
+    selectedLeftMenuKey.currentState?.setState(() { });
   }
 
   /// add listener called when a new connection is created
@@ -293,26 +335,31 @@ class Dashboard extends ChangeNotifier {
     handlerFeedbackOffset = offset;
   }
 
-  void addArrows(ArrowPainter f) {
+  List<ArrowPainter> getArrowByElementID(String id, bool isinput) {
+    return arrows.where((element) => 
+      (isinput && element.toID.contains(id)) || (!isinput && element.fromID.contains(id))).toList();
+  }
+
+  void addArrows(ArrowPainter f, BuildContext? context) {
     arrows.add(f);
+    for (var f in arrowStyleRules) {
+      arrows = f(this);
+    }
     addChange = true;
-    if (save != null) {
-      save!(id);
-    }
+    saveDash(id, context);
   }
 
-  void removeArrows(bool Function(ArrowPainter) f) {
+  void removeArrows(bool Function(ArrowPainter) f, BuildContext? context) {
     arrows.removeWhere((element) => f(element));
-    if (save != null) {
-      save!(id);
+    for (var f in arrowStyleRules) {
+      arrows = f(this);
     }
+    saveDash(id, context);
   }
 
-  void removeElements(bool Function(FlowElement<FlowData>) f) {
+  void removeElements(bool Function(FlowElement<FlowData>) f, BuildContext? context) {
     elements.removeWhere((element) => f(element));
-    if (save != null) {
-      save!(id);
-    }
+    saveDash(id, context);
   }
 
   void clear() {
@@ -320,9 +367,7 @@ class Dashboard extends ChangeNotifier {
     arrows.clear();
     tempHistory = [];
     history = [];
-    scheduler = {};
     info = {};
-    scheduleActive = false;
     notifyListeners();
   }
   bool noHistory = false;
@@ -336,14 +381,16 @@ class Dashboard extends ChangeNotifier {
     if (tempHistory.length >= 50) { tempHistory.removeAt(0); }
     tempHistory.add(toMap());
     history = tempHistory.map((e) => e).toList();
-    chartMenuKey.currentState?.setState(() { });
+    Future.delayed(Duration(seconds: 1), () {
+      chartMenuKey.currentState?.setState(() { });
+    });
   }
   bool isBack = false;
   void back() { 
     if (canBack()) {
       noHistory = true;
       tempHistory.removeLast(); 
-      if (tempHistory.length > 0) {
+      if (tempHistory.isNotEmpty) {
         copyFromMap(tempHistory.last);
       }
       chartKey.currentState?.setState(() { });
@@ -374,30 +421,29 @@ class Dashboard extends ChangeNotifier {
     FlowElement element,
     bool resizable, {
     bool notify = true,
+    BuildContext? context
   }) {
     element.isResizing = resizable;
-    if (save != null) {
-      save!(id);
-    }
+    saveDash(id, context);
     if (notify) notifyListeners();
   }
 
   FlowElement? getElement(String id, {bool notify = true}) {
-    try { return elements.firstWhere((element) => element.id == id); }
+    try { return elements.firstWhere((element) {
+      return id.contains(element.id);
+    }); }
     catch (e) { return null; }
   }
 
   /// add a [FlowElement] to the dashboard
-  void addElement(FlowElement element, {bool notify = true}) {
+  void addElement(FlowElement element, BuildContext? context, {bool notify = true}) {
     if (element.id.isEmpty) {
       element.id = const Uuid().v4();
     }
     element.setScale(1, gridBackgroundParams.scale);
     elements.add(element);
     addChange = true;
-    if (save != null) {
-      save!(id);
-    }
+    saveDash(id, context);
     if (notify) {
       notifyListeners();
     }
@@ -517,15 +563,16 @@ class Dashboard extends ChangeNotifier {
   }
 
   /// remove all elements
-  void removeAllElements({bool notify = true}) {
+  void removeAllElements(BuildContext? context, {bool notify = true}) {
     elements.clear();
     if (notify) notifyListeners();
+    saveDash(id, context);
   }
 
   /// remove the [handler] connection of [element]
   void removeElementConnection(
     FlowElement element,
-    Handler handler, {
+    Handler handler, BuildContext? context, {
     bool notify = true,
   }) {
     Alignment alignment;
@@ -561,8 +608,8 @@ class Dashboard extends ChangeNotifier {
         );
       }
     }
-
     if (notify) notifyListeners();
+    saveDash(id, context);
   }
 
   /// dissect an element connection
@@ -652,18 +699,20 @@ class Dashboard extends ChangeNotifier {
   }
 
   /// remove all the connection from the [element]
-  void removeElementConnections(FlowElement element, {bool notify = true}) {
+  void removeElementConnections(FlowElement element, BuildContext? context, {bool notify = true}) {
     element.next.clear();
     if (notify) notifyListeners();
+    saveDash(id, context);
   }
 
   /// remove all the elements with [id] from the dashboard
-  void removeElementById(String id, {bool notify = true}) {
+  void removeElementById(String id, BuildContext? context, {bool notify = true}) {
     // remove the element
     var elementId = '';
     elements.removeWhere((element) {
       if (element.id == id) {
         elementId = element.id;
+        arrows.removeWhere((a) => a.fromID.contains(elementId) || a.toID.contains(elementId));
       }
       return element.id == id;
     });
@@ -675,19 +724,23 @@ class Dashboard extends ChangeNotifier {
       });
     }
     if (notify) notifyListeners();
+    saveDash(id, context);
   }
 
   /// remove element
   /// return true if it has been removed
-  bool removeElement(FlowElement element, {bool notify = true}) {
+  bool removeElement(FlowElement element, BuildContext? context, {bool notify = true}) {
     // remove the element
     var found = false;
     final elementId = element.id;
     elements.removeWhere((e) {
-      if (e.id == element.id) found = true;
+      if (e.id == element.id) {
+        found = true;
+
+      } 
       return e.id == element.id;
     });
-
+    arrows.removeWhere( (e) => e.fromID.contains(elementId) || e.toID.contains(elementId));
     // remove all connections to the element
     for (final e in elements) {
       e.next.removeWhere(
@@ -695,6 +748,7 @@ class Dashboard extends ChangeNotifier {
       );
     }
     if (notify) notifyListeners();
+    saveDash(id, context);
     return found;
   }
 

library/flutter_flow_chart/lib/src/elements/connection_params.dart

@@ -11,14 +11,19 @@ class ConnectionParams {
     required this.srcElementId,
     required this.destElementId,
     required this.arrowParams,
+    this.env = const [],
+    this.infos = const [],
     List<Pivot>? pivots,
   }) : pivots = pivots ?? [];
-
+  List<dynamic> env = [];
+  List<dynamic> infos = [];
   ///
   factory ConnectionParams.fromMap(Map<String, dynamic> map) {
     return ConnectionParams(
       srcElementId: map['srcElementId'] as String,
       destElementId: map['destElementId'] as String,
+      infos: map['infos'] as List<dynamic>? ?? [],
+      env: map['env'] as List<dynamic>? ?? [],
       arrowParams: ArrowParams.fromMap(map['arrowParams'] as Map<String, dynamic>),
       pivots: (map['pivots'] as List?)
               ?.map<Pivot>(
@@ -37,7 +42,6 @@ class ConnectionParams {
   final String destElementId;
   final String srcElementId;
 
-
   /// Arrow parameters.
   final ArrowParams arrowParams;
 

library/flutter_flow_chart/lib/src/elements/flow_element.dart

@@ -68,7 +68,7 @@ class FlowElement<T extends FlowData> extends ChangeNotifier {
   FlowElement({
     required this.dashboard,
     Offset position = Offset.zero,
-    String? id,
+    String? id,  
     this.element,
     this.size = Size.zero,
     this.text = '',
@@ -107,7 +107,6 @@ class FlowElement<T extends FlowData> extends ChangeNotifier {
     return false;
   }
   factory FlowElement.fromMap(Dashboard dashboard, Map<String, dynamic> map) {
-    print("FlowElement.fromMap ${map}");
     final e = FlowElement<T>(
       element: (dashboard.transformToData != null
           ? dashboard.transformToData!(map['element'] ?? {})
@@ -375,6 +374,7 @@ class FlowElement<T extends FlowData> extends ChangeNotifier {
     graphElement['width'] = size.width;
     graphElement['height'] = size.height;
     graphElement['element']=element?.serialize();
+    graphElement['next'] = next.map((x) => x.toMap()).toList();
     return graphElement;
   }
 
@@ -386,6 +386,13 @@ class FlowElement<T extends FlowData> extends ChangeNotifier {
         position: Offset(double.parse("${map['x']}"), double.parse("${map['y']}")),
         size: Size(double.parse("${map['width']}"), double.parse("${map['height']}")),
         element: (dashboard.transformToData != null ? dashboard.transformToData!(map['element'] ?? {}) : null) as T?,
+        /*next: map['next'] != null && (map['next'] as List).isNotEmpty
+          ? List<ConnectionParams>.from(
+              (map['next'] as List<dynamic>).map<dynamic>(
+                (x) => ConnectionParams.fromMap(x as Map<String, dynamic>),
+              ),
+            )
+          : []*/
       );
     }
 }

library/flutter_flow_chart/lib/src/flow_chart.dart

@@ -1,27 +1,27 @@
 // ignore: directives_ordering
-import 'dart:developer';
-
+import 'package:uuid/uuid.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/foundation.dart';
-import 'package:flutter_flow_chart/flutter_flow_chart.dart';
-import 'package:flutter_flow_chart/src/flow_chart_left_menu.dart';
-import 'package:flutter_flow_chart/src/flow_chart_menu.dart';
-import 'package:flutter_flow_chart/src/flow_chart_selected_menu.dart';
 import 'package:flutter_flow_chart/src/ui/draw_arrow.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
+import 'package:flutter_flow_chart/src/flow_chart_menu.dart';
 import 'package:flutter_flow_chart/src/ui/element_widget.dart';
 import 'package:flutter_flow_chart/src/ui/grid_background.dart';
 import 'package:flutter_flow_chart/src/ui/segment_handler.dart';
-import 'package:uuid/uuid.dart';
+import 'package:flutter_flow_chart/src/flow_chart_left_menu.dart';
+import 'package:flutter_flow_chart/src/flow_chart_selected_menu.dart';
+
 
 /// Main flow chart Widget.
 /// It displays the background grid, all the elements and connection lines
 abstract class FlowData {
   String getID();
   String getName();
+  String getType();
   double? getWidth();
   double? getHeight();
-
+  void addEnv(List<dynamic> infos);
   Map<String, dynamic> serialize();
   FlowData deserialize(Map<String, dynamic> data);
 }
@@ -58,6 +58,8 @@ class FlowChart<T extends FlowData> extends StatefulWidget {
     this.menuWidget,
     this.current,
     this.menuExtension,
+    this.itemLeftBottomBadges,
+    this.itemrightTopBadges,
   }) {}
   final String? current;
   final List<String> categories;
@@ -72,6 +74,8 @@ class FlowChart<T extends FlowData> extends StatefulWidget {
   double zoom = 1;
 
   final Widget Function(T data) itemWidget;
+  final Widget? Function(T data)? itemLeftBottomBadges;
+  final Widget? Function(T data)? itemrightTopBadges;
   final Widget Function(T data)? itemWidgetTooltip;
   final List<T> Function(String cat) draggableItemBuilder;
 
@@ -272,7 +276,7 @@ class HoverMenuState extends State<HoverMenu> {
     return OverlayEntry(
       maintainState: true,
       builder: (context) => Positioned(
-        left: offset.dx,
+        left: offset.dx - 300,
         top: offset.dy + size.height,
         width: 300,
         child: TextButton(
@@ -292,16 +296,21 @@ class HoverMenuState extends State<HoverMenu> {
   }
 }
 
-var node = FocusNode();
 class FlowChartState<T extends FlowData> extends State<FlowChart> {
-
-
+  var node = FocusNode();
+  bool isCtrl = false;
   @override
   void initState() {
     node.requestFocus();
     super.initState();
   }
 
+  @override
+  void dispose() {
+    node.requestFocus();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     if (!widget.dashboard.isOpened && widget.onDashboardAlertOpened != null ) {
@@ -310,22 +319,26 @@ class FlowChartState<T extends FlowData> extends State<FlowChart> {
         Future.delayed(Duration(milliseconds: 100), () => widget.dashboard.load!(widget.dashboard.id!) );    
       } else {
         Future.delayed(Duration(milliseconds: 100), () {
-          showDialog(
-          barrierDismissible: false,
-          context: context, builder: (context) {
-          return AlertDialog(
-            titlePadding: EdgeInsets.zero,
-            insetPadding: EdgeInsets.zero,
-            backgroundColor: Colors.white,
-            shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
-            title: widget.onDashboardAlertOpened!(context, widget.dashboard));
-          
-        }); });
+          if (!widget.dashboard.inDialog) {
+            widget.dashboard.inDialog = true;
+            showDialog(
+              barrierDismissible: false,
+              context: context, builder: (context) {
+              return AlertDialog(
+                titlePadding: EdgeInsets.zero,
+                insetPadding: EdgeInsets.zero,
+                backgroundColor: Colors.white,
+                shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
+                title: widget.onDashboardAlertOpened!(context, widget.dashboard));
+              
+            });
+          }
+        });
       }
     } else {
       widget.dashboard.isOpened  = true;
     }
-    /// get dashboard position after first frame is drawn
+    /// get dashboard positi(event is KeyDownEvent || event is KeyRepeatEvent) &&on after first frame is drawn
     WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
       if (mounted) {
         final object = context.findRenderObject() as RenderBox?;
@@ -342,41 +355,18 @@ class FlowChartState<T extends FlowData> extends State<FlowChart> {
     if (kIsWeb) BrowserContextMenu.disableContextMenu();
     return KeyboardListener(
       focusNode: node,
+      autofocus: true,
       onKeyEvent: (event) {
         bool change = false;
-        if ((event is KeyDownEvent || event is KeyRepeatEvent) && event.logicalKey == LogicalKeyboardKey.arrowUp) {
-          change = true;
-          for (var el in widget.dashboard.elements) {
-            if (el.isSelected) {
-              el.position = Offset(el.position.dx, el.position.dy - 10);
-            }
-          }
+        if (event.logicalKey == LogicalKeyboardKey.controlLeft) {
+          isCtrl = event is KeyDownEvent || event is KeyRepeatEvent;
         }
-        if ((event is KeyDownEvent || event is KeyRepeatEvent) && event.logicalKey == LogicalKeyboardKey.arrowDown) {
-          change = true;
-          for (var el in widget.dashboard.elements) {
-            if (el.isSelected) {
-              el.position = Offset(el.position.dx, el.position.dy + 10);
-            }
-          }
+        /*if ((event is KeyDownEvent || event.logicalKey == LogicalKeyboardKey.keyZ) && isCtrl) {
+          widget.dashboard.back();
         }
-        if ((event is KeyDownEvent || event is KeyRepeatEvent) && event.logicalKey == LogicalKeyboardKey.arrowLeft) {
-          change = true;
-          for (var el in widget.dashboard.elements) {
-            if (el.isSelected) {
-              el.position = Offset(el.position.dx - 10, el.position.dy);
-            }
-          }
-        }
-        if ((event is KeyDownEvent || event is KeyRepeatEvent) && event.logicalKey == LogicalKeyboardKey.arrowRight) {
-          change = true;
-          for (var el in widget.dashboard.elements) {
-            if (el.isSelected) {
-              el.position = Offset(el.position.dx + 10, el.position.dy);
-            }
-          }
-        }
-
+        if ((event is KeyDownEvent || event.logicalKey == LogicalKeyboardKey.keyY) && isCtrl) {
+          widget.dashboard.forward();
+        }*/
         if (event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.add) {
           change = true;
           for (var el in widget.dashboard.elementSelected) {
@@ -391,22 +381,28 @@ class FlowChartState<T extends FlowData> extends State<FlowChart> {
                 kind: el.kind,
                 handlers: el.handlers,
                 handlerSize: el.handlerSize,
-              ));
+              ), context);
             }
         }
         if (event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.delete) {
           change = true;
-          widget.dashboard.removeElements( (el) => el.isSelected );
+          widget.dashboard.removeElements((element) {
+              if (element.isSelected) {
+                widget.dashboard.arrows.removeWhere( (e) => e.toID.contains(element.id) || e.fromID.contains(element.id));
+              }
+            return element.isSelected;
+          }, context);
           for (var arrow in widget.dashboard.arrowsSelected) {
               for (var el in widget.dashboard.elements.where((element) => element.id == arrow.fromID.split("_")[0])) {
                 el.next.removeAt(int.parse(arrow.fromID.split("_")[1]));
               }
           }
-          widget.dashboard.removeArrows( (el) => el.isSelected );
+          widget.dashboard.removeArrows( (el) => el.isSelected, context );
         }
         if (change) {
           DrawingArrow.instance.notifyListeners();
           widget.dashboard.chartKey.currentState?.setState(() {  });
+          node.requestFocus();
         }
       }, 
       child: ClipRect(
@@ -449,7 +445,9 @@ class FlowChartState<T extends FlowData> extends State<FlowChart> {
               String newID = const Uuid().v4();
               double ratio = 1;
               if (e.getWidth() != null && e.getHeight() != null) {
-                ratio = (e.getHeight()! / (e.getWidth()!));
+                var h = e.getHeight()! < e.getWidth()! ? e.getHeight()! + 20 : e.getHeight()!;
+                var w = e.getWidth()! < e.getHeight()! ? e.getWidth()! + 20 : e.getWidth()!;
+                ratio = (h / w);
               }
               FlowElement<T> el = FlowElement<T>(
                     dashboard: widget.dashboard,
@@ -468,29 +466,26 @@ class FlowChartState<T extends FlowData> extends State<FlowChart> {
                       Handler.rightCenter,
                     ],
                   );
-              widget.dashboard.addElement(el);
+              widget.dashboard.addElement(el, context);
             },
           ))]
         ),
-        widget.dashboard.isMenu ? Positioned(top: 50, child: FlowChartLeftMenu<T>(
-          key: widget.dashboard.selectedLeftMenuKey,
+        widget.dashboard.isMenu ? Positioned(top: 50, child: FlowChartSelectedMenu(
+          key: widget.dashboard.selectedMenuKey,
           dashboard: widget.dashboard, 
-          menuExtension: widget.menuExtension,
-          categories: widget.categories,
-          height: widget.height,
-          innerMenuWidth: widget.innerMenuWidth,
-          itemWidth: widget.itemWidth,
-          draggableItemBuilder: widget.draggableItemBuilder as List<T> Function(String cat),
-          getDraggable: getDraggable,
-        ) )
-         : Container(),
+          height: widget.height - 50) ) : Container(),
         widget.dashboard.isInfo ? Positioned(top: 50, right: 0, child: 
-                  FlowChartSelectedMenu(
-                    key: widget.dashboard.selectedMenuKey,
-                    dashboard: widget.dashboard, 
-                    height: MediaQuery.of(context).size.height - 100
-                  )
-                ) : Container()
+          FlowChartLeftMenu<T>(
+            key: widget.dashboard.selectedLeftMenuKey,
+            dashboard: widget.dashboard, 
+            menuExtension: widget.menuExtension,
+            categories: widget.categories,
+            height: widget.height,
+            innerMenuWidth: widget.innerMenuWidth,
+            itemWidth: widget.itemWidth,
+            draggableItemBuilder: widget.draggableItemBuilder as List<T> Function(String cat),
+            getDraggable: getDraggable,
+          )) : Container()
       ])
     ));
   }
@@ -507,19 +502,16 @@ class FlowChartState<T extends FlowData> extends State<FlowChart> {
         onDragEnd: (d) => node.requestFocus(),
         childWhenDragging: Opacity(opacity: .5, 
         child: Padding( padding: const EdgeInsets.all(10), 
-          child: Container( child: widget.itemWidget(e), 
-            constraints: BoxConstraints(maxHeight: realSize - 20, maxWidth: realSize - 20), ))),
-        feedback: Container( constraints: BoxConstraints(maxHeight: realSize, maxWidth: realSize),
+          child: Container( alignment: Alignment.center,
+            constraints: BoxConstraints(maxHeight: realSize - 10, maxWidth: realSize - 10), child: widget.itemWidget(e), ))),
+        feedback: Container( alignment: Alignment.center, constraints: BoxConstraints(maxHeight: realSize, maxWidth: realSize),
           child: widget.itemWidget(e) ),
         child: InkWell( mouseCursor: SystemMouseCursors.grab, child: Padding( padding: const EdgeInsets.all(10), 
-        child: widget.itemWidgetTooltip != null ? HoverMenu( key: hoverKey, width: 400, title: Container( 
-          constraints: BoxConstraints( maxHeight: realSize - 20, maxWidth: realSize - 20),
-          child: widget.itemWidget(e) ),
-          items: [
-            Container(child: widget.itemWidgetTooltip!(e)),
-          ]
-        ) : Container( 
-          constraints: BoxConstraints(maxHeight: realSize - 20, maxWidth: realSize - 20), child: widget.itemWidget(e) 
+        child: widget.itemWidgetTooltip != null ? HoverMenu( key: hoverKey, width: 400, title: Container(  alignment: Alignment.center,
+          constraints: BoxConstraints( maxHeight: realSize - 10, maxWidth: realSize - 10), child: widget.itemWidget(e) ),
+          items: [ Container(child: widget.itemWidgetTooltip!(e))  ]
+        ) : Container( alignment: Alignment.center,
+          constraints: BoxConstraints(maxHeight: realSize - 10, maxWidth: realSize - 10), child: widget.itemWidget(e) 
         )
       ) )));
     }
@@ -563,6 +555,8 @@ class _DrawingArrowWidgetState extends State<DrawingArrowWidget> {
       painter: ArrowPainter(
         fromID: DrawingArrow.instance.fromID,
         toID: "",
+        env: DrawingArrow.instance.env,
+        infos: DrawingArrow.instance.infos,
         params: DrawingArrow.instance.params,
         from: DrawingArrow.instance.from,
         to: DrawingArrow.instance.to,
@@ -822,6 +816,10 @@ class ChartWidgetState<T extends FlowData> extends State<ChartWidget> {
                   for (int i = 0; i < widget.dashboard.elements.length; i++)
                     ElementWidget<T>(
                       key: UniqueKey(),
+                      bottomLeftBadge: widget.flowChart.widget.itemLeftBottomBadges != null ? 
+                        widget.flowChart.widget.itemLeftBottomBadges!(widget.dashboard.elements[i].element as T) : null,
+                      topRightBadge: widget.flowChart.widget.itemrightTopBadges != null ? 
+                        widget.flowChart.widget.itemrightTopBadges!(widget.dashboard.elements[i].element as T) : null,
                       dashboard: widget.dashboard,
                       element: widget.dashboard.elements.elementAt(i),
                       onElementPressed: widget.onElementPressed == null
@@ -889,9 +887,7 @@ class ChartWidgetState<T extends FlowData> extends State<ChartWidget> {
                     ),
                   // Draw arrows        
                   for (int i = 0; i < widget.dashboard.elements.length; i++)
-                    
                     for (int n = 0; n < widget.dashboard.elements[i].next.length; n++) 
-                      
                       DrawArrow(
                         flow: this,
                         key: UniqueKey(),
@@ -900,6 +896,8 @@ class ChartWidgetState<T extends FlowData> extends State<ChartWidget> {
                         destElement: widget.dashboard.elements[widget.dashboard.findElementIndexById(
                           widget.dashboard.elements[i].next[n].destElementId,
                         )],
+                        env: widget.dashboard.elements[i].next[n].env,
+                        infos: widget.dashboard.elements[i].next[n].infos,
                         arrowParams: widget.dashboard.elements[i].next[n].arrowParams,
                         pivots: widget.dashboard.elements[i].next[n].pivots,
                       ),
@@ -922,7 +920,7 @@ class ChartWidgetState<T extends FlowData> extends State<ChartWidget> {
                     chart: this, 
                     menuExtension: widget.menuWidget != null ?  widget.menuWidget!(widget.dashboard) : null,
                     dashboard: widget.dashboard,
-                    width: MediaQuery.of(context).size.width)
+                    width: widget.flowChart.widget.width)
                 ), 
               ],
     );

library/flutter_flow_chart/lib/src/flow_chart_left_menu.dart

@@ -36,8 +36,15 @@ class FlowChartLeftMenuState<T extends FlowData> extends State<FlowChartLeftMenu
           child: Stack( children: [
             widget.dashboard.isMenu && widget.innerMenuWidth < 200 ? Wrap( alignment: WrapAlignment.start, 
               children: widget.getDraggable(items))
-          : ExpansionTile(
-            shape: const ContinuousRectangleBorder(side: BorderSide(color: Colors.transparent)),
+          : Theme(
+            data: Theme.of(context).copyWith(dividerColor: widget.dashboard.midDashColor),
+                  child: ExpansionTile(
+            collapsedShape: RoundedRectangleBorder(
+                side: BorderSide.none,
+            ),
+            shape: RoundedRectangleBorder(
+              side: BorderSide.none,
+            ),
             initiallyExpanded: true,
             title: SizedBox( 
               child : Row( children: [
@@ -57,31 +64,33 @@ class FlowChartLeftMenuState<T extends FlowData> extends State<FlowChartLeftMenu
                 child : Wrap( alignment: WrapAlignment.center, 
                   children: widget.getDraggable(items))
               )],
-            )
+            ))
           ]
         ))
       );
     }
     return Container( 
-      height: widget.height - 50,
-      color: Colors.grey.shade300,
+      height: widget.height,
+      color: widget.dashboard.midDashColor,
       child: Stack( children: [ 
             Container(
                           width: widget.innerMenuWidth,
                           height: 50,
                           decoration: BoxDecoration(border: Border(
-                            right: BorderSide(color: Colors.grey.shade300),
+                            bottom: BorderSide(color: Colors.grey.shade400),
+                            right: BorderSide(color: widget.dashboard.midDashColor),
                             left: BorderSide(color: Colors.white))),
                           child: TextFormField(
                             style: const TextStyle(color: Colors.black, fontSize: 15),
-                            cursorColor: const Color.fromARGB(38, 166, 154, 1),
+                            cursorColor: widget.dashboard.dashColor,
                             controller: widget.ctrl,
                             onChanged: (value) { setState(() { }); }, 
                             decoration: InputDecoration(
                               hintText: "search item...",
-                              fillColor: Colors.white,
+                              prefixIcon: const Icon(Icons.search, color: Colors.grey),
+                              fillColor: widget.dashboard.midDashColor,
                               filled: true,
-                              contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 5, bottom: 5),
+                              contentPadding: const EdgeInsets.only(left: 50, right: 50, top: 15, bottom: 15),
                               hintStyle: TextStyle(
                                 color: Colors.grey,
                                 fontSize: 15,
@@ -93,10 +102,10 @@ class FlowChartLeftMenuState<T extends FlowData> extends State<FlowChartLeftMenu
                         ),
             Container( 
               margin: EdgeInsets.only(top: 50),
-              height: widget.height - 150,
+              height: widget.height - 100,
               constraints: BoxConstraints(minWidth: widget.itemWidth),
               width: widget.dashboard.isMenu ? widget.innerMenuWidth : 0, 
-              color: Colors.grey.shade300,
+              color: widget.dashboard.midDashColor,
               child: SingleChildScrollView( child: Column( children: [
                 ...menuItems 
               ]) )

library/flutter_flow_chart/lib/src/flow_chart_menu.dart

@@ -18,13 +18,13 @@ class FlowChartMenu extends StatefulWidget {
 }
 class FlowChartMenuState extends State<FlowChartMenu> {
   @override Widget build(BuildContext context) {
-    bool isLow = MediaQuery.of(context).size.width < 600;
+    bool isLow = widget.chart.widget.flowChart.widget.width < 600;
     GlobalKey<FormFieldState> zoomKey = GlobalKey<FormFieldState>();
-    return Container( // SHORTCUT
+    return Row( mainAxisAlignment: MainAxisAlignment.end, children : [ Container( // SHORTCUT
                     width: widget.width,
                     height: 50,
                     padding: EdgeInsets.only(left: 20),
-                    color: const Color.fromRGBO(38, 166, 154, 1),
+                    color: widget.dashboard.dashColor,
                     child: Row( children : [ Expanded(flex: 2, child: Row( children: [
                       widget.chart.widget.flowChart.widget.onDashboardAlertOpened == null ? Container() : Container( 
                         decoration: BoxDecoration(
@@ -35,21 +35,24 @@ class FlowChartMenuState extends State<FlowChartMenu> {
                           Padding( padding: EdgeInsets.only(right: 15), 
                             child: InkWell( mouseCursor: SystemMouseCursors.click,
                               onTap: () {
-                                widget.dashboard.defaultName = "graph_${DateTime.now().toString().replaceAll(" ", "_").substring(0, DateTime.now().toString().length - 7)}";
+                                widget.dashboard.name = "graph_${DateTime.now().toString().replaceAll(" ", "_").substring(0, DateTime.now().toString().length - 7)}";
                                 widget.dashboard.isOpened = true;
-                                showDialog(
-                                    barrierDismissible: false,
-                                    context: context, builder: (context) {
-                                    return AlertDialog(
-                                      titlePadding: EdgeInsets.zero,
-                                      insetPadding: EdgeInsets.zero,
-                                      backgroundColor: Colors.white,
-                                      shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
-                                      title: widget.chart.widget.flowChart.widget.onDashboardAlertOpened!(
-                                        context, widget.dashboard));
-                                  });
+                                if (!widget.dashboard.inDialog) {
+                                  widget.dashboard.inDialog = true;
+                                  showDialog(
+                                      barrierDismissible: false,
+                                      context: context, builder: (context) {
+                                      return AlertDialog(
+                                        titlePadding: EdgeInsets.zero,
+                                        insetPadding: EdgeInsets.zero,
+                                        backgroundColor: Colors.white,
+                                        shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(0)),
+                                        title: widget.chart.widget.flowChart.widget.onDashboardAlertOpened!(
+                                          context, widget.dashboard));
+                                    });
+                                }
                               }, 
-                              child: Icon(Icons.folder_open, color: Colors.white))))),
+                              child: Icon(Icons.folder, color: Colors.white))))),
                         ])),
                       InkWell( mouseCursor: SystemMouseCursors.click, child: Container( 
                         decoration: BoxDecoration(
@@ -57,8 +60,6 @@ class FlowChartMenuState extends State<FlowChartMenu> {
                         ),
                         child: Padding( padding: EdgeInsets.symmetric(horizontal: 10), 
                           child: PopupMenuButton<DisplayEnum>(
-                            child: 
-                            Row( children: [ Icon(Icons.fullscreen, color: Colors.white), Icon(Icons.arrow_drop_down, size: 10, color: Colors.white) ]),
                             initialValue: null,
                             onSelected: (DisplayEnum value) {
                               if (value == DisplayEnum.MENU) {  widget.dashboard.isMenu = !widget.dashboard.isMenu; }
@@ -83,7 +84,9 @@ class FlowChartMenuState extends State<FlowChartMenu> {
                                       child: Text(widget.dashboard.isInfo ? 'hide info' : 'show info', textAlign: TextAlign.center,))
                                 ]),
                               ),
-                            ]
+                            ],
+                            child: 
+                            Row( children: [ Icon(Icons.fullscreen, color: Colors.white), Icon(Icons.arrow_drop_down, size: 10, color: Colors.white) ])
                             ),)
                         )
                       ),
@@ -109,7 +112,7 @@ class FlowChartMenuState extends State<FlowChartMenu> {
                                 child: Wrap( alignment: WrapAlignment.center, children: [ 
                                   Padding( padding: EdgeInsets.only(left: 10, top: 10, bottom: 10) ,  child: TextFormField(
                                   key: zoomKey,
-                                  cursorColor: const Color.fromARGB(38, 166, 154, 1),
+                                  cursorColor: widget.dashboard.dashColor,
                                   onChanged: (value) { }, 
                                   validator: (value) {
                                     try { 
@@ -224,7 +227,7 @@ class FlowChartMenuState extends State<FlowChartMenu> {
                                 }
                               },
                               mouseCursor: !widget.dashboard.canBack() ? MouseCursor.defer : SystemMouseCursors.click, 
-                              child: Icon(Icons.undo, color: !widget.dashboard.canBack() ? Colors.grey.shade300 : Colors.white)),),
+                              child: Icon(Icons.undo, color: !widget.dashboard.canBack() ? widget.dashboard.midDashColor : Colors.white)),),
                           Padding( padding: EdgeInsets.symmetric(horizontal: 10), 
                             child: InkWell( 
                               onTap: () {
@@ -233,22 +236,22 @@ class FlowChartMenuState extends State<FlowChartMenu> {
                                 }
                               },
                               mouseCursor: !widget.dashboard.canForward() ? MouseCursor.defer : SystemMouseCursors.click, child: Icon(Icons.redo, 
-                              color: !widget.dashboard.canForward() ? Colors.grey.shade300 : Colors.white))),
+                              color: !widget.dashboard.canForward() ? widget.dashboard.midDashColor : Colors.white))),
                           
                         ])),
                         Expanded( 
-                           child: Padding( child: Text("file opened : ${widget.dashboard.name}", overflow: TextOverflow.ellipsis,
+                           child: Padding( child: Text("current workflow : ${widget.dashboard.name}", overflow: TextOverflow.ellipsis,
                             style: TextStyle(color: Colors.white, fontSize: 14), textAlign: TextAlign.start),
                             padding: EdgeInsets.symmetric(horizontal: 20))),
                       ])),
-                      widget.menuExtension != null && MediaQuery.of(context).size.width > 600 ? Container( 
+                      widget.menuExtension != null && widget.chart.widget.flowChart.widget.width > 600 ? Container( 
                         decoration: BoxDecoration(
                           border: Border(left: BorderSide(color: Colors.white, width: 1))
                         ),
                         child:  widget.menuExtension
                       ) : Container()
                     ])
-                  );
+                  ) ]);
   }
 }
 

library/flutter_flow_chart/lib/src/flow_chart_selected_menu.dart

@@ -4,6 +4,7 @@ import 'package:flutter_flow_chart/src/ui/draw_arrow.dart';
 import 'package:flutter_flow_chart/flutter_flow_chart.dart';
 import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 import 'package:number_text_input_formatter/number_text_input_formatter.dart';
+import 'package:uuid/uuid.dart';
 
 class FlowChartSelectedMenu extends StatefulWidget {
   Dashboard dashboard;
@@ -17,31 +18,28 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
     Widget? w;
     if (widget.isDashboardInfo && widget.dashboard.elementSelected.length == 1) {
       w = Container(
-        width: 250,
+        width: 200,
         height: widget.height,
-        color: Colors.grey.shade300,
-        child: SingleChildScrollView( child:  Column( children: [ ...widget.dashboard.infoItemWidget != null ?
-          widget.dashboard.infoItemWidget!(widget.dashboard.elementSelected.first.element) 
-          : [],
+        color: widget.dashboard.midDashColor,
+        child: SingleChildScrollView( child: Column( children: [ ...widget.dashboard.infoItemWidget != null ?
+          widget.dashboard.infoItemWidget!(widget.dashboard.elementSelected.first.element, widget.dashboard.elementSelected.first.id) : [],
           widget.dashboard.arrowsSelected.isNotEmpty || widget.dashboard.elementSelected.isNotEmpty ? Container( 
-                          width: 250,
+                          width: 200,
                           margin: EdgeInsets.only(top: 15),
                           decoration: BoxDecoration(border: Border(
-                            top: BorderSide(color: Colors.grey, width: 1),
-                            bottom: BorderSide(color: Colors.grey, width: 1))),
+                            top: BorderSide(color: Colors.grey, width: 1))),
                           child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
                             Tooltip( message: "remove",
                               child: InkWell( mouseCursor: SystemMouseCursors.click, 
-                              onTap: () {
-                                widget.dashboard.removeArrows((element) { 
-                                  if (element.isSelected && element.elementIndex != null && element.connIndex != null) {
-                                    widget.dashboard.elements[element.elementIndex!].next.removeAt(element.connIndex!);
+                              onTap: () { 
+                                widget.dashboard.removeElements((element) {
+                                  if (element.isSelected) {
+                                    widget.dashboard.arrows.removeWhere( (e) => e.toID.contains(element.id) || e.fromID.contains(element.id));
                                   }
                                   return element.isSelected;
-                                }); 
-                                widget.dashboard.removeElements((element) => element.isSelected); 
+                                }, context); 
                                 Future.delayed(Duration(milliseconds: 100), () {
-                                  widget.dashboard.chartKey.currentState?.setState(() { });
+                                  widget.dashboard.flutterChartKey.currentState?.setState(() { });
                                 });
                               }, child: Container( margin: EdgeInsets.all(10),
                                 decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.black, width: 1)),
@@ -53,13 +51,15 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                               child: InkWell( mouseCursor: SystemMouseCursors.click, 
                               onTap: () {
                                 for (var sel in widget.dashboard.elementSelected) {
-                                  widget.dashboard.addElement(FlowElement.fromMap(widget.dashboard, sel.toMap()));
+                                  var el =FlowElement.fromMap(widget.dashboard, sel.toMap());
+                                  el.id = Uuid().v8();
+                                  widget.dashboard.addElement(FlowElement.fromMap(widget.dashboard, sel.toMap()), context);
                                   widget.dashboard.elements.last.position += Offset(50, 50);
                                 }
                                 Future.delayed(Duration(milliseconds: 100), () {
                                   widget.dashboard.chartKey.currentState?.setState(() { });
                                 });
-                              }, child: Container( margin: EdgeInsets.only(left: 10, right: 10),
+                              }, child: Container( margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
                                 decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.black, width: 1)),
                                 width: 200, height: 30,
                                 child: Icon(Icons.copy, color: Colors.black),
@@ -68,114 +68,145 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                           ])
                         ) : Container()
         ])
-       ));
+      ));
+    } else if (widget.isDashboardInfo && widget.dashboard.arrowsSelected.length == 1) {
+      w = Container(
+        width: 200,
+        height: widget.height,
+        color: widget.dashboard.midDashColor,
+        child: SingleChildScrollView( child: Column( children: [ 
+          widget.dashboard.infoItemWidget != null ?
+          widget.dashboard.infoLinkWidget!(widget.dashboard.arrowsSelected.first) : Container(),
+          widget.dashboard.arrowsSelected.isNotEmpty || widget.dashboard.elementSelected.isNotEmpty ? Container( 
+                          width: 200,
+                          margin: EdgeInsets.only(top: 15),
+                          decoration: BoxDecoration(border: Border(
+                            top: BorderSide(color: Colors.grey, width: 1))),
+                          child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
+                            Tooltip( message: "remove",
+                              child: InkWell( mouseCursor: SystemMouseCursors.click, 
+                              onTap: () {
+                                widget.dashboard.removeArrows((element) { 
+                                  if (element.isSelected && element.elementIndex != null && element.connIndex != null) {
+                                    widget.dashboard.elements[element.elementIndex!].next.removeAt(element.connIndex!);
+                                  }
+                                  return element.isSelected;
+                                }, context); 
+                                Future.delayed(Duration(milliseconds: 100), () {
+                                  widget.dashboard.flutterChartKey.currentState?.setState(() { });
+                                });
+                              }, child: Container( margin: EdgeInsets.all(10),
+                                decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.black, width: 1)),
+                                width: 200, height: 30,
+                                child: Icon(Icons.delete_outline, color: Colors.black),
+                              ))
+                            ),
+                          ])
+                        ) : Container()
+        ])
+      ));
     } else if (widget.isDashboardInfo && widget.dashboard.infoWidget != null) {
        w = Container(
-        width: 250,
+        width: 200,
         height: widget.height,
-        color: Colors.grey.shade300,
+        color: widget.dashboard.midDashColor,
         child: Column( children: widget.dashboard.infoWidget != null ? widget.dashboard.infoWidget!() : [])
        );
     } else {
       w = Container( // SHORTCUT
-                    width: 250,
+                    width: 200,
                     height: widget.height,
-                    color: Colors.grey.shade300,
+                    color: widget.dashboard.midDashColor,
                     child: Column( children: [ 
-                      Container( padding: EdgeInsets.all(10), width: 250, height: 60,
+                      Container( padding: EdgeInsets.all(10), width: 200, height: 60,
                         decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
                         child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [
                           Text("STYLE ${widget.dashboard.elementSelected.isNotEmpty ? "ELEMENT" : "ARROW"}", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), textAlign: TextAlign.center),
                           Text("<${widget.dashboard.arrowsSelected.isEmpty && widget.dashboard.elementSelected.isEmpty ? "general" : "selected"}>", style: TextStyle(fontSize: 12), textAlign: TextAlign.center),
                         ])),
-                      Container( width: 250, height: widget.height - 60, child: SingleChildScrollView( child: Column( children: [
+                      SizedBox( width: 200, height: widget.height - 60, child: SingleChildScrollView( child: Column( children: [
                       widget.dashboard.elementSelected.isNotEmpty ? Container() : Container( padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20), 
                         decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
                         child: Column( children: [
                           Row( children: [
-                          InkWell( mouseCursor: SystemMouseCursors.click, child: Container( 
-                            child: Padding( padding: EdgeInsets.symmetric(horizontal: 10), 
-                              child: PopupMenuButton<ArrowDash>(
-                                tooltip: "line defaults",
-                                constraints: BoxConstraints(maxWidth: 100),
-                                child: Row( children: [ 
-                                  MySeparator(
-                                    width: 65, 
-                                    dashWidth: widget.dashboard.defaultDashWidth, 
-                                    dashSpace: widget.dashboard.defaultDashSpace, 
-                                    color: Colors.black 
-                                  ),
-                                  Container(height: 25, width: 10),
-                                  Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ]),
-                                initialValue: null,
-                                onSelected: (ArrowDash value) {
-                                  if (widget.dashboard.elementSelected.isEmpty) {
-                                    for(var sel in widget.dashboard.arrowsSelected) { 
-                                      sel.params.dashSpace = spaceArrowDash(value); 
-                                      sel.params.dashWidth = widthArrowDash(value);
-                                    }
-                                    widget.dashboard.chartKey.currentState?.setState(() { });
+                          InkWell( mouseCursor: SystemMouseCursors.click, 
+                          child: Padding( padding: EdgeInsets.only(left: 10, right: 10), 
+                            child: PopupMenuButton<ArrowDash>(
+                              tooltip: "line defaults",
+                              constraints: BoxConstraints(maxWidth: 100),
+                              initialValue: null,
+                              onSelected: (ArrowDash value) {
+                                if (widget.dashboard.elementSelected.isEmpty) {
+                                  for(var sel in widget.dashboard.arrowsSelected) { 
+                                    sel.params.dashSpace = spaceArrowDash(value); 
+                                    sel.params.dashWidth = widthArrowDash(value);
                                   }
-                                  widget.dashboard.defaultDashSpace = spaceArrowDash(value);
-                                  widget.dashboard.defaultDashWidth = widthArrowDash(value);
-                                  setState(() {});
-                                },
-                                itemBuilder: (BuildContext context) => <PopupMenuEntry<ArrowDash>>[
-                                  PopupMenuItem<ArrowDash>(
-                                    value: ArrowDash.line,
-                                    child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
-                                        MySeparator(width: 50, dashWidth: widthArrowDash(ArrowDash.line), 
-                                        dashSpace: spaceArrowDash(ArrowDash.line),)
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowDash>(
-                                    value: ArrowDash.largeDash,
-                                    child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
-                                      MySeparator(width: 50, dashWidth: widthArrowDash(ArrowDash.largeDash), dashSpace: spaceArrowDash(ArrowDash.largeDash),)
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowDash>(
-                                    value: ArrowDash.mediumDash,
-                                    child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
-                                      MySeparator(width: 50, dashWidth: widthArrowDash(ArrowDash.mediumDash), dashSpace: spaceArrowDash(ArrowDash.mediumDash),)
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowDash>(
-                                    value: ArrowDash.smallDash,
-                                    child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
-                                      MySeparator(width: 50, dashWidth: widthArrowDash(ArrowDash.smallDash), dashSpace: spaceArrowDash(ArrowDash.smallDash),)
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowDash>(
-                                    value: ArrowDash.heavyDotted,
-                                    child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
-                                      MySeparator(width: 50, dashWidth: widthArrowDash(ArrowDash.heavyDotted), dashSpace: spaceArrowDash(ArrowDash.heavyDotted),)
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowDash>(
-                                    value: ArrowDash.mediumDotted,
-                                    child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
-                                      MySeparator(width: 50, dashWidth: widthArrowDash(ArrowDash.mediumDotted), dashSpace: spaceArrowDash(ArrowDash.mediumDotted),)
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowDash>(
-                                    value: ArrowDash.lightDotted,
-                                    child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
-                                      MySeparator(width: 50, dashWidth: widthArrowDash(ArrowDash.lightDotted), dashSpace: spaceArrowDash(ArrowDash.lightDotted),)
-                                    ]),
-                                  ),
-                                ]
+                                  widget.dashboard.chartKey.currentState?.setState(() { });
+                                }
+                                widget.dashboard.defaultDashSpace = spaceArrowDash(value);
+                                widget.dashboard.defaultDashWidth = widthArrowDash(value);
+                                setState(() {});
+                              },
+                              itemBuilder: (BuildContext context) => <PopupMenuEntry<ArrowDash>>[
+                                PopupMenuItem<ArrowDash>(
+                                  value: ArrowDash.line,
+                                  child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                                      MySeparator(width: 25, dashWidth: widthArrowDash(ArrowDash.line), 
+                                      dashSpace: spaceArrowDash(ArrowDash.line),)
+                                  ]),
                                 ),
-                              )
+                                PopupMenuItem<ArrowDash>(
+                                  value: ArrowDash.largeDash,
+                                  child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                                    MySeparator(width: 25, dashWidth: widthArrowDash(ArrowDash.largeDash), dashSpace: spaceArrowDash(ArrowDash.largeDash),)
+                                  ]),
+                                ),
+                                PopupMenuItem<ArrowDash>(
+                                  value: ArrowDash.mediumDash,
+                                  child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                                    MySeparator(width: 25, dashWidth: widthArrowDash(ArrowDash.mediumDash), dashSpace: spaceArrowDash(ArrowDash.mediumDash),)
+                                  ]),
+                                ),
+                                PopupMenuItem<ArrowDash>(
+                                  value: ArrowDash.smallDash,
+                                  child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                                    MySeparator(width: 25, dashWidth: widthArrowDash(ArrowDash.smallDash), dashSpace: spaceArrowDash(ArrowDash.smallDash),)
+                                  ]),
+                                ),
+                                PopupMenuItem<ArrowDash>(
+                                  value: ArrowDash.heavyDotted,
+                                  child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                                    MySeparator(width: 25, dashWidth: widthArrowDash(ArrowDash.heavyDotted), dashSpace: spaceArrowDash(ArrowDash.heavyDotted),)
+                                  ]),
+                                ),
+                                PopupMenuItem<ArrowDash>(
+                                  value: ArrowDash.mediumDotted,
+                                  child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                                    MySeparator(width: 25, dashWidth: widthArrowDash(ArrowDash.mediumDotted), dashSpace: spaceArrowDash(ArrowDash.mediumDotted),)
+                                  ]),
+                                ),
+                                PopupMenuItem<ArrowDash>(
+                                  value: ArrowDash.lightDotted,
+                                  child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ 
+                                    MySeparator(width: 25, dashWidth: widthArrowDash(ArrowDash.lightDotted), dashSpace: spaceArrowDash(ArrowDash.lightDotted),)
+                                  ]),
+                                ),
+                              ],
+                              child: Row( children: [ 
+                                MySeparator(
+                                  width: 35, 
+                                  dashWidth: widget.dashboard.defaultDashWidth, 
+                                  dashSpace: widget.dashboard.defaultDashSpace, 
+                                  color: Colors.black 
+                                ),
+                                SizedBox(height: 25, width: 10),
+                                Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ])
+                              ),
                             )
                           ),
                           PopupMenuButton<void>(
                                 tooltip: "color picker",
                                 constraints: BoxConstraints(maxWidth: 664),
-                                child: Row( children: [ 
-                                  Container(width: 15, height: 15, color: widget.dashboard.defaultColor),
-                                  Container(height: 25, width: 5),
-                                  Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ]),
                                 initialValue: null,
                                 onSelected: (void value) {},
                                 itemBuilder: (BuildContext context) => <PopupMenuEntry<void>>[
@@ -188,12 +219,16 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                                       setState(() { widget.dashboard.defaultColor = value; });
                                     },),
                                   ),
-                                ]
+                                ],
+                                child: Row( children: [ 
+                                  Container(width: 15, height: 15, color: widget.dashboard.defaultColor),
+                                  SizedBox(height: 25, width: 5),
+                                  Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ])
                           ),
                           Tooltip( message: "stroke width",
                             child: Container(
                               margin: EdgeInsets.only(left: 10),
-                              width: 75, height: 25,
+                              width: 55, height: 25,
                               child: TextFormField( textAlign: TextAlign.center,
                               readOnly: widget.dashboard.defaultDashWidth <= 0,
                               initialValue: "${widget.dashboard.defaultStroke}",
@@ -230,57 +265,56 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                           )))
                         ]),
                         Row(children: [
-                          InkWell( mouseCursor: SystemMouseCursors.click, child: Container( 
-                            child: Padding( padding: EdgeInsets.only(left: 10, top: 10, right: 10), 
-                              child: PopupMenuButton<ArrowStyle>(
-                                child: 
-                                Row( children: [ Icon(widget.dashboard.defaultArrowStyle == ArrowStyle.segmented ? Icons.turn_slight_left : widget.dashboard.defaultArrowStyle == ArrowStyle.curve ? Icons.roundabout_left : Icons.turn_sharp_left_outlined
-                                  , color: Colors.black), 
-                                Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ]),
-                                initialValue: null,
-                                onSelected: (ArrowStyle value) {
-                                  if (widget.dashboard.elementSelected.isEmpty) {
-                                    for(var sel in widget.dashboard.arrowsSelected) { sel.params.style = value; }
-                                    widget.dashboard.chartKey.currentState?.setState(() { });
-                                  }
-                                  widget.dashboard.defaultArrowStyle = value;
-                                  setState(() {});
-                                },
-                                tooltip: "line styles",
-                                itemBuilder: (BuildContext context) => <PopupMenuEntry<ArrowStyle>>[
-                                  PopupMenuItem<ArrowStyle>(
-                                    value: ArrowStyle.segmented,
-                                    child: Row( children: [ 
-                                        Icon(Icons.turn_slight_left),
-                                        Padding( padding: EdgeInsets.only(left: 10),
-                                          child: Text('straight', textAlign: TextAlign.center,))
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowStyle>(
-                                    value: ArrowStyle.curve,
-                                    child: Row( children: [ 
-                                        Icon(Icons.roundabout_left),
-                                        Padding( padding: EdgeInsets.only(left: 10),
-                                          child: Text('curved', textAlign: TextAlign.center,))
-                                    ]),
-                                  ),
-                                  PopupMenuItem<ArrowStyle>(
-                                    value: ArrowStyle.rectangular,
-                                    child: Row( children: [ 
-                                        Icon(Icons.turn_sharp_left_outlined),
-                                        Padding( padding: EdgeInsets.only(left: 10),
-                                          child: Text('rectangular', textAlign: TextAlign.center,))
-                                    ]),
-                                  ),
-                                ]
-                                )
+                          InkWell( mouseCursor: SystemMouseCursors.click, child: Padding( 
+                            padding: EdgeInsets.only(left: 10, top: 10, right: 10), 
+                            child: PopupMenuButton<ArrowStyle>(
+                              initialValue: null,
+                              onSelected: (ArrowStyle value) {
+                                if (widget.dashboard.elementSelected.isEmpty) {
+                                  for(var sel in widget.dashboard.arrowsSelected) { sel.params.style = value; }
+                                  widget.dashboard.chartKey.currentState?.setState(() { });
+                                }
+                                widget.dashboard.defaultArrowStyle = value;
+                                setState(() {});
+                              },
+                              tooltip: "line styles",
+                              itemBuilder: (BuildContext context) => <PopupMenuEntry<ArrowStyle>>[
+                                PopupMenuItem<ArrowStyle>(
+                                  value: ArrowStyle.segmented,
+                                  child: Row( children: [ 
+                                      Icon(Icons.turn_slight_left),
+                                      Padding( padding: EdgeInsets.only(left: 10),
+                                        child: Text('straight', textAlign: TextAlign.center,))
+                                  ]),
+                                ),
+                                PopupMenuItem<ArrowStyle>(
+                                  value: ArrowStyle.curve,
+                                  child: Row( children: [ 
+                                      Icon(Icons.roundabout_left),
+                                      Padding( padding: EdgeInsets.only(left: 10),
+                                        child: Text('curved', textAlign: TextAlign.center,))
+                                  ]),
+                                ),
+                                PopupMenuItem<ArrowStyle>(
+                                  value: ArrowStyle.rectangular,
+                                  child: Row( children: [ 
+                                      Icon(Icons.turn_sharp_left_outlined),
+                                      Padding( padding: EdgeInsets.only(left: 10),
+                                        child: Text('rectangular', textAlign: TextAlign.center,))
+                                  ]),
+                                ),
+                              ],
+                              child: 
+                              Row( children: [ Icon(widget.dashboard.defaultArrowStyle == ArrowStyle.segmented ? Icons.turn_slight_left : widget.dashboard.defaultArrowStyle == ArrowStyle.curve ? Icons.roundabout_left : Icons.turn_sharp_left_outlined
+                                , color: Colors.black), 
+                              Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ])
                               )
                             )
                           ),
                           Tooltip( message: "space dash",
                             child: Container(
                               margin: EdgeInsets.only(top: 10),
-                              width: 155 / 2, height: 25,
+                              width: 105 / 2, height: 25,
                               child: TextFormField( textAlign: TextAlign.center,
                               readOnly: widget.dashboard.defaultDashWidth <= 0,
                               initialValue: "${widget.dashboard.defaultDashWidth}",
@@ -293,7 +327,7 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                               },
                               style: TextStyle(fontSize: 12),
                               decoration: InputDecoration(
-                                fillColor: widget.dashboard.defaultDashWidth <= 0 ? Colors.grey.shade300 : Colors.white,
+                                fillColor: widget.dashboard.defaultDashWidth <= 0 ? widget.dashboard.midDashColor : Colors.white,
                                 filled: true,
                                 labelText: "dash",
                                 labelStyle: TextStyle(fontSize: 10),
@@ -318,7 +352,7 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                           Tooltip( message: "space width",
                             child: Container(
                               margin: EdgeInsets.only(left: 10, top: 10),
-                              width: 155 / 2, height: 25,
+                              width: 105 / 2, height: 25,
                               child: TextFormField( textAlign: TextAlign.center,
                               initialValue: "${widget.dashboard.defaultDashSpace}",
                               onChanged: (value) { 
@@ -330,7 +364,7 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                               },
                               style: TextStyle(fontSize: 12),
                               decoration: InputDecoration(
-                                fillColor: widget.dashboard.defaultDashWidth <= 0 ? Colors.grey.shade300 : Colors.white,
+                                fillColor: widget.dashboard.defaultDashWidth <= 0 ? widget.dashboard.midDashColor : Colors.white,
                                 filled: true,
                                 labelText: "space",
                                 labelStyle: TextStyle(fontSize: 10),
@@ -354,67 +388,64 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                           )))
                         ]), 
                       ])),
-                      widget.dashboard.elementSelected.isNotEmpty && widget.dashboard.elementSelected.length == 1 ? Container(
-                        // TODO : TEST OMG
-                      ) : Container(),
-                      widget.dashboard.elementSelected.isNotEmpty ? Container() : Container( padding: EdgeInsets.only(left: 10, right: 10, bottom: 20, top: 15), 
+                      widget.dashboard.elementSelected.isNotEmpty ? Container() : 
+                      Container( padding: EdgeInsets.only(left: 10, right: 10, bottom: 20, top: 15), 
                         decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
                         child: Column( children: [
                           Row( mainAxisAlignment: MainAxisAlignment.center, children : [ 
-                            InkWell( mouseCursor: SystemMouseCursors.click, child: Container(
-                              child: Padding( padding: EdgeInsets.symmetric(horizontal: 10), 
-                                child: PopupMenuButton<ArrowDirection>(
-                                  child: 
-                                  Row( children: [ 
-                                    Icon(widget.dashboard.defaultArrowDirection == ArrowDirection.forward ? Icons.arrow_forward : widget.dashboard.defaultArrowDirection == ArrowDirection.backward ? Icons.arrow_back : Icons.sync_alt_outlined, color: Colors.black), 
-                                    Padding( padding: EdgeInsets.symmetric(horizontal: 10), 
-                                      child: Text(widget.dashboard.defaultArrowDirection == ArrowDirection.forward ? 'forward' : widget.dashboard.defaultArrowDirection == ArrowDirection.backward ? 'backward' : 'bidirectionnal')),
-                                    Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ]),
-                                  initialValue: null,
-                                  onSelected: (ArrowDirection value) {
-                                    if (widget.dashboard.elementSelected.isEmpty) {
-                                      for(var sel in widget.dashboard.arrowsSelected) { sel.params.direction = value; }
-                                      widget.dashboard.chartKey.currentState?.setState(() { });
-                                    }
-                                    widget.dashboard.defaultArrowDirection = value;
-                                    setState(() {});
-                                  },
-                                  tooltip: widget.dashboard.defaultArrowDirection == ArrowDirection.forward ? 'forward' : widget.dashboard.defaultArrowDirection == ArrowDirection.backward ? 'backward' : 'bidirectionnal',
-                                  itemBuilder: (BuildContext context) => <PopupMenuEntry<ArrowDirection>>[
-                                    PopupMenuItem<ArrowDirection>(
-                                      value: ArrowDirection.forward,
-                                      child: Row( children: [ 
-                                          Icon(Icons.arrow_forward),
-                                          Padding( padding: EdgeInsets.only(left: 10),
-                                            child: Text('forward', textAlign: TextAlign.center,))
-                                      ]),
-                                    ),
-                                    PopupMenuItem<ArrowDirection>(
-                                      value: ArrowDirection.backward,
-                                      child: Row( children: [ 
-                                          Icon(Icons.arrow_back),
-                                          Padding( padding: EdgeInsets.only(left: 10),
-                                            child: Text('curved', textAlign: TextAlign.center,))
-                                      ]),
-                                    ),
-                                    PopupMenuItem<ArrowDirection>(
-                                      value: ArrowDirection.bidirectionnal,
-                                      child: Row( children: [ 
-                                          Icon(Icons.sync_alt_outlined),
-                                          Padding( padding: EdgeInsets.only(left: 10),
-                                            child: Text('bidirectionnal', textAlign: TextAlign.center,))
-                                      ]),
-                                    ),
-                                  ]
-                                  ),)
-                              )
+                            InkWell( mouseCursor: SystemMouseCursors.click, 
+                            child: Padding( padding: EdgeInsets.symmetric(horizontal: 10), 
+                              child: PopupMenuButton<ArrowDirection>(
+                                initialValue: null,
+                                onSelected: (ArrowDirection value) {
+                                  if (widget.dashboard.elementSelected.isEmpty) {
+                                    for(var sel in widget.dashboard.arrowsSelected) { sel.params.direction = value; }
+                                    widget.dashboard.chartKey.currentState?.setState(() { });
+                                  }
+                                  widget.dashboard.defaultArrowDirection = value;
+                                  setState(() {});
+                                },
+                                tooltip: widget.dashboard.defaultArrowDirection == ArrowDirection.forward ? 'forward' : widget.dashboard.defaultArrowDirection == ArrowDirection.backward ? 'backward' : 'bidirectionnal',
+                                itemBuilder: (BuildContext context) => <PopupMenuEntry<ArrowDirection>>[
+                                  PopupMenuItem<ArrowDirection>(
+                                    value: ArrowDirection.forward,
+                                    child: Row( children: [ 
+                                        Icon(Icons.arrow_forward),
+                                        Padding( padding: EdgeInsets.only(left: 10),
+                                          child: Text('forward', textAlign: TextAlign.center,))
+                                    ]),
+                                  ),
+                                  PopupMenuItem<ArrowDirection>(
+                                    value: ArrowDirection.backward,
+                                    child: Row( children: [ 
+                                        Icon(Icons.arrow_back),
+                                        Padding( padding: EdgeInsets.only(left: 10),
+                                          child: Text('curved', textAlign: TextAlign.center,))
+                                    ]),
+                                  ),
+                                  PopupMenuItem<ArrowDirection>(
+                                    value: ArrowDirection.bidirectionnal,
+                                    child: Row( children: [ 
+                                        Icon(Icons.sync_alt_outlined),
+                                        Padding( padding: EdgeInsets.only(left: 10),
+                                          child: Text('bidirectionnal', textAlign: TextAlign.center,))
+                                    ]),
+                                  ),
+                                ],
+                                child: 
+                                Row( children: [ 
+                                  Icon(widget.dashboard.defaultArrowDirection == ArrowDirection.forward ? Icons.arrow_forward : widget.dashboard.defaultArrowDirection == ArrowDirection.backward ? Icons.arrow_back : Icons.sync_alt_outlined, color: Colors.black), 
+                                  Padding( padding: EdgeInsets.symmetric(horizontal: 10), 
+                                    child: Text(widget.dashboard.defaultArrowDirection == ArrowDirection.forward ? 'forward' : widget.dashboard.defaultArrowDirection == ArrowDirection.backward ? 'backward' : 'bidirectionnal')),
+                                  Icon(Icons.arrow_drop_down, size: 10, color: Colors.black) ])
+                                ),)
                             ),
                           ]),
                           Row(children: [
                             Tooltip( message: "forward size",
                               child: Container(
-                                margin: EdgeInsets.only(left: 10, top: 10),
-                                width: 185, height: 25,
+                                margin: EdgeInsets.only(top: 10),
+                                width: 150, height: 25,
                                 child: TextFormField( textAlign: TextAlign.center,
                                 initialValue: "${widget.dashboard.defaultForwardWidth}",
                                 onChanged: (value) { 
@@ -438,7 +469,7 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                                 },
                                 style: TextStyle(fontSize: 12),
                                 decoration: InputDecoration(
-                                  fillColor: widget.dashboard.defaultDashWidth <= 0 ? Colors.grey.shade300 : Colors.white,
+                                  fillColor: widget.dashboard.defaultDashWidth <= 0 ? widget.dashboard.midDashColor : Colors.white,
                                   filled: true,
                                   labelText: "forward size",
                                   labelStyle: TextStyle(fontSize: 10),
@@ -465,8 +496,8 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                           Row(children: [
                             Tooltip( message: "back size",
                               child: Container(
-                                margin: EdgeInsets.only(left: 10, top: 10),
-                                width: 185, height: 25,
+                                margin: EdgeInsets.only(top: 10),
+                                width: 150, height: 25,
                                 child: TextFormField( textAlign: TextAlign.center,
                                 initialValue: "${widget.dashboard.defaultBackWidth}",
                                 onChanged: (value) { 
@@ -490,7 +521,7 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                                 },
                                 style: TextStyle(fontSize: 12),
                                 decoration: InputDecoration(
-                                  fillColor: widget.dashboard.defaultDashWidth <= 0 ? Colors.grey.shade300 : Colors.white,
+                                  fillColor: widget.dashboard.defaultDashWidth <= 0 ? widget.dashboard.midDashColor : Colors.white,
                                   filled: true,
                                   labelText: "back size",
                                   labelStyle: TextStyle(fontSize: 10),
@@ -516,25 +547,24 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                           ])
                         ])),
                         widget.dashboard.arrowsSelected.isNotEmpty || widget.dashboard.elementSelected.isNotEmpty ? Container( 
-                          width: 250,
+                          width: 200,
                           decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
                           child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
                             Tooltip( message: "remove",
                               child: InkWell( mouseCursor: SystemMouseCursors.click, 
                               onTap: () {
-                                widget.dashboard.removeArrows((element) { 
-                                  if (element.isSelected && element.elementIndex != null && element.connIndex != null) {
-                                    widget.dashboard.elements[element.elementIndex!].next.removeAt(element.connIndex!);
+                                widget.dashboard.removeElements((element) {
+                                  if (element.isSelected) {
+                                    widget.dashboard.arrows.removeWhere( (e) => e.toID.contains(element.id) || e.fromID.contains(element.id));
                                   }
                                   return element.isSelected;
-                                }); 
-                                widget.dashboard.removeElements((element) => element.isSelected); 
+                                }, context);
                                 Future.delayed(Duration(milliseconds: 100), () {
-                                  widget.dashboard.chartKey.currentState?.setState(() { });
+                                  widget.dashboard.flutterChartKey.currentState?.setState(() { });
                                 });
                               }, child: Container( margin: EdgeInsets.all(10),
                                 decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.black, width: 1)),
-                                width: 140, height: 30,
+                                width: 200, height: 30,
                                 child: Icon(Icons.delete_outline, color: Colors.black),
                               ))
                             ),
@@ -542,15 +572,15 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
                               child: InkWell( mouseCursor: SystemMouseCursors.click, 
                               onTap: () {
                                 for (var sel in widget.dashboard.elementSelected) {
-                                  widget.dashboard.addElement(FlowElement.fromMap(widget.dashboard, sel.toMap()));
+                                  widget.dashboard.addElement(FlowElement.fromMap(widget.dashboard, sel.toMap()), context);
                                   widget.dashboard.elements.last.position += Offset(50, 50);
                                 }
                                 Future.delayed(Duration(milliseconds: 100), () {
                                   widget.dashboard.chartKey.currentState?.setState(() { });
                                 });
-                              }, child: Container( margin: EdgeInsets.all(10),
+                              }, child: Container( margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
                                 decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.black, width: 1)),
-                                width: 140, height: 30,
+                                width: 200, height: 30,
                                 child: Icon(Icons.copy, color: Colors.black),
                               ))
                             ),
@@ -562,46 +592,51 @@ class FlowChartSelectedMenuState extends State<FlowChartSelectedMenu> {
     }
     return Column( children: [
       Container( // SHORTCUT
-                    width: 250,
-                    height: 50,
-                    decoration: BoxDecoration(color: Colors.grey.shade300, border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
-                    child: Row( children: [ 
-                      Tooltip( 
-                        message: "dashboard information",
-                        child: InkWell( onTap: () => setState(() {widget.isDashboardInfo = true; }),
-                          mouseCursor: SystemMouseCursors.click,
-                          child: Container( alignment: Alignment.center, 
-                            padding: EdgeInsets.symmetric(vertical: 10),
-                            color: widget.isDashboardInfo ? Colors.grey : Colors.grey.shade300,
-                            width: 125, child: Icon(Icons.info, color: Colors.white))
-                        )
-                      ),
-                      Tooltip( 
-                        message: "element style",
-                        child: InkWell( onTap: () => setState(() {widget.isDashboardInfo = false; }),
-                          mouseCursor: SystemMouseCursors.click,
-                          child: Container( alignment: Alignment.center, 
-                            padding: EdgeInsets.symmetric(vertical: 10),
-                            color: !widget.isDashboardInfo ? Colors.grey : Colors.grey.shade300,
-                            width: 125, child: Icon(Icons.format_paint, color: Colors.white)), 
-                      ))
-                    ])),
+        width: 200, height: 50,
+        decoration: BoxDecoration(color: widget.dashboard.midDashColor, 
+          border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
+        child: Row( children: [ 
+          Tooltip( message: "dashboard information",
+            child: InkWell( onTap: () => setState(() {widget.isDashboardInfo = true; }),
+              mouseCursor: SystemMouseCursors.click,
+              child: Container( alignment: Alignment.center, 
+                padding: EdgeInsets.symmetric(vertical: 10),
+                color: widget.isDashboardInfo ? Colors.grey : widget.dashboard.midDashColor,
+                width: 200 / 2, child: Icon(Icons.info, color: Colors.white))
+              )
+            ),
+            Tooltip( 
+              message: "element style",
+              child: InkWell( onTap: () => setState(() {widget.isDashboardInfo = false; }),
+                mouseCursor: SystemMouseCursors.click,
+                child: Container( alignment: Alignment.center, 
+                  padding: EdgeInsets.symmetric(vertical: 10),
+                  color: !widget.isDashboardInfo ? Colors.grey : widget.dashboard.midDashColor,
+                  width: 200 / 2, child: Icon(Icons.format_paint, color: Colors.white)), 
+                )
+              )
+          ]
+        )
+      ),
+      widget.dashboard.error != null ? Container( width: 200, color: Colors.red, padding: EdgeInsets.all(10),
+        child: Center( child: Text(widget.dashboard.error!, 
+        style: TextStyle(color: Colors.white, fontSize: 15), textAlign: TextAlign.center))) : Container(),
       w
     ]);
   }
 }
 
+// ignore: must_be_immutable
 class MySeparator extends StatelessWidget {
   double width = 1; double dashWidth = 10; double dashSpace = 10;
-  MySeparator({Key? key, this.width = 1,  this.dashSpace = 10, this.dashWidth = 10,
-    this.height = 1, this.color = Colors.black})
-      : super(key: key);
+  MySeparator({super.key, this.width = 1,  this.dashSpace = 10, this.dashWidth = 10,
+    this.height = 1, this.color = Colors.black});
   final double height;
   final Color color;
 
   @override
   Widget build(BuildContext context) {
-    return Container( width: width, child: dashSpace == 0 ? 
+    return SizedBox( width: width, child: dashSpace == 0 ? 
       Divider( thickness: 2, color: color ) 
       : DottedLine(
               dashLength: dashWidth,

library/flutter_flow_chart/lib/src/ui/draw_arrow.dart

@@ -211,6 +211,8 @@ class DrawingArrow extends ChangeNotifier {
 
   /// Arrow parameters.
   ArrowParams params = ArrowParams();
+  List<dynamic> env = [];
+  List<dynamic> infos = [];
   String fromID = "";
   String toID = "";
 
@@ -264,13 +266,16 @@ class DrawArrow extends StatefulWidget {
     required this.srcElement,
     required this.destElement,
     required List<Pivot> pivots,
+    this.infos = const [],
+    this.env = const [],
     super.key,
     ArrowParams? arrowParams,
   })  : arrowParams = arrowParams ?? ArrowParams(),
         pivots = PivotsNotifier(pivots);
 
   final int index;
-
+   List<dynamic> env = [];
+  List<dynamic> infos = [];
   ///
   final ArrowParams arrowParams;
 
@@ -340,6 +345,8 @@ class DrawArrowState extends State<DrawArrow> {
           builder: (context) {
             var painter = ArrowPainter(
                 connIndex: widget.index,
+                infos: widget.infos,
+                env: widget.env,
                 elementIndex: widget.flow.widget.dashboard.elements.indexOf(widget.srcElement),
                 fromID: "${widget.srcElement.id}_${widget.index}",
                 toID: "${widget.destElement.id}_${widget.index}",
@@ -351,8 +358,8 @@ class DrawArrowState extends State<DrawArrow> {
               );
             if ( widget.flow.widget.dashboard.arrows.where(
                   (element) => element.fromID == "${widget.srcElement.id}_${widget.index}").isEmpty) {
-                widget.flow.widget.dashboard.addArrows(painter); 
-                widget.flow.widget.dashboard.save!(widget.flow.widget.dashboard.id);
+                widget.flow.widget.dashboard.addArrows(painter, context); 
+                widget.flow.widget.dashboard.saveDash(widget.flow.widget.dashboard.id, context);
             } else {
               var i = widget.flow.widget.dashboard.arrows.indexWhere(
                   (element) => element.fromID == "${widget.srcElement.id}_${widget.index}");
@@ -390,7 +397,7 @@ class GraphParamsWidgetState extends State<GraphParamsWidget> {
       child: Row(children: [
         IconButton(onPressed: () {
           widget.comp.setState(() {
-            widget.comp.widget.dashboard.arrows.removeWhere((el) => el.fromID == "${widget.element.id}${widget.index}");
+            widget.comp.widget.dashboard.removeArrows((el) => el.fromID == "${widget.element.id}${widget.index}", context);
             widget.element.next.removeAt(widget.index);
           });
         }, icon: Icon(Icons.delete))
@@ -399,17 +406,18 @@ class GraphParamsWidgetState extends State<GraphParamsWidget> {
 }
 
 class ArrowInfoWidget extends StatefulWidget {
-  ArrowInfoWidget ({ Key? key, }): super(key: key);
+  Dashboard dashboard;
+  ArrowInfoWidget ({ Key? key, required this.dashboard }): super(key: key);
   @override ArrowInfoWidgetState createState() => ArrowInfoWidgetState();
 }
 class ArrowInfoWidgetState extends State<ArrowInfoWidget> {
   @override Widget build(BuildContext context) {
     return SingleChildScrollView( child: Column(children: [
       Container(height: 50, 
-       decoration: BoxDecoration(color: Colors.grey.shade300, border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
+       decoration: BoxDecoration(color: widget.dashboard.midDashColor, border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
        child: Center( child: Text("<Arrow> Style", style: TextStyle(fontSize: 20)))),
       Container(height: 50, 
-       decoration: BoxDecoration(color: Colors.grey.shade300, border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
+       decoration: BoxDecoration(color: widget.dashboard.midDashColor, border: Border(bottom: BorderSide(color: Colors.grey, width: 1))),
        child: Row(children: [],)
       ),
     ],) );
@@ -420,15 +428,13 @@ class ArrowInfoWidgetState extends State<ArrowInfoWidget> {
 /// [ArrowParams.startArrowPosition] and
 /// [ArrowParams.endArrowPosition] alignment.
 class ArrowPainter extends CustomPainter {
-  String fromID;
-  String toID;
-  bool isSelected = false;
-  ///
   ArrowPainter({
     this.elementIndex,
     this.connIndex,
     this.toID = "",
     this.fromID = "",
+    this.infos = const [],
+    this.env  = const [],
     this.isSelected = false,
     required this.params,
     this.from = Offset.zero,
@@ -436,15 +442,16 @@ class ArrowPainter extends CustomPainter {
     List<Pivot>? pivots, 
   }) : pivots = pivots ?? [];
 
-  ///
+  List<dynamic> env;
+  List<dynamic> infos;
   ArrowParams params;
-  ///
-  Offset from;
-  int? elementIndex;
-  int? connIndex;
-  ///
+  String toID;
+  String fromID;
   Offset to;
-
+  Offset from;
+  int? connIndex;
+  int? elementIndex;
+  bool isSelected = false;
   ///
   Path path = Path();
   Path dashed = Path();
@@ -462,6 +469,8 @@ class ArrowPainter extends CustomPainter {
   final arrowAngle=  25 * math.pi / 180;
 
   ArrowPainter deserialize(Map<String, dynamic> map) {
+    infos = map['infos'];
+    env = map['env'];
     params = ArrowParams.fromMap(map['params']);
     fromID = map['from']['id'];
     toID = map['to']['id'];
@@ -469,9 +478,10 @@ class ArrowPainter extends CustomPainter {
     to = Offset(map['to']['x'], map['to']['y']);
     return this;
   }
-
   Map<String, dynamic> serialize() {
     Map<String, dynamic> graphElement = {};
+    graphElement['infos'] = infos;
+    graphElement['env'] = env;
     graphElement['from'] = { "id" : fromID.split("_")[0], "x" : from.dx, "y" : from.dy };
     graphElement['to'] = { "id" : toID.split("_")[0], "x" : to.dx, "y" : to.dy };
     graphElement['params'] = params.toMap();
@@ -484,6 +494,8 @@ class ArrowPainter extends CustomPainter {
       elementIndex: map['elementIndex'] as int,
       toID: map['toID'] != null ? map['toID'] as String : "",
       fromID: map['fromID'] as String,
+      infos: map['infos'] as List,
+      env: map['env'] as List,
       isSelected: map['isSelected'] != null ? map['isSelected'] as bool : false,
       params: ArrowParams.fromMap(map['params']),
       from: Offset(
@@ -511,6 +523,8 @@ class ArrowPainter extends CustomPainter {
         "fromDy" : from.dy,
         "toDx" : to.dx,
         "toDy" : to.dy,
+        "infos" : infos,
+        "env" : env,
         'pivots': pivots.map((e) => e.toMap()).toList(),
       };
   }
@@ -732,8 +746,8 @@ class ArrowPainter extends CustomPainter {
 
 
   bool isLine(Offset position) {
-    for (double i=-20; i < 20; i++) {
-      for (double y=-20; y < 20; y++) {
+    for (double i=-5; i < 5; i++) {
+      for (double y=-5; y < 5; y++) {
         var pos = position + Offset(i, y);
         if (path.contains(pos)) {
           return true;

library/flutter_flow_chart/lib/src/ui/element_handlers.dart

@@ -210,7 +210,7 @@ class _ElementHandler extends StatelessWidget {
             },
             child: GestureDetector(
               onTapDown: (details) =>
-                  tapDown = details.globalPosition - dashboard.position,
+                  tapDown = details.globalPosition - dashboard.position ,
               onSecondaryTapDown: (details) => secondaryTapDown =
                   details.globalPosition - dashboard.position,
               onTap: () {
@@ -266,10 +266,10 @@ class _ElementHandler extends StatelessWidget {
                   forwardWidth: dashboard.defaultForwardWidth,
                 );
                 DrawingArrow.instance.from =
-                    details.globalPosition - Offset(-10, 45);
+                    details.globalPosition - Offset(dashboard.widthOffset - 10, 45 + dashboard.heightOffset); // todo change
                 isDragging = true;
               }
-              DrawingArrow.instance.to = details.globalPosition - Offset(-10, 50);
+              DrawingArrow.instance.to = details.globalPosition - Offset(dashboard.widthOffset - 10, 50 + dashboard.heightOffset); // todo change
               DrawingArrow.instance.setParams(
                 DrawingArrow.instance.params.copyWith(
                   endArrowPosition: Alignment.center,

library/flutter_flow_chart/lib/src/ui/element_widget.dart

@@ -13,11 +13,19 @@ import 'package:flutter_flow_chart/src/objects/any_widget.dart';
 
 /// Widget that use [element] properties to display it on the dashboard scene
 class ElementWidget<T extends FlowData> extends StatefulWidget {
+  Widget? bottomLeftBadge;
+  Widget? bottomRightBadge;
+  Widget? topLeftBadge;
+  Widget? topRightBadge;
   ///
   ElementWidget({
     required this.dashboard,
     required this.element,
     super.key,
+    this.bottomLeftBadge,
+    this.bottomRightBadge,
+    this.topLeftBadge,
+    this.topRightBadge,
     this.onElementPressed,
     this.onElementSecondaryTapped,
     this.onElementLongPressed,
@@ -27,7 +35,7 @@ class ElementWidget<T extends FlowData> extends StatefulWidget {
     this.onHandlerLongPressed,
     this.onHandlerSecondaryLongTapped,
   });
-
+  Color? dashColor;
   ///
   final Dashboard dashboard;
 
@@ -139,10 +147,19 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
             secondaryTapDownPos = details.globalPosition,
         onTap: () {
           setState(() { 
-            widget.element.isSelected = !widget.element.isSelected; 
-            for (var sel in widget.dashboard.arrows) { sel.isSelected = false; }
-            widget.dashboard.selectedMenuKey.currentState?. setState(() { });
-            Future.delayed(Duration(seconds: 1), () { DrawingArrow.instance.notifyListeners(); });
+            if (!(widget.dashboard.flutterChartKey.currentState?.isCtrl ?? true)) {
+              for (var element in widget.dashboard.elements) { 
+                element.isSelected = false; 
+                element.dashboard.chartKey.currentState?. setState(() { });
+                widget.dashboard.selectedMenuKey.currentState?. setState(() { });
+              }
+            }
+            Future.delayed(Duration(milliseconds: 100), () { 
+              DrawingArrow.instance.notifyListeners(); 
+              widget.element.isSelected = !widget.element.isSelected; 
+              for (var sel in widget.dashboard.arrows) { sel.isSelected = false; }
+              widget.dashboard.selectedMenuKey.currentState?. setState(() { });
+            });
           });
           widget.onElementPressed?.call(context, tapLocation);
         },
@@ -153,8 +170,7 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
           widget.onElementLongPressed?.call(context, tapLocation);
         },
         onSecondaryLongPress: () {
-          widget.onElementSecondaryLongTapped
-              ?.call(context, secondaryTapDownPos);
+          widget.onElementSecondaryLongTapped?.call(context, secondaryTapDownPos);
         },
         child: Listener(
           onPointerDown: (event) {
@@ -168,8 +184,7 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
               color: Colors.transparent,
               child: Padding( padding: EdgeInsets.all(6),
                 child: Container(
-                  decoration: BoxDecoration(border: Border.all(
-                    color: Colors.red, width: 2)),
+                  decoration: BoxDecoration(border: Border.all( color: Colors.red, width: 2)),
                   width: widget.element.size.width - 12, 
                   height: widget.element.size.height - 12, child: element)
               ),
@@ -183,9 +198,9 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
                   onHandlerLongPressed: widget.onHandlerLongPressed,
                   onHandlerSecondaryLongTapped: widget.onHandlerSecondaryLongTapped,
                   child: Container( 
-                      margin: EdgeInsets.all(6),
+                      margin: EdgeInsets.all(10), // why some change
                       decoration: BoxDecoration(
-                        border: Border.all(color: widget.element.isSelected ? Colors.red : Colors.grey.shade300, 
+                        border: Border.all(color: widget.element.isSelected ? Colors.red : widget.dashboard.midDashColor, 
                           width: widget.element.isSelected ? 2 : 1),
                       ),
                       child: InkWell( mouseCursor: SystemMouseCursors.grab, child: element )
@@ -199,7 +214,8 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
               var diff = Offset(widget.element.position.dx, widget.element.position.dy);
               widget.element.isSelected = true;
               widget.element.changePosition(
-                details.globalPosition - delta - Offset(0, 50),
+                details.globalPosition - delta - Offset(
+                  widget.dashboard.widthOffset, 50 + widget.dashboard.heightOffset), // todo change
               ); 
               diff = widget.element.position - diff;
               if (widget.element.isSelected) {
@@ -211,7 +227,9 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
             },
             onDragEnd: (details) {
               var diff = Offset(widget.element.position.dx, widget.element.position.dy);
-              widget.element.changePosition(details.offset - Offset(0, 50));
+              widget.element.changePosition(details.offset - Offset(
+                widget.dashboard.widthOffset, 50 + widget.dashboard.heightOffset
+              )); // todo change
               diff = widget.element.position - diff;
               if (widget.element.isSelected) {
                 for (var sel in widget.dashboard.elementSelected) {
@@ -219,16 +237,20 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
                   sel.changePosition(sel.position + diff);
                 }
               }
-              widget.dashboard.save!(widget.dashboard.id);
+              widget.dashboard.saveDash(widget.dashboard.id, context);
             },
           ),
         ),
     );
     w = ResizeWidget(
       comp: this,
+      bottomLeftBadge: widget.bottomLeftBadge,
+      bottomRightBadge: widget.bottomRightBadge,
+      topLeftBadge: widget.topLeftBadge,
+      topRightBadge: widget.topRightBadge,
       element: widget.element,
       dashboard: widget.dashboard,
-      handlerColor: widget.isHovered ? Color.fromRGBO(38, 166, 154, 1) : Colors.transparent,
+      handlerColor: widget.isHovered ? widget.dashboard.dashColor : Colors.transparent,
       child: w 
     );
     return Transform.translate(
@@ -237,14 +259,14 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
       child: MouseRegion( 
         onEnter: (event) { setState(() {  widget.isHovered = true;  }); }, 
         onExit: (event) { setState(() {  widget.isHovered = false; }); },
-        child: Wrap( direction: Axis.vertical, children: [
-          w, 
+        child: Wrap( direction: Axis.vertical, children: [ 
+          w,         
           Container( 
             constraints: BoxConstraints( minWidth: widget.element.size.width ),
             child: Row( mainAxisAlignment: MainAxisAlignment.center, 
               children: (!widget.isHovered ? [] : [
               IconButton(tooltip: "remove element", onPressed: () {
-                widget.dashboard.removeElement(widget.element);
+                widget.dashboard.removeElement(widget.element, context);
               }, icon: Icon(Icons.delete_outline)),
               IconButton(tooltip: "copy element", onPressed: () {
                 FlowElement<T> newElement = FlowElement<T>(
@@ -255,10 +277,10 @@ class ElementWidgetState<T extends FlowData>  extends State<ElementWidget> {
                   size: widget.element.size,
                   widget: widget.element.widget,
                 );
-                widget.dashboard.addElement(newElement);
+                widget.dashboard.addElement(newElement, context);
               }, icon: Icon(Icons.copy, size: 20)),
             ]))
-          )
+          ),
         ])
       )
     );

library/flutter_flow_chart/lib/src/ui/resize_widget.dart

@@ -5,15 +5,21 @@ import 'package:flutter_flow_chart/src/ui/handler_widget.dart';
 
 /// The widget to press and drag to resize the element
 class ResizeWidget extends StatefulWidget {
+  Widget? bottomLeftBadge;
+  Widget? bottomRightBadge;
+  Widget? topLeftBadge;
+  Widget? topRightBadge;
   ///
   ResizeWidget({
     required this.comp,
     required this.element,
     required this.dashboard,
     required this.child,
+    this.bottomLeftBadge,
+    this.bottomRightBadge,
+    this.topLeftBadge,
+    this.topRightBadge,
     this.handlerColor =const Color.fromRGBO(38, 166, 154, 1),
-    this.additionnalHeight = 0,
-
     super.key,
   });
 
@@ -27,10 +33,6 @@ class ResizeWidget extends StatefulWidget {
 
   ///
   final Widget child;
-
-  ///
-  final double additionnalHeight;
-
   @override
   State<ResizeWidget> createState() => _ResizeWidgetState();
 }
@@ -40,12 +42,16 @@ class _ResizeWidgetState extends State<ResizeWidget> {
   late Offset elementStartPosition;
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return Container(
       width: widget.element.size.width,
-      height: widget.element.size.height + widget.additionnalHeight,
+      height: widget.element.size.height,
       child: Stack(
         children: [
           widget.child,
+          widget.topLeftBadge == null ? Container() : Positioned(top: 0, left: 0, child: widget.topLeftBadge!),
+          widget.topRightBadge == null ? Container() : Positioned(top: 0, right: 0, child: widget.topRightBadge!),
+          widget.bottomRightBadge == null ? Container() : Positioned(bottom: 0, right: 0, child: widget.bottomRightBadge!),
+          widget.bottomLeftBadge == null ? Container() : Positioned(bottom: 0, left: 0, child: widget.bottomLeftBadge!),
           _handler(Alignment.topLeft),
           _handler(Alignment.topRight),
           _handler(Alignment.bottomLeft),

library/flutter_flow_chart/lib/src/ui/segment_handler.dart

@@ -63,7 +63,6 @@ class _SegmentHandlerState extends State<SegmentHandler> {
           },
           onDragEnd: (details) {
             widget.pivot.pivot = details.offset;
-            
           },
           child: GestureDetector(
             onTap: () {

local_run.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+WORKSPACE_HOST='http://localhost:8089/oc'
+WORKFLOW_HOST='http://localhost:8088/oc'
+ITEM_HOST='http://localhost:8087/oc'
+SCHEDULER_HOST='http://localhost:8090/oc'
+LOGS_HOST='http://localhost:3100'
+PEER_HOST='http://localhost:8093/oc'
+COLLABORATIVE_AREA_HOST='http://localhost:8091/oc'
+AUTH_HOST='http://localhost:8094/oc'
+DATACENTER_HOST='http://localhost:8092/oc'
+
+AUTH_MODE=true
+
+flutter run -d linux --dart-define=AUTH_MODE=$AUTH_MODE --dart-define=DATACENTER_HOST=$DATACENTER_HOST --dart-define=AUTH_HOST=$AUTH_HOST --dart-define=WORKSPACE_HOST=$WORKSPACE_HOST --dart-define=WORKFLOW_HOST=$WORKFLOW_HOST --dart-define=PEER_HOST=$PEER_HOST --dart-define=COLLABORATIVE_AREA_HOST=$COLLABORATIVE_AREA_HOST --dart-define=SCHEDULER_HOST=$SCHEDULER_HOST --dart-define=LOGS_HOST=$LOGS_HOST --dart-define=ITEM_HOST=$ITEM_HOST 

pubspec.lock

@@ -13,18 +13,18 @@ packages:
     dependency: "direct main"
     description:
       name: animated_toggle_switch
-      sha256: "35e3d6c74eef79c415ac3986046c35cb1ea42720afce13ec7f1a014f72dfd71c"
+      sha256: "786e82be3b004100299c1c6d023f8f1928decc8353a6fdff191bf78c866262fa"
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.2"
+    version: "0.8.3"
   args:
     dependency: transitive
     description:
       name: args
-      sha256: "7cf60b9f0cc88203c5a190b4cd62a99feea42759a7fa695010eb5de1c0b2252a"
+      sha256: bf9f5caeea8d8fe6721a9c358dd8a5c1947b27f1cfaa18b39c301273594919e6
       url: "https://pub.dev"
     source: hosted
-    version: "2.5.0"
+    version: "2.6.0"
   async:
     dependency: transitive
     description:
@@ -133,58 +133,58 @@ packages:
     dependency: "direct main"
     description:
       name: desktop_window
-      sha256: "6256fb6feb7b5ec1311c76a3503f89202825bfe92c0458ec5fe7a728ffa216d5"
+      sha256: cb30b3bcea10931a21333ed044f85054cf9242820f3c240264a4c0df324a9fd6
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.0"
+    version: "0.4.1"
   device_info_plus:
     dependency: transitive
     description:
       name: device_info_plus
-      sha256: eead12d1a1ed83d8283ab4c2f3fca23ac4082f29f25f29dff0f758f57d06ec91
+      sha256: a7fd703482b391a87d60b6061d04dfdeab07826b96f9abd8f5ed98068acc0074
       url: "https://pub.dev"
     source: hosted
-    version: "10.1.0"
+    version: "10.1.2"
   device_info_plus_platform_interface:
     dependency: transitive
     description:
       name: device_info_plus_platform_interface
-      sha256: d3b01d5868b50ae571cd1dc6e502fc94d956b665756180f7b16ead09e836fd64
+      sha256: "282d3cf731045a2feb66abfe61bbc40870ae50a3ed10a4d3d217556c35c8c2ba"
       url: "https://pub.dev"
     source: hosted
-    version: "7.0.0"
+    version: "7.0.1"
   dio:
     dependency: "direct main"
     description:
       name: dio
-      sha256: "77befdddf51050e1635a04d2bcfff230089ce7294e642d00da58cd079c0de0c8"
+      sha256: "5598aa796bbf4699afd5c67c0f5f6e2ed542afc956884b9cd58c306966efc260"
       url: "https://pub.dev"
     source: hosted
-    version: "5.5.0"
+    version: "5.7.0"
   dio_web_adapter:
     dependency: transitive
     description:
       name: dio_web_adapter
-      sha256: "36c5b2d79eb17cdae41e974b7a8284fec631651d2a6f39a8a2ff22327e90aeac"
+      sha256: "33259a9276d6cea88774a0000cfae0d861003497755969c92faa223108620dc8"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.1"
+    version: "2.0.0"
   dotted_line:
     dependency: "direct main"
     description:
       name: dotted_line
-      sha256: c931ba331656154711d9420f369f80cf9e8869ca9933ae5fb35b7669bcbe7d2e
+      sha256: "41e3d655939559815daa1370fc1e07673a205fa628cf40ce3af45d90029a77b6"
       url: "https://pub.dev"
     source: hosted
-    version: "3.2.2"
+    version: "3.2.3"
   el_tooltip:
     dependency: "direct main"
     description:
       name: el_tooltip
-      sha256: bdaa31ae3c925a50a1448fca79f7264204d29310e8cc5312425ec1aadb1c7026
+      sha256: "0860b00e9390a31dd98369dc16d3b6fa2668fc52df712bd00e86d8931787fc17"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.0"
+    version: "2.2.1"
   fake_async:
     dependency: transitive
     description:
@@ -197,26 +197,26 @@ packages:
     dependency: transitive
     description:
       name: ffi
-      sha256: "493f37e7df1804778ff3a53bd691d8692ddf69702cf4c1c1096a2e41b4779e21"
+      sha256: "16ed7b077ef01ad6170a3d0c57caa4a112a38d7a2ed5602e0aca9ca6f3d98da6"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.3"
   file:
     dependency: transitive
     description:
       name: file
-      sha256: "5fc22d7c25582e38ad9a8515372cd9a93834027aacf1801cf01164dac0ffa08c"
+      sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
       url: "https://pub.dev"
     source: hosted
-    version: "7.0.0"
+    version: "7.0.1"
   fixnum:
     dependency: transitive
     description:
       name: fixnum
-      sha256: "25517a4deb0c03aa0f32fd12db525856438902d9c16536311e76cdc57b31d7d1"
+      sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
       url: "https://pub.dev"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -234,10 +234,10 @@ packages:
     dependency: "direct main"
     description:
       name: flutter_box_transform
-      sha256: "2b844096d2cb14b7d9444abc972aa57233c0eeab92ca60c92b8211b49c103158"
+      sha256: "428619d0ea67631e4486b7a2ba46b1f6589420dcb9d0e520f8c81b98bd211159"
       url: "https://pub.dev"
     source: hosted
-    version: "0.4.4"
+    version: "0.4.6"
   flutter_colorpicker:
     dependency: "direct main"
     description:
@@ -265,10 +265,10 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      sha256: "9e8c3858111da373efc5aa341de011d9bd23e2c5c5e0c62bccf32438e192d7b1"
+      sha256: "5398f14efa795ffb7a33e9b6a08798b26a180edac4ad7db3f231e40f82ce11e1"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.2"
+    version: "5.0.0"
   flutter_map:
     dependency: "direct main"
     description:
@@ -303,6 +303,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  font_awesome_flutter:
+    dependency: "direct main"
+    description:
+      name: font_awesome_flutter
+      sha256: d3a89184101baec7f4600d58840a764d2ef760fe1c5a20ef9e6b0e9b24a07a3a
+      url: "https://pub.dev"
+    source: hosted
+    version: "10.8.0"
   get_it:
     dependency: transitive
     description:
@@ -315,10 +323,10 @@ packages:
     dependency: "direct main"
     description:
       name: go_router
-      sha256: cdae1b9c8bd7efadcef6112e81c903662ef2ce105cbd220a04bbb7c3425b5554
+      sha256: "6f1b756f6e863259a99135ff3c95026c3cdca17d10ebef2bba2261a25ddc8bbc"
       url: "https://pub.dev"
     source: hosted
-    version: "14.2.0"
+    version: "14.3.0"
   hover_menu:
     dependency: "direct main"
     description:
@@ -331,10 +339,10 @@ packages:
     dependency: transitive
     description:
       name: http
-      sha256: "761a297c042deedc1ffbb156d6e2af13886bb305c2a343a4d972504cd67dd938"
+      sha256: b9c29a161230ee03d3ccf545097fccd9b87a5264228c5d348202e0f0c28f9010
       url: "https://pub.dev"
     source: hosted
-    version: "1.2.1"
+    version: "1.2.2"
   http_parser:
     dependency: transitive
     description:
@@ -403,34 +411,34 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa"
+      sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.0"
+    version: "10.0.5"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0
+      sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.5"
   leak_tracker_testing:
     dependency: transitive
     description:
       name: leak_tracker_testing
-      sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47
+      sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.1"
   lints:
     dependency: transitive
     description:
       name: lints
-      sha256: cbf8d4b858bb0134ef3ef87841abdf8d63bfc255c266b7bf6b39daa1085c4290
+      sha256: "3315600f3fb3b135be672bf4a178c55f274bebe368325ae18462c89ac1e3b413"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.0"
+    version: "5.0.0"
   lists:
     dependency: transitive
     description:
@@ -439,14 +447,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.1"
+  localstorage:
+    dependency: "direct main"
+    description:
+      name: localstorage
+      sha256: "6340acefdd3a969cceb044a69cde2dc5877c5b861b2e02d0803930ed483dbe91"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.0"
   logger:
     dependency: transitive
     description:
       name: logger
-      sha256: af05cc8714f356fd1f3888fb6741cbe9fbe25cdb6eedbab80e1a6db21047d4a4
+      sha256: "697d067c60c20999686a0add96cf6aba723b3aa1f83ecf806a8097231529ec32"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.0"
+    version: "2.4.0"
   logging:
     dependency: transitive
     description:
@@ -467,18 +483,18 @@ packages:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a"
+      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.0"
+    version: "0.11.1"
   meta:
     dependency: transitive
     description:
       name: meta
-      sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04
+      sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "1.15.0"
   mgrs_dart:
     dependency: transitive
     description:
@@ -515,10 +531,10 @@ packages:
     dependency: "direct main"
     description:
       name: path_provider
-      sha256: c9e7d3a4cd1410877472158bee69963a4579f78b68c65a2b7d40d1a7a88bb161
+      sha256: fec0d61223fba3154d87759e3cc27fe2c8dc498f6386c6d6fc80d1afdd1bf378
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   path_provider_android:
     dependency: transitive
     description:
@@ -555,10 +571,10 @@ packages:
     dependency: transitive
     description:
       name: path_provider_windows
-      sha256: "8bc9f22eee8690981c22aa7fc602f5c85b497a6fb2ceb35ee5a5e5ed85ad8170"
+      sha256: bd6f00dbd873bfb70d0761682da2b3a2c2fccc2b9e84c495821639601d81afe7
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.1"
+    version: "2.3.0"
   petitparser:
     dependency: transitive
     description:
@@ -579,10 +595,10 @@ packages:
     dependency: transitive
     description:
       name: platform
-      sha256: "9b71283fc13df574056616011fb138fd3b793ea47cc509c189a6c3fa5f8a1a65"
+      sha256: "5d6b1b0036a5f331ebc77c850ebc8506cbc1e9416c27e59b439f917a902a4984"
       url: "https://pub.dev"
     source: hosted
-    version: "3.1.5"
+    version: "3.1.6"
   plugin_platform_interface:
     dependency: transitive
     description:
@@ -643,42 +659,42 @@ packages:
     dependency: transitive
     description:
       name: shared_preferences_foundation
-      sha256: "0a8a893bf4fd1152f93fec03a415d11c27c74454d96e2318a7ac38dd18683ab7"
+      sha256: "07e050c7cd39bad516f8d64c455f04508d09df104be326d8c02551590a0d513d"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.0"
+    version: "2.5.3"
   shared_preferences_linux:
     dependency: transitive
     description:
       name: shared_preferences_linux
-      sha256: "9f2cbcf46d4270ea8be39fa156d86379077c8a5228d9dfdb1164ae0bb93f1faa"
+      sha256: "580abfd40f415611503cae30adf626e6656dfb2f0cee8f465ece7b6defb40f2f"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.2"
+    version: "2.4.1"
   shared_preferences_platform_interface:
     dependency: transitive
     description:
       name: shared_preferences_platform_interface
-      sha256: "22e2ecac9419b4246d7c22bfbbda589e3acf5c0351137d87dd2939d984d37c3b"
+      sha256: "57cbf196c486bc2cf1f02b85784932c6094376284b3ad5779d1b1c6c6a816b80"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.2"
+    version: "2.4.1"
   shared_preferences_web:
     dependency: transitive
     description:
       name: shared_preferences_web
-      sha256: "9aee1089b36bd2aafe06582b7d7817fd317ef05fc30e6ba14bff247d0933042a"
+      sha256: "59dc807b94d29d52ddbb1b3c0d3b9d0a67fc535a64e62a5542c8db0513fcb6c2"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.0"
+    version: "2.4.1"
   shared_preferences_windows:
     dependency: transitive
     description:
       name: shared_preferences_windows
-      sha256: "841ad54f3c8381c480d0c9b508b89a34036f512482c407e6df7a9c4aa2ef8f59"
+      sha256: "94ef0f72b2d71bc3e700e025db3710911bd51a71cefb65cc609dd0d9a982e3c1"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.2"
+    version: "2.4.1"
   simple_gesture_detector:
     dependency: transitive
     description:
@@ -744,50 +760,50 @@ packages:
     dependency: transitive
     description:
       name: super_clipboard
-      sha256: cdab725bac26655ebd189f4d202d694a8cbc1c21e0f0478ccd7829c71716f09b
+      sha256: "74098001413e075cc53dee72b68c32eaffc10709df41806800393abaa6dac9d5"
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.17"
+    version: "0.8.19"
   super_drag_and_drop:
     dependency: "direct main"
     description:
       name: super_drag_and_drop
-      sha256: "8e00c6082646076f80b972b39d9c27b5311082ea1e8add5fa370ce11c410f7de"
+      sha256: "20f4318a6c9e81a76cc090a0f2d845157ff4f3619ed784e3235324a45ce34507"
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.17"
+    version: "0.8.19"
   super_native_extensions:
     dependency: transitive
     description:
       name: super_native_extensions
-      sha256: fa55d452d34b7112453afbb9fa4d13c0527ff201630d10d86546497179030544
+      sha256: c24676825c9f3ae844676a843d45ad186f2270539ffe72be4277753e46d14e29
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.17"
+    version: "0.8.19"
   syncfusion_flutter_calendar:
     dependency: "direct main"
     description:
       name: syncfusion_flutter_calendar
-      sha256: "1daa6077a8fb388b692d5d050d58eaa4c01ef92f064a882eb330ef47dc51cf2e"
+      sha256: "1fdbcb8435abc4a1fb36914b83d9690eb0dea617df3ac2772519fba7a3011828"
       url: "https://pub.dev"
     source: hosted
-    version: "26.2.7"
+    version: "27.1.55"
   syncfusion_flutter_core:
     dependency: transitive
     description:
       name: syncfusion_flutter_core
-      sha256: fd4d2cdbf8d0d1e3441817cb8a03f896566fad5187788957e78492fe16800388
+      sha256: bc86234c9a0a87b6c3288b9065175e74e9a73e22b2237989a8bbdeff0c8befd7
       url: "https://pub.dev"
     source: hosted
-    version: "26.2.7"
+    version: "27.1.55"
   syncfusion_flutter_datepicker:
     dependency: transitive
     description:
       name: syncfusion_flutter_datepicker
-      sha256: e541929ccf95a9188ef9f32dfca544f29b3fc222d4dc5da9cb1112305021a615
+      sha256: "54fe7e7a660ecdf072cceec890425d7531b42f647245f9244565c61e96fbca4a"
       url: "https://pub.dev"
     source: hosted
-    version: "26.2.7"
+    version: "27.1.55"
   table_calendar:
     dependency: "direct main"
     description:
@@ -808,18 +824,18 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
+      sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.1"
+    version: "0.7.2"
   timezone:
     dependency: transitive
     description:
       name: timezone
-      sha256: a6ccda4a69a442098b602c44e61a1e2b4bf6f5516e875bbf0f427d5df14745d5
+      sha256: "2236ec079a174ce07434e89fcd3fcda430025eb7692244139a9cf54fdcf1fc7d"
       url: "https://pub.dev"
     source: hosted
-    version: "0.9.3"
+    version: "0.9.4"
   typed_data:
     dependency: transitive
     description:
@@ -840,10 +856,10 @@ packages:
     dependency: "direct main"
     description:
       name: uuid
-      sha256: "814e9e88f21a176ae1359149021870e87f7cddaf633ab678a5d2b0bff7fd1ba8"
+      sha256: a5be9ef6618a7ac1e964353ef476418026db906c4facdedaa299b7a2e71690ff
       url: "https://pub.dev"
     source: hosted
-    version: "4.4.0"
+    version: "4.5.1"
   vector_graphics:
     dependency: transitive
     description:
@@ -880,10 +896,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957
+      sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
       url: "https://pub.dev"
     source: hosted
-    version: "13.0.0"
+    version: "14.2.5"
   web:
     dependency: transitive
     description:
@@ -892,46 +908,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.5.1"
-  webview_flutter:
-    dependency: "direct main"
-    description:
-      name: webview_flutter
-      sha256: "6869c8786d179f929144b4a1f86e09ac0eddfe475984951ea6c634774c16b522"
-      url: "https://pub.dev"
-    source: hosted
-    version: "4.8.0"
-  webview_flutter_android:
-    dependency: "direct main"
-    description:
-      name: webview_flutter_android
-      sha256: "0d21cfc3bfdd2e30ab2ebeced66512b91134b39e72e97b43db2d47dda1c4e53a"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.16.3"
-  webview_flutter_platform_interface:
-    dependency: transitive
-    description:
-      name: webview_flutter_platform_interface
-      sha256: d937581d6e558908d7ae3dc1989c4f87b786891ab47bb9df7de548a151779d8d
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.10.0"
-  webview_flutter_wkwebview:
-    dependency: "direct main"
-    description:
-      name: webview_flutter_wkwebview
-      sha256: "9c62cc46fa4f2d41e10ab81014c1de470a6c6f26051a2de32111b2ee55287feb"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.14.0"
   win32:
     dependency: transitive
     description:
       name: win32
-      sha256: "0eaf06e3446824099858367950a813472af675116bf63f008a4c2a75ae13e9cb"
+      sha256: e1d0cc62e65dc2561f5071fcbccecf58ff20c344f8f3dc7d4922df372a11df1f
       url: "https://pub.dev"
     source: hosted
-    version: "5.5.0"
+    version: "5.7.1"
   win32_registry:
     dependency: transitive
     description:
@@ -952,10 +936,10 @@ packages:
     dependency: transitive
     description:
       name: xdg_directories
-      sha256: faea9dee56b520b55a566385b84f2e8de55e7496104adada9962e0bd11bcff1d
+      sha256: "7a3f37b05d989967cdddcbb571f1ea834867ae2faa29725fd085180e0883aa15"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.4"
+    version: "1.1.0"
   xml:
     dependency: transitive
     description:
@@ -965,5 +949,5 @@ packages:
     source: hosted
     version: "6.5.0"
 sdks:
-  dart: ">=3.3.4 <=3.7.12"
+  dart: ">=3.5.0 <=3.7.12"
   flutter: ">=3.19.0"

pubspec.yaml

@@ -66,13 +66,12 @@ dependencies:
   flutter_advanced_switch: ^3.1.0
   cron: ^0.6.1
   flutter_event_calendar: ^1.0.0
-  syncfusion_flutter_calendar: ^26.2.7
-  webview_flutter: ^4.8.0
-  webview_flutter_android: ^3.16.3
-  webview_flutter_wkwebview: ^3.14.0
+  syncfusion_flutter_calendar: ^27.1.55
   json_string: ^3.0.1
   flutter_spinkit: ^5.2.1
-
+  localstorage: ^5.0.0
+  font_awesome_flutter: ^10.8.0
+  
 dev_dependencies:
   flutter_test:
     sdk: flutter
@@ -82,7 +81,7 @@ dev_dependencies:
   # activated in the `analysis_options.yaml` file located at the root of your
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
-  flutter_lints: ^3.0.0
+  flutter_lints: ^5.0.0
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec