diff --git a/resources/assets/js/components/Tabs.vue b/resources/assets/js/components/Tabs.vue
new file mode 100644
index 000000000..d3ce226a8
--- /dev/null
+++ b/resources/assets/js/components/Tabs.vue
@@ -0,0 +1,40 @@
+<template>
+  <Tabs>
+    <Tab
+      v-for="item in data.items"
+      :key="item.title"
+      :title="item.title"
+      v-on:click="selectedTab"
+    >
+      {{ item.title }}
+    </Tab>
+  </Tabs>
+</template>
+
+<script>
+import { Tabs, Tab } from 'vue-slim-tabs'
+
+export default {
+  props: {
+    data: Object
+  },
+  components: {
+    Tabs, Tab
+  },
+  data() {
+    return {
+      0: function() {
+        console.log(this.data.items[0].appUid);
+      }
+    };
+  },
+  methods: {
+    selectedTab(e, index) {
+      if (index === 0) {
+        console.log("fabio")
+      }
+    }
+  },
+}
+</script>
+<style src="vue-slim-tabs/themes/default.css"></style>
\ No newline at end of file
diff --git a/resources/assets/js/components/cases/AttachedDocuments.vue b/resources/assets/js/components/cases/AttachedDocuments.vue
new file mode 100644
index 000000000..8990d9cf7
--- /dev/null
+++ b/resources/assets/js/components/cases/AttachedDocuments.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="card v-case-summary-card" style="width: 20rem">
+    <div class="card-body">
+      <h6 class="card-subtitle mb-2 text-muted">{{ data.title }}</h6>
+      <div class="card-text">
+        <div
+          v-for="item in data.items"
+          :key="item.title"
+          class="v-attached-block"
+        >
+          <div class="v-list v-list-row block">
+            <div class="v-list-item">
+              <div class="v-attached-icon">
+                <i :class="classIcon(item.extension)"></i>
+              </div>
+              <div class="flex">
+                <div @click="item.onClick" class="v-item-except text-sm h-1x">
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AttachedDocuments",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      icon: {
+        pdf: "fas fa-file-pdf",
+        doc: "fas fa-file-word",
+      },
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    classIcon(icon) {
+      return this.icon[icon];
+    },
+  },
+};
+</script>
+
+<style>
+.v-list-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
+.v-list-row .v-list-item {
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.block {
+  background: #fff;
+  border-width: 0;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.v-list {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.v-item-except {
+  padding-left: 10px;
+  color: #6c757d !important;
+}
+
+.v-attached-icon {
+  font-size: 25px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/cases/CaseSummary.vue b/resources/assets/js/components/cases/CaseSummary.vue
new file mode 100644
index 000000000..d8229d27f
--- /dev/null
+++ b/resources/assets/js/components/cases/CaseSummary.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="card v-case-summary-card" style="width: 20rem">
+    <div class="card-body">
+      <h6 class="card-subtitle mb-2 text-muted">{{ data.title }}</h6>
+      <div class="card-text v-case-summary-card-body">
+        <div>
+          <span> {{ data.label.numberCase }} </span>:<span
+            class="font-weight-bold"
+          >
+            {{ data.text.numberCase }}</span
+          >
+        </div>
+        <div>
+          <span> {{ data.label.process }} </span>:<span
+            class="font-weight-bold"
+          >
+            {{ data.text.process }}</span
+          >
+        </div>
+        <div>
+          <span> {{ data.label.status }} </span>:<span class="font-weight-bold">
+            {{ data.text.status }}</span
+          >
+        </div>
+        <div>
+          <span> {{ data.label.caseTitle }} </span>:<span
+            class="font-weight-bold"
+          >
+            {{ data.text.caseTitle }}</span
+          >
+        </div>
+        <div>
+          <span> {{ data.label.created }} </span>:<span
+            class="font-weight-bold"
+          >
+            {{ data.text.created }}</span
+          >
+        </div>
+        <div>
+          <span> {{ data.label.delegationDate }} </span>:<span
+            class="font-weight-bold"
+          >
+            {{ data.text.delegationDate }}</span
+          >
+        </div>
+        <div>
+          <span> {{ data.label.duration }} </span>:<span
+            class="font-weight-bold"
+          >
+            {{ data.text.duration }}</span
+          >
+        </div>
+      </div>
+      <br />
+      <h6 class="card-subtitle mb-2 text-muted">{{ data.titleActions }}</h6>
+      <div v-if=data.btnType class="container v-case-summary-center">
+        <button
+          type="button"
+          class="btn btn-success btn-sm"
+          @click="data.onClick"
+        >
+          {{ data.btnLabel }}
+        </button>
+      </div>
+      <div v-else class="container v-case-summary-center">
+        <button
+          type="button"
+          class="btn btn-secondary btn-sm"
+          @click="data.onClick"
+        >
+          {{ data.btnLabel }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CaseSummary",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.v-case-summary-card {
+  font-size: 13px;
+}
+
+.v-case-summary-card-body {
+  padding-left: 15px;
+}
+
+.v-case-summary-center {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/cases/IoDocuments.vue b/resources/assets/js/components/cases/IoDocuments.vue
new file mode 100644
index 000000000..82000f5a9
--- /dev/null
+++ b/resources/assets/js/components/cases/IoDocuments.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="card v-case-summary-card" style="width: 20rem">
+    <div class="card-body">
+      <h6 class="card-subtitle mb-2 text-muted">{{ data.titleInput }}</h6>
+      <div class="card-text">
+        <div
+          v-for="item in data.inputDocuments"
+          :key="item.title"
+          class="v-attached-block"
+        >
+          <div class="v-list v-list-row block">
+            <div class="v-list-item">
+              <div class="v-attached-icon">
+                <i :class="classIcon(item.extension)"></i>
+              </div>
+              <div class="flex">
+                <div @click="item.onClick" class="v-item-except text-sm h-1x">
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+      <h6 class="card-subtitle mb-2 text-muted">{{ data.titleOutput }}</h6>
+      <div class="card-text">
+        <div
+          v-for="item in data.outputDocuments"
+          :key="item.title"
+          class="v-attached-block"
+        >
+          <div class="v-list v-list-row block">
+            <div class="v-list-item">
+              <div class="v-attached-icon">
+                <i :class="classIcon(item.extension)"></i>
+              </div>
+              <div class="flex">
+                <div @click="item.onClick" class="v-item-except text-sm h-1x">
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IoDocuments",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      icon: {
+        pdf: "fas fa-file-pdf",
+        doc: "fas fa-file-word",
+      },
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    classIcon(icon) {
+      return this.icon[icon];
+    },
+  },
+};
+</script>
+
+<style>
+.v-list-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
+.v-list-row .v-list-item {
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.block {
+  background: #fff;
+  border-width: 0;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.v-list {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.v-item-except {
+  padding-left: 10px;
+  color: #6c757d !important;
+}
+
+.v-attached-icon {
+  font-size: 25px;
+}
+</style>
\ No newline at end of file
diff --git a/workflow/engine/methods/cases/cases_Ajax.php b/workflow/engine/methods/cases/cases_Ajax.php
index 3bf9870b1..eeef88eee 100644
--- a/workflow/engine/methods/cases/cases_Ajax.php
+++ b/workflow/engine/methods/cases/cases_Ajax.php
@@ -541,6 +541,92 @@ switch (($_POST['action']) ? $_POST['action'] : $_REQUEST['action']) {
 
         G::RenderPage('publish', 'raw');
         break;
+    case 'getCasesInputDocuments':
+        $arrayToTranslation = array(
+            "INPUT" => G::LoadTranslation("ID_INPUT_DB"),
+            "OUTPUT" => G::LoadTranslation("ID_OUTPUT_DB"),
+            "ATTACHED" => G::LoadTranslation("ID_ATTACHED_DB")
+        );
+        $oCase = new Cases();
+        $fields = $oCase->loadCase($_POST['appUid']);
+        $sProcessUID = $fields['PRO_UID'];
+        $criteria = $oCase->getAllUploadedDocumentsCriteria(
+            $sProcessUID,
+            $_POST['appUid'],
+            '',
+            $_SESSION['USER_LOGGED'],
+            $_POST['delIndex']
+        );
+        if ($criteria->getDbName() == 'dbarray') {
+            $rs = ArrayBasePeer::doSelectRs($criteria);
+        } else {
+            $rs = GulliverBasePeer::doSelectRs($criteria);
+        }
+        $totalCount = $rs->getRecordCount();
+        if ($criteria->getDbName() == 'dbarray') {
+            $rs = ArrayBasePeer::doSelectRs($criteria);
+        } else {
+            $rs = GulliverBasePeer::doSelectRs($criteria);
+        }
+        $rs->setFetchmode(ResultSet::FETCHMODE_ASSOC);
+        while ($rs->next()) {
+            $result = $rs->getRow();
+            $result["TYPE"] = (array_key_exists($result["TYPE"], $arrayToTranslation)) ? $arrayToTranslation[$result["TYPE"]] : $result["TYPE"];
+            $result['CREATE_DATE'] = DateTime::convertUtcToTimeZone($result['CREATE_DATE']);
+            $aProcesses[] = $result;
+        }
+        $r = new stdclass();
+        $r->data = $aProcesses;
+        $r->totalCount = $totalCount;
+        echo Bootstrap::json_encode($r);
+        break;
+    case 'getCasesOutputDocuments':
+        $oCase = new Cases();
+        $fields = $oCase->loadCase($_POST['appUid']);
+        $sProcessUID = $fields['PRO_UID'];
+        $aProcesses = array();
+        $c = $oCase->getAllGeneratedDocumentsCriteria(
+            $sProcessUID,
+            $_POST['appUid'],
+            '',
+            $_SESSION['USER_LOGGED'],
+            $_POST['delIndex']
+        );
+        if ($c->getDbName() == 'dbarray') {
+            $rs = ArrayBasePeer::doSelectRs($c);
+        } else {
+            $rs = GulliverBasePeer::doSelectRs($c);
+        }
+        $rs->setFetchmode(ResultSet::FETCHMODE_ASSOC);
+        $rs->next();
+        $totalCount = 0;
+        for ($j = 0; $j < $rs->getRecordCount(); $j++) {
+            $result = $rs->getRow();
+            $result["FILEPDFEXIST"] = ($result["FILEPDF"]);
+            $result["DELETE_FILE"] = (isset($result['ID_DELETE']) && $result['ID_DELETE'] == 'Delete') ? true : false;
+            $result['CREATE_DATE'] = DateTime::convertUtcToTimeZone($result['CREATE_DATE']);
+            $aProcesses[] = $result;
+            $rs->next();
+            $totalCount++;
+        }
+        //!dateFormat
+        $conf = new Configurations();
+        try {
+            $globaleneralConfCasesList = $conf->getConfiguration('ENVIRONMENT_SETTINGS', '');   
+        } catch (Exception $e) {
+            $generalConfCasesList = array();
+        }
+        $dateFormat = "";
+        $varFlag = isset($generalConfCasesList['casesListDateFormat']);
+        if ($varFlag && !empty($generalConfCasesList['casesListDateFormat'])) {
+            $dateFormat = $generalConfCasesList['casesListDateFormat'];
+        }
+        $r = new stdclass();
+        $r->data = $aProcesses;
+        $r->totalCount = $totalCount;
+        $r->dataFormat = $dateFormat;
+        echo Bootstrap::json_encode($r);
+        break;
     case 'uploadDocumentGrid_Ajax':
         global $G_PUBLISH;