diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf2a77b..43875d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+0.30.0
+------
+- chore: Typescript strict mode
+
 0.29.2
 ------
 - fix: Email input
diff --git a/package.json b/package.json
index 3b61ab7..55447b5 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.29.2",
+  "version": "0.30.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:guillotinaweb/guillotina_react.git"
@@ -37,6 +37,7 @@
     "@testing-library/user-event": "12.6.0",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
+    "@types/uuid":"9.0.8",
     "babel-plugin-formatjs": "^10.5.10",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
@@ -45,7 +46,7 @@
     "prettier": "2.2.1",
     "sass": "1.69.5",
     "serialize-javascript": "5.0.1",
-    "typescript": "^5.3.3",
+    "typescript": "5.4.2",
     "vitest": "^0.34.6",
     "@types/react-beautiful-dnd": "13.1.8"
   },
diff --git a/src/guillo-gmi/actions/add_item.tsx b/src/guillo-gmi/actions/add_item.tsx
index aeec658..60c11c4 100644
--- a/src/guillo-gmi/actions/add_item.tsx
+++ b/src/guillo-gmi/actions/add_item.tsx
@@ -1,6 +1,7 @@
 import { useTraversal } from '../contexts'
 import { Modal } from '../components/modal'
 import { useCrudContext } from '../hooks/useCrudContext'
+import { IndexSignature } from '../types/global'
 
 interface Props {
   type: string
@@ -18,7 +19,7 @@ export function AddItem(props: Props) {
     Ctx.cancelAction()
   }
 
-  async function doSubmit(data) {
+  async function doSubmit(data: IndexSignature) {
     const form = Object.assign(
       {},
       { '@type': type },
@@ -41,7 +42,6 @@ export function AddItem(props: Props) {
       <Form
         loading={loading}
         onSubmit={doSubmit}
-        onError={(err) => console.log(err)}
         actionName={'Add ' + type}
         title={'Add ' + type}
         type={type}
diff --git a/src/guillo-gmi/actions/change_pass.tsx b/src/guillo-gmi/actions/change_pass.tsx
index 1dbb092..057754c 100644
--- a/src/guillo-gmi/actions/change_pass.tsx
+++ b/src/guillo-gmi/actions/change_pass.tsx
@@ -5,6 +5,7 @@ import { Input } from '../components/input/input'
 import { Button } from '../components/input/button'
 import { Form } from '../components/input/form'
 import { useState } from 'react'
+import { IndexSignature } from '../types/global'
 
 const initial = {
   pass1: '',
@@ -13,7 +14,7 @@ const initial = {
 
 export function ChangePassword() {
   const [state, setState] = useState(initial)
-  const [perror, setPerror] = useState(undefined)
+  const [perror, setPerror] = useState<string | undefined>(undefined)
 
   const Ctx = useTraversal()
   const { patch } = useCrudContext()
@@ -50,8 +51,8 @@ export function ChangePassword() {
     Ctx.refresh()
   }
 
-  const setPass = (field) => (val) => {
-    const n = {}
+  const setPass = (field: string) => (val: string) => {
+    const n: IndexSignature = {}
     n[field] = val
     setState((state) => ({ ...state, ...n }))
     setPerror(undefined)
diff --git a/src/guillo-gmi/actions/copy_item.tsx b/src/guillo-gmi/actions/copy_item.tsx
index 38553e8..42bb455 100644
--- a/src/guillo-gmi/actions/copy_item.tsx
+++ b/src/guillo-gmi/actions/copy_item.tsx
@@ -3,10 +3,11 @@ import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { getNewId } from '../lib/utils'
-import { ItemModel } from '../models'
+import { IndexSignature } from '../types/global'
+import { GuillotinaCommonObject } from '../types/guillotina'
 
 interface Props {
-  item: ItemModel
+  item: GuillotinaCommonObject
 }
 
 export function CopyItem(props: Props) {
@@ -14,7 +15,7 @@ export function CopyItem(props: Props) {
   const { post } = useCrudContext()
   const { item } = props
 
-  async function copyItem(path, form) {
+  async function copyItem(path: string, form: IndexSignature) {
     const input = form[1] || {}
     const { isError, errorMessage } = await post(
       {
diff --git a/src/guillo-gmi/actions/copy_items.tsx b/src/guillo-gmi/actions/copy_items.tsx
index d32a702..cba87e6 100644
--- a/src/guillo-gmi/actions/copy_items.tsx
+++ b/src/guillo-gmi/actions/copy_items.tsx
@@ -3,8 +3,9 @@ import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { getNewId } from '../lib/utils'
 import { ItemModel } from '../models'
+import { IndexSignature } from '../types/global'
 
-const withError = (res) => res.status >= 300
+const withError = (res: Response) => res.status >= 300
 
 interface Props {
   items: Array<ItemModel>
@@ -13,11 +14,11 @@ export function CopyItems(props: Props) {
   const Ctx = useTraversal()
   const { items = [] } = props
 
-  async function copyItems(path, form) {
+  async function copyItems(path: string, form: IndexSignature) {
     const responses = await Promise.all(
       items.map((item, i) => {
         const input = form[i + 1] || {}
-        return Ctx.client.post(`${Ctx.path}${item['@name']}/@duplicate`, {
+        return Ctx.client.post(`${Ctx.path}${item.id}/@duplicate`, {
           destination: path,
           new_id: input.value || getNewId(item.id),
         })
@@ -55,7 +56,7 @@ export function CopyItems(props: Props) {
           <input
             type="text"
             className="input"
-            data-test={`inputCopyIdTest-${item['@name']}`}
+            data-test={`inputCopyIdTest-${item.id}`}
             defaultValue={getNewId(item.id)}
           />
         </Fragment>
diff --git a/src/guillo-gmi/actions/move_item.tsx b/src/guillo-gmi/actions/move_item.tsx
index c6b02cb..436067c 100644
--- a/src/guillo-gmi/actions/move_item.tsx
+++ b/src/guillo-gmi/actions/move_item.tsx
@@ -2,20 +2,20 @@ import { PathTree } from '../components/modal'
 import { useGuillotinaClient, useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { useLocation } from '../hooks/useLocation'
-import { ItemModel } from '../models'
+import { GuillotinaCommonObject } from '../types/guillotina'
 
 interface Props {
-  item: ItemModel
+  item: GuillotinaCommonObject
 }
 
 export function MoveItem(props: Props) {
   const Ctx = useTraversal()
-  const { post } = useCrudContext()
+  const { post } = useCrudContext<{ '@url': string }>()
   const [, navigate] = useLocation()
   const client = useGuillotinaClient()
   const { item } = props
 
-  async function moveItem(path) {
+  async function moveItem(path: string) {
     const { isError, errorMessage, result } = await post(
       {
         destination: path,
@@ -26,7 +26,7 @@ export function MoveItem(props: Props) {
 
     if (!isError) {
       navigate({
-        path: `/${client.cleanPath(result['@url'])}/`,
+        path: `/${client.cleanPath(result!['@url'])}/`,
         tab: '',
       })
       Ctx.flash(`Field moved!`, 'success')
diff --git a/src/guillo-gmi/actions/move_items.tsx b/src/guillo-gmi/actions/move_items.tsx
index f9a2846..08c454c 100644
--- a/src/guillo-gmi/actions/move_items.tsx
+++ b/src/guillo-gmi/actions/move_items.tsx
@@ -2,7 +2,7 @@ import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { ItemModel } from '../models'
 
-const withError = (res) => res.status >= 300
+const withError = (res: Response) => res.status >= 300
 
 interface Props {
   items: ItemModel[]
@@ -11,12 +11,12 @@ export function MoveItems(props: Props) {
   const Ctx = useTraversal()
   const { items = [] } = props
 
-  async function moveItems(path) {
+  async function moveItems(path: string) {
     const responses = await Promise.all(
       items.map((item) => {
-        return Ctx.client.post(`${Ctx.path}${item['@name']}/@move`, {
+        return Ctx.client.post(`${Ctx.path}${item.id}/@move`, {
           destination: path,
-          new_id: item['@name'],
+          new_id: item.id,
         })
       })
     )
diff --git a/src/guillo-gmi/actions/remove_item.tsx b/src/guillo-gmi/actions/remove_item.tsx
index c0c8637..dc42ac0 100644
--- a/src/guillo-gmi/actions/remove_item.tsx
+++ b/src/guillo-gmi/actions/remove_item.tsx
@@ -2,10 +2,10 @@ import { Confirm } from '../components/modal'
 import { useGuillotinaClient, useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { useLocation } from '../hooks/useLocation'
-import { ItemModel } from '../models'
+import { GuillotinaCommonObject } from '../types/guillotina'
 
 interface Props {
-  item: ItemModel
+  item: GuillotinaCommonObject
 }
 
 export function RemoveItem(props: Props) {
diff --git a/src/guillo-gmi/actions/remove_items.tsx b/src/guillo-gmi/actions/remove_items.tsx
index 2acf104..5e577dd 100644
--- a/src/guillo-gmi/actions/remove_items.tsx
+++ b/src/guillo-gmi/actions/remove_items.tsx
@@ -13,18 +13,18 @@ export function RemoveItems(props: Props) {
   const cfg = useConfig()
   const [loading, setLoading] = useState(false)
   const { items = [] } = props
-  const last = items[items.length - 1]['@name']
+  const last = items[items.length - 1].id
   const itemsNames = items
-    .map((item) => item['@name'])
+    .map((item) => item.id)
     .join(', ')
     .replace(`, ${last}`, ` and ${last}`)
 
   async function removeItems() {
-    const errors = []
+    const errors: unknown[] = []
     setLoading(true)
 
     const actions = items.map(async (item) => {
-      const res = await Ctx.client.delete(`${Ctx.path}${item['@name']}`)
+      const res = await Ctx.client.delete(`${Ctx.path}${item.id}`, {})
       if (!res.ok) {
         const err = await res.json()
         errors.push(err)
diff --git a/src/guillo-gmi/components/Link.tsx b/src/guillo-gmi/components/Link.tsx
index 57f30e9..0c4574e 100644
--- a/src/guillo-gmi/components/Link.tsx
+++ b/src/guillo-gmi/components/Link.tsx
@@ -12,7 +12,7 @@ export function Link({ aRef, model, children, ...props }: Props) {
   const [path, navigate] = useLocation()
   const aStyle = { textDecoration: 'none', color: 'currentColor' }
 
-  function onClick(e) {
+  function onClick(e: React.MouseEvent<HTMLAnchorElement>) {
     e.stopPropagation()
     if (actAsLink(e)) return
     e.preventDefault()
@@ -32,6 +32,6 @@ export function Link({ aRef, model, children, ...props }: Props) {
   )
 }
 
-function actAsLink(e) {
+function actAsLink(e: React.MouseEvent<HTMLAnchorElement>) {
   return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0
 }
diff --git a/src/guillo-gmi/components/TdLink.tsx b/src/guillo-gmi/components/TdLink.tsx
index a64336b..ddf041e 100644
--- a/src/guillo-gmi/components/TdLink.tsx
+++ b/src/guillo-gmi/components/TdLink.tsx
@@ -9,7 +9,7 @@ interface Props {
   style?: IndexSignature
 }
 export function TdLink({ model, children, style = {} }: Props) {
-  const link = useRef<HTMLAnchorElement>()
+  const link = useRef<HTMLAnchorElement>(null)
 
   function onClick() {
     if (link && link.current) {
diff --git a/src/guillo-gmi/components/behavior_view.tsx b/src/guillo-gmi/components/behavior_view.tsx
index 02c48b0..c4288eb 100644
--- a/src/guillo-gmi/components/behavior_view.tsx
+++ b/src/guillo-gmi/components/behavior_view.tsx
@@ -12,16 +12,21 @@ export function BehaviorsView({ context, schema }: Props) {
   const Ctx = useTraversal()
   const { getBehavior } = Ctx.registry
 
-  const behaviors = [].concat(
-    context.__behaviors__,
-    context['@static_behaviors']
-  )
-  const GetBehavior = (b) => {
-    const Cls = getBehavior(b, BehaviorNotImplemented)
+  const behaviors: string[] = [
+    ...(context.__behaviors__ ?? []),
+    ...Object(context['@static_behaviors']),
+  ]
+
+  const GetBehavior = (behaviorName: string) => {
+    const Cls = getBehavior(behaviorName, BehaviorNotImplemented)
     return (
       <Cls
-        values={context[b]}
-        properties={get(schema, ['definitions', b, 'properties'], {})}
+        values={context[behaviorName as keyof GuillotinaCommonObject]}
+        properties={get(
+          schema,
+          ['definitions', behaviorName, 'properties'],
+          {}
+        )}
       />
     )
   }
diff --git a/src/guillo-gmi/components/behaviors/iattachment.tsx b/src/guillo-gmi/components/behaviors/iattachment.tsx
index 72e326f..2a0dfff 100644
--- a/src/guillo-gmi/components/behaviors/iattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/iattachment.tsx
@@ -7,11 +7,13 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import {
   GuillotinaFile,
-  GuillotinaSchemaProperties,
+  GuillotinaSchemaProperty,
 } from '../../types/guillotina'
 
 interface Props {
-  properties: GuillotinaSchemaProperties
+  properties: {
+    file: GuillotinaSchemaProperty
+  }
   values: {
     file: GuillotinaFile
   }
@@ -38,9 +40,9 @@ export function IAttachment({ properties, values }: Props) {
           <td key={2}>
             <EditableField
               field={key}
-              value={values[key]}
+              value={values.file}
               ns="guillotina.behaviors.attachment.IAttachment"
-              schema={properties[key]}
+              schema={properties.file}
               modifyContent={modifyContent && ['file'].includes(key)}
             />
           </td>
diff --git a/src/guillo-gmi/components/behaviors/iimageattachment.tsx b/src/guillo-gmi/components/behaviors/iimageattachment.tsx
index 64e5e49..502716e 100644
--- a/src/guillo-gmi/components/behaviors/iimageattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/iimageattachment.tsx
@@ -15,7 +15,9 @@ import {
 import {
   GuillotinaFile,
   GuillotinaSchemaProperties,
+  GuillotinaSchemaProperty,
 } from '../../types/guillotina'
+import { LightFile } from '../../types/global'
 
 const _sizesImages = ['large', 'preview', 'mini', 'thumb']
 
@@ -31,15 +33,18 @@ export function IImageAttachment({ properties, values }: Props) {
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
   const sizesImages = cfg.SizeImages || _sizesImages
-  const [file, setFile] = useState(null)
+  const [file, setFile] = useState<LightFile | null>(null)
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
   const [showConfirmToDelete, setShowConfirmToDelete] = useState(false)
 
-  const uploadFile = async (ev) => {
+  const uploadFile = async (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault()
     setLoading(true)
     setError(undefined)
+    if (!file) {
+      return
+    }
     const endpoint = `${Ctx.path}@upload/image`
     const req = await Ctx.client.upload(endpoint, file)
     if (req.status !== 200) {
@@ -69,7 +74,7 @@ export function IImageAttachment({ properties, values }: Props) {
       }
     }
 
-    setFile(undefined)
+    setFile(null)
     setLoading(false)
     Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success')
     Ctx.refresh()
@@ -119,7 +124,7 @@ export function IImageAttachment({ properties, values }: Props) {
                 field={'image'}
                 value={values['image']}
                 ns="guillotina.behaviors.behaviors.IImageAttachment"
-                schema={properties['image']}
+                schema={properties['image'] as GuillotinaSchemaProperty}
                 modifyContent={false}
               />
               <div className="ml-5">
diff --git a/src/guillo-gmi/components/behaviors/imultiattachment.tsx b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
index e8c33be..d6d31dc 100644
--- a/src/guillo-gmi/components/behaviors/imultiattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
@@ -17,7 +17,9 @@ import { LightFile } from '../../types/global'
 import {
   GuillotinaFile,
   GuillotinaSchemaProperties,
+  GuillotinaSchemaProperty,
 } from '../../types/guillotina'
+import { get } from '../../lib/utils'
 
 interface Props {
   properties: GuillotinaSchemaProperties
@@ -31,14 +33,16 @@ export function IMultiAttachment({ properties, values }: Props) {
   const intl = useIntl()
   const [fileKey, setFileKey] = useState('')
   const [file, setFile] = useState<LightFile | undefined>(undefined)
-  const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined)
+  const [fileKeyToDelete, setFileKeyToDelete] = useState<string | undefined>(
+    undefined
+  )
 
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
   const { Ctx } = useCrudContext()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
 
-  const uploadFile = async (ev) => {
+  const uploadFile = async (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault()
     if (!fileKey && !file) {
       setError(intl.formatMessage(genericFileMessages.error_file_key_name))
@@ -46,6 +50,9 @@ export function IMultiAttachment({ properties, values }: Props) {
     }
     setLoading(true)
     setError(undefined)
+    if (!file) {
+      return
+    }
     const endpoint = `${Ctx.path}@upload/files/${fileKey}`
     const req = await Ctx.client.upload(endpoint, file)
     if (req.status !== 200) {
@@ -106,7 +113,13 @@ export function IMultiAttachment({ properties, values }: Props) {
                 field={`files/${key}`}
                 value={values['files'][key]}
                 ns="guillotina.behaviors.attachment.IMultiAttachment.files"
-                schema={properties['files']['additionalProperties']}
+                schema={
+                  get(
+                    properties,
+                    'files.additionalProperties',
+                    {}
+                  ) as GuillotinaSchemaProperty
+                }
                 modifyContent={false}
               />
               <div className="ml-5">
diff --git a/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx b/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
index dff68d9..6170424 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
@@ -17,7 +17,10 @@ import {
 import {
   GuillotinaFile,
   GuillotinaSchemaProperties,
+  GuillotinaSchemaProperty,
 } from '../../types/guillotina'
+import { LightFile } from '../../types/global'
+import { get } from '../../lib/utils'
 
 const _sizesImages = ['large', 'preview', 'mini', 'thumb']
 
@@ -33,16 +36,18 @@ export function IMultiImageAttachment({ properties, values }: Props) {
   const intl = useIntl()
   const cfg = useConfig()
   const [fileKey, setFileKey] = useState('')
-  const [file, setFile] = useState(null)
-  const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined)
+  const [file, setFile] = useState<LightFile | undefined>(undefined)
+  const [fileKeyToDelete, setFileKeyToDelete] = useState<string | undefined>(
+    undefined
+  )
 
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
   const { Ctx } = useCrudContext()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
   const sizesImages = cfg.SizeImages || _sizesImages
 
-  const uploadFile = async (ev) => {
+  const uploadFile = async (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault()
     if (!fileKey && !file) {
       setError(intl.formatMessage(genericFileMessages.error_file_key_name))
@@ -50,6 +55,9 @@ export function IMultiImageAttachment({ properties, values }: Props) {
     }
     setLoading(true)
     setError(undefined)
+    if (!file) {
+      return
+    }
     const endpoint = `${Ctx.path}@upload/images/${fileKey}`
     const req = await Ctx.client.upload(endpoint, file)
     if (req.status !== 200) {
@@ -132,7 +140,13 @@ export function IMultiImageAttachment({ properties, values }: Props) {
                 field={`images/${key}`}
                 value={values['images'][key]}
                 ns="guillotina.contrib.image.behaviors.IMultiImageAttachment.images"
-                schema={properties['images']['additionalProperties']}
+                schema={
+                  get(
+                    properties,
+                    'images.additionalProperties',
+                    {}
+                  ) as GuillotinaSchemaProperty
+                }
                 modifyContent={false}
                 required={false}
               />
diff --git a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
index 24ebfab..8255cab 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react'
 import {
   DragDropContext,
   Draggable,
+  DropResult,
   Droppable,
   DroppableProvided,
   DroppableStateSnapshot,
@@ -22,7 +23,10 @@ import {
 import {
   GuillotinaFile,
   GuillotinaSchemaProperties,
+  GuillotinaSchemaProperty,
 } from '../../types/guillotina'
+import { get } from '../../lib/utils'
+import { LightFile } from '../../types/global'
 
 interface StrictModeDroppableProps {
   children(
@@ -49,7 +53,7 @@ const StrictModeDroppable = ({
   return <Droppable droppableId={droppableId}>{children}</Droppable>
 }
 
-const reorder = (list, startIndex, endIndex) => {
+const reorder = (list: string[], startIndex: number, endIndex: number) => {
   const result: string[] = Array.from(list)
   const [removed] = result.splice(startIndex, 1)
   result.splice(endIndex, 0, removed)
@@ -72,7 +76,9 @@ const messages = defineMessages({
 interface Props {
   properties: GuillotinaSchemaProperties
   values: {
-    images: GuillotinaFile[]
+    images: {
+      [key: string]: GuillotinaFile
+    }
   }
 }
 export function IMultiImageOrderedAttachment({ properties, values }: Props) {
@@ -81,17 +87,19 @@ export function IMultiImageOrderedAttachment({ properties, values }: Props) {
   const [sortedList, setSortedList] = useState<string[]>(
     Object.keys(values['images'])
   )
-  const [file, setFile] = useState(null)
-  const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined)
+  const [file, setFile] = useState<LightFile | undefined>(undefined)
+  const [fileKeyToDelete, setFileKeyToDelete] = useState<string | undefined>(
+    undefined
+  )
 
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
   const { Ctx } = useCrudContext()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
 
   const sizesImages = cfg.SizeImages || _sizesImages
 
-  async function onDragEnd(result) {
+  async function onDragEnd(result: DropResult) {
     if (!result.destination) {
       return
     }
@@ -121,7 +129,7 @@ export function IMultiImageOrderedAttachment({ properties, values }: Props) {
     Ctx.refresh()
   }
 
-  const uploadFile = async (ev) => {
+  const uploadFile = async (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault()
     if (!file) {
       setError(intl.formatMessage(genericFileMessages.error_file_key_name))
@@ -216,7 +224,13 @@ export function IMultiImageOrderedAttachment({ properties, values }: Props) {
                           field={`images/${key}`}
                           value={values['images'][key]}
                           ns="guillotina.contrib.image.behaviors.IMultiImageAttachment.images"
-                          schema={properties['images']['additionalProperties']}
+                          schema={
+                            get(
+                              properties,
+                              'images.additionalProperties',
+                              {}
+                            ) as GuillotinaSchemaProperty
+                          }
                           modifyContent={false}
                           required={false}
                         />
diff --git a/src/guillo-gmi/components/behaviors/iworkflow.tsx b/src/guillo-gmi/components/behaviors/iworkflow.tsx
index db1aa93..7009dc2 100644
--- a/src/guillo-gmi/components/behaviors/iworkflow.tsx
+++ b/src/guillo-gmi/components/behaviors/iworkflow.tsx
@@ -1,12 +1,12 @@
 import { useTraversal } from '../../contexts'
 import { Confirm } from '../modal'
 import { useCrudContext } from '../../hooks/useCrudContext'
-import { ItemModel } from '../../models'
 import { defineMessages, useIntl } from 'react-intl'
 import { useEffect, useState } from 'react'
 
 import { useVocabulary } from '../../hooks/useVocabulary'
 import { get } from '../../lib/utils'
+import { Workflow } from '../../types/guillotina'
 const messages = defineMessages({
   status_changed_ok: {
     id: 'status_changed_ok',
@@ -33,16 +33,16 @@ const messages = defineMessages({
 export function IWorkflow() {
   const intl = useIntl()
   const Ctx = useTraversal()
-  const { post, loading } = useCrudContext()
+  const { post, loading } = useCrudContext<Workflow>()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
-  const [definition, setDefinition] = useState(undefined)
-  const [workflowAction, setWorkflowAction] = useState(null)
-  const model = new ItemModel(Ctx.context)
+  const [definition, setDefinition] = useState<Workflow | undefined>(undefined)
+  const [workflowAction, setWorkflowAction] = useState<string | undefined>(
+    undefined
+  )
   const vocabulary = useVocabulary('workflow_states')
-  const currentState =
-    model.item['guillotina.contrib.workflows.interfaces.IWorkflowBehavior'][
-      'review_state'
-    ]
+  const currentState = Ctx.context[
+    'guillotina.contrib.workflows.interfaces.IWorkflowBehavior'
+  ]!['review_state']
 
   async function loadDefinition() {
     const response = await Ctx.client.get(`${Ctx.path}/@workflow`)
@@ -73,11 +73,12 @@ export function IWorkflow() {
     }
 
     Ctx.refresh()
-    setWorkflowAction(null)
+    setWorkflowAction(undefined)
   }
+
   const getStateTitle = () => {
-    if (vocabulary.data?.items?.length > 0) {
-      const vocabularyValue = vocabulary.data.items.find(
+    if ((vocabulary.data?.items ?? []).length > 0) {
+      const vocabularyValue = vocabulary?.data?.items.find(
         (item) => item.token === currentState
       )
       if (vocabularyValue) {
@@ -109,7 +110,7 @@ export function IWorkflow() {
       {workflowAction && (
         <Confirm
           loading={loading}
-          onCancel={() => setWorkflowAction(null)}
+          onCancel={() => setWorkflowAction(undefined)}
           onConfirm={doWorkflowAction}
           message={intl.formatMessage(messages.confirm_message, {
             title: Ctx.context.title || Ctx.context['@name'],
diff --git a/src/guillo-gmi/components/context_toolbar.tsx b/src/guillo-gmi/components/context_toolbar.tsx
index 60d115b..bbcb43f 100644
--- a/src/guillo-gmi/components/context_toolbar.tsx
+++ b/src/guillo-gmi/components/context_toolbar.tsx
@@ -10,12 +10,13 @@ import { useLocation } from '../hooks/useLocation'
 import { Select } from './input/select'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { FilterFormElement } from '../types/global'
 
 interface State {
-  types?: string[]
+  types: string[]
   isActive?: boolean
 }
-const initialState = { types: undefined }
+const initialState = { types: [] }
 
 export function CreateButton() {
   const intl = useIntl()
@@ -24,7 +25,7 @@ export function CreateButton() {
   const Config = useConfig()
   useEffect(() => {
     async function anyNameFunction() {
-      const types = await Ctx.client.getTypes(Ctx.path)
+      const types: string[] = await Ctx.client.getTypes(Ctx.path)
       setState({
         types: types.filter((item) => !Config.DisabledTypes.includes(item)),
       })
@@ -32,7 +33,7 @@ export function CreateButton() {
     anyNameFunction()
   }, [Ctx.path])
 
-  const doAction = (item) => {
+  const doAction = (item: string) => {
     Ctx.doAction('addItem', { type: item })
     setState({ isActive: false })
   }
@@ -77,7 +78,7 @@ export function ContextToolbar({ AddButton }: Props) {
   const [location, setLocation, del] = useLocation()
   const traversal = useTraversal()
   const Config = useConfig()
-  const searchText = location.get('q')
+  const searchText = location.get('q') || ''
   const [searchValue, setSearchValue] = useState(searchText || '')
 
   useEffect(() => {
@@ -89,19 +90,22 @@ export function ContextToolbar({ AddButton }: Props) {
   }, [searchText])
 
   async function loadTypes() {
-    const types = await traversal.client.getTypes(traversal.path)
+    const types: string[] = await traversal.client.getTypes(traversal.path)
     setState({
       types: types.filter((item) => !Config.DisabledTypes.includes(item)),
     })
   }
 
-  const onSearchQuery = (ev) => {
-    const search = ev.target[0].value
-    setLocation({ q: search, tab: 'Items', page: 0 })
-    ev.preventDefault()
+  const onSearchQuery = (event: React.FormEvent<FilterFormElement>) => {
+    event.preventDefault()
+    setLocation({
+      q: event.currentTarget.elements.filterInput.value,
+      tab: 'Items',
+      page: 0,
+    })
   }
 
-  const onSearchByType = (typeText) => {
+  const onSearchByType = (typeText: string) => {
     if (typeText && typeText !== '') {
       setLocation({ type: typeText, tab: 'Items', page: 0 })
     } else {
@@ -122,6 +126,7 @@ export function ContextToolbar({ AddButton }: Props) {
                 className="input is-size-7"
                 placeholder={intl.formatMessage(genericMessages.search)}
                 data-test="inputFilterTest"
+                id="filterInput"
               />
             </div>
             <div className="control">
@@ -145,7 +150,7 @@ export function ContextToolbar({ AddButton }: Props) {
             text: item,
             value: item,
           }))}
-          onChange={onSearchByType}
+          onChange={(value) => onSearchByType(value as string)}
         />
       </div>
       {traversal.hasPerm('guillotina.AddContent') && (
diff --git a/src/guillo-gmi/components/error_boundary.tsx b/src/guillo-gmi/components/error_boundary.tsx
index ebd71d8..a2e23ac 100644
--- a/src/guillo-gmi/components/error_boundary.tsx
+++ b/src/guillo-gmi/components/error_boundary.tsx
@@ -1,11 +1,11 @@
-import { Component } from 'react'
+import { Component, ErrorInfo } from 'react'
 import { IntlShape, injectIntl } from 'react-intl'
 
 const style = { color: '#F44336', fontSize: 20, paddingBottom: 20 }
 
 class ErrorBoundaryComponent extends Component<
   { intl: IntlShape; children: React.ReactNode },
-  { hasError: boolean; errorMsg: string; errorStack: string }
+  { hasError: boolean; errorMsg: string; errorStack: string | null | undefined }
 > {
   state = {
     hasError: false,
@@ -13,7 +13,7 @@ class ErrorBoundaryComponent extends Component<
     errorStack: '',
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
       hasError: true,
       errorMsg: error.message,
diff --git a/src/guillo-gmi/components/fields/downloadField.tsx b/src/guillo-gmi/components/fields/downloadField.tsx
index b742956..cddd132 100644
--- a/src/guillo-gmi/components/fields/downloadField.tsx
+++ b/src/guillo-gmi/components/fields/downloadField.tsx
@@ -16,7 +16,7 @@ export const DownloadField = ({ value }: DownloadFieldProps) => {
   const Ctx = useTraversal()
   const { data, field } = value
 
-  const getField = async (downloadFile) => {
+  const getField = async (downloadFile: boolean) => {
     const endpoint = `${Ctx.path}@download/${field}`
     const res = await Ctx.client.download(endpoint)
     const text = await res.blob()
diff --git a/src/guillo-gmi/components/fields/editComponent.tsx b/src/guillo-gmi/components/fields/editComponent.tsx
index be219cd..f040268 100644
--- a/src/guillo-gmi/components/fields/editComponent.tsx
+++ b/src/guillo-gmi/components/fields/editComponent.tsx
@@ -10,13 +10,20 @@ import { SearchInputList } from '../input/search_input_list'
 import { SearchInput } from '../input/search_input'
 import { useTraversal } from '../../contexts'
 import { Ref, forwardRef } from 'react'
-import { GuillotinaItemsProperty } from '../../types/guillotina'
-import { IndexSignature } from '../../types/global'
+import {
+  GuillotinaFile,
+  GuillotinaSchemaProperty,
+} from '../../types/guillotina'
+import {
+  EditableFieldValue,
+  IndexSignature,
+  LightFile,
+} from '../../types/global'
 
 interface Props {
-  schema: GuillotinaItemsProperty
-  val: any
-  setValue: (value: any) => void
+  schema: GuillotinaSchemaProperty
+  val: EditableFieldValue
+  setValue: (value: EditableFieldValue) => void
   dataTest?: string
   className?: string
   placeholder?: string
@@ -45,7 +52,7 @@ export const EditComponent = forwardRef(
         <>
           {placeholder && <label className="label">{placeholder}</label>}
           <SearchInputList
-            value={val || []}
+            value={(val || []) as string[]}
             traversal={traversal}
             onChange={(ev) => setValue(ev)}
             queryCondition={
@@ -55,7 +62,7 @@ export const EditComponent = forwardRef(
             labelProperty={
               schema?.labelProperty ? schema.labelProperty : 'title'
             }
-            typeNameQuery={schema?.typeNameQuery ? schema.typeNameQuery : null}
+            typeNameQuery={schema?.typeNameQuery}
           />
         </>
       )
@@ -64,7 +71,7 @@ export const EditComponent = forwardRef(
         <>
           {placeholder && <label className="label">{placeholder}</label>}
           <SearchInput
-            value={val}
+            value={val as string}
             traversal={traversal}
             onChange={(ev) => setValue(ev)}
             queryCondition={
@@ -74,14 +81,14 @@ export const EditComponent = forwardRef(
             labelProperty={
               schema?.labelProperty ? schema.labelProperty : 'title'
             }
-            typeNameQuery={schema?.typeNameQuery ? schema.typeNameQuery : null}
+            typeNameQuery={schema?.typeNameQuery}
           />
         </>
       )
     } else if (schema?.widget === 'textarea' || schema?.widget === 'richtext') {
       return (
         <Textarea
-          value={val || ''}
+          value={(val || '') as string}
           className={className}
           onChange={(ev) => setValue(ev)}
           ref={ref as Ref<HTMLTextAreaElement>}
@@ -104,8 +111,8 @@ export const EditComponent = forwardRef(
         if (schema.items.vocabularyName) {
           return (
             <SelectVocabulary
-              vocabularyName={get(schema, 'items.vocabularyName', null)}
-              val={val || []}
+              vocabularyName={get(schema, 'items.vocabularyName', '')}
+              val={(val || []) as string[]}
               className={className}
               classWrap="is-fullwidth"
               dataTest={dataTest}
@@ -118,7 +125,7 @@ export const EditComponent = forwardRef(
         } else if (schema?.items?.vocabulary) {
           return (
             <Select
-              value={val || []}
+              value={(val || []) as string[]}
               className={className}
               classWrap="is-fullwidth"
               dataTest={dataTest}
@@ -140,19 +147,20 @@ export const EditComponent = forwardRef(
         <>
           {placeholder && <label className="label">{placeholder}</label>}
           <InputList
-            value={val || []}
+            value={(val || []) as string[]}
             className={className}
-            onChange={(ev) => setValue(ev)}
+            onChange={(val) => setValue(val as string[])}
             ref={ref as Ref<HTMLInputElement>}
             dataTest={dataTest}
           />
         </>
       )
     } else if (schema?.widget === 'file') {
+      const value = val as GuillotinaFile
       return (
         <FileUpload
-          onChange={(ev) => setValue(ev)}
-          label={get(val, 'filename', null)}
+          onChange={(ev) => setValue(ev as LightFile)}
+          label={get(value, 'filename', undefined)}
           dataTest={dataTest}
         />
       )
@@ -160,13 +168,13 @@ export const EditComponent = forwardRef(
       if (schema?.vocabularyName) {
         return (
           <SelectVocabulary
-            val={val || ''}
+            val={(val || '') as string}
             className={className}
             appendDefault
             classWrap="is-fullwidth"
             dataTest={dataTest}
             onChange={setValue}
-            vocabularyName={get(schema, 'vocabularyName', null)}
+            vocabularyName={get(schema, 'vocabularyName', '')}
             placeholder={placeholder}
             id={id}
           />
@@ -175,12 +183,12 @@ export const EditComponent = forwardRef(
 
       return (
         <Select
-          value={val || ''}
+          value={(val || '') as string}
           className={className}
           appendDefault
           classWrap="is-fullwidth"
           dataTest={dataTest}
-          options={schema?.vocabulary.map((item) => {
+          options={(schema?.vocabulary ?? []).map((item) => {
             return {
               text: item,
               value: item,
@@ -197,8 +205,13 @@ export const EditComponent = forwardRef(
         <>
           {schema.title && <h4 className="subtitle mt-2">{schema.title}</h4>}
           {Object.keys(get(schema, 'properties', {})).map((key) => {
-            const subSchema = get(schema, 'properties', {})[key]
+            const subSchema = get<GuillotinaSchemaProperty | null>(
+              schema,
+              `properties.${key}`,
+              null
+            )
             const requiredFields: string[] = get(schema, 'required', [])
+            if (!subSchema) return null
             return (
               <EditComponent
                 key={`${id}[${key}]`}
@@ -208,7 +221,7 @@ export const EditComponent = forwardRef(
                 placeholder={subSchema?.title ?? ''}
                 required={requiredFields.includes(key)}
                 setValue={(ev) => {
-                  setValue({ ...value, [key]: ev })
+                  setValue({ ...value, [key]: ev } as IndexSignature)
                 }}
                 dataTest={`${key}TestInput`}
               />
@@ -233,7 +246,7 @@ export const EditComponent = forwardRef(
     }
     return (
       <Input
-        value={val || ''}
+        value={(val || '') as string}
         className={className}
         dataTest={dataTest}
         onChange={(ev) => setValue(ev)}
diff --git a/src/guillo-gmi/components/fields/editableField.tsx b/src/guillo-gmi/components/fields/editableField.tsx
index c2f50ca..175fede 100644
--- a/src/guillo-gmi/components/fields/editableField.tsx
+++ b/src/guillo-gmi/components/fields/editableField.tsx
@@ -11,12 +11,14 @@ import {
   genericFileMessages,
   genericMessages,
 } from '../../locales/generic_messages'
+import { EditableFieldValue, LightFile } from '../../types/global'
+import { GuillotinaSchemaProperty } from '../../types/guillotina'
 
 interface Props {
   field: string
-  value: any
+  value: EditableFieldValue
   ns?: string
-  schema?: any
+  schema?: GuillotinaSchemaProperty
   modifyContent?: boolean
   required?: boolean
 }
@@ -48,9 +50,12 @@ export function EditableField({
     }
   })
 
-  const canModified = modifyContent && !get(schema, 'readonly', false)
+  const canModified =
+    schema !== undefined && modifyContent && !get(schema, 'readonly', false)
 
-  const saveField = async (ev) => {
+  const saveField = async (
+    ev: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     if (ev) ev.preventDefault()
 
     if (!field) {
@@ -70,7 +75,8 @@ export function EditableField({
     }
 
     if (schema?.widget === 'file') {
-      const value = val
+      const value = val as LightFile
+
       if (value) {
         value['filename'] = unescape(encodeURIComponent(value['filename']))
       }
@@ -107,7 +113,9 @@ export function EditableField({
     Ctx.refresh()
   }
 
-  const deleteField = async (ev) => {
+  const deleteField = async (
+    ev: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     if (ev) ev.preventDefault()
     if (schema?.widget === 'file') {
       if (!field || (!val && required)) {
@@ -136,7 +144,7 @@ export function EditableField({
       Ctx.refresh()
     } else if (schema?.type === 'string' && schema?.enum) {
       setValue(null)
-    } else if (schema?.type === 'array' && schema?.items.type === 'string') {
+    } else if (schema?.type === 'array' && schema?.items?.type === 'string') {
       setValue([])
     }
   }
@@ -192,7 +200,7 @@ export function EditableField({
                 {intl.formatMessage(genericMessages.cancel)}
               </Button>
             </div>
-            {!required && fieldHaveDeleteButton(schema) && (
+            {!required && schema && fieldHaveDeleteButton(schema) && (
               <div className="control">
                 <Button
                   className="is-small is-danger"
diff --git a/src/guillo-gmi/components/fields/renderField.tsx b/src/guillo-gmi/components/fields/renderField.tsx
index 42f0e55..ba9a462 100644
--- a/src/guillo-gmi/components/fields/renderField.tsx
+++ b/src/guillo-gmi/components/fields/renderField.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { DownloadField } from './downloadField'
-import { useIntl } from 'react-intl'
+import { IntlShape, useIntl } from 'react-intl'
 import { useVocabulary } from '../../hooks/useVocabulary'
 import { get } from '../../lib/utils'
 import { buildQs } from '../../lib/search'
@@ -9,13 +9,20 @@ import { useConfig } from '../../hooks/useConfig'
 import {
   GuillotinaSchemaProperty,
   GuillotinaVocabularyItem,
+  SearchItem,
 } from '../../types/guillotina'
+import { EditableFieldValue, IndexSignature } from '../../types/global'
 
 const plain = ['string', 'number', 'boolean']
+type PlainType = string | boolean | number
 
 interface RenderFieldProps {
-  value: any
-  Widget?: React.ComponentType<{ value: any; schema: GuillotinaSchemaProperty }>
+  value: EditableFieldValue
+  Widget?: React.ComponentType<{
+    value: EditableFieldValue
+    schema?: GuillotinaSchemaProperty
+    modifyContent?: boolean
+  }>
   schema?: GuillotinaSchemaProperty
 }
 
@@ -28,31 +35,33 @@ export function RenderField({ value, Widget, schema }: RenderFieldProps) {
 
   const type = typeof value
   if (plain.includes(type)) {
-    return value
+    return value as PlainType
   }
   if (type === 'object') {
     if (Array.isArray(value)) {
-      return value.map((item) => (
-        <div key={item}>
+      return value.map((item: EditableFieldValue, index) => (
+        <div key={`renderField_${index}_${schema?.title}`}>
           <RenderField value={item} />
         </div>
       ))
     }
-    return Object.keys(value).map((key) => (
-      <FieldValue
-        field={get(schema, `properties.${key}.title`, key)}
-        schema={get(schema, `properties.${key}`, {})}
-        value={value[key]}
-        key={key}
-      />
-    ))
+    if (schema?.properties?.key !== undefined) {
+      return Object.keys(value).map((key) => (
+        <FieldValue
+          field={get(schema, `properties.${key}.title`, key)}
+          schema={schema.properties!.key as GuillotinaSchemaProperty}
+          value={get(value as IndexSignature, key, {})}
+          key={key}
+        />
+      ))
+    }
   }
   return <p>No render for {JSON.stringify(value)}</p>
 }
 
 interface FieldValueProps {
   field: string
-  value: unknown
+  value: EditableFieldValue
   schema: GuillotinaSchemaProperty
 }
 const FieldValue = ({ field, value, schema }: FieldValueProps) => (
@@ -65,7 +74,7 @@ const FieldValue = ({ field, value, schema }: FieldValueProps) => (
 )
 
 const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- '
-const getDefaultValueEditableField = (intl) => {
+const getDefaultValueEditableField = (intl: IntlShape) => {
   return intl.formatMessage({
     id: 'default_value_editable_field',
     defaultMessage: 'Click to edit',
@@ -82,22 +91,26 @@ export const SearchRenderField = ({
   value,
   modifyContent,
 }: SearchRenderFieldProps) => {
+  console.log('search render fields')
   const intl = useIntl()
-  const [valuesLabels, setValuesLabels] = useState([])
+  const [valuesLabels, setValuesLabels] = useState<string[]>([])
   const [isLoadingData, setIsLoadingData] = useState(false)
   const traversal = useTraversal()
   const { SearchEngine } = useConfig()
   const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
 
   useEffect(() => {
-    const fetchData = async (valuesToSearch) => {
+    const fetchData = async (valuesToSearch: string[]) => {
       setIsLoadingData(true)
       let searchTermQs = ''
 
       const searchTermParsed = ['__or', `id=${valuesToSearch.join('%26id=')}`]
       const { get: getSearch } = traversal.registry
-      const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
-      const qsParsed = traversal.client[fnName]({
+      const fnName: string = getSearch(
+        'searchEngineQueryParamsFunction',
+        SearchEngine
+      )
+      const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
         path: traversal.path,
         start: 0,
         pageSize: 100,
@@ -107,13 +120,11 @@ export const SearchRenderField = ({
       if (searchTermParsed.length > 0 || qsParsed.length > 0) {
         searchTermQs = buildQs([searchTermParsed, ...qsParsed])
       }
-      const data = await traversal.client.search(
+      const data = await traversal.client.search<SearchItem>(
         traversal.client.getContainerFromPath(traversal.path),
         searchTermQs,
         false,
-        false,
-        0,
-        100
+        false
       )
 
       const newValuesLabel = data.items.map((item) => {
@@ -123,12 +134,13 @@ export const SearchRenderField = ({
       setIsLoadingData(false)
     }
 
-    let valuesToSearch = value
-    if (typeof valuesToSearch === 'string') {
-      valuesToSearch = [valuesToSearch]
+    let valuesToSearch: string[] = []
+    if (typeof value === 'string' && value) {
+      valuesToSearch = [value]
+    } else if (Array.isArray(value)) {
+      valuesToSearch = value
     }
-
-    if (valuesToSearch !== undefined && valuesToSearch.length > 0) {
+    if (valuesToSearch.length > 0) {
       fetchData(valuesToSearch)
     } else {
       setValuesLabels([])
@@ -165,7 +177,8 @@ export const VocabularyRenderField = ({
   const intl = useIntl()
   const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
 
-  const vocabularyName = schema?.items?.vocabularyName || schema?.vocabularyName
+  const vocabularyName =
+    schema?.items?.vocabularyName || schema?.vocabularyName || ''
   const vocabulary = useVocabulary(vocabularyName)
 
   const getRenderProps = () => {
@@ -185,13 +198,15 @@ export const VocabularyRenderField = ({
       ).find((item) => item.token === value)
       renderProps['value'] = vocabularyValue?.title ?? ''
     } else {
-      renderProps['value'] = (renderProps['value'] ?? []).map((value) => {
-        return (
-          get<GuillotinaVocabularyItem[]>(vocabulary, 'data.items', []).find(
-            (item) => item.token === value
-          )?.title ?? ''
-        )
-      })
+      renderProps['value'] = ((renderProps['value'] as string[]) ?? []).map(
+        (value: string) => {
+          return (
+            get<GuillotinaVocabularyItem[]>(vocabulary, 'data.items', []).find(
+              (item) => item.token === value
+            )?.title ?? ''
+          )
+        }
+      )
     }
 
     return renderProps
@@ -202,7 +217,7 @@ export const VocabularyRenderField = ({
 interface RenderFieldComponentProps {
   schema: GuillotinaSchemaProperty
   field: string
-  val: any
+  val: EditableFieldValue
   modifyContent?: boolean
 }
 export function RenderFieldComponent({
@@ -215,7 +230,11 @@ export function RenderFieldComponent({
   const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
 
   const getRenderProps = () => {
-    const renderProps = {
+    const renderProps: {
+      value: EditableFieldValue
+      schema: GuillotinaSchemaProperty
+      Widget?: React.ComponentType<any>
+    } = {
       value:
         val ??
         (modifyContent
@@ -232,7 +251,7 @@ export function RenderFieldComponent({
     } else if (schema?.type === 'boolean') {
       renderProps['value'] = val?.toString() ?? renderProps['value']
     } else if (val && schema?.type === 'datetime') {
-      renderProps['value'] = new Date(val).toLocaleString()
+      renderProps['value'] = new Date(val as string).toLocaleString()
     } else if (schema?.items?.vocabularyName || schema?.vocabularyName) {
       renderProps['Widget'] = VocabularyRenderField
     } else if (
@@ -240,7 +259,7 @@ export function RenderFieldComponent({
       schema?.widget === 'search_list'
     ) {
       renderProps['Widget'] = SearchRenderField
-      renderProps['value'] = val
+      renderProps['value'] = val as string | string[]
     }
     return renderProps
   }
diff --git a/src/guillo-gmi/components/guillotina.tsx b/src/guillo-gmi/components/guillotina.tsx
index 4146109..377fb86 100644
--- a/src/guillo-gmi/components/guillotina.tsx
+++ b/src/guillo-gmi/components/guillotina.tsx
@@ -6,7 +6,11 @@ import { TraversalProvider, useGuillotinaClient } from '../contexts'
 import { useConfig } from '../hooks/useConfig'
 import { IRegistry, useRegistry } from '../hooks/useRegistry'
 import { useLocation } from '../hooks/useLocation'
-import { guillotinaReducer } from '../reducers/guillotina'
+import {
+  GuillotinaGlobalState,
+  GuillotinaReducerActionTypes,
+  guillotinaReducer,
+} from '../reducers/guillotina'
 import { initialState } from '../reducers/guillotina'
 import { Loading } from './ui/loading'
 import { IntlProvider } from 'react-intl'
@@ -16,7 +20,7 @@ import langEN from '../locales/compiled/en.json'
 import { Auth } from '../lib/auth'
 import { IndexSignature } from '../types/global'
 
-function loadLocaleData(locale) {
+function loadLocaleData(locale: string) {
   switch (locale) {
     case 'ca':
       return langCA
@@ -41,7 +45,7 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
   const client = useGuillotinaClient()
 
   const { Permissions } = useConfig(config)
-  const registry = useRegistry(props.registry || {})
+  const registry = useRegistry(props.registry)
   // Location is cooked routing solution (only uses search params)
   const [location] = useLocation()
 
@@ -56,31 +60,51 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
   const { path, refresh } = state
 
   useEffect(() => {
-    dispatch({ type: 'SET_PATH', payload: searchPath })
+    dispatch({
+      type: GuillotinaReducerActionTypes.SET_PATH,
+      payload: {
+        path: searchPath,
+      },
+    })
   }, [searchPath])
 
   useEffect(() => {
     const initContext = async () => {
       const data = await client.getContext(path)
       if (data.status === 401) {
-        dispatch({ type: 'SET_ERROR', payload: 'notallowed' })
+        dispatch({
+          type: GuillotinaReducerActionTypes.SET_ERROR,
+          payload: {
+            errorStatus: 'notallowed',
+          },
+        })
         return
       } else if (data.status === 404) {
-        dispatch({ type: 'SET_ERROR', payload: 'notfound' })
+        dispatch({
+          type: GuillotinaReducerActionTypes.SET_ERROR,
+          payload: {
+            errorStatus: 'notallowed',
+          },
+        })
         return
       }
       const context = await data.json()
       const pr = await client.canido(path, Permissions)
       const permissions = await pr.json()
-      dispatch({ type: 'SET_CONTEXT', payload: { context, permissions } })
+      dispatch({
+        type: GuillotinaReducerActionTypes.SET_CONTEXT,
+        payload: { context, permissions },
+      })
     }
     initContext()
   }, [path, refresh, client])
 
-  const ErrorBoundary = registry.get('views', 'ErrorBoundary')
-  const NotAllowed = registry.get('views', 'NotAllowed')
-  const NotFound = registry.get('views', 'NotFound')
-  const Path = registry.get('components', 'Path')
+  const ErrorBoundary: React.ComponentType<{
+    children: React.ReactNode
+  }> = registry.getView('ErrorBoundary')
+  const NotAllowed = registry.getView('NotAllowed')
+  const NotFound = registry.getView('NotFound')
+  const Path = registry.get('components', 'Path') as React.ComponentType
 
   const contextData = {
     url,
@@ -93,8 +117,12 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
   }
 
   const { action, errorStatus, permissions } = state
-  const Main = registry.getComponent(state.context, path)
-  const Action = action.action ? registry.getAction(action.action) : null
+  const Main = registry.getComponent(state.context, path) as React.FC<{
+    state: GuillotinaGlobalState
+  }>
+  const Action = action.action
+    ? (registry.getAction(action.action) as React.FC<any>)
+    : null
 
   return (
     <IntlProvider locale={locale} defaultLocale="en" messages={messages}>
@@ -103,7 +131,9 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
           <TraversalProvider {...contextData}>
             {permissions && (
               <React.Fragment>
-                {action.action && <Action {...action.params} />}
+                {action.action && Action !== null && (
+                  <Action {...action.params} />
+                )}
                 <div className="level">
                   <div className="level-left">
                     <div className="level-item">
@@ -112,7 +142,7 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
                   </div>
                 </div>
                 <Flash />
-                {Main && (
+                {Main !== undefined && (
                   <ErrorBoundary>
                     <div className="box main-panel">
                       {state.loading && <Loading />}
diff --git a/src/guillo-gmi/components/input/button.tsx b/src/guillo-gmi/components/input/button.tsx
index 666dc3d..de01350 100644
--- a/src/guillo-gmi/components/input/button.tsx
+++ b/src/guillo-gmi/components/input/button.tsx
@@ -18,7 +18,7 @@ export const Button = ({
   disabled = false,
   dataTest,
 }: Props) => {
-  let css = [].concat('button', ...className.split(' '))
+  let css = [...className.split(' '), 'button']
   if (loading) css = css.concat('is-loading')
 
   return (
diff --git a/src/guillo-gmi/components/input/checkbox.tsx b/src/guillo-gmi/components/input/checkbox.tsx
index ce3abfb..bed5afb 100644
--- a/src/guillo-gmi/components/input/checkbox.tsx
+++ b/src/guillo-gmi/components/input/checkbox.tsx
@@ -30,8 +30,8 @@ export const Checkbox = ({
   onChange,
   dataTest,
 }: Props) => {
-  const inputRef = useRef(null)
-  const [state, setState] = useState<boolean>(checked)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [state, setState] = useState<boolean>(!!checked)
 
   useEffect(() => {
     if (inputRef.current) {
@@ -46,13 +46,13 @@ export const Checkbox = ({
 
   return (
     <div className="field">
-      <label htmlFor={id} className={classnames(['checkbox', className])}>
+      <label htmlFor={id} className={classnames(['checkbox', className ?? ''])}>
         <input
           ref={inputRef}
           disabled={disabled || loading}
           id={id}
           type="checkbox"
-          className={classnames(['checkbox', classNameInput])}
+          className={classnames(['checkbox', classNameInput ?? ''])}
           checked={state}
           onChange={updateState}
           data-test={dataTest}
diff --git a/src/guillo-gmi/components/input/dropdown.tsx b/src/guillo-gmi/components/input/dropdown.tsx
index 5cd672d..3da8028 100644
--- a/src/guillo-gmi/components/input/dropdown.tsx
+++ b/src/guillo-gmi/components/input/dropdown.tsx
@@ -20,7 +20,7 @@ export default function Dropdown({
   optionDisabledWhen,
   options,
 }: Props) {
-  const ref = useRef(null)
+  const ref = useRef<HTMLDivElement>(null)
   const [isActive, setIsActive] = useState(false)
   const position = isRight ? 'is-right' : ''
   const status = isActive
diff --git a/src/guillo-gmi/components/input/email.tsx b/src/guillo-gmi/components/input/email.tsx
index 0f5352b..0311242 100644
--- a/src/guillo-gmi/components/input/email.tsx
+++ b/src/guillo-gmi/components/input/email.tsx
@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl'
 interface Props {
   value?: string
   dataTest?: string
-  onChange?: (value: string) => void
+  onChange: (value: string) => void
   placeholder?: string
   id?: string
 }
diff --git a/src/guillo-gmi/components/input/form.tsx b/src/guillo-gmi/components/input/form.tsx
index c67a8ea..b2ac120 100644
--- a/src/guillo-gmi/components/input/form.tsx
+++ b/src/guillo-gmi/components/input/form.tsx
@@ -21,7 +21,7 @@ export const Form = ({
   error,
   dataTest,
 }: Props) => {
-  const handleSubmit = (event) => {
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault()
     onSubmit(event)
   }
diff --git a/src/guillo-gmi/components/input/form_builder.tsx b/src/guillo-gmi/components/input/form_builder.tsx
index 4fcd2ab..56393b5 100644
--- a/src/guillo-gmi/components/input/form_builder.tsx
+++ b/src/guillo-gmi/components/input/form_builder.tsx
@@ -21,8 +21,8 @@ const formComponents = {
 
 interface Props {
   schema: GuillotinaSchema
-  formData?: any
-  onSubmit: (formData: any, initialData: any) => void
+  formData?: IndexSignature
+  onSubmit: (formData: IndexSignature, initialData: IndexSignature) => void
   actionName: string
   children?: React.ReactNode
   exclude?: string[]
@@ -40,12 +40,12 @@ export function FormBuilder({
   remotes = {},
   submitButton = true,
 }: Props) {
-  const ref = useRef<unknown>()
+  const ref = useRef<IndexSignature | null>(null)
   const { properties, required } = schema
   const values = Object.assign({}, formData || {})
 
   // build initial state
-  const initialState = {}
+  const initialState: IndexSignature = {}
   const fields = Object.keys(properties).filter((x) => !exclude.includes(x))
 
   fields.forEach((element) => {
@@ -53,26 +53,29 @@ export function FormBuilder({
   })
 
   // Register remotes
-  if (!ref.current) {
+  if (ref.current === null) {
     ref.current = {}
-    Object.keys(remotes).forEach((item) => (ref.current[item] = remotes[item]))
+    Object.keys(remotes).forEach((item) => (ref.current![item] = remotes[item]))
   } else {
     // apply remote changes
     Object.keys(remotes).forEach((key) => {
-      if (JSON.stringify(ref.current[key]) !== JSON.stringify(remotes[key])) {
-        ref.current[key] = remotes[key]
+      if (JSON.stringify(ref.current![key]) !== JSON.stringify(remotes[key])) {
+        ref.current![key] = remotes[key]
       }
     })
   }
 
   ref.current = ref.current || {}
-  const onUpdate = (field) => (ev) => {
-    ref.current[field] = ev.target ? ev.target.value : ev.value || ev
+  const onUpdate = (field: string) => (value: boolean | string) => {
+    ref.current![field] = value
   }
 
   const GetTag = ({ field }: { field: string }) => {
     const property = properties[field] as GuillotinaSchemaProperty
-    const Tag = formComponents[property.widget || property.type]
+    const key = (property.widget ||
+      property.type) as keyof typeof formComponents
+
+    const Tag: React.ComponentType<any> = formComponents[key]
 
     const props = {
       value: initialState[field],
@@ -87,7 +90,6 @@ export function FormBuilder({
       props.required = true
       props.placeholder += ' *'
     }
-    Tag.displayName = `${field}Field`
     return <Tag {...props} />
   }
 
@@ -100,7 +102,7 @@ export function FormBuilder({
   })
 
   const changes = () => {
-    onSubmit(ref.current, values)
+    onSubmit(ref.current!, values)
   }
 
   return (
diff --git a/src/guillo-gmi/components/input/input.tsx b/src/guillo-gmi/components/input/input.tsx
index e67729e..ab19864 100644
--- a/src/guillo-gmi/components/input/input.tsx
+++ b/src/guillo-gmi/components/input/input.tsx
@@ -20,7 +20,7 @@ interface Props {
   errorMessage?: string
   dataTest?: string
   autofocus?: boolean
-  onChange?: (value: string) => void
+  onChange: (value: string) => void | undefined
   type?: string
   value?: string
   required?: boolean
@@ -56,10 +56,10 @@ export const Input = forwardRef<HTMLInputElement, Props>(
     },
     ref
   ) => {
-    let validatorFn = null
+    let validatorFn: ((value: string) => boolean)[] = []
     if (required) {
       validatorFn = Array.isArray(validator)
-        ? validator.push(notEmpty)
+        ? [...validator, notEmpty]
         : [validator, notEmpty]
     }
 
@@ -67,17 +67,23 @@ export const Input = forwardRef<HTMLInputElement, Props>(
     const [uid] = useState(generateUID('input'))
     const [mounted, setMounted] = useState(false)
     // eslint-disable-next-line
-    ref = ref || useRef()
+    const newRef = ref || useRef()
 
     useEffect(() => {
       setMounted(true)
     }, [])
 
     useEffect(() => {
-      if (autofocus && !error && ref != null && typeof ref !== 'function') {
-        ref.current.focus()
+      if (
+        autofocus &&
+        !error &&
+        newRef != null &&
+        typeof newRef !== 'function' &&
+        newRef.current
+      ) {
+        newRef.current.focus()
       }
-    }, [mounted, autofocus, ref, error])
+    }, [mounted, autofocus, newRef, error])
 
     const theError = state.hasError ? errorMessage || 'invalid field' : ''
     const statusClasses = state.hasError ? 'is-danger' : ''
diff --git a/src/guillo-gmi/components/input/input_list.tsx b/src/guillo-gmi/components/input/input_list.tsx
index f20d68f..bbdfb6a 100644
--- a/src/guillo-gmi/components/input/input_list.tsx
+++ b/src/guillo-gmi/components/input/input_list.tsx
@@ -14,9 +14,12 @@ export const InputList = forwardRef<
 >(({ value, onChange, dataTest, id }, ref) => {
   const intl = useIntl()
   const [inputValue, setInputValue] = useState('')
-  const addTags = (event) => {
-    if (event.key === 'Enter' && event.target.value !== '') {
-      onChange([...value, event.target.value])
+  const addTags = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (
+      event.key === 'Enter' &&
+      (event.target as HTMLInputElement).value !== ''
+    ) {
+      onChange([...value, (event.target as HTMLInputElement).value])
       setInputValue('')
     }
   }
diff --git a/src/guillo-gmi/components/input/search_input.tsx b/src/guillo-gmi/components/input/search_input.tsx
index 7d01d2d..a5ceae3 100644
--- a/src/guillo-gmi/components/input/search_input.tsx
+++ b/src/guillo-gmi/components/input/search_input.tsx
@@ -9,29 +9,14 @@ import { useConfig } from '../../hooks/useConfig'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import useClickAway from '../../hooks/useClickAway'
-import { get } from '../../lib/utils'
+import { debounce, get } from '../../lib/utils'
 import { SearchItem } from '../../types/guillotina'
 import { Traversal } from '../../contexts'
-
-function debounce(func, wait) {
-  let timeout
-  return function () {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this
-    // eslint-disable-next-line prefer-rest-params
-    const args = arguments
-    const later = function () {
-      timeout = null
-      func.apply(context, args)
-    }
-    clearTimeout(timeout)
-    timeout = setTimeout(later, wait)
-  }
-}
+import { IndexSignature } from '../../types/global'
 
 interface State {
   page: number
-  items: SearchItem[]
+  items?: SearchItem[]
   loading: boolean
   items_total: number
 }
@@ -46,7 +31,7 @@ interface Props {
   onChange?: (value: string) => void
   error?: string
   errorZoneClassName?: string
-  traversal?: Traversal
+  traversal: Traversal
   path?: string
   qs?: string[][]
   queryCondition?: string
@@ -64,8 +49,8 @@ export const SearchInput = ({
   onChange,
   error,
   errorZoneClassName,
-  traversal = null,
-  path = null,
+  traversal,
+  path = undefined,
   qs = [],
   queryCondition = 'id__in',
   value,
@@ -73,8 +58,8 @@ export const SearchInput = ({
   dataTestWrapper = 'wrapperSearchInputTest',
   dataTestSearchInput = 'searchInputTest',
   dataTestItem = 'searchInputItemTest',
-  renderTextItemOption = null,
-  typeNameQuery = null,
+  renderTextItemOption = undefined,
+  typeNameQuery = undefined,
   labelProperty = 'id',
 }: Props) => {
   const intl = useIntl()
@@ -82,9 +67,11 @@ export const SearchInput = ({
   const [isOpen, setIsOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
   const inputRef = useRef(null)
-  const wrapperRef = useRef(null)
+  const wrapperRef = useRef<HTMLInputElement>(null)
   const { PageSize, SearchEngine } = useConfig()
-  const [valueLabel, setValueLabel] = useState<Partial<SearchItem>>(undefined)
+  const [valueLabel, setValueLabel] = useState<Partial<SearchItem> | undefined>(
+    undefined
+  )
   const [uid] = useState(generateUID('search_input'))
 
   useClickAway(wrapperRef, () => {
@@ -115,13 +102,13 @@ export const SearchInput = ({
       const searchTermParsed = [`id`, value]
       const { get: getSearch } = traversal.registry
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
-      const qsParsed = traversal.client[fnName]({
+      const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
         path: traversal.path,
         start: 0,
         pageSize: PageSize,
         withDepth: false,
       })
-      let typeNameParsed = []
+      let typeNameParsed: string[][] = []
       if (typeNameQuery) {
         typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
       }
@@ -138,37 +125,41 @@ export const SearchInput = ({
           ...typeNameParsed,
         ])
       }
-      const data = await traversal.client.search(
+      const data = await traversal.client.search<SearchItem>(
         path ? path : traversal.client.getContainerFromPath(traversal.path),
         searchTermQs,
         false,
         false
       )
-      const newValuesLabel = data.items.reduce((result, item) => {
-        result[item.id] = get(item, labelProperty, item.id)
-        return result
-      }, {})
+      const newValuesLabel = data.items.reduce<IndexSignature<string>>(
+        (result, item) => {
+          result[item.id] = get(item, labelProperty, item.id)
+          return result
+        },
+        {}
+      )
       setValueLabel(newValuesLabel)
     }
   }
 
   const handleSearch = async (page = 0, concat = false, value = '') => {
+    console.log('handle search input')
     setOptions({ loading: true })
     let searchTermQs = ''
-    let searchTermParsed = []
+    let searchTermParsed: string[][] = []
     if (value !== '') {
       searchTermParsed = parser(`${queryCondition}=${value}`)
     }
     const { get } = traversal.registry
     const fnName = get('searchEngineQueryParamsFunction', SearchEngine)
-    const qsParsed = traversal.client[fnName]({
+    const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
       path: traversal.path,
       start: page * PageSize,
       pageSize: PageSize,
       withDepth: false,
     })
     const sortParsed = parser(`_sort_des=${labelProperty}`)
-    let typeNameParsed = []
+    let typeNameParsed: string[][] = []
     if (typeNameQuery) {
       typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
     }
@@ -177,7 +168,8 @@ export const SearchInput = ({
       qs.length > 0 ||
       searchTermParsed.length > 0 ||
       qsParsed.length > 0 ||
-      typeNameParsed.length > 0
+      typeNameParsed.length > 0 ||
+      sortParsed.length > 0
     ) {
       searchTermQs = buildQs([
         ...qs,
@@ -188,7 +180,7 @@ export const SearchInput = ({
       ])
     }
 
-    const data = await traversal.client.search(
+    const data = await traversal.client.search<SearchItem>(
       path ? path : traversal.client.getContainerFromPath(traversal.path),
       searchTermQs,
       false,
@@ -205,7 +197,7 @@ export const SearchInput = ({
     })
   }
 
-  const renderTextItemOptionFn = (item) => {
+  const renderTextItemOptionFn = (item: SearchItem) => {
     if (renderTextItemOption) {
       return renderTextItemOption(item)
     }
@@ -250,6 +242,7 @@ export const SearchInput = ({
               }
 
               setIsOpen(!isOpen)
+              console.log('on clic btn', options)
               if (!options.loading && !options.items) {
                 handleSearch(options.page)
               }
diff --git a/src/guillo-gmi/components/input/search_input_list.tsx b/src/guillo-gmi/components/input/search_input_list.tsx
index 0175c29..1f7b6d8 100644
--- a/src/guillo-gmi/components/input/search_input_list.tsx
+++ b/src/guillo-gmi/components/input/search_input_list.tsx
@@ -10,29 +10,14 @@ import { useConfig } from '../../hooks/useConfig'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import useClickAway from '../../hooks/useClickAway'
-import { get } from '../../lib/utils'
+import { debounce, get } from '../../lib/utils'
 import { SearchItem } from '../../types/guillotina'
 import { Traversal } from '../../contexts'
-
-function debounce(func, wait) {
-  let timeout
-  return function () {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this
-    // eslint-disable-next-line prefer-rest-params
-    const args = arguments
-    const later = function () {
-      timeout = null
-      func.apply(context, args)
-    }
-    clearTimeout(timeout)
-    timeout = setTimeout(later, wait)
-  }
-}
+import { IndexSignature } from '../../types/global'
 
 interface State {
   page: number
-  items: SearchItem[]
+  items?: SearchItem[]
   loading: boolean
   items_total: number
 }
@@ -47,9 +32,9 @@ interface Props {
   onChange: (value: string[]) => void
   error?: string
   errorZoneClassName?: string
-  traversal?: Traversal
+  traversal: Traversal
   path?: string
-  qs?: string[]
+  qs?: string[][]
   queryCondition?: string
   value: string[]
   btnClass?: string
@@ -65,8 +50,8 @@ export const SearchInputList = ({
   onChange,
   error,
   errorZoneClassName,
-  traversal = null,
-  path = null,
+  traversal,
+  path = undefined,
   qs = [],
   queryCondition = 'id__in',
   value,
@@ -74,17 +59,19 @@ export const SearchInputList = ({
   dataTestWrapper = 'wrapperSearchInputTest',
   dataTestSearchInput = 'searchInputTest',
   dataTestItem = 'searchInputItemTest',
-  renderTextItemOption = null,
-  typeNameQuery = null,
+  renderTextItemOption = undefined,
+  typeNameQuery = undefined,
   labelProperty = 'id',
 }: Props) => {
   const intl = useIntl()
   const [options, setOptions] = useSetState<State>(initialState)
-  const [valuesLabel, setValuesLabels] = useState(undefined)
+  const [valuesLabel, setValuesLabels] = useState<IndexSignature | undefined>(
+    undefined
+  )
   const [isOpen, setIsOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
   const inputRef = useRef(null)
-  const wrapperRef = useRef(null)
+  const wrapperRef = useRef<HTMLInputElement>(null)
   const { PageSize, SearchEngine } = useConfig()
   const [isLoadingData, setIsLoadingData] = useState(false)
 
@@ -115,20 +102,20 @@ export const SearchInputList = ({
   const handleSearch = async (page = 0, concat = false, value = '') => {
     setOptions({ loading: true })
     let searchTermQs = ''
-    let searchTermParsed = []
+    let searchTermParsed: string[][] = []
     if (value !== '') {
       searchTermParsed = parser(`${queryCondition}=${value}`)
     }
     const { get } = traversal.registry
     const fnName = get('searchEngineQueryParamsFunction', SearchEngine)
-    const qsParsed = traversal.client[fnName]({
+    const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
       path: traversal.path,
       start: page * PageSize,
       pageSize: PageSize,
       withDepth: false,
     })
     const sortParsed = parser(`_sort_des=${labelProperty}`)
-    let typeNameParsed = []
+    let typeNameParsed: string[][] = []
     if (typeNameQuery) {
       typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
     }
@@ -148,13 +135,13 @@ export const SearchInputList = ({
       ])
     }
 
-    const data = await traversal.client.search(
+    const data = await traversal.client.search<SearchItem>(
       path ? path : traversal.client.getContainerFromPath(traversal.path),
       searchTermQs,
       false,
       false
     )
-    const newItems =
+    const newItems: SearchItem[] =
       options.items && concat ? [...options.items, ...data.items] : data.items
 
     setOptions({
@@ -172,13 +159,13 @@ export const SearchInputList = ({
       const searchTermParsed = ['__or', `id=${value.join('%26id=')}`]
       const { get: getSearch } = traversal.registry
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
-      const qsParsed = traversal.client[fnName]({
+      const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
         path: traversal.path,
         start: 0,
         pageSize: 100,
         withDepth: false,
       })
-      let typeNameParsed = []
+      let typeNameParsed: string[][] = []
       if (typeNameQuery) {
         typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
       }
@@ -195,18 +182,19 @@ export const SearchInputList = ({
           ...typeNameParsed,
         ])
       }
-      const data = await traversal.client.search(
+      const data = await traversal.client.search<SearchItem>(
         path ? path : traversal.client.getContainerFromPath(traversal.path),
         searchTermQs,
         false,
-        false,
-        0,
-        100
+        false
+      )
+      const newValuesLabel = data.items.reduce<IndexSignature<string>>(
+        (result, item) => {
+          result[item.id] = get(item, labelProperty, item.id)
+          return result
+        },
+        {}
       )
-      const newValuesLabel = data.items.reduce((result, item) => {
-        result[item.id] = get(item, labelProperty, item.id)
-        return result
-      }, {})
       setValuesLabels(newValuesLabel)
       setIsLoadingData(false)
     }
diff --git a/src/guillo-gmi/components/input/select.tsx b/src/guillo-gmi/components/input/select.tsx
index c585d00..0ca54c4 100644
--- a/src/guillo-gmi/components/input/select.tsx
+++ b/src/guillo-gmi/components/input/select.tsx
@@ -50,15 +50,19 @@ export const Select = forwardRef<HTMLSelectElement, Props>(
     const intl = useIntl()
     const [uid] = useState(generateUID('select'))
 
-    const onUpdate = (ev) => {
+    const onUpdate = (ev: React.ChangeEvent<HTMLSelectElement>) => {
       if (multiple) {
-        let selectValue = []
+        let selectValue: string[] = []
         for (let i = 0; i < ev.target.selectedOptions.length; i++) {
           selectValue = selectValue.concat([ev.target.selectedOptions[i].value])
         }
-        onChange(selectValue)
+        if (onChange) {
+          onChange(selectValue)
+        }
       } else {
-        onChange(ev.target.value)
+        if (onChange) {
+          onChange(ev.target.value)
+        }
       }
     }
 
diff --git a/src/guillo-gmi/components/input/select_vocabulary.tsx b/src/guillo-gmi/components/input/select_vocabulary.tsx
index 85dd1de..04dc46d 100644
--- a/src/guillo-gmi/components/input/select_vocabulary.tsx
+++ b/src/guillo-gmi/components/input/select_vocabulary.tsx
@@ -8,10 +8,10 @@ interface Props {
   vocabularyName: string
   className?: string
   classWrap?: string
-  val?: string
+  val?: string | string[]
   dataTest?: string
   multiple?: boolean
-  onChange?: (value: string) => void
+  onChange?: (value: string | string[]) => void
   appendDefault?: boolean
   id?: string
   placeholder?: string
@@ -34,8 +34,10 @@ export const SelectVocabulary = forwardRef<HTMLSelectElement, Props>(
     const vocabulary = useVocabulary(vocabularyName)
 
     const getOptions = () => {
-      if (get<GuillotinaVocabularyItem>(vocabulary, 'data.items', null)) {
-        const vocData = vocabulary.data.items.map((item) => {
+      if (
+        get<GuillotinaVocabularyItem | null>(vocabulary, 'data.items', null)
+      ) {
+        const vocData = (vocabulary?.data?.items ?? []).map((item) => {
           return {
             text: item.title,
             value: item.token,
diff --git a/src/guillo-gmi/components/input/textarea.tsx b/src/guillo-gmi/components/input/textarea.tsx
index 6f3c0c4..7b77bde 100644
--- a/src/guillo-gmi/components/input/textarea.tsx
+++ b/src/guillo-gmi/components/input/textarea.tsx
@@ -1,6 +1,6 @@
 import ErrorZone from '../error_zone'
 import { classnames, generateUID } from '../../lib/helpers'
-import { forwardRef, useState } from 'react'
+import { ChangeEvent, forwardRef, useState } from 'react'
 
 interface Props {
   value: string
@@ -32,7 +32,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
   ) => {
     const [uid] = useState(generateUID('select'))
 
-    const onUpdate = (ev) => {
+    const onUpdate = (ev: ChangeEvent<HTMLTextAreaElement>) => {
       if (onChange) {
         onChange(ev.target.value)
       }
diff --git a/src/guillo-gmi/components/input/upload.tsx b/src/guillo-gmi/components/input/upload.tsx
index 9ccd4be..df08eb1 100644
--- a/src/guillo-gmi/components/input/upload.tsx
+++ b/src/guillo-gmi/components/input/upload.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, InputHTMLAttributes } from 'react'
+import { ChangeEvent } from 'react'
 import { lightFileReader } from '../../lib/client.js'
 import { useIntl } from 'react-intl'
 import { LightFile } from '../../types/global'
@@ -8,15 +8,13 @@ interface Props {
   dataTest?: string
   onChange: (file: LightFile) => void
 }
-export function FileUpload({
-  label,
-  onChange,
-  dataTest,
-}: Props & InputHTMLAttributes<HTMLInputElement>) {
+export function FileUpload({ label, onChange, dataTest }: Props) {
   const intl = useIntl()
   const changed = async (event: ChangeEvent<HTMLInputElement>) => {
-    const fileToUpload = await lightFileReader(event.target.files[0])
-    onChange(fileToUpload)
+    if (event.target.files) {
+      const fileToUpload = await lightFileReader(event.target.files[0])
+      onChange(fileToUpload)
+    }
   }
 
   return (
diff --git a/src/guillo-gmi/components/login.tsx b/src/guillo-gmi/components/login.tsx
index 53ddafe..8637c7c 100644
--- a/src/guillo-gmi/components/login.tsx
+++ b/src/guillo-gmi/components/login.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react'
 import useSetState from '../hooks/useSetState'
 import { Auth } from '../lib/auth'
 
-const ERRORS = {
+const ERRORS: { [key: string]: string } = {
   failed_to_fetch: 'Failed to fetch data: Backend not running?',
   invalid_credentials: 'Failed! Invalid credentials',
 }
@@ -10,12 +10,12 @@ interface State {
   username: string
   password: string
   loading: boolean
-  errors: string
+  errors?: string
 }
 const initialState = {
   username: '',
   password: '',
-  loading: undefined,
+  loading: false,
   errors: undefined,
 }
 
@@ -34,15 +34,15 @@ export const Login = ({
   onLogin,
 }: Props) => {
   const [state, setState] = useSetState<State>(initialState)
-  const inputRef = useRef(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
-    if (inputRef) {
+    if (inputRef && inputRef.current) {
       inputRef.current.focus()
     }
   }, [inputRef])
 
-  const doLogin = async (ev) => {
+  const doLogin = async (ev: React.FormEvent) => {
     ev.preventDefault()
     setState({ loading: true, errors: undefined })
     const { username, password } = state
diff --git a/src/guillo-gmi/components/modal.tsx b/src/guillo-gmi/components/modal.tsx
index f37aeab..c6f6250 100644
--- a/src/guillo-gmi/components/modal.tsx
+++ b/src/guillo-gmi/components/modal.tsx
@@ -2,6 +2,7 @@ import usePortal from 'react-useportal'
 import { Button } from './input/button'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { get } from '../lib/utils'
 
 interface ModalProps {
   isActive: boolean
@@ -96,7 +97,7 @@ export function PathTree({
       <form
         onSubmit={(e) => {
           e.preventDefault()
-          onConfirm(e.target[0].value, e.target)
+          onConfirm(get(e, 'target.0.value', ''), e.target)
         }}
       >
         <small style={{ display: 'block', marginTop: 20 }}>
diff --git a/src/guillo-gmi/components/panel/actions.tsx b/src/guillo-gmi/components/panel/actions.tsx
index 53524bd..d2af61a 100644
--- a/src/guillo-gmi/components/panel/actions.tsx
+++ b/src/guillo-gmi/components/panel/actions.tsx
@@ -8,11 +8,11 @@ export function PanelActions() {
   const intl = useIntl()
   const ACTIONS_OBJECT = getActionsObject(intl)
 
-  const hasPerm = (perms) => {
+  const hasPerm = (perms: string[]) => {
     return perms.some((perm) => traversal.hasPerm(perm))
   }
 
-  const onAction = (actionKey) => {
+  const onAction = (actionKey: keyof typeof ACTIONS_OBJECT) => {
     traversal.doAction(ACTIONS_OBJECT[actionKey].action, {
       item: traversal.context,
     })
@@ -21,16 +21,18 @@ export function PanelActions() {
   return (
     <Fragment>
       {Object.keys(ACTIONS_OBJECT).map((actionKey) => {
-        if (hasPerm(ACTIONS_OBJECT[actionKey].perms)) {
+        const actionKeyTyped = actionKey as keyof typeof ACTIONS_OBJECT
+        const actionObject = ACTIONS_OBJECT[actionKeyTyped]
+        if (hasPerm(actionObject.perms)) {
           return (
             <button
-              key={`panel_action_${ACTIONS_OBJECT[actionKey].text}`}
+              key={`panel_action_${actionObject.text}`}
               className="button mr-4"
               onClick={() => {
-                onAction(actionKey)
+                onAction(actionKeyTyped)
               }}
             >
-              {ACTIONS_OBJECT[actionKey].text}
+              {actionObject.text}
             </button>
           )
         }
diff --git a/src/guillo-gmi/components/panel/addons.tsx b/src/guillo-gmi/components/panel/addons.tsx
index 8aee7fc..434dc34 100644
--- a/src/guillo-gmi/components/panel/addons.tsx
+++ b/src/guillo-gmi/components/panel/addons.tsx
@@ -1,7 +1,8 @@
-import { useTraversal } from '../../contexts'
+import { Traversal, useTraversal } from '../../contexts'
 import { useIntl, defineMessages } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import { Fragment, useEffect, useState } from 'react'
+import { AddonAvailable, Addons } from '../../types/guillotina'
 
 const messages = defineMessages({
   available_addons: {
@@ -23,7 +24,14 @@ export function PanelAddons() {
   const intl = useIntl()
   const Ctx = useTraversal()
   const [action, setAction] = useState(false)
-  const [state, setState] = useState({
+  const [state, setState] = useState<{
+    data?: {
+      available: AddonAvailable[]
+      installed: AddonAvailable[]
+    }
+    loading: boolean
+    error?: Error
+  }>({
     data: undefined,
     loading: false,
     error: undefined,
@@ -34,23 +42,23 @@ export function PanelAddons() {
       if (!state.loading && !state.data && !state.error) {
         try {
           const response = await Ctx.client.getAddons(Ctx.pathPrefix)
-          const data = await response.json()
+          const data: Addons = await response.json()
           setState({ ...state, loading: false, data: prepareData(data) })
         } catch (err) {
-          setState({ ...state, loading: false, error: err })
+          setState({ ...state, loading: false, error: err as Error })
         }
       }
     }
     getAddons()
   }, [action])
 
-  const installAddon = async (Ctx, key) => {
+  const installAddon = async (Ctx: Traversal, key: string) => {
     await Ctx.client.installAddon(Ctx.pathPrefix, key)
     Ctx.flash(`Addon ${key} installed`, 'success')
     setAction(!action)
   }
 
-  const removeAddon = async (Ctx, key) => {
+  const removeAddon = async (Ctx: Traversal, key: string) => {
     await Ctx.client.removeAddon(Ctx.pathPrefix, key)
     Ctx.flash(`Addon ${key} removed`, 'success')
     setAction(!action)
@@ -126,7 +134,7 @@ export function PanelAddons() {
   )
 }
 
-const prepareData = (result) => {
+const prepareData = (result: Addons) => {
   const addons = arrayToObject(result.available)
   return {
     available: result.available.filter(
@@ -136,8 +144,14 @@ const prepareData = (result) => {
   }
 }
 
-const arrayToObject = (array) =>
+const arrayToObject = (
+  array: AddonAvailable[]
+): {
+  [key: string]: AddonAvailable
+} =>
   array.reduce((obj, item) => {
-    obj[item.id] = item
-    return obj
+    return {
+      ...obj,
+      [item.id]: item,
+    }
   }, {})
diff --git a/src/guillo-gmi/components/panel/behaviors.tsx b/src/guillo-gmi/components/panel/behaviors.tsx
index 1325eef..58da0ac 100644
--- a/src/guillo-gmi/components/panel/behaviors.tsx
+++ b/src/guillo-gmi/components/panel/behaviors.tsx
@@ -19,13 +19,13 @@ export function PanelBehaviors() {
 
   const [state, setState] = useState(false)
 
-  const enableBehavior = (behavior) => async () => {
+  const enableBehavior = (behavior: string) => async () => {
     await ops.patch({ behavior }, '@behaviors')
     setState(!state)
     Ctx.refresh()
   }
 
-  const disableBehavior = (behavior) => async () => {
+  const disableBehavior = (behavior: string) => async () => {
     await ops.del({ behavior }, '@behaviors')
     setState(!state)
     Ctx.refresh()
diff --git a/src/guillo-gmi/components/panel/items.tsx b/src/guillo-gmi/components/panel/items.tsx
index 122a060..ad799bf 100644
--- a/src/guillo-gmi/components/panel/items.tsx
+++ b/src/guillo-gmi/components/panel/items.tsx
@@ -21,7 +21,11 @@ import { SelectVocabulary } from '../input/select_vocabulary'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
-import { SearchItem } from '../../types/guillotina'
+import {
+  ItemColumn,
+  RegistrySchemaFilter,
+  SearchItem,
+} from '../../types/guillotina'
 
 interface InitialState {
   page: number
@@ -45,7 +49,7 @@ export function PanelItems() {
   const [state, setState] = useSetState<InitialState>(initialState)
   const { items, loading, total } = state
 
-  const filterSchema =
+  const filterSchema: RegistrySchemaFilter[] =
     Ctx.registry.getSchemas(Ctx.context['@type']).filters || []
 
   const columns =
@@ -56,26 +60,26 @@ export function PanelItems() {
   const type = location.get('type')
   const sort = location.get('sort')
   const sortDirection = location.get('sort_direction')
-  let page
+  let page: number
 
   try {
-    page = parseInt(location.get('page')) || 0
+    page = parseInt(location.get('page') || '0')
   } catch {
     page = 0
   }
 
-  let searchParsed = undefined
+  let searchParsed: string[][] | undefined = undefined
   if (search && search !== '') {
     const fieldsToFilter = Ctx.registry.getFieldsToFilter(Ctx.context['@type'])
     searchParsed = parser(search, fieldsToFilter)
   }
 
-  let typeParsed = undefined
+  let typeParsed: string[][] | undefined = undefined
   if (type && type !== '') {
     typeParsed = parser(type, 'type_name')
   }
 
-  let sortParsed = undefined
+  let sortParsed: string[][] | undefined = undefined
   if (sort && sort !== '') {
     if (sortDirection === 'asc') {
       sortParsed = parser(`_sort_asc=${sort}`)
@@ -84,7 +88,7 @@ export function PanelItems() {
     }
   }
 
-  const onSort = (key) => {
+  const onSort = (key: string) => {
     if (sort === key && sortDirection === 'des') {
       setLocation({
         sort: key,
@@ -100,10 +104,10 @@ export function PanelItems() {
     }
   }
 
-  let resultQueryParams = []
-  const resultDynamicLocation = []
+  let resultQueryParams: string[][] = []
+  const resultDynamicLocation: string[] = []
   filterSchema.forEach((filter) => {
-    const itemParam = location.get(filter.attribute_key)
+    const itemParam = location.get(filter.attribute_key) || ''
     resultDynamicLocation.push(itemParam)
     if (itemParam) {
       const filterParsed = parser(itemParam, filter.attribute_key)
@@ -114,23 +118,19 @@ export function PanelItems() {
   useEffect(() => {
     const controller = new AbortController()
     if (Ctx.state.loading) return
-    ;(async () => {
+    const getData = async () => {
       setState({ loading: true, total: Ctx.context.length })
       const { get } = Ctx.registry
       const fnName = get('searchEngineQueryParamsFunction', SearchEngine)
       if (sortParsed === undefined) {
         const defaultSortValue = Ctx.registry.getDefaultSortValue(
-          Ctx.context['@type'],
-          {
-            key: 'id',
-            direction: 'des',
-          }
+          Ctx.context['@type']
         )
         sortParsed = parser(
           `_sort_${defaultSortValue.direction}=${defaultSortValue.key}`
         )
       }
-      const qsParsed = Ctx.client[fnName]({
+      const qsParsed = Ctx.client.getQueryParamsSearchFunction(fnName)({
         path: Ctx.path,
         start: page * PageSize,
         pageSize: PageSize,
@@ -149,15 +149,20 @@ export function PanelItems() {
       }
 
       const { signal } = controller
-      const data = await Ctx.client.search(Ctx.path, qs, false, false, {
-        signal,
-      })
+      const data = await Ctx.client.search<SearchItem>(
+        Ctx.path,
+        qs,
+        false,
+        false,
+        signal
+      )
       setState({
-        items: data.member,
+        items: data.items,
         loading: false,
         total: data.items_count,
       })
-    })()
+    }
+    getData()
     return () => {
       controller.abort()
     }
@@ -171,11 +176,11 @@ export function PanelItems() {
     ...resultDynamicLocation,
   ])
 
-  const doPaginate = (page) => {
+  const doPaginate = (page: number) => {
     setLocation({ page: page })
   }
 
-  const getIcon = (key, isSortable) => {
+  const getIcon = (key: string, isSortable: boolean) => {
     let icon = null
     if (isSortable) {
       if (sort !== key) {
@@ -202,7 +207,7 @@ export function PanelItems() {
                   placeholder={filter.label}
                   appendDefault
                   classWrap="is-size-7 is-fullwidth"
-                  options={filter.values}
+                  options={filter.values ?? []}
                   value={location.get(filter.attribute_key) || ''}
                   dataTest={`filterInput${filter.attribute_key}`}
                   onChange={(value) => {
@@ -334,7 +339,7 @@ export function PanelItems() {
               <th>
                 <AllItemsCheckbox />
               </th>
-              {columns.map((column) => (
+              {columns.map((column: ItemColumn) => (
                 <th
                   key={`table-col-${column.label}`}
                   onClick={() => column.isSortable && onSort(column.key)}
@@ -342,7 +347,7 @@ export function PanelItems() {
                 >
                   <div className="has-text-info is-flex is-align-items-center">
                     <span>{column.label}</span>
-                    {getIcon(column.key, column.isSortable)}
+                    {getIcon(column.key, !!column.isSortable)}
                   </div>
                 </th>
               ))}
@@ -355,7 +360,7 @@ export function PanelItems() {
                 <RItem
                   item={item}
                   key={item['@uid']}
-                  search={search}
+                  search={search ?? ''}
                   columns={columns}
                 />
               ))}
diff --git a/src/guillo-gmi/components/panel/permissions.tsx b/src/guillo-gmi/components/panel/permissions.tsx
index cd6bab2..70d00a3 100644
--- a/src/guillo-gmi/components/panel/permissions.tsx
+++ b/src/guillo-gmi/components/panel/permissions.tsx
@@ -9,7 +9,7 @@ import { useCrudContext } from '../../hooks/useCrudContext'
 import { useTraversal } from '../../contexts'
 import { defineMessages, useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useEffect, useMemo, useState } from 'react'
 import { GuillotinaSharing } from '../../types/guillotina'
 
 const messages = defineMessages({
@@ -74,8 +74,15 @@ export function PanelPermissions() {
     get('@sharing')
   }, [reset])
 
-  const perms = new Sharing(result)
-
+  const perms = useMemo(() => {
+    if (result) {
+      return new Sharing(result)
+    }
+    return null
+  }, [result])
+  if (perms === null) {
+    return null
+  }
   return (
     <div className="columns">
       {!loading && (
@@ -199,9 +206,9 @@ export function PanelPermissions() {
 }
 
 interface State {
-  permissions: { text: string; value: string }[]
+  permissions?: { text: string; value: string }[]
   roles: { text: string; value: string }[]
-  principals: { text: string; value: string }[]
+  principals?: { text: string; value: string }[]
   current: string
 }
 const initial: State = {
@@ -250,18 +257,18 @@ export function AddPermission({ refresh, reset }: AddPermissionProps) {
 
       const principalsData = await Ctx.client.getPrincipals(Ctx.path)
       const groups = principalsData.groups.map((group) => ({
-        text: group.id,
-        value: group.id,
+        text: group['@name'],
+        value: group['@name'],
       }))
       const users = principalsData.users.map((user) => ({
-        text: user.fullname || user.id,
-        value: user.id,
+        text: user.fullname || user['@name'],
+        value: user['@name'],
       }))
       principals = [...groups, ...users]
 
       const req = await Ctx.client.getRoles(Ctx.path)
       if (req.ok) {
-        roles = (await req.json()).map((role) => ({
+        roles = (await req.json()).map((role: string) => ({
           text: role,
           value: role,
         }))
@@ -280,7 +287,7 @@ export function AddPermission({ refresh, reset }: AddPermissionProps) {
       <p>{intl.formatMessage(messages.select_type)}</p>
       <Select
         options={defaultOptions}
-        onChange={(value: string) => setState({ current: value })}
+        onChange={(value) => setState({ current: value as string })}
         dataTest="selectPermissionTypeTest"
       />
       <hr />
diff --git a/src/guillo-gmi/components/panel/permissions_prinperm.tsx b/src/guillo-gmi/components/panel/permissions_prinperm.tsx
index d6d9485..a79b214 100644
--- a/src/guillo-gmi/components/panel/permissions_prinperm.tsx
+++ b/src/guillo-gmi/components/panel/permissions_prinperm.tsx
@@ -8,14 +8,14 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
 interface State {
-  principal: string
+  principal?: string
   permission: string[]
-  setting: string
-  error: string
+  setting?: string
+  error?: string
 }
 interface Props {
-  principals: { text: string; value: string }[]
-  permissions: { text: string; value: string }[]
+  principals?: { text: string; value: string }[]
+  permissions?: { text: string; value: string }[]
   operations: { text: string; value: string }[]
   refresh: (value: number) => void
 }
@@ -35,10 +35,6 @@ export function PermissionPrinperm({
     error: undefined,
   })
 
-  const getMultiples = (field, setter) => (values) => {
-    setter({ [field]: values })
-  }
-
   const savePermission = async () => {
     if (!state.principal || !state.setting || state.permission.length === 0) {
       setState({ error: intl.formatMessage(genericMessages.invalid_form) })
@@ -75,8 +71,8 @@ export function PermissionPrinperm({
         </label>
         <Select
           appendDefault
-          options={principals}
-          onChange={(value: string) => setState({ principal: value })}
+          options={principals ?? []}
+          onChange={(value) => setState({ principal: value as string })}
           dataTest="selectPrincipalTest"
         />
       </div>
@@ -85,8 +81,10 @@ export function PermissionPrinperm({
           {intl.formatMessage(genericMessages.select_permissions)}
         </label>
         <Select
-          options={permissions}
-          onChange={getMultiples('permission', setState)}
+          options={permissions ?? []}
+          onChange={(values) => {
+            setState({ permission: values as string[] })
+          }}
           size={5}
           multiple
           dataTest="selectPermissionsTest"
@@ -99,7 +97,7 @@ export function PermissionPrinperm({
         <Select
           appendDefault
           options={operations}
-          onChange={(value: string) => setState({ setting: value })}
+          onChange={(value) => setState({ setting: value as string })}
           dataTest="operationPermissionsTest"
         />
       </div>
diff --git a/src/guillo-gmi/components/panel/permissions_prinrole.tsx b/src/guillo-gmi/components/panel/permissions_prinrole.tsx
index 08c1a25..583019d 100644
--- a/src/guillo-gmi/components/panel/permissions_prinrole.tsx
+++ b/src/guillo-gmi/components/panel/permissions_prinrole.tsx
@@ -8,13 +8,13 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
 interface State {
-  principal: string
+  principal?: string
   roles: string[]
-  setting: string
-  error: string
+  setting?: string
+  error?: string
 }
 interface Props {
-  principals: { text: string; value: string }[]
+  principals?: { text: string; value: string }[]
   roles: { text: string; value: string }[]
   operations: { text: string; value: string }[]
   refresh: (value: number) => void
@@ -35,10 +35,6 @@ export function PermissionPrinrole({
     error: undefined,
   })
 
-  const getMultiples = (field, setter) => (values) => {
-    setter({ [field]: values })
-  }
-
   const savePermission = async () => {
     if (!state.principal || !state.setting || state.roles.length === 0) {
       setState({ error: intl.formatMessage(genericMessages.invalid_form_data) })
@@ -75,8 +71,8 @@ export function PermissionPrinrole({
         </label>
         <Select
           appendDefault
-          options={principals}
-          onChange={(value: string) => setState({ principal: value })}
+          options={principals ?? []}
+          onChange={(value) => setState({ principal: value as string })}
           dataTest="selectPrincipalTest"
         />
       </div>
@@ -86,7 +82,9 @@ export function PermissionPrinrole({
         </label>
         <Select
           options={roles}
-          onChange={getMultiples('roles', setState)}
+          onChange={(values) => {
+            setState({ roles: values as string[] })
+          }}
           size={5}
           multiple
           dataTest="selectRoleTest"
@@ -99,7 +97,7 @@ export function PermissionPrinrole({
         <Select
           appendDefault
           options={operations}
-          onChange={(value: string) => setState({ setting: value })}
+          onChange={(value) => setState({ setting: value as string })}
           dataTest="operationPermissionsTest"
         />
       </div>
diff --git a/src/guillo-gmi/components/panel/permissions_roleperm.tsx b/src/guillo-gmi/components/panel/permissions_roleperm.tsx
index 368b01a..fddb7d7 100644
--- a/src/guillo-gmi/components/panel/permissions_roleperm.tsx
+++ b/src/guillo-gmi/components/panel/permissions_roleperm.tsx
@@ -8,14 +8,14 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
 interface State {
-  role: string
+  role?: string
   permission: string[]
-  setting: string
-  error: string
+  setting?: string
+  error?: string
 }
 interface Props {
   roles: { text: string; value: string }[]
-  permissions: { text: string; value: string }[]
+  permissions?: { text: string; value: string }[]
   operations: { text: string; value: string }[]
   refresh: (value: number) => void
 }
@@ -35,10 +35,6 @@ export function PermissionRoleperm({
     error: undefined,
   })
 
-  const getMultiples = (field, setter) => (values) => {
-    setter({ [field]: values })
-  }
-
   const savePermission = async () => {
     if (!state.role || !state.setting || state.permission.length === 0) {
       setState({ error: intl.formatMessage(genericMessages.invalid_form) })
@@ -77,7 +73,7 @@ export function PermissionRoleperm({
         <Select
           appendDefault
           options={roles}
-          onChange={(value: string) => setState({ role: value })}
+          onChange={(value) => setState({ role: value as string })}
           dataTest="selectRoleTest"
         />
       </div>
@@ -86,8 +82,10 @@ export function PermissionRoleperm({
           {intl.formatMessage(genericMessages.select_permissions)}
         </label>
         <Select
-          options={permissions}
-          onChange={getMultiples('permission', setState)}
+          options={permissions ?? []}
+          onChange={(values) => {
+            setState({ permission: values as string[] })
+          }}
           dataTest="selectPermissionsTest"
           size={5}
           multiple
@@ -100,7 +98,7 @@ export function PermissionRoleperm({
         <Select
           appendDefault
           options={operations}
-          onChange={(value: string) => setState({ setting: value })}
+          onChange={(value) => setState({ setting: value as string })}
           dataTest="operationPermissionsTest"
         />
       </div>
diff --git a/src/guillo-gmi/components/panel/properties.tsx b/src/guillo-gmi/components/panel/properties.tsx
index ce20803..1758c2f 100644
--- a/src/guillo-gmi/components/panel/properties.tsx
+++ b/src/guillo-gmi/components/panel/properties.tsx
@@ -14,6 +14,7 @@ import {
   GuillotinaSchema,
   GuillotinaSchemaProperty,
 } from '../../types/guillotina'
+import { get } from '../../lib/utils'
 
 const _showProperties = ['@id', '@name', '@uid']
 const _ignoreFields = [
@@ -33,9 +34,9 @@ const _ignoreFields = [
 ]
 
 interface State {
-  data: GuillotinaSchema
+  data?: GuillotinaSchema
   loading: boolean
-  error: string
+  error: string | unknown
 }
 
 export function PanelProperties() {
@@ -52,7 +53,7 @@ export function PanelProperties() {
 
   const model = new ItemModel(Ctx.context)
 
-  const showProperties =
+  const showProperties: string[] =
     Ctx.registry.getProperties(Ctx.context['@type']).default ||
     cfg.properties_default ||
     _showProperties
@@ -66,7 +67,7 @@ export function PanelProperties() {
     .filter((key) => !ignoreFields.includes(key))
     .map((key) => ({
       key,
-      value: schema.data.properties[key] as GuillotinaSchemaProperty,
+      value: schema?.data?.properties[key] as GuillotinaSchemaProperty,
     }))
 
   useEffect(() => {
@@ -74,7 +75,10 @@ export function PanelProperties() {
       if (!schema.loading && !schema.data && !schema.error) {
         try {
           setSchema({ loading: true })
-          const dataJson = await Ctx.client.getTypeSchema(Ctx.path, model.type)
+          const dataJson = await Ctx.client.getTypeSchema(
+            Ctx.path,
+            Ctx.context.type_name
+          )
           setSchema({ loading: false, data: dataJson })
         } catch (err) {
           setSchema({ loading: false, error: err })
@@ -121,7 +125,7 @@ export function PanelProperties() {
                     <td>
                       <EditableField
                         field={prop}
-                        value={Ctx.context[prop]}
+                        value={get(Ctx.context, prop, '')}
                         modifyContent={false}
                       />
                     </td>
@@ -149,7 +153,7 @@ export function PanelProperties() {
                         <td>
                           <EditableField
                             field={key}
-                            value={Ctx.context[key]}
+                            value={get(Ctx.context, key, '')}
                             schema={value}
                             modifyContent={modifyContent}
                             required={(schema.data?.required ?? []).includes(
diff --git a/src/guillo-gmi/components/path.tsx b/src/guillo-gmi/components/path.tsx
index a8f067a..0785b92 100644
--- a/src/guillo-gmi/components/path.tsx
+++ b/src/guillo-gmi/components/path.tsx
@@ -9,7 +9,7 @@ export function Path() {
   const links = buildPaths(segments)
 
   if (segments.length === 1) {
-    return false
+    return null
   }
 
   return (
@@ -17,7 +17,7 @@ export function Path() {
       <ul>
         {segments.map((item, indx) => {
           const path = links[indx]
-          const onClick = (e) => {
+          const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
             if (e.ctrlKey || e.metaKey) return
             e.preventDefault()
             navigate({ path }, true)
@@ -52,9 +52,9 @@ export function Path() {
   )
 }
 
-const buildPaths = (segments) => {
+const buildPaths = (segments: string[]) => {
   let current = ''
-  const results = []
+  const results: string[] = []
   segments.map((item, indx) => {
     if (indx === 0) {
       current += '/'
diff --git a/src/guillo-gmi/components/search_options_labels.tsx b/src/guillo-gmi/components/search_options_labels.tsx
index fe84492..44906f5 100644
--- a/src/guillo-gmi/components/search_options_labels.tsx
+++ b/src/guillo-gmi/components/search_options_labels.tsx
@@ -8,12 +8,12 @@ interface Props {
 }
 export function SearchOptionsLabels({ query = 'q', options }: Props) {
   const [location, , del] = useLocation()
-  const [renderValue, setRenderValue] = useState(undefined)
-  const defaultRenderValue = location.get(query)
+  const [renderValue, setRenderValue] = useState<string | undefined>(undefined)
+  const defaultRenderValue = location.get(query) || ''
 
   useEffect(() => {
     let value = defaultRenderValue
-    if ((options ?? []).length > 0) {
+    if (options && (options ?? []).length > 0) {
       const option = options.find((item) => item.value === value)
       if (option) {
         value = option.text
diff --git a/src/guillo-gmi/components/search_vocabulary_labels.tsx b/src/guillo-gmi/components/search_vocabulary_labels.tsx
index 98a70eb..edad3ae 100644
--- a/src/guillo-gmi/components/search_vocabulary_labels.tsx
+++ b/src/guillo-gmi/components/search_vocabulary_labels.tsx
@@ -5,20 +5,20 @@ import { useVocabulary } from '../hooks/useVocabulary'
 
 interface Props {
   query?: string
-  vocabularyName?: string
+  vocabularyName: string
 }
 
 export function SearchVocabularyLabels({ query = 'q', vocabularyName }: Props) {
   const [location, , del] = useLocation()
-  const [renderValue, setRenderValue] = useState(undefined)
+  const [renderValue, setRenderValue] = useState<string | undefined>(undefined)
   const vocabulary = useVocabulary(vocabularyName)
-  const defaultRenderValue = location.get(query)
+  const defaultRenderValue = location.get(query) || ''
 
   useEffect(() => {
     let value: string = defaultRenderValue
 
     if ((vocabulary?.data?.items ?? []).length > 0) {
-      const vocabularyValue = vocabulary.data.items.find(
+      const vocabularyValue = vocabulary?.data?.items.find(
         (item) => item.token === value
       )
       if (vocabularyValue) {
diff --git a/src/guillo-gmi/components/selected_items_actions.tsx b/src/guillo-gmi/components/selected_items_actions.tsx
index 6521092..e8d5cc6 100644
--- a/src/guillo-gmi/components/selected_items_actions.tsx
+++ b/src/guillo-gmi/components/selected_items_actions.tsx
@@ -7,7 +7,7 @@ import { getActionsObject } from '../lib/helpers'
 import { SearchItem } from '../types/guillotina'
 
 const ItemsActionsCtx = createContext<{
-  selected?: {
+  selected: {
     all: boolean
     [key: string]: boolean
   }
@@ -35,22 +35,27 @@ export function ItemsActionsProvider({
   const intl = useIntl()
   const actions = getActionsObject(intl, true)
   const traversal = useTraversal()
-  const [selected, setSelected] = useState({
+  const [selected, setSelected] = useState<{
+    all: boolean
+    [key: string]: boolean
+  }>({
     all: false,
   })
-  function onSelectAllItems(checked) {
+  function onSelectAllItems(checked: boolean) {
     setSelected(
       items.reduce(
         (obj, item) => {
-          obj[`${item.path}/${item.id}`] = checked
-          return obj
+          return {
+            ...obj,
+            [`${item.path}/${item.id}`]: checked,
+          }
         },
         { all: checked }
       )
     )
   }
 
-  function onSelectOneItem(item) {
+  function onSelectOneItem(item: SearchItem) {
     setSelected((state) => ({
       ...state,
       all: false,
@@ -58,7 +63,7 @@ export function ItemsActionsProvider({
     }))
   }
 
-  function onAction(actionKey) {
+  function onAction(actionKey: string) {
     traversal.doAction(actions[actionKey].action, {
       items: items.filter((item) => selected[`${item.path}/${item.id}`]),
     })
@@ -78,12 +83,21 @@ export function ItemsActionsProvider({
   )
 }
 
+const useItemsActions = () => {
+  const { onAction, onSelectOneItem, onSelectAllItems, selected } = useContext(
+    ItemsActionsCtx
+  )
+  if (!onAction || !onSelectOneItem || !onSelectAllItems || !selected) {
+    throw new Error('useItemsActions must be used inside ItemsActionsProvider')
+  }
+  return { onAction, onSelectOneItem, onSelectAllItems, selected }
+}
 /**
  * Checkbox component without props that consume the ItemsActionsContext
  * and it select/unselect all items of the page.
  */
 export function AllItemsCheckbox({ dataTest }: { dataTest?: string }) {
-  const { onSelectAllItems, selected } = useContext(ItemsActionsCtx)
+  const { onSelectAllItems, selected } = useItemsActions()
 
   return (
     <Checkbox
@@ -102,7 +116,7 @@ interface PropsItemCheckbox {
   dataTest?: string
 }
 export function ItemCheckbox({ item, dataTest }: PropsItemCheckbox) {
-  const { selected, onSelectOneItem } = useContext(ItemsActionsCtx)
+  const { selected, onSelectOneItem } = useItemsActions()
   const absId = `${item.path}/${item.id}`
   const value = selected[absId]
 
@@ -122,7 +136,7 @@ export function ItemsActionsDropdown() {
   const intl = useIntl()
   const ACTIONS_OBJECT = getActionsObject(intl, true)
   const traversal = useTraversal()
-  const { selected, onAction } = useContext(ItemsActionsCtx)
+  const { selected, onAction } = useItemsActions()
   const disabled = Object.values(selected).every((v) => !v)
   const options = Object.keys(ACTIONS_OBJECT).map((action) => ({
     text: ACTIONS_OBJECT[action].text,
diff --git a/src/guillo-gmi/components/tabs.tsx b/src/guillo-gmi/components/tabs.tsx
index a0b909d..f0b25b9 100644
--- a/src/guillo-gmi/components/tabs.tsx
+++ b/src/guillo-gmi/components/tabs.tsx
@@ -8,9 +8,9 @@ function FallbackTab({ title }: { title: string }) {
 
 interface Props {
   tabs: IndexSignature
-  currentTab?: string
+  currentTab: string
   rightToolbar?: React.ReactNode
-  fallback?: React.ComponentType
+  fallback?: React.ComponentType<{ title: string }>
 }
 
 export function TabsPanel({
@@ -21,12 +21,7 @@ export function TabsPanel({
 }: Props) {
   const [location, setLocation] = useLocation()
 
-  if (location.get('tab')) {
-    currentTab = location.get('tab')
-  } else {
-    currentTab = currentTab || Object.keys(tabs)[0]
-  }
-
+  currentTab = location.get('tab') || Object.keys(tabs)[0]
   /*if (!Object.keys(tabs).includes(currentTab)) {
     setLocation(defaultTab)
     currentTab = defaultTab
@@ -42,7 +37,7 @@ export function TabsPanel({
     }
   }, [currentTab, tabs])
 
-  const changeTab = (tab) => {
+  const changeTab = (tab: string) => {
     setLocation({ tab: tab })
   }
 
diff --git a/src/guillo-gmi/components/ui/icon.tsx b/src/guillo-gmi/components/ui/icon.tsx
index 9983582..882525c 100644
--- a/src/guillo-gmi/components/ui/icon.tsx
+++ b/src/guillo-gmi/components/ui/icon.tsx
@@ -6,7 +6,7 @@ interface Props {
   align?: string
 }
 
-export const Icon = ({ icon, className, align }: Props) => {
+export const Icon = ({ icon, className = '', align }: Props) => {
   const addClass = className ? className.split(' ') : [className]
 
   align = align || 'is-right'
diff --git a/src/guillo-gmi/components/widgets/tags.tsx b/src/guillo-gmi/components/widgets/tags.tsx
index 8cc78c3..b663333 100644
--- a/src/guillo-gmi/components/widgets/tags.tsx
+++ b/src/guillo-gmi/components/widgets/tags.tsx
@@ -3,20 +3,25 @@ import { Tag } from '../ui/tag'
 import { Loading } from '../ui/loading'
 import { useRef, useState } from 'react'
 
-const prepareAvailable = (items, already, title) => {
+const prepareAvailable = (
+  items: {
+    value: string
+    text: string
+  }[],
+  already: string[],
+  title: string
+) => {
   const def = { value: '', text: `Add ${title}` }
   if (items.length === 0) return []
-  if (items[0] && typeof items[0] === 'string') {
-    return [def]
-      .concat(items.map((x) => ({ value: x, text: x })))
-      .filter((item) => !already.includes(item.value))
-  }
   return [def].concat(items).filter((item) => !already.includes(item.value))
 }
 
 interface Props {
   items: string[]
-  available?: string[]
+  available?: {
+    value: string
+    text: string
+  }[]
   title: string
   noData: string
   onChange: (items: string[]) => void
@@ -30,18 +35,18 @@ export function TagsWidget({
   onChange,
   loading,
 }: Props) {
-  const selectRef = useRef<HTMLSelectElement>()
+  const selectRef = useRef<HTMLSelectElement>(null)
 
   const [result, setResult] = useState(items)
   const availableData = prepareAvailable(available || [], result, title)
 
-  const remove = (value) => {
+  const remove = (value: string) => {
     const items = result.filter((item) => item !== value)
     setResult(items)
     onChange(items)
   }
 
-  const addItem = (value) => {
+  const addItem = (value: string) => {
     if (value === '') return
     const items = result.concat([value])
     setResult(items)
@@ -66,13 +71,13 @@ export function TagsWidget({
         {result.length === 0 && (
           <li style={{ marginBottom: '20px' }}>{noData}</li>
         )}
-        {available.length > 1 && (
+        {(available ?? []).length > 1 && (
           <li className="widget-list-add select is-small">
             <Select
               options={availableData}
               ref={selectRef}
               onChange={(value) => {
-                addItem(value)
+                addItem(value as string)
                 if (selectRef.current) {
                   selectRef.current.value = ''
                 }
diff --git a/src/guillo-gmi/contexts/index.tsx b/src/guillo-gmi/contexts/index.tsx
index da76855..a5f97bf 100644
--- a/src/guillo-gmi/contexts/index.tsx
+++ b/src/guillo-gmi/contexts/index.tsx
@@ -1,22 +1,29 @@
-import { Dispatch, useContext } from 'react'
-import { createContext } from 'react'
+import { Dispatch, useContext, createContext } from 'react'
 import { GuillotinaClient } from '../lib/client.js'
 import { Auth } from '../lib/auth.js'
 import { IndexSignature } from '../types/global'
-import { GuillotinaGlobalState } from '../reducers/guillotina'
+import {
+  GuillotinaGlobalState,
+  GuillotinaReducerActionTypes,
+} from '../reducers/guillotina'
+import { GuillotinaCommonObject } from '../types/guillotina.js'
 
 export const AuthContext = createContext({})
 
-export const ClientContext = createContext<GuillotinaClient>(null)
+export const ClientContext = createContext<GuillotinaClient | null>(null)
 
 interface PropsTraversal {
   client: GuillotinaClient
   auth: Auth
   state: GuillotinaGlobalState
-  dispatch: Dispatch<{ type: string; payload: IndexSignature }>
+  dispatch: Dispatch<{
+    type: GuillotinaReducerActionTypes
+    payload: IndexSignature
+  }>
   registry: IndexSignature
   flash: (action: string, result: string) => void
   url: string
+  children?: React.ReactNode
 }
 
 export class Traversal {
@@ -38,7 +45,10 @@ export class Traversal {
   }
 
   refresh({ transparent = false } = {}) {
-    this.dispatch({ type: 'REFRESH', payload: { transparent } })
+    this.dispatch({
+      type: GuillotinaReducerActionTypes.REFRESH,
+      payload: { transparent },
+    })
   }
 
   get path() {
@@ -49,7 +59,10 @@ export class Traversal {
     return this.state.path.slice(1)
   }
 
-  get context() {
+  get context(): GuillotinaCommonObject {
+    if (this.state.context === undefined) {
+      throw new Error('Context is not loaded')
+    }
     return this.state.context
   }
 
@@ -57,34 +70,49 @@ export class Traversal {
     return this.client.getContainerFromPath(this.path)
   }
 
-  apply(data) {
+  apply(data: IndexSignature) {
     // apply a optimistic update to context
-    this.dispatch({ type: 'APPLY', payload: data })
+    this.dispatch({
+      type: GuillotinaReducerActionTypes.APPLY,
+      payload: { context: data },
+    })
   }
 
-  flash(message, type) {
-    this.dispatch({ type: 'SET_FLASH', payload: { flash: { message, type } } })
+  flash(message: string, type: string) {
+    this.dispatch({
+      type: GuillotinaReducerActionTypes.SET_FLASH,
+      payload: { flash: { message, type } },
+    })
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
 
   clearFlash() {
-    this.dispatch({ type: 'CLEAR_FLASH' })
+    this.dispatch({
+      type: GuillotinaReducerActionTypes.CLEAR_FLASH,
+      payload: {},
+    })
   }
 
-  doAction(action, params = {}) {
-    this.dispatch({ type: 'SET_ACTION', payload: { action, params } })
+  doAction(action: string, params = {}) {
+    this.dispatch({
+      type: GuillotinaReducerActionTypes.SET_ACTION,
+      payload: { action, params },
+    })
   }
 
   cancelAction() {
-    this.dispatch({ type: 'CLEAR_ACTION' })
+    this.dispatch({
+      type: GuillotinaReducerActionTypes.CLEAR_ACTION,
+      payload: {},
+    })
   }
 
-  hasPerm(permission) {
+  hasPerm(permission: string) {
     return this.state.permissions[permission] === true
   }
 
-  filterTabs(tabs, tabsPermissions) {
-    const result = {}
+  filterTabs(tabs: IndexSignature, tabsPermissions: IndexSignature) {
+    const result: IndexSignature = {}
     Object.keys(tabs).forEach((item) => {
       const perm = tabsPermissions[item]
       if (perm && this.hasPerm(perm)) {
@@ -97,7 +125,7 @@ export class Traversal {
   }
 }
 
-export const TraversalContext = createContext<Traversal>(null)
+export const TraversalContext = createContext<Traversal | null>(null)
 export function TraversalProvider({
   children,
   ...props
@@ -110,7 +138,11 @@ export function TraversalProvider({
 }
 
 export function useTraversal() {
-  return useContext(TraversalContext)
+  const traversal = useContext(TraversalContext)
+  if (!traversal) {
+    throw new Error('useTraversal must be used within a TraversalProvider')
+  }
+  return traversal
 }
 
 interface PropsClient {
@@ -124,5 +156,9 @@ export function ClientProvider({ children, client }: PropsClient) {
 }
 
 export function useGuillotinaClient() {
-  return useContext(ClientContext)
+  const client = useContext(ClientContext)
+  if (!client) {
+    throw new Error('useGuillotinaClient must be used within a ClientProvider')
+  }
+  return client
 }
diff --git a/src/guillo-gmi/forms/base.tsx b/src/guillo-gmi/forms/base.tsx
index bc7b33e..aa2798b 100644
--- a/src/guillo-gmi/forms/base.tsx
+++ b/src/guillo-gmi/forms/base.tsx
@@ -22,7 +22,7 @@ export function BaseForm({
   const intl = useIntl()
   const [name, setName] = useState('')
   const [id, setId] = useState('')
-  const [error, setError] = useState(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
 
   const submit = () => {
     if (name === '') {
@@ -32,7 +32,7 @@ export function BaseForm({
     onSubmit({ title: name, id })
   }
 
-  const setTitle = (value) => {
+  const setTitle = (value: string) => {
     setId(stringToSlug(value))
     setName(value)
   }
diff --git a/src/guillo-gmi/forms/required_fields.tsx b/src/guillo-gmi/forms/required_fields.tsx
index c58108f..4c77241 100644
--- a/src/guillo-gmi/forms/required_fields.tsx
+++ b/src/guillo-gmi/forms/required_fields.tsx
@@ -7,11 +7,11 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
 import { IndexSignature } from '../types/global'
 
-const ignoreFiels = []
+const ignoreFiels: string[] = []
 const extraFields = ['title']
 
 interface Props {
-  onSubmit: (data: { [key: string]: any }) => void
+  onSubmit: (data: IndexSignature) => void
   actionName?: string
   title?: string
   dataTest?: string
@@ -19,9 +19,9 @@ interface Props {
   type: string
 }
 interface State {
-  data: any
+  data?: IndexSignature
   loading: boolean
-  error: any
+  error?: unknown
   formFields: string[]
 }
 export function RequiredFieldsForm({
@@ -38,7 +38,7 @@ export function RequiredFieldsForm({
   const EditComponent = Ctx.registry.get('components', 'EditComponent')
 
   const [formData, setFormData] = useState<IndexSignature>({})
-  const [errors, setErrors] = useState({})
+  const [errors, setErrors] = useState<IndexSignature<string>>({})
 
   const [schema, setSchema] = useSetState<State>({
     data: undefined,
@@ -67,7 +67,7 @@ export function RequiredFieldsForm({
   }, [schema])
 
   const submit = () => {
-    const currentErrors = {}
+    const currentErrors: IndexSignature<string> = {}
 
     schema.formFields.forEach((key) => {
       if (!formData[key]) {
@@ -92,7 +92,7 @@ export function RequiredFieldsForm({
         !schema.loading &&
         schema.formFields.map((key) => {
           if (!ignoreFiels.includes(key)) {
-            const value = schema.data.properties[key]
+            const value = schema.data?.properties[key]
             return (
               <EditComponent
                 key={key}
@@ -100,21 +100,21 @@ export function RequiredFieldsForm({
                 placeholder={value?.title ?? ''}
                 className=""
                 required
-                schema={schema.data.properties[key]}
-                setValue={(ev) => {
+                schema={schema.data?.properties[key]}
+                setValue={(value: string) => {
                   if (key === 'title') {
                     setFormData({
                       ...formData,
-                      uuid: stringToSlug(ev),
-                      [key]: ev,
+                      uuid: stringToSlug(value),
+                      [key]: value,
                     })
                   } else if (key === 'uuid') {
                     setFormData({
                       ...formData,
-                      uuid: stringToSlug(ev),
+                      uuid: stringToSlug(value),
                     })
                   } else {
-                    setFormData({ ...formData, [key]: ev })
+                    setFormData({ ...formData, [key]: value })
                   }
                 }}
                 error={errors[key]}
diff --git a/src/guillo-gmi/forms/users.tsx b/src/guillo-gmi/forms/users.tsx
index 640fb73..fbc5d38 100644
--- a/src/guillo-gmi/forms/users.tsx
+++ b/src/guillo-gmi/forms/users.tsx
@@ -5,7 +5,7 @@ import { IndexSignature } from '../types/global'
 interface Props {
   children: React.ReactNode
   onSubmit: (data: IndexSignature) => void
-  actionName?: string
+  actionName: string
   formData?: IndexSignature
   exclude?: string[]
   remotes?: IndexSignature
diff --git a/src/guillo-gmi/hooks/useClickAway.tsx b/src/guillo-gmi/hooks/useClickAway.tsx
index e780769..e9562e2 100644
--- a/src/guillo-gmi/hooks/useClickAway.tsx
+++ b/src/guillo-gmi/hooks/useClickAway.tsx
@@ -1,10 +1,22 @@
 import { useEffect, useRef } from 'react'
 
 const defaultEvents = ['mousedown', 'touchstart']
-const on = (obj, ...args) => obj.addEventListener(...args)
-const off = (obj, ...args) => obj.removeEventListener(...args)
+const on = (
+  obj: Document,
+  type: keyof DocumentEventMap,
+  handler: (ev: Event) => void
+) => obj.addEventListener(type, handler)
+const off = (
+  obj: Document,
+  type: keyof DocumentEventMap,
+  handler: (ev: Event) => void
+) => obj.removeEventListener(type, handler)
 
-export default function useClickAway(ref, onClickAway, events = defaultEvents) {
+export default function useClickAway(
+  ref: React.RefObject<HTMLElement>,
+  onClickAway: (event: Event) => void,
+  events = defaultEvents
+) {
   const savedCallback = useRef(onClickAway)
 
   useEffect(() => {
@@ -12,18 +24,18 @@ export default function useClickAway(ref, onClickAway, events = defaultEvents) {
   }, [onClickAway])
 
   useEffect(() => {
-    const handler = (event) => {
+    const handler = (event: Event) => {
       const { current: el } = ref
-      el && !el.contains(event.target) && savedCallback.current(event)
+      el && !el.contains(event.target as Node) && savedCallback.current(event)
     }
 
     for (const eventName of events) {
-      on(document, eventName, handler)
+      on(document, eventName as keyof DocumentEventMap, handler)
     }
 
     return () => {
       for (const eventName of events) {
-        off(document, eventName, handler)
+        off(document, eventName as keyof DocumentEventMap, handler)
       }
     }
   }, [events, ref])
diff --git a/src/guillo-gmi/hooks/useConfig.tsx b/src/guillo-gmi/hooks/useConfig.tsx
index 61bd8bd..b853ce5 100644
--- a/src/guillo-gmi/hooks/useConfig.tsx
+++ b/src/guillo-gmi/hooks/useConfig.tsx
@@ -25,12 +25,13 @@ interface IConfig {
   Permissions: string[]
   SearchEngine: string
   SizeImages?: string[]
-  icons?: string[]
+  icons?: { [key: string]: string }
   properties_default?: string[]
   properties_ignore_fields?: string[]
   fieldHaveDeleteButton: (schema: GuillotinaSchemaProperty) => boolean
 }
-export const Config: IConfig = {
+
+export const defaultConfig: IConfig = {
   DisabledTypes: ['UserManager', 'GroupManager'],
   PageSize: 10,
   DelayActions: 200,
@@ -45,24 +46,46 @@ export const Config: IConfig = {
   },
 }
 
-let calculated = Object.assign({}, Config)
+let calculated = Object.assign({}, defaultConfig)
+
+function addConfig(updates: Partial<IConfig>, currentConfig: IConfig): IConfig {
+  let updatedConfig: IConfig = { ...currentConfig }
+
+  Object.entries(updates).forEach(([key, value]) => {
+    const currentKey = key as keyof IConfig
+    const currentValue = currentConfig[currentKey]
 
-const addConfig = (additional: Partial<IConfig>, original: IConfig) => {
-  const rest = Object.assign({}, original)
-  Object.keys(additional).forEach((item) => {
-    if (typeof Config[item] === 'object' && Array.isArray(Config[item])) {
-      rest[item] = [].concat(Config[item], additional[item])
-    } else if (typeof Config[item] === 'object') {
-      rest[item] = Object.assign({}, Config[item], additional[item])
+    if (Array.isArray(value) && Array.isArray(currentValue)) {
+      // Correctly type the array concatenation
+      updatedConfig = {
+        ...updatedConfig,
+        [currentKey]: [...currentValue, ...value],
+      }
+    } else if (isPlainObject(value) && isPlainObject(currentValue)) {
+      // Correctly type the object merging
+      updatedConfig = {
+        ...updatedConfig,
+        [currentKey]: { ...currentValue, ...value },
+      }
     } else {
-      rest[item] = additional[item]
+      // Directly assign all other types
+      updatedConfig = {
+        ...updatedConfig,
+        [currentKey]: value,
+      }
     }
   })
-  return rest
+
+  return updatedConfig as IConfig
+}
+
+// Helper function to check if a value is a plain object (and not a React node, etc.)
+function isPlainObject(value: any): value is object {
+  return Object.prototype.toString.call(value) === '[object Object]'
 }
 
 export function useConfig(cfg = {}) {
-  const ref = useRef<unknown>()
+  const ref = useRef<IConfig>()
   if (cfg && !ref.current) {
     calculated = addConfig(cfg, calculated)
     ref.current = calculated
diff --git a/src/guillo-gmi/hooks/useCrudContext.tsx b/src/guillo-gmi/hooks/useCrudContext.tsx
index 9b84d20..790b00c 100644
--- a/src/guillo-gmi/hooks/useCrudContext.tsx
+++ b/src/guillo-gmi/hooks/useCrudContext.tsx
@@ -1,14 +1,15 @@
-import { useTraversal } from '../contexts'
+import { Traversal, useTraversal } from '../contexts'
+import { processResponse } from '../lib/processResponse'
 import useSetState from './useSetState'
 
-interface State<T = unknown> {
+interface State<T> {
   loading?: boolean
   isError?: boolean
   errorMessage?: string
   result?: T
   response?: unknown
 }
-const initial: State = {
+const initial = {
   loading: undefined,
   isError: false,
   errorMessage: undefined,
@@ -16,104 +17,93 @@ const initial: State = {
   response: undefined,
 }
 
-const getErrorMessage = (dataError, defaultValue) => {
-  if (dataError && dataError.details) {
-    return dataError.details
-  } else if (dataError && dataError.reason) {
-    return dataError.reason
+function patch<T>(
+  setState: (value: Partial<State<T>>) => void,
+  Ctx: Traversal
+) {
+  return async (
+    data = {},
+    endpoint?: string,
+    body = false
+  ): Promise<State<T>> => {
+    setState({ loading: true })
+    let newState = {}
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
+      const res = await Ctx.client.patch(path, data)
+      newState = await processResponse<T>(res, body)
+    } catch (e) {
+      console.error('Error', e)
+      newState = { isError: true, errorMessage: 'unhandled exception' }
+    }
+    setState(newState)
+    return newState
   }
-  return defaultValue
 }
 
-const processResponse = async (res, ready_body = true) => {
-  if (res.status < 400)
-    return {
-      isError: false,
-      loading: false,
-      result: ready_body ? await res.json() : res.status,
-      response: res,
-    }
-  else
-    return {
-      isError: true,
-      loading: false,
-      errorMessage: getErrorMessage(await res.json(), res.status),
-      response: res,
+function del<T>(setState: (value: Partial<State<T>>) => void, Ctx: Traversal) {
+  return async (
+    data = {},
+    endpoint?: string,
+    body = false
+  ): Promise<State<T>> => {
+    setState({ loading: true })
+    let newState = {}
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
+      const res = await Ctx.client.delete(path, data)
+      newState = await processResponse(res, body)
+    } catch (e) {
+      console.error('Error', e)
+      newState = { isError: true, errorMessage: 'unhandled exception' }
     }
-}
-
-const patch = (setState, Ctx) => async (
-  data,
-  endpoint = undefined,
-  body = false
-): Promise<State> => {
-  setState({ loading: true })
-  let newState: State = {}
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
-    const res = await Ctx.client.patch(path, data)
-    newState = await processResponse(res, body)
-  } catch (e) {
-    console.error('Error', e)
-    newState = { isError: true, errorMessage: 'unhandled exception' }
+    setState(newState)
+    return newState
   }
-  setState(newState)
-  return newState
 }
 
-const del = (setState, Ctx) => async (
-  data = {},
-  endpoint = undefined,
-  body = false
-): Promise<State> => {
-  setState({ loading: true })
-  let newState = {}
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
-    const res = await Ctx.client.delete(path, data)
-    newState = await processResponse(res, body)
-  } catch (e) {
-    console.error('Error', e)
-    newState = { isError: true, errorMessage: 'unhandled exception' }
+function post<T>(setState: (value: Partial<State<T>>) => void, Ctx: Traversal) {
+  return async (
+    data = {},
+    endpoint?: string,
+    body = true
+  ): Promise<State<T>> => {
+    setState({ loading: true })
+    let newState: State<T> = {}
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
+      const res = await Ctx.client.post(path, data)
+      newState = await processResponse(res, body)
+    } catch (e) {
+      console.error('Error', e)
+      newState = { isError: true, errorMessage: 'unhandled exception' }
+    }
+    setState(newState)
+    return newState
   }
-  setState(newState)
-  return newState
 }
 
-const post = (setState, Ctx) => async (
-  data,
-  endpoint = undefined,
-  body = true
-): Promise<State> => {
-  setState({ loading: true })
-  let newState = {}
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
-    const res = await Ctx.client.post(path, data)
-    newState = await processResponse(res, body)
-  } catch (e) {
-    console.error('Error', e)
-    newState = { isError: true, errorMessage: 'unhandled exception' }
-  }
-  setState(newState)
-  return newState
-}
+function get<T>(setState: (value: Partial<State<T>>) => void, Ctx: Traversal) {
+  return async (endpoint?: string): Promise<State<T>> => {
+    setState({ loading: true })
+    let newState = {}
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
+      const res = await Ctx.client.get(path)
+      newState = await processResponse(res, true)
+    } catch (e) {
+      console.error('Error', e)
+      newState = { isError: true, errorMessage: 'unhandled exception' }
+    }
 
-const get = (setState, Ctx) => async (endpoint = undefined): Promise<State> => {
-  setState({ loading: true })
-  let newState = {}
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
-    const res = await Ctx.client.get(path)
-    newState = await processResponse(res, true)
-  } catch (e) {
-    console.error('Error', e)
-    newState = { isError: true, errorMessage: 'unhandled exception' }
+    setState(newState)
+    return newState
   }
-
-  setState(newState)
-  return newState
 }
+// const get = (
+//   setState: (value: Partial<State>) => void,
+//   Ctx: Traversal
+// ) =>
 
 export function useCrudContext<T>() {
   const Ctx = useTraversal()
diff --git a/src/guillo-gmi/hooks/useInput.tsx b/src/guillo-gmi/hooks/useInput.tsx
index 50c1e3a..73cc9a1 100644
--- a/src/guillo-gmi/hooks/useInput.tsx
+++ b/src/guillo-gmi/hooks/useInput.tsx
@@ -1,6 +1,9 @@
-import { useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 
-const applyValidators = (value, validators) => {
+const applyValidators = (
+  value: string,
+  validators: ((value: string) => boolean)[]
+) => {
   const validation = Array.isArray(validators) ? validators : [validators]
   let result = true
   validation.forEach((func) => {
@@ -11,17 +14,21 @@ const applyValidators = (value, validators) => {
   return result
 }
 
-const useInput = (onChange, value, validator) => {
+const useInput = (
+  onChange: (value: string) => void | undefined,
+  value: string,
+  validators: ((value: string) => boolean)[]
+) => {
   const [state, setState] = useState({ hasError: false, value: value })
 
-  const onUpdate = (ev) => {
-    const value = ev && ev.target ? ev.target.value : ev ? ev : ''
+  const onUpdate = (ev: ChangeEvent<HTMLInputElement>) => {
+    const value: string = ev && ev.target ? ev.target.value : ''
     setState({ value, hasError: false })
     if (onChange) onChange(value)
   }
 
   const onBlur = () => {
-    const hasError = applyValidators(state.value, validator) === false
+    const hasError = applyValidators(state.value, validators) === false
     if (hasError) setState({ value: state.value, hasError })
   }
 
diff --git a/src/guillo-gmi/hooks/useLocation.tsx b/src/guillo-gmi/hooks/useLocation.tsx
index d8cfb14..ace36fa 100644
--- a/src/guillo-gmi/hooks/useLocation.tsx
+++ b/src/guillo-gmi/hooks/useLocation.tsx
@@ -4,7 +4,7 @@ import { IndexSignature } from '../types/global'
 // Mostly inspired from
 // https://github.com/molefrog/wouter
 
-const setURLParams = (p) => {
+const setURLParams = (p: URLSearchParams) => {
   return window.history.pushState(
     0,
     '0',
@@ -12,7 +12,7 @@ const setURLParams = (p) => {
   )
 }
 
-const clean = (to) => {
+const clean = (to: IndexSignature) => {
   const current = new URLSearchParams()
   Object.keys(to).forEach((_key) => current.set(_key, to[_key]))
   setURLParams(current)
@@ -57,7 +57,7 @@ export const useLocation = (): [
   // the function reference should stay the same between re-renders, so that
   // it can be passed down as an element prop without any performance concerns.
   const navigate = useCallback(
-    (to, replace) => {
+    (to: IndexSignature, replace?: boolean) => {
       if (replace) {
         clean(to)
         return
@@ -70,7 +70,7 @@ export const useLocation = (): [
   )
 
   const remove = useCallback(
-    (param) => {
+    (param: string) => {
       const current = new URLSearchParams(path.toString())
       current.delete(param)
       setURLParams(current)
@@ -91,19 +91,28 @@ let patched = 0
 
 const patchHistoryEvents = () => {
   if (patched) return
-  ;['pushState', 'replaceState'].map((type) => {
-    const original = window.history[type]
 
-    window.history[type] = function (...args) {
-      const result = original.apply(this, args)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const event: any = new Event(type)
-      event.arguments = args
-
-      dispatchEvent(event)
-      return result
-    }
-  })
+  const originalPushState = window.history.pushState
+  window.history.pushState = function (...args) {
+    const result = originalPushState.apply(this, args)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const event: any = new Event('pushState')
+    event.arguments = args
+
+    dispatchEvent(event)
+    return result
+  }
+
+  const originalReplaceState = window.history.replaceState
+  window.history.replaceState = function (...args) {
+    const result = originalReplaceState.apply(this, args)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const event: any = new Event('replaceState')
+    event.arguments = args
+
+    dispatchEvent(event)
+    return result
+  }
 
   return (patched = 1)
 }
diff --git a/src/guillo-gmi/hooks/useRegistry.tsx b/src/guillo-gmi/hooks/useRegistry.tsx
index f3c924b..0c9da3e 100644
--- a/src/guillo-gmi/hooks/useRegistry.tsx
+++ b/src/guillo-gmi/hooks/useRegistry.tsx
@@ -22,8 +22,7 @@ import { IImageAttachment } from '../components/behaviors/iimageattachment'
 import { IMultiImageAttachment } from '../components/behaviors/imultiimageattachment'
 import { IMultiImageOrderedAttachment } from '../components/behaviors/imultiimageorderedattachment'
 import { IWorkflow } from '../components/behaviors/iworkflow'
-import { GroupsCtx } from '../views/groups'
-import { GroupCtx } from '../views/groups'
+import { GroupCtx, GroupsCtx } from '../views/groups'
 import { ErrorBoundary } from '../components/error_boundary'
 import React from 'react'
 import { NotAllowed } from '../components/notallowed'
@@ -31,40 +30,39 @@ import { NotFound } from '../components/notfound'
 import { Path } from '../components/path'
 import { EditComponent } from '../components/fields/editComponent'
 import { RenderFieldComponent } from '../components/fields/renderField'
-import { GuillotinaSchema } from '../types/guillotina'
+import {
+  GuillotinaCommonObject,
+  ItemColumn,
+  RegistrySchema,
+} from '../types/guillotina'
 
 export interface IRegistry {
   paths: {
     [key: string]: React.FC
   }
   views: {
-    [key: string]: React.FC | React.ComponentType
+    [key: string]: React.FC | React.ComponentType<any>
   }
   actions: {
-    [key: string]: React.FC
+    [key: string]: (props: any) => JSX.Element
   }
   forms: {
-    [key: string]: React.FC
+    [key: string]: (props: any) => JSX.Element
   }
   behaviors: {
-    [key: string]: React.FC
+    [key: string]: (props: any | undefined) => JSX.Element | null
   }
   itemsColumn: {
-    [key: string]: () => {
-      label: string
-      key: string
-      isSortable?: boolean
-      child: React.ReactNode
-    }[]
+    [key: string]: () => ItemColumn[]
   }
   schemas: {
-    [key: string]: GuillotinaSchema
+    [key: string]: RegistrySchema
   }
   properties: {
     [key: string]: React.FC
   }
   components: {
-    [key: string]: React.FC
+    [key: string]: (props: any) => React.ReactNode | null | undefined
   }
   searchEngineQueryParamsFunction: {
     [key: string]: string
@@ -140,12 +138,16 @@ const registry: IRegistry = {
   defaultSortValue: {},
 }
 
-const get = (key, param, fallback = undefined) => {
+const get = (key: keyof IRegistry, param: string, fallback = undefined) => {
   if (registry[key]) return registry[key][param] || fallback
   return fallback
 }
 
-const getComponent = (context, path, fallback = undefined) => {
+const getComponent = (
+  context: GuillotinaCommonObject | undefined,
+  path: string,
+  fallback = undefined
+) => {
   if (!context) return
   // console.log("Component for path", path)
   // lookup by path
@@ -162,7 +164,7 @@ const getComponent = (context, path, fallback = undefined) => {
   return defaultComponent(context)
 }
 
-const getItemsColumn = (type) => {
+const getItemsColumn = (type: string) => {
   const funcCols = registry.itemsColumn[type]
   if (funcCols) {
     return funcCols()
@@ -170,11 +172,15 @@ const getItemsColumn = (type) => {
   return undefined
 }
 
-const getForm = (type: string, fallback: React.FC = BaseForm) => {
-  return registry.forms[type] || fallback
+const getView = (name: string) => {
+  return registry.views[name]
 }
 
-const getAction = (type: string, fallback: React.FC = undefined) => {
+const getForm = (type: string, fallback: React.FC) => {
+  return registry.forms[type] || fallback || BaseForm
+}
+
+const getAction = (type: string, fallback?: React.FC) => {
   return registry.actions[type] || fallback
 }
 
@@ -186,41 +192,40 @@ const getProperties = (type: string) => {
   return registry.properties[type] || {}
 }
 
-const getSchemas = (type: string) => {
+const getSchemas = (type: string): RegistrySchema => {
   return registry.schemas[type] || {}
-  /*
-    filters: [
-      {
-        attribute_key: string,
-        label: string,
-        type: 'select' | 'input'
-        vocabulary: string | undefined
-        values: {[key:string]:any}[]
-      }
-    ]
-  */
 }
 
-const getFieldsToFilter = (type: string, fallback) => {
+const getFieldsToFilter = (type: string, fallback: string[] = ['title']) => {
   return registry.fieldsToFilter[type] || fallback
 }
 
-const getDefaultSortValue = (type: string, fallback) => {
+const getDefaultSortValue = (
+  type: string,
+  fallback = {
+    key: 'id',
+    direction: 'des',
+  }
+) => {
   return registry.defaultSortValue[type] || fallback
 }
 
-export const defaultComponent = (context) => {
+export const defaultComponent = (context: GuillotinaCommonObject) => {
   return context.is_folderish ? FolderCtx : ItemCtx
 }
 
-export function useRegistry(data) {
+export function useRegistry(data: IRegistry) {
   // if data is provided we need to merge it into actual registry
   const ref = React.useRef<unknown>()
   if (data && !ref.current) {
     ref.current = true
-    Object.keys(data).map(
-      (key) => (registry[key] = { ...registry[key], ...data[key] })
-    )
+    Object.keys(data).map((key) => {
+      const registryKey = key as keyof IRegistry
+      registry[registryKey] = {
+        ...registry[registryKey],
+        ...data[registryKey],
+      } as any
+    })
   }
 
   return {
@@ -235,6 +240,7 @@ export function useRegistry(data) {
     getFieldsToFilter,
     getDefaultSortValue,
     getSchemas,
+    getView,
   }
 }
 
diff --git a/src/guillo-gmi/hooks/useSetState.tsx b/src/guillo-gmi/hooks/useSetState.tsx
index c86ed90..fa537b8 100644
--- a/src/guillo-gmi/hooks/useSetState.tsx
+++ b/src/guillo-gmi/hooks/useSetState.tsx
@@ -1,21 +1,33 @@
-import { useCallback, useState } from 'react'
+import { useState, useCallback } from 'react'
 
-export default function useSetState<T>(
-  initialState
-): [T, (value: Partial<T>) => void] {
-  const [state, set] = useState<T>(initialState)
-  const setState = useCallback(
-    (patch) => {
-      set((prevState) =>
-        Object.assign(
-          {},
-          prevState,
-          patch instanceof Function ? patch(prevState) : patch
-        )
-      )
-    },
-    [set]
-  )
+// **** Types **** //
+
+export type TSetState<T> = (newPartialState: Partial<T>) => void
+
+// **** Functions **** //
 
-  return [state, setState]
+/**
+ * Do setState like react class component.
+ */
+function useSetState<T extends object>(initialState: T): [T, TSetState<T>] {
+  const [state, setState] = useState<T>(initialState)
+  // Function which accepts a partial state to merge
+  const setCustomState = useCallback((newPartialState: Partial<T>) => {
+    try {
+      setState(
+        (prevState): T => {
+          return { ...prevState, ...newPartialState }
+        }
+      )
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }, [])
+  // Return
+  return [state, setCustomState]
 }
+
+// **** Export Default **** //
+
+export default useSetState
diff --git a/src/guillo-gmi/hooks/useVocabulary.tsx b/src/guillo-gmi/hooks/useVocabulary.tsx
index c376295..d8c0a3c 100644
--- a/src/guillo-gmi/hooks/useVocabulary.tsx
+++ b/src/guillo-gmi/hooks/useVocabulary.tsx
@@ -4,11 +4,11 @@ import useSetState from './useSetState'
 import { useEffect } from 'react'
 
 interface State {
-  data: GuillotinaVocabulary
+  data?: GuillotinaVocabulary
   loading: boolean
   error: any
 }
-export function useVocabulary(vocabularyName: string, path: string = null) {
+export function useVocabulary(vocabularyName: string, path?: string) {
   const traversal = useTraversal()
 
   const [vocabulary, setVocabulary] = useSetState<State>({
diff --git a/src/guillo-gmi/lib/auth.ts b/src/guillo-gmi/lib/auth.ts
index 23688b6..fe2066d 100644
--- a/src/guillo-gmi/lib/auth.ts
+++ b/src/guillo-gmi/lib/auth.ts
@@ -7,23 +7,23 @@ export class Auth {
   events = {}
   url: string
   base_url: string
-  errors: string
+  errors?: string
 
-  constructor(url) {
+  constructor(url: string) {
     this.url = url
     this.base_url = url
     this.errors = undefined
   }
 
-  getUrl(endpoint) {
+  getUrl(endpoint: string) {
     return `${this.url}${endpoint}`
   }
 
-  setAccount(account) {
+  setAccount(account: string) {
     this.url = this.base_url + account
   }
 
-  async login(username, password) {
+  async login(username: string, password: string) {
     const url = this.getUrl('@login')
     try {
       const data = await fetch(url, {
@@ -68,12 +68,12 @@ export class Auth {
       return false
     }
     const [token] = this._getToken()
-    const data: IndexSignature = jwt_decode(token)
+    const data: IndexSignature = jwt_decode(token as string)
     console.log(token)
     return data.id
   }
 
-  storeAuth(data) {
+  storeAuth(data: { token: string; exp: number }) {
     localStorage.setItem('auth', data.token)
     localStorage.setItem(
       'auth_expires',
@@ -111,7 +111,7 @@ export class Auth {
     return res.token
   }
 
-  willExpire(expiration) {
+  willExpire(expiration: string) {
     const now = new Date().getTime()
     if (parseInt(expiration) * 1000 < now + 10 * 1000) {
       return true
@@ -119,7 +119,7 @@ export class Auth {
     return false
   }
 
-  isExpired(expiration) {
+  isExpired(expiration: string) {
     const now = new Date().getTime()
     if (parseInt(expiration) * 1000 > now) {
       return false
@@ -136,11 +136,11 @@ export class Auth {
     return token
   }
 
-  getHeaders() {
+  getHeaders(): HeadersInit {
     const [authToken, expires] = this._getToken()
     if (!authToken) return {}
 
-    if (this.willExpire(expires) && this.retryRefresh < this.maxRetry) {
+    if (this.willExpire(expires ?? '') && this.retryRefresh < this.maxRetry) {
       // eslint-disable-next-line no-extra-semi
       ;(async () => await this.refreshToken())()
     }
diff --git a/src/guillo-gmi/lib/client.tsx b/src/guillo-gmi/lib/client.tsx
index 580284b..a54848e 100644
--- a/src/guillo-gmi/lib/client.tsx
+++ b/src/guillo-gmi/lib/client.tsx
@@ -4,10 +4,17 @@ import { Icon } from '../components/ui'
 import { toQueryString } from './helpers'
 import { RestClient } from './rest'
 import { parser } from './search'
-import { LightFile } from '../types/global'
-
-const cacheTypes = {}
-const cacheSchemas = {}
+import { IndexSignature, LightFile } from '../types/global'
+import { ItemModel } from '../models'
+import { Auth } from './auth'
+import {
+  GuillotinaGroup,
+  GuillotinaUser,
+  ReturnSearchCompatible,
+} from '../types/guillotina'
+
+const cacheTypes: IndexSignature = {}
+const cacheSchemas: IndexSignature = {}
 
 export class GuillotinaClient {
   rest: RestClient
@@ -17,7 +24,7 @@ export class GuillotinaClient {
     this.pathContainsContainer = pathContainsContainer
   }
 
-  getContainerFromPath = (path) => {
+  getContainerFromPath = (path: string) => {
     if (this.pathContainsContainer) {
       if (path.startsWith('/')) {
         path = path.substring(1)
@@ -28,14 +35,14 @@ export class GuillotinaClient {
     return ''
   }
 
-  clearContainerFromPath = (path) => {
+  clearContainerFromPath = (path: string) => {
     if (this.pathContainsContainer) {
       return `/${this.cleanPath(path)}`
     }
     return path
   }
 
-  async getContext(path) {
+  async getContext(path: string) {
     switch (path) {
       case '/':
         return await this.rest.get('')
@@ -47,14 +54,29 @@ export class GuillotinaClient {
     }
   }
 
-  async get(path) {
+  async get(path: string) {
     if (path.startsWith('/')) {
       path = path.slice(1)
     }
     return await this.rest.get(path)
   }
 
-  getQueryParamsPostresql({ start = 0, pageSize = 10, withDepth = true }) {
+  getQueryParamsSearchFunction(name: string) {
+    if (name === 'getQueryParamsElasticsearch') {
+      return this.getQueryParamsElasticsearch
+    }
+    return this.getQueryParamsPostresql
+  }
+  getQueryParamsPostresql({
+    start = 0,
+    pageSize = 10,
+    withDepth = true,
+  }: {
+    start?: number
+    pageSize?: number
+    path?: string
+    withDepth?: boolean
+  }) {
     let result = []
 
     result = [
@@ -72,6 +94,11 @@ export class GuillotinaClient {
     pageSize = 10,
     path,
     withDepth = true,
+  }: {
+    start?: number
+    pageSize?: number
+    path: string
+    withDepth?: boolean
   }) {
     let result = []
     let containerPath = this.getContainerFromPath(path)
@@ -107,13 +134,15 @@ export class GuillotinaClient {
       {
         label: '',
         isSortable: false,
-        child: (m) => <td style={smallcss}>{<Icon icon={m.icon} />}</td>,
+        child: (m: ItemModel) => (
+          <td style={smallcss}>{<Icon icon={m.icon} />}</td>
+        ),
       },
       {
         label: 'type',
         key: 'type_name',
         isSortable: false,
-        child: (m) => (
+        child: (m: ItemModel) => (
           <TdLink style={smallcss} model={m}>
             <span className="tag">{m.type}</span>
           </TdLink>
@@ -123,7 +152,7 @@ export class GuillotinaClient {
         label: 'id/name',
         key: 'title',
         isSortable: true,
-        child: (m, navigate, search) => (
+        child: (m: ItemModel, _navigate: () => void, search: boolean) => (
           <TdLink model={m}>
             {m.name}
             {search && (
@@ -139,7 +168,7 @@ export class GuillotinaClient {
         label: 'created',
         key: 'creation_date',
         isSortable: true,
-        child: (m) => {
+        child: (m: ItemModel) => {
           return (
             <td style={mediumcss} className="is-size-7 is-vcentered">
               {m.created}
@@ -151,7 +180,7 @@ export class GuillotinaClient {
         label: 'modified',
         key: 'modification_date',
         isSortable: true,
-        child: (m) => (
+        child: (m: ItemModel) => (
           <td style={mediumcss} className="is-size-7 is-vcentered">
             {m.updated}
           </td>
@@ -161,17 +190,21 @@ export class GuillotinaClient {
   }
 
   // BBB API changes. Compat G5 and G6
-  applyCompat(data) {
-    data.member = data.items
-    data.items_count = data.items_total
-    return data
+  applyCompat<T>(data: { items: T[]; items_total: number }) {
+    const result: ReturnSearchCompatible<T> = {
+      ...data,
+      member: data.items,
+      items_count: data.items_total,
+    }
+    return result
   }
 
-  async search(
+  async search<T>(
     path: string,
-    params: string | string[][],
+    params: string | IndexSignature<string>,
     container = false,
-    prepare = true
+    prepare = true,
+    signal?: AbortSignal
   ) {
     if (path.startsWith('/')) {
       path = path.slice(1)
@@ -181,14 +214,16 @@ export class GuillotinaClient {
       path = this.getContainerFromPath(path)
     }
 
-    const query = prepare ? toQueryString(params as string[][]) : params
+    const query = prepare
+      ? toQueryString(params as IndexSignature<string>)
+      : params
     const url = `${path}@search?${query}`
-    const res = await this.rest.get(url)
+    const res = await this.rest.get(url, signal)
     const data = await res.json()
-    return this.applyCompat(data)
+    return this.applyCompat<T>(data)
   }
 
-  async canido(path, permissions) {
+  async canido(path: string, permissions: string | string[]) {
     if (path.startsWith('/')) {
       path = path.slice(1)
     }
@@ -199,52 +234,52 @@ export class GuillotinaClient {
     return await this.rest.get(url)
   }
 
-  async createObject(path, data) {
+  async createObject(path: string, data: unknown) {
     return await this.rest.post(path, data)
   }
 
-  cleanPath(path) {
+  cleanPath(path: string) {
     const url = path.split('/').slice(3)
     return `${url.join('/')}`
   }
 
-  async delete(path, data) {
+  async delete(path: string, data: unknown) {
     return await this.rest.delete(path, data)
   }
 
-  async create(path, data) {
+  async create(path: string, data: unknown) {
     if (path.startsWith('/')) {
       path = path.substring(1)
     }
     return await this.rest.post(path, data)
   }
 
-  async post(path, data) {
+  async post(path: string, data: unknown) {
     return await this.create(path, data)
   }
 
-  async patch(path, data) {
+  async patch(path: string, data: unknown) {
     if (path.startsWith('/')) {
       path = path.substring(1)
     }
     return await this.rest.patch(path, data)
   }
 
-  async upload(path, file) {
+  async upload(path: string, file: LightFile) {
     if (path.startsWith('/')) {
       path = path.substring(1)
     }
     return await this.rest.upload(path, file)
   }
 
-  async download(path) {
+  async download(path: string) {
     if (path.startsWith('/')) {
       path = path.substring(1)
     }
     return await this.rest.get(path)
   }
 
-  async getTypeSchema(path, name) {
+  async getTypeSchema(path: string, name: string) {
     if (!cacheSchemas[name]) {
       const url = this.getContainerFromPath(path)
       // todo: handle db case (only addable containers)
@@ -254,45 +289,89 @@ export class GuillotinaClient {
     return cacheSchemas[name]
   }
 
-  async getAddons(path) {
+  async getAddons(path: string) {
     return await this.rest.get(`${path}@addons`)
   }
 
-  async installAddon(path, key) {
+  async installAddon(path: string, key: string) {
     return await this.rest.post(`${path}@addons`, { id: key })
   }
 
-  async removeAddon(path, key) {
+  async removeAddon(path: string, key: string) {
     return await this.rest.delete(`${path}@addons`, { id: key })
   }
 
-  async getGroups(path) {
+  async getGroups(path: string) {
     const endpoint = `${this.getContainerFromPath(path)}@groups`
     return await this.rest.get(endpoint)
   }
 
-  async getUsers(path) {
+  async getUsers(path: string) {
     const endpoint = `${this.getContainerFromPath(path)}@users`
     return await this.rest.get(endpoint)
   }
 
-  async getPrincipals(path) {
+  async getPrincipals(
+    path: string
+  ): Promise<{
+    groups: GuillotinaGroup[]
+    users: GuillotinaUser[]
+  }> {
     const groups = this.getGroups(path)
     const users = this.getUsers(path)
-    const [gr, usr] = await Promise.all([groups, users])
-
+    const [responseGroups, responseUsers] = await Promise.all([groups, users])
+    let groupsData: GuillotinaGroup[] = []
+    let usersData: GuillotinaUser[] = []
+
+    if (responseGroups.ok) {
+      const groupsDataResponse = await responseGroups.json()
+      groupsData = groupsDataResponse.map(
+        (group: {
+          '@name': string
+          id: string
+          title: string
+          users: string[]
+          roles: string[]
+        }) => {
+          return {
+            '@name': group.id,
+            user_roles: group.roles,
+            users: group.users,
+          }
+        }
+      )
+    }
+    if (responseUsers) {
+      const usersDataResponse = await responseUsers.json()
+      usersData = usersDataResponse.map(
+        (user: {
+          '@name': string
+          id: string
+          fullname: string
+          email: string
+          roles: string[]
+        }) => {
+          return {
+            '@name': user.id,
+            user_roles: user.roles,
+            fullname: user.fullname,
+            email: user.email,
+          }
+        }
+      )
+    }
     return {
-      groups: gr.ok ? await gr.json() : [],
-      users: usr.ok ? await usr.json() : [],
+      groups: groupsData,
+      users: usersData,
     }
   }
 
-  async getRoles(path) {
+  async getRoles(path: string) {
     const endpoint = `${this.getContainerFromPath(path)}@available-roles`
     return await this.rest.get(endpoint)
   }
 
-  async getAllPermissions(path) {
+  async getAllPermissions(path: string) {
     // paths used to query the API always has to start without a "/"
     if (path.startsWith('/')) {
       path = path.slice(1)
@@ -303,7 +382,7 @@ export class GuillotinaClient {
     return permissions
   }
 
-  async getTypes(path) {
+  async getTypes(path: string) {
     if (path.startsWith('/')) {
       path = path.slice(1)
     }
@@ -320,30 +399,34 @@ export class GuillotinaClient {
   }
 }
 
-export function getClient(url, container, auth) {
+export function getClient(url: string, container: string, auth: Auth) {
   return new GuillotinaClient(
     new RestClient(url, container, auth),
     container === '/'
   )
 }
 
-export const lightFileReader = (file) => {
-  return new Promise<LightFile>((resolve) => {
+export const lightFileReader = (file: File) => {
+  return new Promise<LightFile>((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsArrayBuffer(file)
     reader.onloadend = (e) => {
-      const fileData = e.target.result
-      resolve({
-        filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
-        data: fileData,
-        'content-type': file.type,
-      })
+      const fileData = e?.target?.result
+      if (fileData) {
+        resolve({
+          filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
+          data: fileData,
+          'content-type': file.type,
+        })
+      } else {
+        reject('Error reading file')
+      }
     }
   })
 }
 
-const extractPermissions = (data) => {
-  let result = []
+const extractPermissions = (data: IndexSignature) => {
+  let result: string[] = []
   if (typeof data !== 'object') {
     // do nothing
   } else if (!Array.isArray(data) && data.permission) {
diff --git a/src/guillo-gmi/lib/helpers.ts b/src/guillo-gmi/lib/helpers.ts
index 053925f..f4cd485 100644
--- a/src/guillo-gmi/lib/helpers.ts
+++ b/src/guillo-gmi/lib/helpers.ts
@@ -1,6 +1,8 @@
+import { IntlShape } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { IndexSignature } from '../types/global'
 
-export const classnames = (classNames) => {
+export const classnames = (classNames: (string | boolean)[]) => {
   return classNames.filter(Boolean).join(' ').trim()
 }
 
@@ -10,7 +12,7 @@ let current = 0
 
 export const generateUID = (prefix = '') => `${prefix || 'id'}-${current++}`
 
-export const toQueryString = (params: string[][]) => {
+export const toQueryString = (params: IndexSignature<string>) => {
   return Object.keys(params)
     .map((key) => {
       return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
@@ -18,7 +20,7 @@ export const toQueryString = (params: string[][]) => {
     .join('&')
 }
 
-export function base64ToArrayBuffer(base64) {
+export function base64ToArrayBuffer(base64: string) {
   const binaryString = window.atob(base64)
   const binaryLen = binaryString.length
   const bytes = new Uint8Array(binaryLen)
@@ -29,7 +31,7 @@ export function base64ToArrayBuffer(base64) {
   return bytes
 }
 
-export function stringToSlug(str) {
+export function stringToSlug(str: string) {
   str = str.replace(/^\s+|\s+$/g, '') // trim
   str = str.toLowerCase()
 
@@ -48,15 +50,24 @@ export function stringToSlug(str) {
   return str
 }
 
-export function sleep(ms): Promise<void> {
+export function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => {
     setTimeout(function () {
-      resolve(null)
+      resolve()
     }, ms)
   })
 }
 
-export const getActionsObject = (intl, multiple = false) => ({
+export const getActionsObject = (
+  intl: IntlShape,
+  multiple = false
+): {
+  [key: string]: {
+    text: string
+    perms: string[]
+    action: string
+  }
+} => ({
   DELETE: {
     text: intl.formatMessage(genericMessages.delete),
     perms: ['guillotina.DeleteContent'],
diff --git a/src/guillo-gmi/lib/processResponse.ts b/src/guillo-gmi/lib/processResponse.ts
new file mode 100644
index 0000000..746a73f
--- /dev/null
+++ b/src/guillo-gmi/lib/processResponse.ts
@@ -0,0 +1,43 @@
+interface DataError {
+  details: string
+  reason: string
+}
+const getErrorMessage = (
+  dataError: DataError,
+  defaultValue: string | number
+) => {
+  if (dataError && dataError.details) {
+    return dataError.details
+  } else if (dataError && dataError.reason) {
+    return dataError.reason
+  }
+  return defaultValue
+}
+
+interface IResponse<T = unknown> {
+  loading?: boolean
+  isError: boolean
+  errorMessage?: string
+  result?: T
+  response?: unknown
+}
+
+export async function processResponse<T>(
+  res: Response,
+  ready_body = true
+): Promise<IResponse<T>> {
+  if (res.status < 400)
+    return {
+      isError: false,
+      loading: false,
+      result: ready_body ? await res.json() : res.status,
+      response: res,
+    }
+  else
+    return {
+      isError: true,
+      loading: false,
+      errorMessage: getErrorMessage(await res.json(), res.status).toString(),
+      response: res,
+    }
+}
diff --git a/src/guillo-gmi/lib/rest.ts b/src/guillo-gmi/lib/rest.ts
index 6168339..32e5a10 100644
--- a/src/guillo-gmi/lib/rest.ts
+++ b/src/guillo-gmi/lib/rest.ts
@@ -1,3 +1,4 @@
+import { LightFile } from '../types/global'
 import { Auth } from './auth'
 
 export class RestClient {
@@ -11,7 +12,12 @@ export class RestClient {
     this.container = container
   }
 
-  async request(path, data = undefined, headers = undefined) {
+  async request(
+    path: string,
+    data?: RequestInit,
+    headers?: HeadersInit,
+    signal?: AbortSignal
+  ) {
     if (path.indexOf(this.url) !== -1) {
       path = path.replace(this.url, '')
     }
@@ -23,63 +29,74 @@ export class RestClient {
     if (!path.startsWith('/')) {
       path = `/${path}`
     }
-    data = data || {}
-    data.headers = headers || this.getHeaders()
-    return await fetch(`${this.url}${path}`, data)
+    const dataRequest = data || {}
+    dataRequest.headers = this.getHeaders()
+    if (headers) {
+      dataRequest.headers = { ...dataRequest.headers, ...headers }
+    }
+    if (signal) {
+      dataRequest.signal = signal
+    }
+    return await fetch(`${this.url}${path}`, dataRequest)
   }
 
-  getHeaders() {
+  getHeaders(): HeadersInit {
     const authToken = this.auth.getToken()
-    if (!authToken) return {}
-    return {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + authToken,
-    }
+    const headersInit: HeadersInit = {}
+
+    if (!authToken) return headersInit
+
+    headersInit.Accept = 'application/json'
+    headersInit['Content-Type'] = 'application/json'
+    headersInit.Authorization = 'Bearer ' + authToken
+    return headersInit
   }
 
-  async post(path, data) {
+  async post(path: string, data: unknown) {
     return await this.request(path, {
       method: 'post',
       body: JSON.stringify(data),
     })
   }
 
-  async get(path) {
-    return await this.request(path)
+  async get(path: string, signal?: AbortSignal) {
+    return await this.request(path, undefined, undefined, signal)
   }
 
-  async put(path, data) {
+  async put(path: string, data: unknown) {
     return await this.request(path, {
       method: 'put',
       body: JSON.stringify(data),
     })
   }
 
-  async patch(path, data) {
+  async patch(path: string, data: unknown) {
     return await this.request(path, {
       method: 'PATCH',
       body: JSON.stringify(data),
     })
   }
 
-  async upload(path, data) {
+  async upload(path: string, data: LightFile) {
     const headers = this.getHeaders()
-    delete headers['Content-Type']
-    headers['Content-Type'] = data['content-type']
-    headers['X-UPLOAD-FILENAME'] = data.filename
-    headers['Content-Encoding'] = 'base64'
+    const newHeaders: HeadersInit = {}
+    newHeaders['Content-Type'] = data['content-type']
+    newHeaders['X-UPLOAD-FILENAME'] = data.filename
+    newHeaders['Content-Encoding'] = 'base64'
     return await this.request(
       path,
       {
         method: 'PATCH',
         body: data.data,
       },
-      headers
+      {
+        ...headers,
+        ...newHeaders,
+      }
     )
   }
 
-  async delete(path, data = undefined) {
+  async delete(path: string, data: unknown) {
     return await this.request(path, {
       method: 'delete',
       body: JSON.stringify(data),
diff --git a/src/guillo-gmi/lib/search.ts b/src/guillo-gmi/lib/search.ts
index 1cdf62b..650c897 100644
--- a/src/guillo-gmi/lib/search.ts
+++ b/src/guillo-gmi/lib/search.ts
@@ -8,7 +8,7 @@ export function parser(qs: string, defaultField = DEFAULT_FIELD): string[][] {
   }
 
   if (Array.isArray(defaultField)) {
-    const orParser = []
+    const orParser: string[] = []
     defaultField.forEach((field) => {
       const parsed = parser(qs, field)
       orParser.push(buildQs(parsed))
@@ -16,7 +16,7 @@ export function parser(qs: string, defaultField = DEFAULT_FIELD): string[][] {
     const result = [['__or', orParser.join('&')]]
     return result
   }
-  let lastKey = undefined
+  let lastKey: string | undefined = undefined
   qs.trim()
 
   if (qs.includes('"')) {
diff --git a/src/guillo-gmi/lib/utils.ts b/src/guillo-gmi/lib/utils.ts
index c018303..0d9405d 100644
--- a/src/guillo-gmi/lib/utils.ts
+++ b/src/guillo-gmi/lib/utils.ts
@@ -12,25 +12,40 @@ export const formatDate = (str: string): string => {
 export const get = <T>(
   obj: IndexSignature,
   path: string | string[],
-  defValue
+  defValue: T
 ): T => {
   // If path is not defined or it has false value
-  if (!path) return undefined
+  if (!path) return defValue
   // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
   // Regex explained: https://regexr.com/58j0k
   const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
   // Find value if exist return otherwise return undefined value;
-  return (
-    pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj) ?? defValue
-  )
+  if (pathArray === null) return defValue
+
+  return (pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj) ??
+    defValue) as T
 }
 
 export function getNewId(id = '') {
   const suffix = '-copy-'
   const rgx = new RegExp(`($|${suffix}\\d*)`)
 
-  return stringToSlug(id).replace(rgx, (r) => {
+  return stringToSlug(id).replace(rgx, (r: string) => {
     const num = parseInt(r.replace(suffix, '') || '0')
     return `${suffix}${num + 1}`
   })
 }
+
+export function debounce<T extends unknown[], U>(
+  callback: (...args: T) => PromiseLike<U> | U,
+  wait: number
+) {
+  let timer: ReturnType<typeof setTimeout>
+
+  return (...args: T): Promise<U> => {
+    clearTimeout(timer)
+    return new Promise((resolve) => {
+      timer = setTimeout(() => resolve(callback(...args)), wait)
+    })
+  }
+}
diff --git a/src/guillo-gmi/lib/validators.ts b/src/guillo-gmi/lib/validators.ts
index ba312be..fc288a7 100644
--- a/src/guillo-gmi/lib/validators.ts
+++ b/src/guillo-gmi/lib/validators.ts
@@ -13,4 +13,4 @@ export const isEmail = (value = '') => REGEX_EMAIL.test(value)
 export const isURL = (value = '') => REGEX_URL.test(value)
 export const isHexColor = (value = '') => REGEX_HEX_COLOR.test(value)
 export const isNumber = (value = '') => REGEX_NUMBER.test(value)
-export const notEmpty = (value) => !!value.length
+export const notEmpty = (value: string) => !!value.length
diff --git a/src/guillo-gmi/locales/generic_messages.js b/src/guillo-gmi/locales/generic_messages.ts
similarity index 100%
rename from src/guillo-gmi/locales/generic_messages.js
rename to src/guillo-gmi/locales/generic_messages.ts
diff --git a/src/guillo-gmi/models/index.ts b/src/guillo-gmi/models/index.ts
index 5f96bed..6c0fed9 100644
--- a/src/guillo-gmi/models/index.ts
+++ b/src/guillo-gmi/models/index.ts
@@ -1,13 +1,13 @@
 import { formatDate } from '../lib/utils'
 import { useConfig } from '../hooks/useConfig'
-import { SearchItem } from '../types/guillotina'
+import { GuillotinaCommonObject, SearchItem } from '../types/guillotina'
 
 export * from './sharing'
 
 export class ItemModel {
-  item: SearchItem
+  item: SearchItem | GuillotinaCommonObject
   url: string
-  constructor(item, url = '') {
+  constructor(item: SearchItem | GuillotinaCommonObject, url = '') {
     this.item = item
     this.url = url
   }
@@ -35,7 +35,6 @@ export class ItemModel {
   }
 
   get icon() {
-    // eslint-disable-next-line
     const cfg = useConfig()
     if (cfg.icons && cfg.icons[this.type]) {
       return cfg.icons[this.type]
@@ -58,11 +57,11 @@ export class ItemModel {
   }
 
   get fullPath() {
-    return this.url + this.item.id
+    return this.url + this.id
   }
 
   get id() {
-    if (this.item.id) {
+    if ('id' in this.item) {
       return this.item.id
     }
     const id = this.item['@id'].split('&')[0].split('/')
@@ -73,7 +72,7 @@ export class ItemModel {
     return this.item['@uid']
   }
 
-  get type() {
+  get type(): string {
     return this.item['@type'] || this.item.type_name
   }
 
diff --git a/src/guillo-gmi/models/sharing.ts b/src/guillo-gmi/models/sharing.ts
index 4a4929a..1711ea4 100644
--- a/src/guillo-gmi/models/sharing.ts
+++ b/src/guillo-gmi/models/sharing.ts
@@ -17,14 +17,18 @@ export class Sharing {
   local: GuillotinaSharingMap
   inherit: GuillotinaSharingInheritItem[]
 
-  constructor(element) {
-    Object.assign(this, element || base)
+  constructor(element: GuillotinaSharing | undefined) {
+    if (element === undefined) {
+      throw new Error('Sharing element is undefined')
+    }
+    this.local = element.local || base.local
+    this.inherit = element.inherit || base.inherit
   }
   get roles() {
     return Object.keys(this.local.roleperm)
   }
 
-  getRole(role) {
+  getRole(role: string) {
     return this.local.roleperm[role]
   }
 
@@ -32,7 +36,7 @@ export class Sharing {
     return Object.keys(this.local.prinperm)
   }
 
-  getPrincipals(principal) {
+  getPrincipals(principal: string) {
     return this.local.prinperm[principal]
   }
 
@@ -40,7 +44,7 @@ export class Sharing {
     return Object.keys(this.local.prinrole)
   }
 
-  getPrinroles(role) {
+  getPrinroles(role: string) {
     return this.local.prinrole[role]
   }
 }
diff --git a/src/guillo-gmi/reducers/guillotina.ts b/src/guillo-gmi/reducers/guillotina.ts
index 0a80118..d14bcfa 100644
--- a/src/guillo-gmi/reducers/guillotina.ts
+++ b/src/guillo-gmi/reducers/guillotina.ts
@@ -5,20 +5,21 @@ import { GuillotinaCommonObject } from '../types/guillotina'
 export interface GuillotinaGlobalState {
   path: string
   loading: boolean
-  context: GuillotinaCommonObject
+  context?: GuillotinaCommonObject
   flash: {
-    message: string
-    type: string
+    message?: string
+    type?: string
   }
   action: {
-    action: string
-    params: IndexSignature
+    action?: string
+    params?: IndexSignature
   }
   permissions: IndexSignature
-  errorStatus: number
+  errorStatus?: string
   registry: IndexSignature
-  refresh: number
+  refresh?: number
 }
+
 export const initialState: GuillotinaGlobalState = {
   path: '',
   loading: false,
@@ -31,18 +32,32 @@ export const initialState: GuillotinaGlobalState = {
     action: undefined,
     params: undefined,
   },
-  permissions: undefined,
+  permissions: [],
   errorStatus: undefined,
   registry: {},
   refresh: undefined,
 }
 
-export function guillotinaReducer(state, action) {
+export enum GuillotinaReducerActionTypes {
+  SET_PATH = 'SET_PATH',
+  SET_CONTEXT = 'SET_CONTEXT',
+  SET_ERROR = 'SET_ERROR',
+  SET_FLASH = 'SET_FLASH',
+  CLEAR_FLASH = 'CLEAR_FLASH',
+  SET_ACTION = 'SET_ACTION',
+  CLEAR_ACTION = 'CLEAR_ACTION',
+  REFRESH = 'REFRESH',
+  APPLY = 'APPLY',
+}
+export function guillotinaReducer(
+  state: GuillotinaGlobalState,
+  action: { type: GuillotinaReducerActionTypes; payload: IndexSignature }
+): GuillotinaGlobalState {
   switch (action.type) {
-    case 'SET_PATH':
-      return { ...state, path: action.payload, loading: true }
+    case GuillotinaReducerActionTypes.SET_PATH:
+      return { ...state, path: action.payload.path, loading: true }
 
-    case 'SET_CONTEXT':
+    case GuillotinaReducerActionTypes.SET_CONTEXT:
       return {
         ...state,
         ...action.payload,
@@ -50,13 +65,17 @@ export function guillotinaReducer(state, action) {
         loading: false,
       }
 
-    case 'SET_ERROR':
-      return { ...state, errorStatus: action.payload, loading: false }
+    case GuillotinaReducerActionTypes.SET_ERROR:
+      return {
+        ...state,
+        errorStatus: action.payload.errorStatus,
+        loading: false,
+      }
 
-    case 'SET_FLASH':
+    case GuillotinaReducerActionTypes.SET_FLASH:
       return { ...state, ...action.payload }
 
-    case 'CLEAR_FLASH':
+    case GuillotinaReducerActionTypes.CLEAR_FLASH:
       return {
         ...state,
         flash: {
@@ -64,20 +83,23 @@ export function guillotinaReducer(state, action) {
           type: undefined,
         },
       }
-    case 'SET_ACTION':
+    case GuillotinaReducerActionTypes.SET_ACTION:
       return { ...state, action: action.payload }
-    case 'CLEAR_ACTION':
+    case GuillotinaReducerActionTypes.CLEAR_ACTION:
       return { ...state, action: { action: undefined, params: undefined } }
 
-    case 'REFRESH':
+    case GuillotinaReducerActionTypes.REFRESH:
       return {
         ...state,
         refresh: Date.now(),
         loading: !action.payload.transparent,
       }
 
-    case 'APPLY':
-      return { ...state, context: { ...state.context, ...action.payload } }
+    case GuillotinaReducerActionTypes.APPLY:
+      return {
+        ...state,
+        context: { ...state.context, ...action.payload.context },
+      }
 
     default:
       return state
diff --git a/src/guillo-gmi/types/global.ts b/src/guillo-gmi/types/global.ts
index 8141057..9bcabf8 100644
--- a/src/guillo-gmi/types/global.ts
+++ b/src/guillo-gmi/types/global.ts
@@ -1,3 +1,5 @@
+import { GuillotinaFile } from './guillotina'
+
 export interface LightFile {
   filename: string
   data: ArrayBuffer | string
@@ -8,3 +10,21 @@ export interface LightFile {
 export interface IndexSignature<T = any> {
   [key: string]: T
 }
+
+export type EditableFieldValue =
+  | GuillotinaFile
+  | LightFile
+  | IndexSignature
+  | string
+  | string[]
+  | boolean
+  | Date
+  | undefined
+  | null
+
+interface FormElements extends HTMLFormControlsCollection {
+  filterInput: HTMLInputElement
+}
+export interface FilterFormElement extends HTMLFormElement {
+  readonly elements: FormElements
+}
diff --git a/src/guillo-gmi/types/guillotina.ts b/src/guillo-gmi/types/guillotina.ts
index a20d4fe..1937140 100644
--- a/src/guillo-gmi/types/guillotina.ts
+++ b/src/guillo-gmi/types/guillotina.ts
@@ -5,8 +5,80 @@ type ItemsPropertyObject = {
   '@name': string
   '@type': string
   '@uid': string
-  __behaviors__: string[]
+  '@absolute_url': string
+  title: string
+  creation_date: string
+  modification_date: string
+  uuid: string
+  type_name: string
+}
+
+export type GuillotinaCommonObject = {
+  type_name: string
+  uuid: string
+  is_folderish: boolean
+  parent: GuillotinaParentObject
+  length: number
+  __behaviors__?: string[]
   '@static_behaviors': string[]
+  'guillotina.behaviors.dublincore.IDublinCore'?: IBehaviorDublinCore
+  'guillotina.contrib.workflows.interfaces.IWorkflowBehavior'?: IWorkflowBehavior
+  'guillotina.behaviors.attachment.IAttachment'?: {
+    file: GuillotinaFile
+  }
+  'guillotina.behaviors.attachment.IMultiAttachment'?: {
+    files: {
+      [key: string]: GuillotinaFile
+    }
+  }
+  'guillotina.contrib.image.behaviors.IImageAttachment'?: {
+    image: GuillotinaFile
+  }
+  'guillotina.contrib.image.behaviors.IMultiImageAttachment'?: {
+    images: {
+      [key: string]: GuillotinaFile
+    }
+  }
+  'guillotina.contrib.image.behaviors.IMultiImageOrderedAttachment'?: {
+    images: {
+      [key: string]: GuillotinaFile
+    }
+  }
+} & ItemsPropertyObject
+
+export type SearchItem = {
+  id: string
+  parent_uuid: string
+  path: string
+  tid: string
+  description: string
+  access_roles: string[]
+  access_users: string[]
+} & ItemsPropertyObject
+
+export interface IBehaviorDublinCore {
+  title: string
+  description: string | null
+  creation_date: string
+  modification_date: string
+  effective_date: string | null
+  expiration_date: string | null
+  creators: string[]
+  tags: string[] | null
+  publisher: string | null
+  contributors: string[]
+}
+
+export interface IWorkflowBehavior {
+  review_state: string
+  history: WorkflowHistory[]
+}
+
+interface GuillotinaParentObject {
+  '@id': string
+  '@name': string
+  '@type': string
+  '@uid': string
 }
 
 export interface GuillotinaSchema {
@@ -18,6 +90,10 @@ export interface GuillotinaSchema {
   properties: GuillotinaSchemaProperties
 }
 
+export interface GuillotinaSchemaProperties {
+  [key: string]: GuillotinaSchemaProperty | { $ref: string }[]
+}
+
 export interface Definitions {
   [key: string]: {
     type: string
@@ -28,19 +104,6 @@ export interface Definitions {
   }
 }
 
-export interface GuillotinaItemsProperty {
-  type: string
-  widget?: string
-  properties?: GuillotinaSchemaProperties
-  vocabulary?: string[]
-  vocabularyName?: string
-  queryCondition?: string
-  queryPath?: string
-  labelProperty?: string
-  typeNameQuery?: string
-  items: GuillotinaItemsProperty
-  title: string
-}
 export interface GuillotinaSchemaProperty {
   type: string
   title: string
@@ -49,29 +112,16 @@ export interface GuillotinaSchemaProperty {
   description?: string
   vocabularyName?: string
   vocabulary?: string[]
-  items?: GuillotinaItemsProperty
+  items?: GuillotinaSchemaProperty
   properties?: GuillotinaSchemaProperties
   additionalProperties?: GuillotinaSchemaProperties
   typeNameQuery?: string
   labelProperty?: string
-}
-export interface GuillotinaSchemaProperties {
-  [key: string]: GuillotinaSchemaProperty | { $ref: string }[]
+  enum?: string[]
+  queryCondition?: string
+  queryPath?: string
 }
 
-export type GuillotinaCommonObject = {
-  creation_date: Date
-  modification_date: string
-  title: string
-  type_name: string
-  uuid: string
-  'guillotina.behaviors.attachment.IMultiAttachment'?: {
-    files: {
-      [key: string]: GuillotinaFile
-    }
-  }
-} & ItemsPropertyObject
-
 export type GuillotinaFile = {
   filename: string
   content_type: string
@@ -80,18 +130,6 @@ export type GuillotinaFile = {
   md5: string
 }
 
-export type SearchItem = {
-  id: string
-  parent_uuid: string
-  path: string
-  tid: string
-  uuid: string
-  title: string
-  type_name: string
-  creation_date: string
-  modification_date: string
-} & ItemsPropertyObject
-
 export interface GuillotinaVocabulary {
   '@id': string
   items: GuillotinaVocabularyItem[]
@@ -127,3 +165,133 @@ export interface GuillotinaBehaviors {
   dynamic: string[]
   available: string[]
 }
+
+export interface AllPermissions {
+  [key: string]: AllPermissionsItem
+}
+
+export interface AllPermissionsItem {
+  prinperm?: PrimPerm[]
+  prinrole?: Prinrole[]
+  roleperm?: Roleperm[]
+  perminhe?: Perminhe[]
+}
+
+export interface Prinrole {
+  principal: string
+  role: string
+  setting: Setting
+}
+
+export interface Roleperm {
+  permission: string
+  role: string
+  setting: Setting
+}
+export interface PrimPerm {
+  principal: string
+  permission: string
+  setting: Setting
+}
+export interface Perminhe {
+  permission: string
+  setting: Setting
+}
+
+export enum Setting {
+  Allow = 'Allow',
+  AllowSingle = 'AllowSingle',
+  Deny = 'Deny',
+  Unset = 'Unset',
+}
+
+export interface Workflow {
+  '@id': string
+  history: WorkflowHistory[]
+  transitions: Transition[]
+}
+
+export interface WorkflowHistory {
+  actor: string
+  comments: string
+  time: string
+  title: string
+  type: string
+  data: WorkflowHistoryData
+}
+
+export interface WorkflowHistoryData {
+  action: null
+  review_state: string
+}
+
+export interface Transition {
+  '@id': string
+  title: string
+  metadata: IndexSignature
+}
+
+export interface Addons {
+  available: AddonAvailable[]
+  installed: string[]
+}
+
+export interface AddonAvailable {
+  id: string
+  title: string
+  dependencies: any[]
+}
+
+export interface RegistrySchema {
+  filters: RegistrySchemaFilter[]
+}
+
+export interface RegistrySchemaFilter {
+  attribute_key: string
+  label: string
+  type: string
+  values?: { value: string; text: string }[]
+  vocabulary?: string
+  input_type?: string
+}
+
+export type ReturnSearch<T> = {
+  items: T[]
+  items_total: number
+}
+
+export type ReturnSearchCompatible<T> = {
+  member: T[]
+  items_count: number
+  items: T[]
+  items_total: number
+}
+
+export interface ItemColumn {
+  label: string
+  key: string
+  isSortable?: boolean
+  child: React.ReactNode
+}
+
+export type GuillotinaUser = {
+  user_roles: string[]
+  user_groups: string[]
+  user_permissions: string[]
+  fullname: string
+  email: string
+  username: string
+} & GuillotinaCommonObject
+
+export type GuillotinaGroup = {
+  user_roles: string[]
+  users: string[]
+} & GuillotinaCommonObject
+
+export type GuillotinaApplication = {
+  databases: string[]
+} & GuillotinaCommonObject
+
+export type GuillotinaDatabase = {
+  containers: string[]
+} & GuillotinaCommonObject
diff --git a/src/guillo-gmi/views/application.tsx b/src/guillo-gmi/views/application.tsx
index db07d58..44439a8 100644
--- a/src/guillo-gmi/views/application.tsx
+++ b/src/guillo-gmi/views/application.tsx
@@ -8,11 +8,13 @@ import { Form } from '../components/input/form'
 import { Input } from '../components/input/input'
 import { defineMessages, useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { GuillotinaApplication, GuillotinaDatabase } from '../types/guillotina'
 
 export function ApplicationCtx() {
   const intl = useIntl()
-  const context = useTraversal()
-  const { databases } = context.state.context
+  const traversal = useTraversal()
+  const appContext = traversal.state.context as GuillotinaApplication
+  const { databases } = appContext
   return (
     <>
       <h3>
@@ -23,22 +25,26 @@ export function ApplicationCtx() {
       </h3>
       <div className="container">
         <ItemTitle title="Objects" />
-        {databases.map((db) => (
-          <Item
-            item={{ id: db, path: `/${db}/` }}
-            key={db}
-            icon={'fas fa-database'}
-          />
-        ))}
+        <table>
+          <tbody>
+            {databases.map((db) => (
+              <Item
+                item={{ id: db, path: `/${db}/` }}
+                key={db}
+                icon={'fas fa-database'}
+              />
+            ))}
+          </tbody>
+        </table>
       </div>
     </>
   )
 }
 
 export function DatabaseCtx() {
-  const context = useTraversal()
-  const { containers } = context.state.context
-  const { path } = context.state
+  const traversal = useTraversal()
+  const { containers } = traversal.state.context as GuillotinaDatabase
+  const { path } = traversal.state
   return (
     <>
       <div className="container">
@@ -99,7 +105,7 @@ function ModalAddContainer({ isActive, setActive }: ModalAddContainerProps) {
   const Ctx = useTraversal()
   const [isLoading, setLoading] = useState(false)
   const [idField, setId] = useState('')
-  const [error, setError] = useState(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
 
   async function createContainer() {
     setLoading(true)
diff --git a/src/guillo-gmi/views/folder.tsx b/src/guillo-gmi/views/folder.tsx
index 822a0a3..30c71b4 100644
--- a/src/guillo-gmi/views/folder.tsx
+++ b/src/guillo-gmi/views/folder.tsx
@@ -22,7 +22,7 @@ const tabsPermissions = {
   Permissions: 'guillotina.SeePermissions',
 }
 
-export function FolderCtx(props) {
+export function FolderCtx() {
   const ctx = useTraversal()
   const calculated = ctx.filterTabs(tabs, tabsPermissions)
 
@@ -30,8 +30,7 @@ export function FolderCtx(props) {
     <TabsPanel
       tabs={calculated}
       currentTab="Items"
-      rightToolbar={<ContextToolbar {...props} />}
-      {...props}
+      rightToolbar={<ContextToolbar />}
     />
   )
 }
diff --git a/src/guillo-gmi/views/groups.tsx b/src/guillo-gmi/views/groups.tsx
index 4185eb3..42a38f9 100644
--- a/src/guillo-gmi/views/groups.tsx
+++ b/src/guillo-gmi/views/groups.tsx
@@ -13,6 +13,9 @@ import { EditableField } from '../components/fields/editableField'
 import { useLocation } from '../hooks/useLocation'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { FilterFormElement } from '../types/global'
+import { GuillotinaGroup } from '../types/guillotina'
+import { processResponse } from '../lib/processResponse'
 
 const tabs = {
   Groups: PanelItems,
@@ -21,19 +24,18 @@ const tabs = {
 export function GroupToolbar() {
   const intl = useIntl()
   const Ctx = useTraversal()
-  const ref = useRef(null)
+  const ref = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
   const searchText = location.get('q')
 
-  const onSearchQuery = (ev) => {
-    const search = ev.target[0].value
-    setLocation({ q: search, page: 0 })
-    ev.preventDefault()
+  const onSearchQuery = (event: React.FormEvent<FilterFormElement>) => {
+    event.preventDefault()
+    setLocation({ q: event.currentTarget.elements.filterInput.value, page: 0 })
   }
 
   // cleanup form on state.search change
   useEffect(() => {
-    if (!searchText || searchText === '') {
+    if (ref.current && (!searchText || searchText === '')) {
       ref.current.value = ''
     }
   }, [searchText])
@@ -50,6 +52,7 @@ export function GroupToolbar() {
                 className="input is-size-7"
                 placeholder={intl.formatMessage(genericMessages.search)}
                 data-test="inputFilterTest"
+                id="filterInput"
               />
             </div>
             <div className="control">
@@ -82,13 +85,12 @@ export function GroupToolbar() {
   )
 }
 
-export function GroupsCtx(props) {
+export function GroupsCtx() {
   return (
     <TabsPanel
       tabs={tabs}
       currentTab="Groups"
       rightToolbar={<GroupToolbar />}
-      {...props}
     />
   )
 }
@@ -99,7 +101,8 @@ const searchParsed = parser('type_name=User')
 export function GroupCtx() {
   const intl = useIntl()
   const { Ctx, patch } = useCrudContext()
-  const [roles, setRoles] = useState([])
+  const [roles, setRoles] = useState<{ text: string; value: string }[]>([])
+  const groupDataContext = Ctx.context as GuillotinaGroup
 
   useEffect(() => {
     async function getRoles() {
@@ -107,7 +110,7 @@ export function GroupCtx() {
       let roles = []
 
       if (requestGetRoles.ok) {
-        roles = (await requestGetRoles.json()).map((role) => ({
+        roles = (await requestGetRoles.json()).map((role: string) => ({
           text: role,
           value: role,
         }))
@@ -117,7 +120,11 @@ export function GroupCtx() {
     getRoles()
   }, [])
 
-  const handleResponse = async (isError, message, errorMessage) => {
+  const handleResponse = async (
+    isError: boolean,
+    message: string,
+    errorMessage: string
+  ) => {
     if (!isError) {
       Ctx.flash(message, 'success')
       Ctx.refresh()
@@ -131,12 +138,12 @@ export function GroupCtx() {
     }
   }
 
-  const addRole = async (role) => {
+  const addRole = async (role: string) => {
     const { isError, errorMessage } = await patch({
-      user_roles: Ctx.context.user_roles.concat(role),
+      user_roles: groupDataContext.user_roles.concat(role),
     })
     handleResponse(
-      isError,
+      !!isError,
       intl.formatMessage(
         {
           id: 'role_added_to_group',
@@ -144,16 +151,16 @@ export function GroupCtx() {
         },
         { role }
       ),
-      errorMessage
+      errorMessage ?? ''
     )
   }
 
-  const removeRole = async (role) => {
+  const removeRole = async (role: string) => {
     const { isError, errorMessage } = await patch({
-      user_roles: Ctx.context.user_roles.filter((r) => r !== role),
+      user_roles: groupDataContext.user_roles.filter((r) => r !== role),
     })
     handleResponse(
-      isError,
+      !!isError,
       intl.formatMessage(
         {
           id: 'role_removed_from_group',
@@ -161,23 +168,21 @@ export function GroupCtx() {
         },
         { role }
       ),
-      errorMessage
+      errorMessage ?? ''
     )
   }
 
-  const addUser = async (newUserId) => {
-    const data = {}
-    Ctx.context.users.forEach((user) => {
+  const addUser = async (newUserId: string) => {
+    const data: { [key: string]: boolean } = {}
+    groupDataContext.users.forEach((user) => {
       data[user] = true
     })
     data[newUserId] = true
-    const {
-      isError,
-      errorMessage,
-    } = await Ctx.client.rest.patch(
+    const response = await Ctx.client.rest.patch(
       `${Ctx.containerPath}@groups/${Ctx.context['@name']}`,
       { users: data }
     )
+    const { isError, errorMessage } = await processResponse(response)
     handleResponse(
       isError,
       intl.formatMessage(
@@ -187,22 +192,20 @@ export function GroupCtx() {
         },
         { user: newUserId }
       ),
-      errorMessage
+      errorMessage ?? ''
     )
   }
 
-  const removeUser = async (userToRemove) => {
-    const data = {}
-    Ctx.context.users.forEach((user) => {
+  const removeUser = async (userToRemove: string) => {
+    const data: { [key: string]: boolean } = {}
+    groupDataContext.users.forEach((user: string) => {
       data[user] = userToRemove !== user
     })
-    const {
-      isError,
-      errorMessage,
-    } = await Ctx.client.rest.patch(
+    const response = await Ctx.client.rest.patch(
       `${Ctx.containerPath}@groups/${Ctx.context['@name']}`,
       { users: data }
     )
+    const { isError, errorMessage } = await processResponse(response)
     handleResponse(
       isError,
       intl.formatMessage(
@@ -212,7 +215,7 @@ export function GroupCtx() {
         },
         { user: userToRemove }
       ),
-      errorMessage
+      errorMessage ?? ''
     )
   }
 
@@ -255,13 +258,13 @@ export function GroupCtx() {
           </p>
           <Select
             options={roles.filter(
-              (role) => !Ctx.context.user_roles.includes(role.value)
+              (role) => !groupDataContext.user_roles.includes(role.value)
             )}
             appendDefault
-            onChange={addRole}
+            onChange={(value) => addRole(value as string)}
           />
           <hr />
-          {Ctx.context.user_roles.map((urole) => (
+          {groupDataContext.user_roles.map((urole) => (
             <p className="control" key={`roles_${urole}`}>
               <Tag
                 name={urole}
@@ -288,7 +291,7 @@ export function GroupCtx() {
             btnClass="is-small"
           />
           <hr />
-          {Ctx.context.users.map((user) => (
+          {groupDataContext.users.map((user) => (
             <p className="control" key={`user_${user}`}>
               <Tag
                 name={user}
diff --git a/src/guillo-gmi/views/item.tsx b/src/guillo-gmi/views/item.tsx
index 69a83cb..3270c4f 100644
--- a/src/guillo-gmi/views/item.tsx
+++ b/src/guillo-gmi/views/item.tsx
@@ -18,9 +18,9 @@ const tabsPermissions = {
   Permissions: 'guillotina.SeePermissions',
 }
 
-export function ItemCtx(props) {
+export function ItemCtx() {
   const ctx = useTraversal()
   const calculated = ctx.filterTabs(tabs, tabsPermissions)
 
-  return <TabsPanel tabs={calculated} currentTab="Properties" {...props} />
+  return <TabsPanel tabs={calculated} currentTab="Properties" />
 }
diff --git a/src/guillo-gmi/views/users.tsx b/src/guillo-gmi/views/users.tsx
index 6772caf..436c5d5 100644
--- a/src/guillo-gmi/views/users.tsx
+++ b/src/guillo-gmi/views/users.tsx
@@ -12,6 +12,8 @@ import { useLocation } from '../hooks/useLocation'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
 import { useEffect, useRef, useState } from 'react'
+import { GuillotinaUser, SearchItem } from '../types/guillotina'
+import { FilterFormElement, IndexSignature } from '../types/global'
 
 const tabs = {
   Users: PanelItems,
@@ -20,19 +22,18 @@ const tabs = {
 export function UsersToolbar() {
   const intl = useIntl()
   const Ctx = useTraversal()
-  const ref = useRef(null)
+  const ref = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
   const searchText = location.get('q')
 
-  const onSearchQuery = (ev) => {
-    const search = ev.target[0].value
-    setLocation({ q: search, page: 0 })
-    ev.preventDefault()
+  const onSearchQuery = (event: React.FormEvent<FilterFormElement>) => {
+    event.preventDefault()
+    setLocation({ q: event.currentTarget.elements.filterInput.value, page: 0 })
   }
 
   // cleanup form on state.search change
   useEffect(() => {
-    if (!searchText || searchText === '') {
+    if (ref.current && (!searchText || searchText === '')) {
       ref.current.value = ''
     }
   }, [searchText])
@@ -49,6 +50,7 @@ export function UsersToolbar() {
                 className="input is-size-7"
                 placeholder={intl.formatMessage(genericMessages.search)}
                 data-test="inputFilterTest"
+                id="filterInput"
               />
             </div>
             <div className="control">
@@ -76,20 +78,18 @@ export function UsersToolbar() {
   )
 }
 
-export function UsersCtx(props) {
+export function UsersCtx() {
   return (
-    <TabsPanel
-      tabs={tabs}
-      currentTab="Users"
-      rightToolbar={<UsersToolbar />}
-      {...props}
-    />
+    <TabsPanel tabs={tabs} currentTab="Users" rightToolbar={<UsersToolbar />} />
   )
 }
 
 interface State {
   roles: string[]
-  groups: string[]
+  groups: {
+    value: string
+    text: string
+  }[]
 }
 export function UserCtx() {
   const intl = useIntl()
@@ -97,9 +97,10 @@ export function UserCtx() {
 
   const [state, setState] = useState<State>({ roles: [], groups: [] })
 
+  const userDataContext = Ctx.context as GuillotinaUser
   const fields = {
     user_groups: [],
-    user_roles: Ctx.context.user_roles,
+    user_roles: userDataContext.user_roles,
   }
 
   const [remotes, updateRemote] = useRemoteField(fields)
@@ -107,7 +108,7 @@ export function UserCtx() {
   useEffect(() => {
     async function getRolesAndGroups() {
       const [requestGetGroups, requestGetRoles] = await Promise.all([
-        Ctx.client.search(Ctx.path, { type_name: 'Group' }, true),
+        Ctx.client.search<SearchItem>(Ctx.path, { type_name: 'Group' }, true),
         Ctx.client.getRoles(Ctx.path),
       ])
 
@@ -129,7 +130,7 @@ export function UserCtx() {
     getRolesAndGroups()
   }, [])
 
-  const updateObject = async (data) => {
+  const updateObject = async (data: IndexSignature) => {
     Ctx.apply(data)
     const { isError, errorMessage } = await patch(data)
     if (isError) {
@@ -174,7 +175,7 @@ export function UserCtx() {
                 })}
                 :{' '}
               </label>{' '}
-              {Ctx.context.username} ({Ctx.context.email})
+              {userDataContext.username} ({userDataContext.email})
             </p>
             <p>
               <label>
@@ -185,7 +186,7 @@ export function UserCtx() {
                 })}
                 :{' '}
               </label>{' '}
-              {formatDate(Ctx.context.creation_date)}
+              {formatDate(userDataContext.creation_date)}
             </p>
             <p>
               <label>
@@ -196,7 +197,7 @@ export function UserCtx() {
                 })}
                 :{' '}
               </label>{' '}
-              {formatDate(Ctx.context.modification_date)}
+              {formatDate(userDataContext.modification_date)}
             </p>
             <Button
               className="is-size-7 is-info"
@@ -214,7 +215,7 @@ export function UserCtx() {
           <UserForm
             actionName="Save"
             onSubmit={(ev) => updateObject(ev)}
-            formData={Ctx.context}
+            formData={userDataContext}
             exclude={['password']}
             remotes={remotes}
             submitButton={false}
@@ -227,7 +228,7 @@ export function UserCtx() {
         <div className="column">
           <TagsWidget
             onChange={updateRemote('user_groups')}
-            items={Ctx.context.user_groups}
+            items={userDataContext.user_groups}
             title="Groups"
             noData={intl.formatMessage({
               id: 'there_is_no_groups_for_this_user',
@@ -244,7 +245,7 @@ export function UserCtx() {
               id: 'the_user_doesnt_have_any_role',
               defaultMessage: "The user doesn't have any role",
             })}
-            available={state.roles}
+            available={state.roles.map((x) => ({ value: x, text: x }))}
           />
         </div>
       </div>
diff --git a/tsconfig.json b/tsconfig.json
index 2e9ea1d..f7ca31e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,24 @@
 {
   "compilerOptions": {
-    "strict": false,
-    "removeComments": true,
-    "allowJs": true,
+    "outDir": "./dist/",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
     "jsx": "react-jsx",
-    "allowSyntheticDefaultImports":true,
-    "resolveJsonModule":true,
-    "declaration": true
   },
   "include": [
     "./src/guillo-gmi"
-  ]
+  ],
+  "exclude": ["node_modules", "dist"]
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 40e751d..7693390 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1945,6 +1945,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/uuid@9.0.8":
+  version "9.0.8"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
+  integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
+
 "@types/yargs-parser@*":
   version "20.2.0"
   resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.0.tgz"
@@ -6915,11 +6920,16 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
-typescript@5, typescript@^5.3.3:
+typescript@5:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
   integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
 
+typescript@5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
+  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
+
 typescript@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz"