wip

0.8.3
2026-01-25 02:08:19 +00:00 · 2023-05-12 07:10:24 +07:00 · 2023-05-12 07:07:31 +07:00 · 2023-05-11 09:24:18 -04:00 · 2023-05-11 08:34:16 -04:00 · 2023-05-10 21:32:14 -04:00
137 changed files with 9955 additions and 462 deletions
--- a/.env
+++ b/.env
@@ -2,4 +2,11 @@ VITE_API_BASE_URL=http://127.0.0.1:3000/v1
 VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1

 ## enables choosing units and lisenced account call limits
-# VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL=true
+# VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL=true
+
+# disables controls for default application routing to carrier for SP and account level users
+#VITE_APP_DISABLE_DEFAULT_TRUNK_ROUTING=true
+## disables Least cost routing feature
+#VITE_APP_LCR_DISABLED=true
+## disables Jaeger Tracing feature
+#VITE_APP_JAEGER_TRACING_DISABLED=true
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -2,16 +2,8 @@ name: Docker

 on:
  push:
-    # Publish `main` as Docker `latest` image.
-    branches:
-      - main
-
-    # Publish `v1.2.3` tags as releases.
    tags:
-      - v*
-
-env:
-  IMAGE_NAME: webapp
+      - "*"

 jobs:
  push:
@@ -19,20 +11,13 @@ jobs:
    if: github.event_name == 'push'

    steps:
-      - uses: actions/checkout@v2
+      - name: Checkout code
+        uses: actions/checkout@v3

-      - name: Build image
-        run: docker build . --file Dockerfile --tag $IMAGE_NAME
-
-      - name: Log into registry
-        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
-
-      - name: Push image
+      - name: prepare tag
+        id: prepare_tag
        run: |
-          IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME
-
-          # Change all uppercase to lowercase
-          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
+          IMAGE_ID=$GITHUB_REPOSITORY

          # Strip git ref prefix from version
          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
@@ -46,5 +31,21 @@ jobs:
          echo IMAGE_ID=$IMAGE_ID
          echo VERSION=$VERSION

-          docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
-          docker push $IMAGE_ID:$VERSION
+          echo "image_id=$IMAGE_ID" >> $GITHUB_OUTPUT
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.prepare_tag.outputs.image_id }}:${{ steps.prepare_tag.outputs.version }}
+          build-args: |
+            GITHUB_REPOSITORY=$GITHUB_REPOSITORY
+            GITHUB_REF=$GITHUB_REF
--- a/4
+++ b/4
@@ -1,4 +1,4 @@
-FROM node:18.8.0-alpine as builder
+FROM node:18.15-alpine3.16 as builder
 RUN apk update && apk add --no-cache python3 make g++
 COPY . /opt/app
 WORKDIR /opt/app/
@@ -6,7 +6,7 @@ RUN npm install
 RUN npm run build
 RUN npm prune

-FROM node:18.6.0-alpine as webapp
+FROM node:18.14.1-alpine as webapp
 RUN apk add curl
 WORKDIR /opt/app
 COPY . /opt/app
--- a/docs/contributors.md
+++ b/docs/contributors.md
@@ -137,11 +137,11 @@ of each category of component to get an idea of how the patterns are put into pr

 ## :art: UI and styling

-We have a UI design system called [jambonz-ui](https://github.com/jambonz/jambonz-ui).
+We have a UI design system called [@jambonz/ui-kit](https://github.com/jambonz/jambonz-ui).
 It's public on `npm` and is being used for this project. It's still small and simple
 but provides the foundational package content for building jambonz UIs. You can view
 the storybook for it [here](https://jambonz-ui.vercel.app/) as well as view the docs
-for it [here](https://www.jambonz.org/docs/jambonz-ui/).
+for it [here](https://www.jambonz.org/docs/@jambonz/ui-kit/).

 ### A note on styles

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,21 @@
 {
  "name": "jambonz-webapp",
-  "version": "v1.0.0",
+  "version": "0.8.3",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "jambonz-webapp",
-      "version": "v1.0.0",
+      "version": "0.8.3",
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
+        "@jambonz/ui-kit": "^0.0.21",
        "dayjs": "^1.11.5",
-        "jambonz-ui": "^0.0.19",
+        "immutability-helper": "^3.1.1",
        "react": "^18.0.0",
+        "react-dnd": "16.0.1",
+        "react-dnd-html5-backend": "16.0.1",
        "react-dom": "^18.0.0",
        "react-feather": "^2.0.10",
        "react-router-dom": "^6.3.0"
@@ -23,6 +26,7 @@
        "@types/node": "^18.6.1",
        "@types/react": "^18.0.0",
        "@types/react-dom": "^18.0.0",
+        "@types/uuid": "^9.0.1",
        "@typescript-eslint/eslint-plugin": "^5.30.6",
        "@typescript-eslint/parser": "^5.30.6",
        "@vitejs/plugin-react": "^1.3.0",
@@ -656,6 +660,19 @@
      "dev": true,
      "license": "BSD-3-Clause"
    },
+    "node_modules/@jambonz/ui-kit": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.21.tgz",
+      "integrity": "sha512-tv0sPhzxS/ctJbgUxLVNY+7IjJb3OAhqrdYpmeW3lmEHi7+sHxpO2oMjaVTPFCN4vYh+QzyzT4eLQjpEUDd6sA==",
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.2",
+        "react-dom": ">=17.0.2",
+        "react-feather": ">=2.0.9"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.1.1",
      "dev": true,
@@ -730,6 +747,21 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
    "node_modules/@rollup/pluginutils": {
      "version": "4.2.1",
      "dev": true,
@@ -829,11 +861,11 @@
      "version": "18.6.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.1.tgz",
      "integrity": "sha512-z+2vB6yDt1fNwKOeGbckpmirO+VBDuQqecXkgeIqDlaOtmKn6hPR/viQ8cxCfqLU4fTlvM3+YjM367TukWdxpg==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/@types/prop-types": {
      "version": "15.7.5",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/@types/qs": {
@@ -850,7 +882,7 @@
    },
    "node_modules/@types/react": {
      "version": "18.0.15",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
@@ -868,7 +900,7 @@
    },
    "node_modules/@types/scheduler": {
      "version": "0.16.2",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/@types/serve-static": {
@@ -893,6 +925,12 @@
      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
      "dev": true
    },
+    "node_modules/@types/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
+      "dev": true
+    },
    "node_modules/@types/yauzl": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
@@ -1146,9 +1184,10 @@
      }
    },
    "node_modules/@zeit/schemas": {
-      "version": "2.21.0",
-      "dev": true,
-      "license": "MIT"
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz",
+      "integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
+      "dev": true
    },
    "node_modules/accepts": {
      "version": "1.3.8",
@@ -2181,8 +2220,9 @@
    },
    "node_modules/content-disposition": {
      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": ">= 0.6"
      }
@@ -2269,7 +2309,7 @@
    },
    "node_modules/csstype": {
      "version": "3.1.0",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/cypress": {
@@ -2625,6 +2665,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
    "node_modules/doctrine": {
      "version": "2.1.0",
      "dev": true,
@@ -3326,7 +3376,6 @@
    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/fast-glob": {
@@ -3356,16 +3405,18 @@
    },
    "node_modules/fast-url-parser": {
      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "punycode": "^1.3.2"
      }
    },
    "node_modules/fast-url-parser/node_modules/punycode": {
      "version": "1.4.1",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+      "dev": true
    },
    "node_modules/fastq": {
      "version": "1.13.0",
@@ -3816,6 +3867,14 @@
        "@babel/runtime": "^7.7.6"
      }
    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
    "node_modules/http-errors": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -3908,6 +3967,11 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutability-helper": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
+      "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
+    },
    "node_modules/immutable": {
      "version": "4.1.0",
      "dev": true,
@@ -4296,19 +4360,6 @@
      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
      "dev": true
    },
-    "node_modules/jambonz-ui": {
-      "version": "0.0.19",
-      "resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.19.tgz",
-      "integrity": "sha512-rdn52N6zwaLqedvEypEO6114oZ6HanK0ezCkAlcLMCT11TvmWuiK4pvc2nYR8NqQ+oVaLBdQ4QpUxM4GSwtvgQ==",
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "react": ">=17.0.2",
-        "react-dom": ">=17.0.2",
-        "react-feather": ">=2.0.9"
-      }
-    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "license": "MIT"
@@ -4364,9 +4415,10 @@
      "dev": true
    },
    "node_modules/json5": {
-      "version": "2.2.1",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
      "dev": true,
-      "license": "MIT",
      "bin": {
        "json5": "lib/cli.js"
      },
@@ -5029,8 +5081,9 @@
    },
    "node_modules/path-is-inside": {
      "version": "1.0.2",
-      "dev": true,
-      "license": "(WTFPL OR MIT)"
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
+      "dev": true
    },
    "node_modules/path-key": {
      "version": "3.1.1",
@@ -5047,8 +5100,9 @@
    },
    "node_modules/path-to-regexp": {
      "version": "2.2.1",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+      "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
+      "dev": true
    },
    "node_modules/path-type": {
      "version": "4.0.0",
@@ -5263,8 +5317,9 @@
    },
    "node_modules/range-parser": {
      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": ">= 0.6"
      }
@@ -5325,6 +5380,43 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.2.0",
      "license": "MIT",
@@ -5391,6 +5483,14 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
    "node_modules/regenerator-runtime": {
      "version": "0.13.9",
      "license": "MIT"
@@ -5688,11 +5788,12 @@
      }
    },
    "node_modules/serve": {
-      "version": "14.0.1",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.0.tgz",
+      "integrity": "sha512-+HOw/XK1bW8tw5iBilBz/mJLWRzM8XM6MPxL4J/dKzdxq1vfdEWSwhaR7/yS8EJp5wzvP92p1qirysJvnEtjXg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "@zeit/schemas": "2.21.0",
+        "@zeit/schemas": "2.29.0",
        "ajv": "8.11.0",
        "arg": "5.0.2",
        "boxen": "7.0.0",
@@ -5701,7 +5802,7 @@
        "clipboardy": "3.0.0",
        "compression": "1.7.4",
        "is-port-reachable": "4.0.0",
-        "serve-handler": "6.1.3",
+        "serve-handler": "6.1.5",
        "update-check": "1.5.4"
      },
      "bin": {
@@ -5712,31 +5813,21 @@
      }
    },
    "node_modules/serve-handler": {
-      "version": "6.1.3",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "bytes": "3.0.0",
        "content-disposition": "0.5.2",
        "fast-url-parser": "1.1.3",
        "mime-types": "2.1.18",
-        "minimatch": "3.0.4",
+        "minimatch": "3.1.2",
        "path-is-inside": "1.0.2",
        "path-to-regexp": "2.2.1",
        "range-parser": "1.2.0"
      }
    },
-    "node_modules/serve-handler/node_modules/minimatch": {
-      "version": "3.0.4",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/serve-static": {
      "version": "1.15.0",
      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
@@ -6995,6 +7086,12 @@
      "version": "1.2.1",
      "dev": true
    },
+    "@jambonz/ui-kit": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.21.tgz",
+      "integrity": "sha512-tv0sPhzxS/ctJbgUxLVNY+7IjJb3OAhqrdYpmeW3lmEHi7+sHxpO2oMjaVTPFCN4vYh+QzyzT4eLQjpEUDd6sA==",
+      "requires": {}
+    },
    "@jridgewell/gen-mapping": {
      "version": "0.1.1",
      "dev": true,
@@ -7043,6 +7140,21 @@
        "fastq": "^1.6.0"
      }
    },
+    "@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
    "@rollup/pluginutils": {
      "version": "4.2.1",
      "dev": true,
@@ -7137,11 +7249,11 @@
      "version": "18.6.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.1.tgz",
      "integrity": "sha512-z+2vB6yDt1fNwKOeGbckpmirO+VBDuQqecXkgeIqDlaOtmKn6hPR/viQ8cxCfqLU4fTlvM3+YjM367TukWdxpg==",
-      "dev": true
+      "devOptional": true
    },
    "@types/prop-types": {
      "version": "15.7.5",
-      "dev": true
+      "devOptional": true
    },
    "@types/qs": {
      "version": "6.9.7",
@@ -7157,7 +7269,7 @@
    },
    "@types/react": {
      "version": "18.0.15",
-      "dev": true,
+      "devOptional": true,
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -7173,7 +7285,7 @@
    },
    "@types/scheduler": {
      "version": "0.16.2",
-      "dev": true
+      "devOptional": true
    },
    "@types/serve-static": {
      "version": "1.15.0",
@@ -7197,6 +7309,12 @@
      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
      "dev": true
    },
+    "@types/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
+      "dev": true
+    },
    "@types/yauzl": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
@@ -7333,7 +7451,9 @@
      }
    },
    "@zeit/schemas": {
-      "version": "2.21.0",
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz",
+      "integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
      "dev": true
    },
    "accepts": {
@@ -7969,6 +8089,8 @@
    },
    "content-disposition": {
      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
      "dev": true
    },
    "content-type": {
@@ -8033,7 +8155,7 @@
    },
    "csstype": {
      "version": "3.1.0",
-      "dev": true
+      "devOptional": true
    },
    "cypress": {
      "version": "10.8.0",
@@ -8279,6 +8401,16 @@
        "path-type": "^4.0.0"
      }
    },
+    "dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "requires": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
    "doctrine": {
      "version": "2.1.0",
      "dev": true,
@@ -8773,8 +8905,7 @@
      "dev": true
    },
    "fast-deep-equal": {
-      "version": "3.1.3",
-      "dev": true
+      "version": "3.1.3"
    },
    "fast-glob": {
      "version": "3.2.11",
@@ -8797,6 +8928,8 @@
    },
    "fast-url-parser": {
      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
      "dev": true,
      "requires": {
        "punycode": "^1.3.2"
@@ -8804,6 +8937,8 @@
      "dependencies": {
        "punycode": {
          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
          "dev": true
        }
      }
@@ -9114,6 +9249,14 @@
        "@babel/runtime": "^7.7.6"
      }
    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
    "http-errors": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -9165,6 +9308,11 @@
      "version": "5.2.0",
      "dev": true
    },
+    "immutability-helper": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
+      "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
+    },
    "immutable": {
      "version": "4.1.0",
      "dev": true
@@ -9388,12 +9536,6 @@
      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
      "dev": true
    },
-    "jambonz-ui": {
-      "version": "0.0.19",
-      "resolved": "https://registry.npmjs.org/jambonz-ui/-/jambonz-ui-0.0.19.tgz",
-      "integrity": "sha512-rdn52N6zwaLqedvEypEO6114oZ6HanK0ezCkAlcLMCT11TvmWuiK4pvc2nYR8NqQ+oVaLBdQ4QpUxM4GSwtvgQ==",
-      "requires": {}
-    },
    "js-tokens": {
      "version": "4.0.0"
    },
@@ -9435,7 +9577,9 @@
      "dev": true
    },
    "json5": {
-      "version": "2.2.1",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
      "dev": true
    },
    "jsonfile": {
@@ -9862,6 +10006,8 @@
    },
    "path-is-inside": {
      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
      "dev": true
    },
    "path-key": {
@@ -9874,6 +10020,8 @@
    },
    "path-to-regexp": {
      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+      "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
      "dev": true
    },
    "path-type": {
@@ -10000,6 +10148,8 @@
    },
    "range-parser": {
      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
      "dev": true
    },
    "raw-body": {
@@ -10044,6 +10194,26 @@
        "loose-envify": "^1.1.0"
      }
    },
+    "react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "requires": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "requires": {
+        "dnd-core": "^16.0.1"
+      }
+    },
    "react-dom": {
      "version": "18.2.0",
      "requires": {
@@ -10084,6 +10254,14 @@
        "picomatch": "^2.2.1"
      }
    },
+    "redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
    "regenerator-runtime": {
      "version": "0.13.9"
    },
@@ -10279,10 +10457,12 @@
      }
    },
    "serve": {
-      "version": "14.0.1",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.0.tgz",
+      "integrity": "sha512-+HOw/XK1bW8tw5iBilBz/mJLWRzM8XM6MPxL4J/dKzdxq1vfdEWSwhaR7/yS8EJp5wzvP92p1qirysJvnEtjXg==",
      "dev": true,
      "requires": {
-        "@zeit/schemas": "2.21.0",
+        "@zeit/schemas": "2.29.0",
        "ajv": "8.11.0",
        "arg": "5.0.2",
        "boxen": "7.0.0",
@@ -10291,7 +10471,7 @@
        "clipboardy": "3.0.0",
        "compression": "1.7.4",
        "is-port-reachable": "4.0.0",
-        "serve-handler": "6.1.3",
+        "serve-handler": "6.1.5",
        "update-check": "1.5.4"
      },
      "dependencies": {
@@ -10316,26 +10496,19 @@
      }
    },
    "serve-handler": {
-      "version": "6.1.3",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
      "dev": true,
      "requires": {
        "bytes": "3.0.0",
        "content-disposition": "0.5.2",
        "fast-url-parser": "1.1.3",
        "mime-types": "2.1.18",
-        "minimatch": "3.0.4",
+        "minimatch": "3.1.2",
        "path-is-inside": "1.0.2",
        "path-to-regexp": "2.2.1",
        "range-parser": "1.2.0"
-      },
-      "dependencies": {
-        "minimatch": {
-          "version": "3.0.4",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        }
      }
    },
    "serve-static": {
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jambonz-webapp",
  "description": "A simple provisioning web app for jambonz",
-  "version": "v1.0.0",
+  "version": "0.8.3",
  "license": "MIT",
  "type": "module",
  "engines": {
@@ -25,7 +25,7 @@
  ],
  "scripts": {
    "prepare": "husky install",
-    "postinstall": "rm -rf public/fonts && cp -R node_modules/jambonz-ui/public/fonts public/fonts",
+    "postinstall": "rm -rf public/fonts && cp -R node_modules/@jambonz/ui-kit/public/fonts public/fonts",
    "start": "npm run dev",
    "dev": "vite --port 3001",
    "dev:server": "ts-node --esm server/dev.server.ts",
@@ -42,11 +42,14 @@
  },
  "dependencies": {
    "dayjs": "^1.11.5",
-    "jambonz-ui": "^0.0.19",
+    "@jambonz/ui-kit": "^0.0.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-feather": "^2.0.10",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "immutability-helper": "^3.1.1"
  },
  "devDependencies": {
    "@types/cors": "^2.8.12",
@@ -54,6 +57,7 @@
    "@types/node": "^18.6.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
+    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.30.6",
    "@typescript-eslint/parser": "^5.30.6",
    "@vitejs/plugin-react": "^1.3.0",
--- a/server/dev.server.ts
+++ b/server/dev.server.ts
@@ -48,6 +48,7 @@ app.get(
        remote_host: "3.55.24.34",
        direction: 0 === i % 2 ? "inbound" : "outbound",
        trunk: 0 === i % 2 ? "twilio" : "user",
+        trace_id: nanoid(),
      };
      data.push(call);
    }
@@ -136,6 +137,17 @@ app.get(
  }
 );

+app.get(
+  "/api/Accounts/:account_sid/RecentCalls/trace/:trace_id",
+  (req: Request, res: Response) => {
+    const json = fs.readFileSync(
+      path.resolve(process.cwd(), "server", "sample-jaeger.json"),
+      { encoding: "utf8" }
+    );
+    res.status(200).json(JSON.parse(json));
+  }
+);
+
 /** Alerts mock API responses for local dev */
 app.get("/api/Accounts/:account_sid/Alerts", (req: Request, res: Response) => {
  const data: Alert[] = [];
--- a/server/sample-jaeger.json
+++ b/server/sample-jaeger.json
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -28,6 +28,26 @@ export const API_BASE_URL =
 /** Serves mock API responses from a local dev API server */
 export const DEV_BASE_URL = import.meta.env.VITE_DEV_BASE_URL;

+/** Disable custom speech vendor*/
+export const DISABLE_CUSTOM_SPEECH: boolean = JSON.parse(
+  import.meta.env.VITE_DISABLE_CUSTOM_SPEECH || "false"
+);
+
+/** Enable Forgot Password */
+export const ENABLE_FORGOT_PASSWORD: boolean = JSON.parse(
+  import.meta.env.VITE_ENABLE_FORGOT_PASSWORD || "false"
+);
+
+/** Disable Lcr */
+export const DISABLE_LCR: boolean = JSON.parse(
+  import.meta.env.VITE_APP_LCR_DISABLED || "false"
+);
+
+/** Disable jaeger tracing */
+export const DISABLE_JAEGER_TRACING: boolean = JSON.parse(
+  import.meta.env.VITE_APP_JAEGER_TRACING_DISABLED || "false"
+);
+
 /** TCP Max Port */
 export const TCP_MAX_PORT = 65535;

@@ -54,7 +74,7 @@ export const DEFAULT_SIP_GATEWAY: SipGateway = {
  ipv4: "",
  port: 5060,
  netmask: 32,
-  is_active: false,
+  is_active: true,
  inbound: 1,
  outbound: 0,
 };
@@ -69,7 +89,6 @@ export const DEFAULT_SMPP_GATEWAY: SmppGateway = {
  inbound: 1,
  outbound: 1,
 };
-
 /** Netmask Bits */
 export const NETMASK_BITS = Array(32)
  .fill(0)
@@ -81,6 +100,26 @@ export const NETMASK_OPTIONS = NETMASK_BITS.map((bit) => ({
  value: bit.toString(),
 }));

+/** SIP Gateway Protocol */
+export const SIP_GATEWAY_PROTOCOL_OPTIONS = [
+  {
+    name: "UDP",
+    value: "udp",
+  },
+  {
+    name: "TCP",
+    value: "tcp",
+  },
+  {
+    name: "TLS",
+    value: "tls",
+  },
+  {
+    name: "TLS/SRTP",
+    value: "tls/srtp",
+  },
+];
+
 /** Password Length options */

 export const PASSWORD_MIN = 8;
@@ -182,8 +221,13 @@ export const CRED_OK = "ok";
 export const CRED_FAIL = "fail";
 export const CRED_NOT_TESTED = "not tested";

+/** Voip Carrier Register result status values */
+export const CARRIER_REG_OK = "ok";
+export const CARRIER_REG_FAIL = "fail";
+
 /** API base paths */
 export const API_LOGIN = `${API_BASE_URL}/login`;
+export const API_LOGOUT = `${API_BASE_URL}/logout`;
 export const API_SBCS = `${API_BASE_URL}/Sbcs`;
 export const API_USERS = `${API_BASE_URL}/Users`;
 export const API_API_KEYS = `${API_BASE_URL}/ApiKeys`;
@@ -196,3 +240,8 @@ export const API_CARRIERS = `${API_BASE_URL}/VoipCarriers`;
 export const API_SMPP_GATEWAY = `${API_BASE_URL}/SmppGateways`;
 export const API_SIP_GATEWAY = `${API_BASE_URL}/SipGateways`;
 export const API_PASSWORD_SETTINGS = `${API_BASE_URL}/PasswordSettings`;
+export const API_FORGOT_PASSWORD = `${API_BASE_URL}/forgot-password`;
+export const API_SYSTEM_INFORMATION = `${API_BASE_URL}/SystemInformation`;
+export const API_LCRS = `${API_BASE_URL}/Lcrs`;
+export const API_LCR_ROUTES = `${API_BASE_URL}/LcrRoutes`;
+export const API_LCR_CARRIER_SET_ENTRIES = `${API_BASE_URL}/LcrCarrierSetEntries`;
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -17,7 +17,13 @@ import {
  API_SMPP_GATEWAY,
  API_SIP_GATEWAY,
  API_PASSWORD_SETTINGS,
+  API_FORGOT_PASSWORD,
  USER_ACCOUNT,
+  API_LOGOUT,
+  API_SYSTEM_INFORMATION,
+  API_LCR_ROUTES,
+  API_LCR_CARRIER_SET_ENTRIES,
+  API_LCRS,
 } from "./constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import {
@@ -58,8 +64,14 @@ import type {
  Limit,
  LimitCategories,
  PasswordSettings,
+  ForgotPassword,
+  SystemInformation,
+  Lcr,
+  LcrRoute,
+  LcrCarrierSetEntry,
 } from "./types";
 import { StatusCodes } from "./types";
+import { JaegerRoot } from "./jaeger-types";

 /** Wrap all requests to normalize response handling */
 const fetchTransport = <Type>(
@@ -233,6 +245,10 @@ export const postLogin = (payload: UserLoginPayload) => {
  });
 };

+export const postLogout = () => {
+  return postFetch<undefined>(API_LOGOUT);
+};
+
 /** Named wrappers for `postFetch` */

 export const postServiceProviders = (payload: Partial<ServiceProvider>) => {
@@ -346,6 +362,37 @@ export const postPasswordSettings = (payload: Partial<PasswordSettings>) => {
    payload
  );
 };
+
+export const postForgotPassword = (payload: Partial<ForgotPassword>) => {
+  return postFetch<EmptyResponse, Partial<ForgotPassword>>(
+    API_FORGOT_PASSWORD,
+    payload
+  );
+};
+
+export const postSystemInformation = (payload: Partial<SystemInformation>) => {
+  return postFetch<SystemInformation, Partial<SystemInformation>>(
+    API_SYSTEM_INFORMATION,
+    payload
+  );
+};
+
+export const postLcr = (payload: Partial<Lcr>) => {
+  return postFetch<SidResponse, Partial<Lcr>>(API_LCRS, payload);
+};
+
+export const postLcrRoute = (payload: Partial<LcrRoute>) => {
+  return postFetch<SidResponse, Partial<LcrRoute>>(API_LCR_ROUTES, payload);
+};
+
+export const postLcrCarrierSetEntry = (
+  payload: Partial<LcrCarrierSetEntry>
+) => {
+  return postFetch<SidResponse, Partial<LcrCarrierSetEntry>>(
+    API_LCR_CARRIER_SET_ENTRIES,
+    payload
+  );
+};
 /** Named wrappers for `putFetch` */

 export const putUser = (sid: string, payload: Partial<UserUpdatePayload>) => {
@@ -438,6 +485,27 @@ export const putSmppGateway = (sid: string, payload: Partial<SmppGateway>) => {
  );
 };

+export const putLcr = (sid: string, payload: Partial<Lcr>) => {
+  return putFetch<EmptyResponse, Partial<Lcr>>(`${API_LCRS}/${sid}`, payload);
+};
+
+export const putLcrRoutes = (sid: string, payload: Partial<LcrRoute>) => {
+  return putFetch<EmptyResponse, Partial<LcrRoute>>(
+    `${API_LCR_ROUTES}/${sid}`,
+    payload
+  );
+};
+
+export const putLcrCarrierSetEntries = (
+  sid: string,
+  payload: Partial<LcrCarrierSetEntry>
+) => {
+  return putFetch<EmptyResponse, Partial<LcrCarrierSetEntry>>(
+    `${API_LCR_CARRIER_SET_ENTRIES}/${sid}`,
+    payload
+  );
+};
+
 /** Named wrappers for `deleteFetch` */

 export const deleteUser = (sid: string) => {
@@ -501,6 +569,14 @@ export const deleteAccountLimit = (sid: string, cat: LimitCategories) => {
  );
 };

+export const deleteLcr = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_LCRS}/${sid}`);
+};
+
+export const deleteLcrRoute = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_LCR_ROUTES}/${sid}`);
+};
+
 /** Named wrappers for `getFetch` */

 export const getUser = (sid: string) => {
@@ -517,6 +593,28 @@ export const getAccountWebhook = (sid: string) => {
  );
 };

+export const getLcrs = () => {
+  return getFetch<Lcr[]>(API_LCRS);
+};
+
+export const getLcr = (sid: string) => {
+  return getFetch<Lcr>(`${API_LCRS}/${sid}`);
+};
+
+export const getLcrRoutes = (sid: string) => {
+  return getFetch<LcrRoute[]>(`${API_LCR_ROUTES}?lcr_sid=${sid}`);
+};
+
+export const getLcrRoute = (sid: string) => {
+  return getFetch<LcrRoute>(`${API_LCR_ROUTES}/${sid}`);
+};
+
+export const getLcrCarrierSetEtries = (sid: string) => {
+  return getFetch<LcrCarrierSetEntry[]>(
+    `${API_LCR_CARRIER_SET_ENTRIES}?lcr_route_sid=${sid}`
+  );
+};
+
 /** Wrappers for APIs that can have a mock dev server response */

 export const getRecentCalls = (sid: string, query: Partial<CallQuery>) => {
@@ -545,6 +643,33 @@ export const getPcap = (sid: string, sipCallId: string) => {
  );
 };

+export const getJaegerTrace = (sid: string, traceId: string) => {
+  return getFetch<JaegerRoot>(
+    import.meta.env.DEV
+      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/trace/${traceId}`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/trace/${traceId}`
+  );
+};
+
+export const getServiceProviderRecentCall = (
+  sid: string,
+  sipCallId: string
+) => {
+  return getFetch<TotalResponse>(
+    import.meta.env.DEV
+      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}`
+  );
+};
+
+export const getServiceProviderPcap = (sid: string, sipCallId: string) => {
+  return getBlob(
+    import.meta.env.DEV
+      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/pcap`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/pcap`
+  );
+};
+
 export const getAlerts = (sid: string, query: Partial<PageQuery>) => {
  const qryStr = getQuery<Partial<PageQuery>>(query);

--- a/src/api/jaeger-types.ts
+++ b/src/api/jaeger-types.ts
@@ -0,0 +1,63 @@
+export interface JaegerRoot {
+  resourceSpans: JaegerResourceSpan[];
+}
+
+export interface JaegerResourceSpan {
+  resource: JaegerResource;
+  instrumentationLibrarySpans: InstrumentationLibrarySpan[];
+}
+
+export interface JaegerResource {
+  attributes: JaegerAttribute[];
+}
+
+export interface InstrumentationLibrarySpan {
+  instrumentationLibrary: InstrumentationLibrary;
+  spans: JaegerSpan[];
+}
+
+export interface InstrumentationLibrary {
+  name: string;
+  version: string;
+}
+
+export interface JaegerSpan {
+  traceId: string;
+  spanId: string;
+  parentSpanId: string;
+  name: string;
+  kind: string;
+  startTimeUnixNano: number;
+  endTimeUnixNano: number;
+  attributes: JaegerAttribute[];
+}
+
+export interface JaegerAttribute {
+  key: string;
+  value: JaegerValue;
+}
+
+export interface JaegerValue {
+  stringValue: string;
+  doubleValue: string;
+  boolValue: string;
+}
+
+export interface JaegerGroup {
+  level: number;
+  startPx: number;
+  endPx: number;
+  durationPx: number;
+  startMs: number;
+  endMs: number;
+  durationMs: number;
+  traceId: string;
+  spanId: string;
+  parentSpanId: string;
+  name: string;
+  kind: string;
+  startTimeUnixNano: number;
+  endTimeUnixNano: number;
+  attributes: JaegerAttribute[];
+  children: JaegerGroup[];
+}
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -113,6 +113,16 @@ export interface PasswordSettings {
  require_special_character: number;
 }

+export interface ForgotPassword {
+  email: string;
+}
+
+export interface SystemInformation {
+  domain_name: string;
+  sip_domain_name: string;
+  monitoring_domain_name: string;
+}
+
 /** API responses/payloads */

 export interface User {
@@ -172,6 +182,7 @@ export interface ServiceProvider {
  name: string;
  ms_teams_fqdn: null | string;
  service_provider_sid: string;
+  lcr_sid: null | string;
 }

 export interface Limit {
@@ -231,10 +242,12 @@ export interface Account {
  registration_hook: null | WebHook;
  service_provider_sid: string;
  device_calling_application_sid: null | string;
+  lcr_sid: null | string;
 }

 export interface Application {
  name: string;
+  app_json: null | string;
  call_hook: null | WebHook;
  account_sid: null | string;
  messaging_hook: null | WebHook;
@@ -280,6 +293,7 @@ export interface RecentCall {
  remote_host: string;
  direction: string;
  trunk: string;
+  trace_id: string;
 }

 export interface SpeechCredential {
@@ -302,11 +316,17 @@ export interface SpeechCredential {
  custom_stt_endpoint: null | string;
  client_id: null | string;
  secret: null | string;
+  nuance_tts_uri: null | string;
+  nuance_stt_uri: null | string;
  tts_api_key: null | string;
  tts_region: null | string;
  stt_api_key: null | string;
  stt_region: null | string;
  instance_id: null | string;
+  riva_server_uri: null | string;
+  auth_token: null | string;
+  custom_stt_url: null | string;
+  custom_tts_url: null | string;
 }

 export interface Alert {
@@ -317,6 +337,13 @@ export interface Alert {
  detail: string;
 }

+export interface CarrierRegisterStatus {
+  status: null | string;
+  reason: null | string;
+  cseq: null | string;
+  callId: null | string;
+}
+
 export interface Carrier {
  voip_carrier_sid: string;
  name: string;
@@ -342,6 +369,7 @@ export interface Carrier {
  smpp_inbound_system_id: null | string;
  smpp_inbound_password: null | string;
  smpp_enquire_link_interval: number;
+  register_status: CarrierRegisterStatus;
 }

 export interface PredefinedCarrier extends Carrier {
@@ -361,6 +389,7 @@ export interface Gateway {
 export interface SipGateway extends Gateway {
  sip_gateway_sid?: null | string;
  is_active: boolean;
+  protocol?: string;
 }

 export interface SmppGateway extends Gateway {
@@ -369,6 +398,33 @@ export interface SmppGateway extends Gateway {
  use_tls: boolean;
 }

+export interface Lcr {
+  lcr_sid?: null | string;
+  is_active: boolean;
+  name: null | string;
+  default_carrier_set_entry_sid?: null | string;
+  account_sid: null | string;
+  service_provider_sid: null | string;
+  number_routes?: number;
+}
+
+export interface LcrRoute {
+  lcr_route_sid?: null | string;
+  lcr_sid: null | string;
+  regex: null | string;
+  desciption?: null | string;
+  priority: number;
+  lcr_carrier_set_entries?: LcrCarrierSetEntry[];
+}
+
+export interface LcrCarrierSetEntry {
+  lcr_carrier_set_entry_sid?: null | string;
+  workload?: number;
+  lcr_route_sid: null | string;
+  voip_carrier_sid: null | string;
+  priority: number;
+}
+
 export interface PageQuery {
  page: number;
  count: number;
--- a/src/components/access-control.cy.tsx
+++ b/src/components/access-control.cy.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { AccessControl } from "./access-control";

--- a/src/components/account-filter.tsx
+++ b/src/components/account-filter.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";

--- a/src/components/application-filter.tsx
+++ b/src/components/application-filter.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";
 import { sortLocaleName } from "src/utils";
--- a/src/components/forms/checkzone/index.tsx
+++ b/src/components/forms/checkzone/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, forwardRef } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import "./styles.scss";

@@ -63,7 +63,7 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
          />
          <div>{label}</div>
        </label>
-        <div className={classesIn}>{children}</div>
+        {checked && <div className={classesIn}>{children}</div>}
      </div>
    );
  }
--- a/src/components/forms/checkzone/styles.scss
+++ b/src/components/forms/checkzone/styles.scss
@@ -1,6 +1,6 @@
@use "src/styles/vars";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .checkzone {
  padding: ui-vars.$px02;
--- a/src/components/forms/file-upload/index.tsx
+++ b/src/components/forms/file-upload/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, forwardRef } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";

--- a/src/components/forms/file-upload/styles.scss
+++ b/src/components/forms/file-upload/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .file-upload {
  &__wrap {
--- a/src/components/forms/message/styles.scss
+++ b/src/components/forms/message/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .msg {
  @include ui-mixins.ms();
--- a/src/components/forms/passwd/styles.scss
+++ b/src/components/forms/passwd/styles.scss
@@ -1,6 +1,6 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;

 .passwd {
  position: relative;
--- a/src/components/forms/selector/index.tsx
+++ b/src/components/forms/selector/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, forwardRef } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";

--- a/src/components/forms/selector/styles.scss
+++ b/src/components/forms/selector/styles.scss
@@ -1,8 +1,8 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/index";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/index";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .selector {
  position: relative;
--- a/src/components/icons.ts
+++ b/src/components/icons.ts
@@ -39,6 +39,9 @@ import {
  PhoneOutgoing,
  PhoneIncoming,
  MoreHorizontal,
+  Share2,
+  ArrowUp,
+  ArrowDown,
 } from "react-feather";

 import type { Icon } from "react-feather";
@@ -88,4 +91,7 @@ export const Icons: IconMap = {
  PhoneOutgoing,
  PhoneIncoming,
  MoreHorizontal,
+  Share2,
+  ArrowUp,
+  ArrowDown,
 };
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { Button, ButtonGroup } from "jambonz-ui";
+import { Button, ButtonGroup } from "@jambonz/ui-kit";

 import "./styles.scss";

@@ -91,9 +91,19 @@ export const ModalForm = ({

 export const ModalClose = ({ children, handleClose }: CloseProps) => {
  return ReactDOM.createPortal(
-    <div className="modal">
-      <div className="modal__box">
-        <div className="modal__stuff">{children}</div>
+    <div className="modal" role="presentation" onClick={handleClose}>
+      <div
+        className="modal__box"
+        role="presentation"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="modal__stuff"
+          role="presentation"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
        <ButtonGroup right>
          <Button type="button" small subStyle="grey" onClick={handleClose}>
            Close
--- a/src/components/modal/styles.scss
+++ b/src/components/modal/styles.scss
@@ -1,6 +1,6 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;

 .modal {
  position: fixed;
--- a/src/components/obscure/styles.scss
+++ b/src/components/obscure/styles.scss
@@ -1,6 +1,6 @@
@use "src/styles/vars";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .obscure {
  @include ui-mixins.ms();
--- a/src/components/pagination/index.tsx
+++ b/src/components/pagination/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { Icon } from "jambonz-ui";
+import { Icon } from "@jambonz/ui-kit";

 import { Icons } from "../icons";

--- a/src/components/pagination/styles.scss
+++ b/src/components/pagination/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .pagination {
  display: flex;
--- a/src/components/require-auth.cy.tsx
+++ b/src/components/require-auth.cy.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { RequireAuth } from "./require-auth";

--- a/src/components/scoped-access.cy.tsx
+++ b/src/components/scoped-access.cy.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { ScopedAccess } from "./scoped-access";
 import { USER_SP, USER_ADMIN, USER_ACCOUNT } from "src/api/constants";
--- a/src/components/search-filter/index.tsx
+++ b/src/components/search-filter/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";

--- a/src/components/search-filter/styles.scss
+++ b/src/components/search-filter/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .search-filter {
  position: relative;
--- a/src/components/section/index.tsx
+++ b/src/components/section/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import "./styles.scss";

--- a/src/components/section/styles.scss
+++ b/src/components/section/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
-@use "jambonz-ui/src/styles/index";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/index";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .sec {
  margin-top: ui-vars.$px03;
--- a/src/components/select-filter.tsx
+++ b/src/components/select-filter.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components/icons";

--- a/src/components/spinner/index.tsx
+++ b/src/components/spinner/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import "./styles.scss";

--- a/src/components/spinner/styles.scss
+++ b/src/components/spinner/styles.scss
@@ -1,5 +1,5 @@
@use "src/styles/vars";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;

 /** https://loading.io/css/ */

--- a/src/components/toast/index.tsx
+++ b/src/components/toast/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";

 import { Icons } from "src/components";

--- a/src/components/toast/styles.scss
+++ b/src/components/toast/styles.scss
@@ -1,6 +1,6 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;

 .toast {
  padding-left: ui-vars.$px02;
--- a/src/components/tooltip/styles.scss
+++ b/src/components/tooltip/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .tooltip {
  cursor: help;
--- a/src/constants/index.tsx
+++ b/src/constants/index.tsx
@@ -34,3 +34,4 @@ export const MSG_WEBHOOK_FIELDS = (
    <span>password</span> fields are required.
  </>
 );
+export const NOT_AVAILABLE_PREFIX = "NotAvalable";
--- a/src/containers/internal/api-keys/index.tsx
+++ b/src/containers/internal/api-keys/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { P, Button } from "jambonz-ui";
+import { P, Button } from "@jambonz/ui-kit";

 import { toastSuccess, toastError } from "src/store";
 import { useApiData, postApiKey, deleteApiKey } from "src/api";
--- a/src/containers/internal/layout.tsx
+++ b/src/containers/internal/layout.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Outlet } from "react-router-dom";
-import { Button, Icon, classNames } from "jambonz-ui";
+import { Button, Icon, classNames } from "@jambonz/ui-kit";

 import { UserMe } from "./user-me";
 import { Navi } from "./navi";
--- a/src/containers/internal/navi/index.tsx
+++ b/src/containers/internal/navi/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo } from "react";
-import { classNames, M, Icon, Button } from "jambonz-ui";
-import { Link, useLocation } from "react-router-dom";
+import { classNames, M, Icon, Button } from "@jambonz/ui-kit";
+import { Link, useLocation, useNavigate } from "react-router-dom";

 import { Icons, ModalForm } from "src/components";
 import { naviTop, naviByo } from "./items";
@@ -20,6 +20,8 @@ import "./styles.scss";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope, UserData } from "src/store/types";
 import { USER_ADMIN } from "src/api/constants";
+import { ROUTE_LOGIN } from "src/router/routes";
+import { Lcr } from "src/api/types";

 type CommonProps = {
  handleMenu: () => void;
@@ -34,16 +36,17 @@ type NaviProps = CommonProps & {
 type ItemProps = CommonProps & {
  item: NaviItem;
  user?: UserData;
+  lcr?: Lcr;
 };

-const Item = ({ item, user, handleMenu }: ItemProps) => {
+const Item = ({ item, user, lcr, handleMenu }: ItemProps) => {
  const location = useLocation();
  const active = location.pathname.includes(item.route(user));

  return (
    <li>
      <Link
-        to={item.route(user)}
+        to={item.route(user, lcr)}
        className={classNames({ navi__link: true, "txt--jean": true, active })}
        onClick={handleMenu}
      >
@@ -61,7 +64,9 @@ export const Navi = ({
  handleLogout,
 }: NaviProps) => {
  const dispatch = useDispatch();
+  const navigate = useNavigate();
  const user = useSelectState("user");
+  const lcr = useSelectState("lcr");
  const accessControl = useSelectState("accessControl");
  const serviceProviders = useSelectState("serviceProviders");
  const currentServiceProvider = useSelectState("currentServiceProvider");
@@ -131,6 +136,7 @@ export const Navi = ({
  useEffect(() => {
    dispatch({ type: "user" });
    dispatch({ type: "serviceProviders" });
+    dispatch({ type: "lcr" });
  }, []);

  return (
@@ -160,6 +166,7 @@ export const Navi = ({
                onChange={(e) => {
                  setSid(e.target.value);
                  setActiveSP(e.target.value);
+                  navigate(ROUTE_LOGIN);
                }}
                disabled={user?.scope !== USER_ADMIN}
              >
@@ -218,6 +225,7 @@ export const Navi = ({
              <Item
                key={item.label}
                user={user}
+                lcr={lcr}
                item={item}
                handleMenu={handleMenu}
              />
--- a/src/containers/internal/navi/items.ts
+++ b/src/containers/internal/navi/items.ts
@@ -9,17 +9,20 @@ import {
  ROUTE_INTERNAL_SPEECH,
  ROUTE_INTERNAL_PHONE_NUMBERS,
  ROUTE_INTERNAL_MS_TEAMS_TENANTS,
+  ROUTE_INTERNAL_LEST_COST_ROUTING,
 } from "src/router/routes";
 import { Icons } from "src/components";
 import { Scope, UserData } from "src/store/types";

 import type { Icon } from "react-feather";
 import type { ACL } from "src/store/types";
+import { Lcr } from "src/api/types";
+import { DISABLE_LCR } from "src/api/constants";

 export interface NaviItem {
  label: string;
  icon: Icon;
-  route: (user?: UserData) => string;
+  route: (user?: UserData, lcr?: Lcr) => string;
  acl?: keyof ACL;
  scope?: Scope;
  restrict?: boolean;
@@ -89,4 +92,21 @@ export const naviByo: NaviItem[] = [
    route: () => ROUTE_INTERNAL_MS_TEAMS_TENANTS,
    acl: "hasMSTeamsFqdn",
  },
+  ...(DISABLE_LCR === false
+    ? [
+        {
+          label: "Outbound Call Routing",
+          icon: Icons.Share2,
+          route: (user, lcr) => {
+            if (user?.access === Scope.admin) {
+              return ROUTE_INTERNAL_LEST_COST_ROUTING;
+            }
+            if (lcr && lcr.lcr_sid) {
+              return `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr.lcr_sid}/edit`;
+            }
+            return `${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`;
+          },
+        } as NaviItem,
+      ]
+    : []),
 ];
--- a/src/containers/internal/navi/styles.scss
+++ b/src/containers/internal/navi/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 .navi {
  width: 100%;
--- a/src/containers/internal/styles.scss
+++ b/src/containers/internal/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 /** Generic layout: internal */
 .internal {
--- a/src/containers/internal/user-me/styles.scss
+++ b/src/containers/internal/user-me/styles.scss
@@ -1,7 +1,7 @@
@use "src/styles/vars";
@use "src/styles/mixins";
-@use "jambonz-ui/src/styles/vars" as ui-vars;
-@use "jambonz-ui/src/styles/mixins" as ui-mixins;
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;

 /** User layout **/
 .user {
--- a/src/containers/internal/views/accounts/add.tsx
+++ b/src/containers/internal/views/accounts/add.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { AccountForm } from "./form";

--- a/src/containers/internal/views/accounts/delete.tsx
+++ b/src/containers/internal/views/accounts/delete.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { P } from "jambonz-ui";
+import { P } from "@jambonz/ui-kit";

 import { ModalClose, Modal } from "src/components";
 import { getFetch } from "src/api";
--- a/src/containers/internal/views/accounts/edit.tsx
+++ b/src/containers/internal/views/accounts/edit.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { ApiKeys } from "src/containers/internal/api-keys";
--- a/src/containers/internal/views/accounts/form.tsx
+++ b/src/containers/internal/views/accounts/form.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { P, Button, ButtonGroup, MS } from "jambonz-ui";
+import { P, Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

 import { toastError, toastSuccess, useSelectState } from "src/store";
@@ -158,7 +158,14 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
          ? accounts.filter((a) => a.account_sid !== account.data!.account_sid)
          : accounts;

-      if (filtered.find((a) => a.name === name)) {
+      if (
+        account &&
+        filtered.find(
+          (a) =>
+            a.service_provider_sid !== account.data!.service_provider_sid &&
+            a.name === name
+        )
+      ) {
        setMessage(
          "The name you have entered is already in use on another one of your accounts."
        );
@@ -418,11 +425,6 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
                          username: e.target.value,
                        });
                      }}
-                      required={
-                        webhook.stateVal.password && !webhook.stateVal.username
-                          ? true
-                          : false
-                      }
                    />
                    <label htmlFor={`${webhook.prefix}_password`}>
                      Password
@@ -438,11 +440,6 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
                          password: e.target.value,
                        });
                      }}
-                      required={
-                        webhook.stateVal.username && !webhook.stateVal.password
-                          ? true
-                          : false
-                      }
                    />
                  </Checkzone>
                </div>
--- a/src/containers/internal/views/accounts/index.tsx
+++ b/src/containers/internal/views/accounts/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { H1, M, Button, Icon } from "jambonz-ui";
+import { H1, M, Button, Icon } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";

 import { useServiceProviderData, deleteAccount } from "src/api";
--- a/src/containers/internal/views/alerts/index.tsx
+++ b/src/containers/internal/views/alerts/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { ButtonGroup, H1, M, MS } from "jambonz-ui";
+import { ButtonGroup, H1, M, MS } from "@jambonz/ui-kit";
 import dayjs from "dayjs";

 import { getAlerts, useServiceProviderData } from "src/api";
--- a/src/containers/internal/views/applications/add.tsx
+++ b/src/containers/internal/views/applications/add.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { ApplicationForm } from "./form";

--- a/src/containers/internal/views/applications/delete.tsx
+++ b/src/containers/internal/views/applications/delete.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { P } from "jambonz-ui";
+import { P } from "@jambonz/ui-kit";

 import { Modal, ModalClose } from "src/components";
 import { getFetch } from "src/api";
--- a/src/containers/internal/views/applications/edit.tsx
+++ b/src/containers/internal/views/applications/edit.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
--- a/src/containers/internal/views/applications/form.tsx
+++ b/src/containers/internal/views/applications/form.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, ButtonGroup, MS } from "jambonz-ui";
+import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

 import { toastError, toastSuccess, useSelectState } from "src/store";
@@ -20,6 +20,8 @@ import {
  VENDOR_WELLSAID,
  useSpeechVendors,
  VENDOR_DEEPGRAM,
+  VENDOR_SONIOX,
+  VENDOR_CUSTOM,
 } from "src/vendor";
 import {
  postApplication,
@@ -39,6 +41,7 @@ import type {
  Voice,
  VoiceLanguage,
  Language,
+  VendorOptions,
 } from "src/vendor/types";

 import type {
@@ -47,9 +50,10 @@ import type {
  Application,
  WebhookMethod,
  UseApiDataMap,
+  SpeechCredential,
 } from "src/api/types";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
-import { isUserAccountScope, useRedirect } from "src/utils";
+import { hasLength, isUserAccountScope, useRedirect } from "src/utils";
 import { setAccountFilter, setLocation } from "src/store/localStore";

 type ApplicationFormProps = {
@@ -63,13 +67,22 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
  const [accounts] = useServiceProviderData<Account[]>("Accounts");
  const [applications] = useApiData<Application[]>("Applications");
  const [applicationName, setApplicationName] = useState("");
+  const [applicationJson, setApplicationJson] = useState("");
+  const [tmpApplicationJson, setTmpApplicationJson] = useState("");
+  const [initialApplicationJson, setInitialApplicationJson] = useState(false);
  const [accountSid, setAccountSid] = useState("");
  const [callWebhook, setCallWebhook] = useState<WebHook>(DEFAULT_WEBHOOK);
+  const [tmpCallWebhook, setTmpCallWebhook] =
+    useState<WebHook>(DEFAULT_WEBHOOK);
  const [initialCallWebhook, setInitialCallWebhook] = useState(false);
  const [statusWebhook, setStatusWebhook] = useState<WebHook>(DEFAULT_WEBHOOK);
+  const [tmpStatusWebhook, setTmpStatusWebhook] =
+    useState<WebHook>(DEFAULT_WEBHOOK);
  const [initialStatusWebhook, setInitialStatusWebhook] = useState(false);
  const [messageWebhook, setMessageWebhook] =
    useState<WebHook>(DEFAULT_WEBHOOK);
+  const [tmpMessageWebhook, setTmpMessageWebhook] =
+    useState<WebHook>(DEFAULT_WEBHOOK);
  const [initialMessageWebhook, setInitialMessageWebhook] = useState(false);
  const [synthVendor, setSynthVendor] =
    useState<keyof SynthesisVendors>(VENDOR_GOOGLE);
@@ -79,6 +92,10 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    useState<keyof RecognizerVendors>(VENDOR_GOOGLE);
  const [recogLang, setRecogLang] = useState(LANG_EN_US);
  const [message, setMessage] = useState("");
+  const [apiUrl, setApiUrl] = useState("");
+  const [credentials] = useApiData<SpeechCredential[]>(apiUrl);
+  const [softTtsVendor, setSoftTtsVendor] = useState<VendorOptions[]>(vendors);
+  const [softSttVendor, setSoftSttVendor] = useState<VendorOptions[]>(vendors);

  /** This lets us map and render the same UI for each... */
  const webhooks = [
@@ -86,7 +103,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      label: "Calling",
      prefix: "call_webhook",
      stateVal: callWebhook,
+      tmpStateVal: tmpCallWebhook,
      stateSet: setCallWebhook,
+      tmpStateSet: setTmpCallWebhook,
      initialCheck: initialCallWebhook,
      required: true,
    },
@@ -94,7 +113,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      label: "Call status",
      prefix: "status_webhook",
      stateVal: statusWebhook,
+      tmpStateVal: tmpStatusWebhook,
      stateSet: setStatusWebhook,
+      tmpStateSet: setTmpStatusWebhook,
      initialCheck: initialStatusWebhook,
      required: true,
    },
@@ -102,7 +123,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
      label: "Messaging",
      prefix: "message_webhook",
      stateVal: messageWebhook,
+      tmpStateVal: tmpMessageWebhook,
      stateSet: setMessageWebhook,
+      tmpStateSet: setTmpMessageWebhook,
      initialCheck: initialMessageWebhook,
      required: false,
    },
@@ -145,6 +168,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

    const payload = {
      name: applicationName,
+      app_json: applicationJson || null,
      call_hook: callWebhook || null,
      account_sid: accountSid || null,
      messaging_hook: messageWebhook || null,
@@ -181,13 +205,56 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
    }
  };

+  useEffect(() => {
+    if (credentials && hasLength(credentials)) {
+      const v = credentials
+        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_tts)
+        .map((tv) =>
+          Object.assign({
+            name:
+              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
+              ` (${VENDOR_CUSTOM})`,
+            value: tv.vendor,
+          })
+        );
+      setSoftTtsVendor(vendors.concat(v));
+
+      const v2 = credentials
+        .filter((tv) => tv.vendor.startsWith(VENDOR_CUSTOM) && tv.use_for_stt)
+        .map((tv) =>
+          Object.assign({
+            name:
+              tv.vendor.substring(VENDOR_CUSTOM.length + 1) +
+              ` (${VENDOR_CUSTOM})`,
+            value: tv.vendor,
+          })
+        );
+      setSoftSttVendor(vendors.concat(v2));
+    }
+  }, [credentials]);
+
+  useEffect(() => {
+    if (accountSid) {
+      setApiUrl(`Accounts/${accountSid}/SpeechCredentials`);
+    }
+  }, [accountSid]);
+
  useEffect(() => {
    setLocation();
    if (application && application.data) {
      setApplicationName(application.data.name);
+      if (!applicationJson) {
+        setApplicationJson(application.data.app_json || "");
+      }
+      setTmpApplicationJson(applicationJson);
+      setInitialApplicationJson(
+        application.data.app_json != undefined &&
+          application.data.app_json.length !== 0
+      );

      if (application.data.call_hook) {
        setCallWebhook(application.data.call_hook);
+        setTmpCallWebhook(application.data.call_hook);

        if (
          application.data.call_hook.username ||
@@ -199,6 +266,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.call_status_hook) {
        setStatusWebhook(application.data.call_status_hook);
+        setTmpStatusWebhook(application.data.call_status_hook);

        if (
          application.data.call_status_hook.username ||
@@ -210,6 +278,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {

      if (application.data.messaging_hook) {
        setMessageWebhook(application.data.messaging_hook);
+        setTmpMessageWebhook(application.data.messaging_hook);

        if (
          application.data.messaging_hook.username ||
@@ -329,6 +398,18 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                name={webhook.prefix}
                label="Use HTTP basic authentication"
                initialCheck={webhook.initialCheck}
+                handleChecked={(e) => {
+                  if (e.target.checked) {
+                    webhook.stateSet(webhook.tmpStateVal);
+                  } else {
+                    webhook.tmpStateSet(webhook.stateVal);
+                    webhook.stateSet({
+                      ...webhook.stateVal,
+                      username: "",
+                      password: "",
+                    });
+                  }
+                }}
              >
                <MS>{MSG_WEBHOOK_FIELDS}</MS>
                <label htmlFor={`${webhook.prefix}_username`}>Username</label>
@@ -344,13 +425,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                      username: e.target.value,
                    });
                  }}
-                  required={
-                    webhook.required &&
-                    !webhook.stateVal.username &&
-                    webhook.stateVal.password
-                      ? true
-                      : false
-                  }
                />
                <label htmlFor={`${webhook.prefix}_password`}>Password</label>
                <Passwd
@@ -364,13 +438,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                      password: e.target.value,
                    });
                  }}
-                  required={
-                    webhook.required &&
-                    webhook.stateVal.username &&
-                    !webhook.stateVal.password
-                      ? true
-                      : false
-                  }
                />
              </Checkzone>
            </fieldset>
@@ -383,13 +450,22 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              id="synthesis_vendor"
              name="synthesis_vendor"
              value={synthVendor}
-              options={vendors.filter(
-                (vendor) => vendor.value != VENDOR_DEEPGRAM
+              options={softTtsVendor.filter(
+                (vendor) =>
+                  vendor.value != VENDOR_DEEPGRAM &&
+                  vendor.value != VENDOR_SONIOX &&
+                  vendor.value !== VENDOR_CUSTOM
              )}
              onChange={(e) => {
                const vendor = e.target.value as keyof SynthesisVendors;
                setSynthVendor(vendor);

+                /** When Custom Vendor is used, user you have to input the lange and voice. */
+                if (vendor.toString().startsWith(VENDOR_CUSTOM)) {
+                  setSynthVoice("");
+                  return;
+                }
+
                /** When using Google and en-US, ensure "Standard-C" is used as default */
                if (
                  e.target.value === VENDOR_GOOGLE &&
@@ -418,55 +494,88 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                setSynthVoice(newLang!.voices[0].value);
              }}
            />
-            {synthVendor && synthLang && (
-              <>
-                <label htmlFor="synthesis_lang">Language</label>
-                <Selector
-                  id="synthesis_lang"
-                  name="synthesis_lang"
-                  value={synthLang}
-                  options={synthesis[synthVendor as keyof SynthesisVendors].map(
-                    (lang: VoiceLanguage) => ({
+            {synthVendor &&
+              !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
+              synthLang && (
+                <>
+                  <label htmlFor="synthesis_lang">Language</label>
+                  <Selector
+                    id="synthesis_lang"
+                    name="synthesis_lang"
+                    value={synthLang}
+                    options={synthesis[
+                      synthVendor as keyof SynthesisVendors
+                    ].map((lang: VoiceLanguage) => ({
                      name: lang.name,
                      value: lang.code,
-                    })
-                  )}
-                  onChange={(e) => {
-                    const language = e.target.value;
-                    setSynthLang(language);
+                    }))}
+                    onChange={(e) => {
+                      const language = e.target.value;
+                      setSynthLang(language);

-                    /** When using Google and en-US, ensure "Standard-C" is used as default */
-                    if (
-                      synthVendor === VENDOR_GOOGLE &&
-                      language === LANG_EN_US
-                    ) {
-                      setSynthVoice(LANG_EN_US_STANDARD_C);
-                      return;
+                      /** When using Google and en-US, ensure "Standard-C" is used as default */
+                      if (
+                        synthVendor === VENDOR_GOOGLE &&
+                        language === LANG_EN_US
+                      ) {
+                        setSynthVoice(LANG_EN_US_STANDARD_C);
+                        return;
+                      }
+
+                      const newLang = synthesis[
+                        synthVendor as keyof SynthesisVendors
+                      ].find((lang) => lang.code === language);
+
+                      setSynthVoice(newLang!.voices[0].value);
+                    }}
+                  />
+                  <label htmlFor="synthesis_voice">Voice</label>
+                  <Selector
+                    id="synthesis_voice"
+                    name="synthesis_voice"
+                    value={synthVoice}
+                    options={
+                      synthesis[synthVendor as keyof SynthesisVendors]
+                        .filter(
+                          (lang: VoiceLanguage) => lang.code === synthLang
+                        )
+                        .flatMap((lang: VoiceLanguage) =>
+                          lang.voices.map((voice: Voice) => ({
+                            name: voice.name,
+                            value: voice.value,
+                          }))
+                        ) as Voice[]
                    }
-
-                    const newLang = synthesis[
-                      synthVendor as keyof SynthesisVendors
-                    ].find((lang) => lang.code === language);
-
-                    setSynthVoice(newLang!.voices[0].value);
+                    onChange={(e) => setSynthVoice(e.target.value)}
+                  />
+                </>
+              )}
+            {synthVendor.toString().startsWith(VENDOR_CUSTOM) && (
+              <>
+                <label htmlFor="custom_vendor_synthesis_lang">Language</label>
+                <input
+                  id="custom_vendor_synthesis_lang"
+                  type="text"
+                  name="custom_vendor_synthesis_lang"
+                  placeholder="Required"
+                  required
+                  value={synthLang}
+                  onChange={(e) => {
+                    setSynthLang(e.target.value);
                  }}
                />
-                <label htmlFor="synthesis_voice">Voice</label>
-                <Selector
-                  id="synthesis_voice"
-                  name="synthesis_voice"
+
+                <label htmlFor="custom_vendor_synthesis_voice">Voice</label>
+                <input
+                  id="custom_vendor_synthesis_voice"
+                  type="text"
+                  name="custom_vendor_synthesis_voice"
+                  placeholder="Required"
+                  required
                  value={synthVoice}
-                  options={
-                    synthesis[synthVendor as keyof SynthesisVendors]
-                      .filter((lang: VoiceLanguage) => lang.code === synthLang)
-                      .flatMap((lang: VoiceLanguage) =>
-                        lang.voices.map((voice: Voice) => ({
-                          name: voice.name,
-                          value: voice.value,
-                        }))
-                      ) as Voice[]
-                  }
-                  onChange={(e) => setSynthVoice(e.target.value)}
+                  onChange={(e) => {
+                    setSynthVoice(e.target.value);
+                  }}
                />
              </>
            )}
@@ -479,13 +588,18 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
              id="recognizer_vendor"
              name="recognizer_vendor"
              value={recogVendor}
-              options={vendors.filter(
-                (vendor) => vendor.value != VENDOR_WELLSAID
+              options={softSttVendor.filter(
+                (vendor) =>
+                  vendor.value != VENDOR_WELLSAID &&
+                  vendor.value !== VENDOR_CUSTOM
              )}
              onChange={(e) => {
                const vendor = e.target.value as keyof RecognizerVendors;
                setRecogVendor(vendor);

+                /**When vendor is custom, Language is input by user */
+                if (vendor.toString() === VENDOR_CUSTOM) return;
+
                /** Google and AWS have different language lists */
                /** If the new language doesn't map then default to "en-US" */
                const newLang = recognizers[vendor].find(
@@ -500,19 +614,37 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                }
              }}
            />
-            {recogVendor && recogLang && (
+            {recogVendor &&
+              !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
+              recogLang && (
+                <>
+                  <label htmlFor="recognizer_lang">Language</label>
+                  <Selector
+                    id="recognizer_lang"
+                    name="recognizer_lang"
+                    value={recogLang}
+                    options={recognizers[
+                      recogVendor as keyof RecognizerVendors
+                    ].map((lang: Language) => ({
+                      name: lang.name,
+                      value: lang.code,
+                    }))}
+                    onChange={(e) => {
+                      setRecogLang(e.target.value);
+                    }}
+                  />
+                </>
+              )}
+            {recogVendor.toString().startsWith(VENDOR_CUSTOM) && (
              <>
-                <label htmlFor="recognizer_lang">Language</label>
-                <Selector
-                  id="recognizer_lang"
-                  name="recognizer_lang"
+                <label htmlFor="custom_vendor_recognizer_voice">Language</label>
+                <input
+                  id="custom_vendor_recognizer_voice"
+                  type="text"
+                  name="custom_vendor_recognizer_voice"
+                  placeholder="Required"
+                  required
                  value={recogLang}
-                  options={recognizers[
-                    recogVendor as keyof RecognizerVendors
-                  ].map((lang: Language) => ({
-                    name: lang.name,
-                    value: lang.code,
-                  }))}
                  onChange={(e) => {
                    setRecogLang(e.target.value);
                  }}
@@ -521,6 +653,36 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
            )}
          </fieldset>
        )}
+        {(import.meta.env.INITIAL_APP_JSON_ENABLED === undefined ||
+          import.meta.env.INITIAL_APP_JSON_ENABLED) && (
+          <fieldset>
+            <Checkzone
+              hidden
+              name="cz_pplication_json"
+              label="Override webhook for initial application"
+              initialCheck={initialApplicationJson}
+              handleChecked={(e) => {
+                if (e.target.checked && tmpApplicationJson) {
+                  setApplicationJson(tmpApplicationJson);
+                }
+                if (!e.target.checked) {
+                  setTmpApplicationJson(applicationJson);
+                  setApplicationJson("");
+                }
+              }}
+            >
+              <textarea
+                id="input_application_json"
+                name="application_json"
+                rows={6}
+                cols={55}
+                placeholder="an array of jambonz verbs to execute"
+                value={applicationJson}
+                onChange={(e) => setApplicationJson(e.target.value)}
+              />
+            </Checkzone>
+          </fieldset>
+        )}
        {message && <fieldset>{<Message message={message} />}</fieldset>}
        <fieldset>
          <ButtonGroup left>
--- a/src/containers/internal/views/applications/index.tsx
+++ b/src/containers/internal/views/applications/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { H1, M, Button, Icon } from "jambonz-ui";
+import { H1, M, Button, Icon } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";

 import { deleteApplication, useServiceProviderData, useApiData } from "src/api";
--- a/src/containers/internal/views/carriers/add.tsx
+++ b/src/containers/internal/views/carriers/add.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { CarrierForm } from "./form";

--- a/src/containers/internal/views/carriers/delete.tsx
+++ b/src/containers/internal/views/carriers/delete.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { P } from "jambonz-ui";
+import { P } from "@jambonz/ui-kit";

 import { Modal, ModalClose } from "src/components";
 import { getFetch } from "src/api";
--- a/src/containers/internal/views/carriers/edit.tsx
+++ b/src/containers/internal/views/carriers/edit.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
--- a/src/containers/internal/views/carriers/form.tsx
+++ b/src/containers/internal/views/carriers/form.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { Button, ButtonGroup, Icon, MS, MXS, Tab, Tabs } from "jambonz-ui";
+import { Button, ButtonGroup, Icon, MS, MXS, Tab, Tabs } from "@jambonz/ui-kit";

 import {
  deleteSipGateway,
@@ -23,6 +23,7 @@ import {
  FQDN_TOP_LEVEL,
  INVALID,
  NETMASK_OPTIONS,
+  SIP_GATEWAY_PROTOCOL_OPTIONS,
  TCP_MAX_PORT,
  TECH_PREFIX_MINLENGTH,
  USER_ACCOUNT,
@@ -45,6 +46,7 @@ import {
  isUserAccountScope,
  hasLength,
  isValidPort,
+  disableDefaultTrunkRouting,
 } from "src/utils";

 import type {
@@ -59,6 +61,7 @@ import type {
  Application,
 } from "src/api/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
+import { RegisterStatus } from "./register-status";

 type CarrierFormProps = {
  carrier?: UseApiDataMap<Carrier>;
@@ -135,6 +138,7 @@ export const CarrierForm = ({

  const setCarrierStates = (obj: Carrier) => {
    if (obj) {
+      setIsActive(obj.is_active);
      if (obj.name) {
        setCarrierName(obj.name);
      }
@@ -618,6 +622,15 @@ export const CarrierForm = ({
        <fieldset>
          <MS>{MSG_REQUIRED_FIELDS}</MS>
        </fieldset>
+        {carrier &&
+          carrier.data &&
+          Boolean(carrier.data.requires_register) &&
+          carrier.data.register_status && (
+            <fieldset>
+              <div className="m med">Register status</div>
+              <RegisterStatus carrier={carrier.data} />
+            </fieldset>
+          )}
        <fieldset>
          <div className="multi">
            <div className="inp">
@@ -725,18 +738,21 @@ export const CarrierForm = ({
                    : false
                }
              />
-              {accountSid && hasLength(applications) && (
-                <>
-                  <ApplicationSelect
-                    label="Default Application"
-                    defaultOption="None"
-                    application={[applicationSid, setApplicationSid]}
-                    applications={applications.filter(
-                      (application) => application.account_sid === accountSid
-                    )}
-                  />
-                </>
-              )}
+              {user &&
+                disableDefaultTrunkRouting(user?.scope) &&
+                accountSid &&
+                hasLength(applications) && (
+                  <>
+                    <ApplicationSelect
+                      label="Default Application"
+                      defaultOption="None"
+                      application={[applicationSid, setApplicationSid]}
+                      applications={applications.filter(
+                        (application) => application.account_sid === accountSid
+                      )}
+                    />
+                  </>
+                )}
            </fieldset>
            <fieldset>
              <Checkzone
@@ -960,20 +976,56 @@ export const CarrierForm = ({
                          }
                        />
                      </div>
-                      <div>
-                        <Selector
-                          id={`sip_netmask_${i}`}
-                          name={`sip_netmask${i}`}
-                          placeholder="32"
-                          value={g.netmask}
-                          options={NETMASK_OPTIONS}
-                          onChange={(e) => {
-                            updateSipGateways(i, "netmask", e.target.value);
-                          }}
-                        />
-                      </div>
+                      {g.outbound ? (
+                        <div>
+                          <Selector
+                            id={`sip_protocol_${i}`}
+                            name={`sip_protocol${i}`}
+                            placeholder=""
+                            value={g.protocol}
+                            options={SIP_GATEWAY_PROTOCOL_OPTIONS}
+                            onChange={(e) => {
+                              updateSipGateways(i, "protocol", e.target.value);
+                            }}
+                          />
+                        </div>
+                      ) : (
+                        <div>
+                          <Selector
+                            id={`sip_netmask_${i}`}
+                            name={`sip_netmask${i}`}
+                            placeholder="32"
+                            value={g.netmask}
+                            options={NETMASK_OPTIONS}
+                            onChange={(e) => {
+                              updateSipGateways(i, "netmask", e.target.value);
+                            }}
+                          />
+                        </div>
+                      )}
                    </div>
                    <div>
+                      <div>
+                        <label
+                          htmlFor={`sip__gw_is_active_${i}`}
+                          className="chk"
+                        >
+                          <input
+                            id={`sip__gw_is_active_${i}`}
+                            name={`sip__gw_is_active_${i}`}
+                            type="checkbox"
+                            checked={g.is_active ? true : false}
+                            onChange={(e) => {
+                              updateSipGateways(
+                                i,
+                                "is_active",
+                                e.target.checked ? 1 : 0
+                              );
+                            }}
+                          />
+                          <div>Active</div>
+                        </label>
+                      </div>
                      <div>
                        <label htmlFor={`sip_inbound_${i}`} className="chk">
                          <input
--- a/src/containers/internal/views/carriers/index.tsx
+++ b/src/containers/internal/views/carriers/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { Button, H1, Icon, M } from "jambonz-ui";
+import { Button, H1, Icon, M } from "@jambonz/ui-kit";
 import {
  deleteCarrier,
  deleteSipGateway,
@@ -29,6 +29,7 @@ import {
 import {
  API_SIP_GATEWAY,
  API_SMPP_GATEWAY,
+  CARRIER_REG_OK,
  USER_ACCOUNT,
 } from "src/api/constants";
 import { DeleteCarrier } from "./delete";
@@ -51,7 +52,6 @@ export const Carriers = () => {
    setAccountSid(getAccountFilter());
    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
      setAccountSid(user?.account_sid);
-      return carriers;
    }

    return carriers
@@ -197,6 +197,26 @@ export const Carriers = () => {
                        <span>{carrier.is_active ? "Active" : "Inactive"}</span>
                      </div>
                    </div>
+                    {Boolean(carrier.requires_register) && (
+                      <div
+                        className={`i txt--${
+                          carrier.register_status.status === CARRIER_REG_OK
+                            ? "teal"
+                            : "jam"
+                        }`}
+                      >
+                        {carrier.register_status.status === CARRIER_REG_OK ? (
+                          <Icons.CheckCircle />
+                        ) : (
+                          <Icons.XCircle />
+                        )}
+                        <span>
+                          {carrier.register_status.status === CARRIER_REG_OK
+                            ? "Registered"
+                            : "Unregistered"}
+                        </span>
+                      </div>
+                    )}
                    <Gateways carrier={carrier} />
                  </div>
                </div>
--- a/src/containers/internal/views/carriers/pcap.tsx
+++ b/src/containers/internal/views/carriers/pcap.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  getRecentCall,
+  getServiceProviderRecentCall,
+  getPcap,
+  getServiceProviderPcap,
+} from "src/api";
+import { toastError } from "src/store";
+
+import type { Pcap } from "src/api/types";
+
+type PcapButtonProps = {
+  accountSid: string;
+  serviceProviderSid: string;
+  sipCallId: string;
+};
+
+export const PcapButton = ({
+  accountSid,
+  serviceProviderSid,
+  sipCallId,
+}: PcapButtonProps) => {
+  const [pcap, setPcap] = useState<Pcap>();
+
+  useEffect(() => {
+    const p = accountSid
+      ? getRecentCall(accountSid, sipCallId)
+      : getServiceProviderRecentCall(serviceProviderSid, sipCallId);
+    p.then(({ json }) => {
+      if (json.total > 0) {
+        const p1 = accountSid
+          ? getPcap(accountSid, sipCallId)
+          : getServiceProviderPcap(serviceProviderSid, sipCallId);
+        p1.then(({ blob }) => {
+          if (blob) {
+            setPcap({
+              data_url: URL.createObjectURL(blob),
+              file_name: `callid-${sipCallId}.pcap`,
+            });
+          }
+        }).catch((error) => {
+          toastError(error.msg);
+        });
+      }
+    }).catch((error) => {
+      toastError(error.msg);
+    });
+  }, []);
+
+  if (pcap) {
+    return (
+      <a
+        href={pcap.data_url}
+        download={pcap.file_name}
+        className="btn btn--small pcap"
+      >
+        Download pcap
+      </a>
+    );
+  }
+
+  return null;
+};
--- a/src/containers/internal/views/carriers/register-status.tsx
+++ b/src/containers/internal/views/carriers/register-status.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Carrier } from "src/api/types";
+import { Icons } from "src/components";
+import { CARRIER_REG_OK } from "src/api/constants";
+import { MS } from "@jambonz/ui-kit";
+import { PcapButton } from "./pcap";
+
+type CarrierProps = {
+  carrier: Carrier;
+};
+
+export const RegisterStatus = ({ carrier }: CarrierProps) => {
+  const renderStatus = () => {
+    return (
+      <div
+        className={`i txt--${
+          carrier.register_status.status
+            ? carrier.register_status.status === CARRIER_REG_OK
+              ? "teal"
+              : "jam"
+            : "jean"
+        }`}
+        title={carrier.register_status.reason || "Not Started"}
+      >
+        {carrier.register_status.status === CARRIER_REG_OK ? (
+          <Icons.CheckCircle />
+        ) : (
+          <Icons.XCircle />
+        )}
+        <span>
+          {carrier.register_status.status
+            ? `Status ${carrier.register_status.status}`
+            : "Not Started"}
+        </span>
+      </div>
+    );
+  };
+
+  return (
+    <details className={carrier.register_status.status || "not-tested"}>
+      <summary>{renderStatus()}</summary>
+      <MS>
+        <strong>Reason:</strong>{" "}
+        {carrier.register_status.reason || "Not Started"}
+      </MS>
+      <PcapButton
+        accountSid={carrier.account_sid || ""}
+        serviceProviderSid={carrier.service_provider_sid}
+        sipCallId={carrier.register_status.callId || ""}
+      />
+    </details>
+  );
+};
--- a/src/containers/internal/views/least-cost-routing/add.tsx
+++ b/src/containers/internal/views/least-cost-routing/add.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { H1, M } from "@jambonz/ui-kit";
+
+import { LcrForm } from "./form";
+
+export const AddLcr = () => {
+  return (
+    <>
+      <H1 className="h2">Add outbound call routes</H1>
+      <section>
+        <M>
+          Outbound call routing is used to select a carrier when there are
+          multiple carriers available.
+        </M>
+      </section>
+      <LcrForm />
+    </>
+  );
+};
+
+export default AddLcr;
--- a/src/containers/internal/views/least-cost-routing/card.tsx
+++ b/src/containers/internal/views/least-cost-routing/card.tsx
@@ -0,0 +1,176 @@
+import React from "react";
+import { Icon } from "@jambonz/ui-kit";
+import { Identifier, XYCoord } from "dnd-core";
+import { useRef } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { LcrRoute } from "src/api/types";
+import { Icons } from "src/components";
+import { Selector } from "src/components/forms";
+import { SelectorOption } from "src/components/forms/selector";
+import "./styles.scss";
+
+interface DragItem {
+  index: number;
+  type: string;
+}
+
+const ItemTypes = {
+  CARD: "card",
+};
+
+type CardProps = {
+  lr: LcrRoute;
+  index: number;
+  moveCard: (dragIndex: number, hoverIndex: number) => void;
+  updateLcrRoute: (index: number, key: string, value: unknown) => void;
+  updateLcrCarrierSetEntries: (
+    index1: number,
+    index2: number,
+    key: string,
+    value: unknown
+  ) => void;
+  handleRouteDelete: (lr: LcrRoute, index: number) => void;
+  carrierSelectorOptions: SelectorOption[];
+};
+
+export const Card = ({
+  lr,
+  index,
+  moveCard,
+  updateLcrRoute,
+  updateLcrCarrierSetEntries,
+  handleRouteDelete,
+  carrierSelectorOptions,
+}: CardProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [{ handlerId }, drop] = useDrop<
+    DragItem,
+    void,
+    { handlerId: Identifier | null }
+  >({
+    accept: ItemTypes.CARD,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    hover(item: DragItem, monitor) {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+      // Get vertical middle
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+
+      // Get pixels to the top
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      // Time to actually perform the action
+      moveCard(dragIndex, hoverIndex);
+
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    },
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.CARD,
+    item: () => {
+      return { index };
+    },
+    collect: (monitor) => {
+      return { isDragging: monitor.isDragging() };
+    },
+  });
+
+  drag(drop(ref));
+
+  return (
+    <div
+      ref={ref}
+      className={`lcr lcr--route lcr-card lcr-card-${
+        isDragging ? "disappear" : "appear"
+      }`}
+      handler-id={handlerId}
+    >
+      <div>
+        <input
+          id={`lcr_route_regex_${index}`}
+          name={`lcr_route_regex_${index}`}
+          type="text"
+          placeholder="Digit prefix or regex"
+          required
+          value={lr.regex || ""}
+          onChange={(e) => {
+            updateLcrRoute(index, "regex", e.target.value);
+          }}
+        />
+
+        <Selector
+          id={`lcr_carrier_set_entry_carrier_${index}`}
+          name={`lcr_carrier_set_entry_carrier_${index}`}
+          placeholder="Carrier"
+          value={
+            lr.lcr_carrier_set_entries && lr.lcr_carrier_set_entries.length > 0
+              ? lr.lcr_carrier_set_entries[0].voip_carrier_sid
+                ? lr.lcr_carrier_set_entries[0].voip_carrier_sid
+                : ""
+              : ""
+          }
+          required
+          options={carrierSelectorOptions}
+          onChange={(e) => {
+            updateLcrCarrierSetEntries(
+              index,
+              0,
+              "voip_carrier_sid",
+              e.target.value
+            );
+          }}
+        />
+      </div>
+      <button
+        className="btnty btn__delete"
+        title="Delete route"
+        type="button"
+        onClick={() => handleRouteDelete(lr, index)}
+      >
+        <Icon>
+          <Icons.Trash2 />
+        </Icon>
+      </button>
+    </div>
+  );
+};
+export default Card;
--- a/src/containers/internal/views/least-cost-routing/container.tsx
+++ b/src/containers/internal/views/least-cost-routing/container.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { LcrRoute } from "src/api/types";
+import Card from "./card";
+import { hasLength } from "src/utils";
+import update from "immutability-helper";
+import { deleteLcrRoute } from "src/api";
+import { toastError, toastSuccess } from "src/store";
+import { SelectorOption } from "src/components/forms/selector";
+import { NOT_AVAILABLE_PREFIX } from "src/constants";
+
+type ContainerProps = {
+  lcrRoute: [LcrRoute[], React.Dispatch<React.SetStateAction<LcrRoute[]>>];
+  carrierSelectorOptions: SelectorOption[];
+};
+
+export const Container = ({
+  lcrRoute: [lcrRoutes, setLcrRoutes],
+  carrierSelectorOptions,
+}: ContainerProps) => {
+  const moveCard = (dragIndex: number, hoverIndex: number) => {
+    setLcrRoutes((prevCards) =>
+      update(prevCards, {
+        $splice: [
+          [dragIndex, 1],
+          [hoverIndex, 0, prevCards[dragIndex]],
+        ],
+      })
+    );
+  };
+
+  const updateLcrRoute = (index: number, key: string, value: unknown) => {
+    setLcrRoutes(
+      lcrRoutes.map((lr, i) => (i === index ? { ...lr, [key]: value } : lr))
+    );
+  };
+
+  const updateLcrCarrierSetEntries = (
+    index1: number,
+    index2: number,
+    key: string,
+    value: unknown
+  ) => {
+    setLcrRoutes(
+      lcrRoutes.map((lr, i) =>
+        i === index1
+          ? {
+              ...lr,
+              lcr_carrier_set_entries: lr.lcr_carrier_set_entries?.map(
+                (entry, j) =>
+                  j === index2
+                    ? {
+                        ...entry,
+                        [key]: value,
+                      }
+                    : entry
+              ),
+            }
+          : lr
+      )
+    );
+  };
+
+  const handleRouteDelete = (r: LcrRoute | undefined, index: number) => {
+    if (
+      r &&
+      r.lcr_route_sid &&
+      !r.lcr_route_sid.startsWith(NOT_AVAILABLE_PREFIX)
+    ) {
+      deleteLcrRoute(r.lcr_route_sid)
+        .then(() => {
+          toastSuccess("Least cost routing rule successfully deleted");
+        })
+        .catch((error) => {
+          toastError(error);
+        });
+    }
+    setLcrRoutes(lcrRoutes.filter((g2, i) => i !== index));
+  };
+
+  return (
+    <>
+      {hasLength(lcrRoutes) &&
+        lcrRoutes.map((lr, i) => (
+          <Card
+            key={lr.lcr_route_sid}
+            lr={lr}
+            index={i}
+            moveCard={moveCard}
+            updateLcrRoute={updateLcrRoute}
+            updateLcrCarrierSetEntries={updateLcrCarrierSetEntries}
+            handleRouteDelete={handleRouteDelete}
+            carrierSelectorOptions={carrierSelectorOptions}
+          />
+        ))}
+    </>
+  );
+};
+
+export default Container;
--- a/src/containers/internal/views/least-cost-routing/delete.tsx
+++ b/src/containers/internal/views/least-cost-routing/delete.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { P } from "@jambonz/ui-kit";
+import { Modal } from "src/components";
+import { Lcr } from "src/api/types";
+
+type DeleteProps = {
+  lcr: Lcr;
+  handleCancel: () => void;
+  handleSubmit: () => void;
+};
+
+export const DeleteLcr = ({ lcr, handleCancel, handleSubmit }: DeleteProps) => {
+  return (
+    <>
+      <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
+        <P>
+          Are you sure you want to delete least cost routing{" "}
+          <strong>{lcr.name}</strong>?
+        </P>
+      </Modal>
+    </>
+  );
+};
+
+export default DeleteLcr;
--- a/src/containers/internal/views/least-cost-routing/edit.tsx
+++ b/src/containers/internal/views/least-cost-routing/edit.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { H1, M } from "@jambonz/ui-kit";
+import LcrForm from "./form";
+import { useApiData } from "src/api";
+import { Lcr, LcrRoute } from "src/api/types";
+import { useParams } from "react-router-dom";
+export const EditLcr = () => {
+  const params = useParams();
+  const [lcrData, lcrRefect, lcrError] = useApiData<Lcr>(
+    `Lcrs/${params.lcr_sid}`
+  );
+  const [lcrRouteData, lcrRouteRefect, lcrRouteError] = useApiData<LcrRoute[]>(
+    `LcrRoutes?lcr_sid=${params.lcr_sid}`
+  );
+  return (
+    <>
+      <H1 className="h2">Edit outbound call routes</H1>
+      <section>
+        <M>
+          Outbound call routing is used to select a carrier when there are
+          multiple carriers available.
+        </M>
+      </section>
+      <LcrForm
+        lcrDataMap={{ data: lcrData, refetch: lcrRefect, error: lcrError }}
+        lcrRouteDataMap={{
+          data: lcrRouteData,
+          refetch: lcrRouteRefect,
+          error: lcrRouteError,
+        }}
+      />
+    </>
+  );
+};
+
+export default EditLcr;
--- a/src/containers/internal/views/least-cost-routing/form.tsx
+++ b/src/containers/internal/views/least-cost-routing/form.tsx
@@ -0,0 +1,598 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Button, ButtonGroup, Icon, MS, MXS } from "@jambonz/ui-kit";
+import { Icons, Section } from "src/components";
+import {
+  toastError,
+  toastSuccess,
+  useDispatch,
+  useSelectState,
+} from "src/store";
+import { MSG_REQUIRED_FIELDS, NOT_AVAILABLE_PREFIX } from "src/constants";
+import { setLocation } from "src/store/localStore";
+import { AccountSelect, Message, Selector } from "src/components/forms";
+import type {
+  Account,
+  Carrier,
+  Lcr,
+  LcrCarrierSetEntry,
+  LcrRoute,
+  UseApiDataMap,
+} from "src/api/types";
+import { ROUTE_INTERNAL_LEST_COST_ROUTING } from "src/router/routes";
+import {
+  deleteLcr,
+  postLcrCarrierSetEntry,
+  putLcrCarrierSetEntries,
+  putLcrRoutes,
+  putLcr,
+  useApiData,
+  useServiceProviderData,
+  getLcrRoute,
+} from "src/api";
+import { USER_ACCOUNT, USER_ADMIN } from "src/api/constants";
+import { postLcr } from "src/api";
+import { postLcrRoute } from "src/api";
+import DeleteLcr from "./delete";
+import { Scope } from "src/store/types";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import Container from "./container";
+import { v4 } from "uuid";
+
+type LcrFormProps = {
+  lcrDataMap?: UseApiDataMap<Lcr>;
+  lcrRouteDataMap?: UseApiDataMap<LcrRoute[]>;
+};
+
+export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
+  const LCR_ROUTE_TEMPLATE: LcrRoute = {
+    lcr_route_sid: `${NOT_AVAILABLE_PREFIX}${v4()}`,
+    regex: "",
+    lcr_sid: "",
+    priority: 0,
+    lcr_carrier_set_entries: [
+      {
+        lcr_route_sid: "",
+        voip_carrier_sid: "",
+        priority: 0,
+      },
+    ],
+  };
+
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const [errorMessage, setErrorMessage] = useState("");
+  const [lcrName, setLcrName] = useState("");
+  const [defaultLcrCarrier, setDefaultLcrCarrier] = useState("");
+  const [defaultLcrCarrierSetEntrySid, setDefaultLcrCarrierSetEntrySid] =
+    useState<string | null>();
+  const [defaultLcrRouteSid, setDefaultLcrRouteSid] = useState("");
+  const [defaultCarrier, setDefaultCarrier] = useState("");
+  const [apiUrl, setApiUrl] = useState("");
+  const [accountSid, setAccountSid] = useState("");
+  const [isActive, setIsActive] = useState(true);
+  const [lcrRoutes, setLcrRoutes] = useState<LcrRoute[]>([LCR_ROUTE_TEMPLATE]);
+  const [previousLcrRoutes, setPreviousLcrRoutes] = useState<LcrRoute[]>([
+    LCR_ROUTE_TEMPLATE,
+  ]);
+  const [previouseLcr, setPreviousLcr] = useState<Lcr | null>();
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+  const [lcrForDelete, setLcrForDelete] = useState<Lcr | null>();
+
+  const user = useSelectState("user");
+  const currentServiceProvider = useSelectState("currentServiceProvider");
+  const [carriers] = useApiData<Carrier[]>(apiUrl);
+
+  useEffect(() => {
+    setLocation();
+    if (currentServiceProvider) {
+      setApiUrl(
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
+      );
+    }
+  }, [user, currentServiceProvider, accountSid]);
+
+  const carrierSelectorOptions = useMemo(() => {
+    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
+      setAccountSid(user?.account_sid);
+    }
+
+    const carriersFiltered = carriers
+      ? carriers.filter((carrier) =>
+          accountSid
+            ? carrier.account_sid === accountSid
+            : carrier.account_sid === null
+        )
+      : [];
+
+    const ret = carriersFiltered
+      ? carriersFiltered.map((c: Carrier, i) => {
+          if (i === 0) {
+            setDefaultCarrier(c.voip_carrier_sid);
+          }
+          return {
+            name: c.name,
+            value: c.voip_carrier_sid,
+          };
+        })
+      : [];
+    if (carriers && ret.length === 0) {
+      setErrorMessage(
+        accountSid
+          ? "There are no available carriers defined for this account"
+          : "There are no available carriers"
+      );
+    } else {
+      setErrorMessage("");
+    }
+    return ret;
+  }, [accountSid, carriers]);
+
+  if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
+    setLcrName(lcrDataMap.data.name || "");
+    setIsActive(lcrDataMap.data.is_active);
+    setPreviousLcr(lcrDataMap.data);
+  }
+
+  if (
+    lcrRouteDataMap &&
+    lcrRouteDataMap.data &&
+    lcrRouteDataMap.data !== previousLcrRoutes
+  ) {
+    setPreviousLcrRoutes(lcrRouteDataMap.data);
+    // Find default carrier
+    lcrRouteDataMap.data.forEach((lr) => {
+      lr.lcr_carrier_set_entries?.forEach((entry) => {
+        if (
+          entry.lcr_carrier_set_entry_sid ===
+          lcrDataMap?.data?.default_carrier_set_entry_sid
+        ) {
+          setDefaultLcrCarrier(entry.voip_carrier_sid || defaultCarrier);
+          setDefaultLcrCarrierSetEntrySid(
+            entry.lcr_carrier_set_entry_sid || null
+          );
+          setDefaultLcrRouteSid(entry.lcr_route_sid || "");
+        }
+      });
+    });
+  }
+
+  useMemo(() => {
+    if (lcrRouteDataMap && lcrRouteDataMap.data)
+      setLcrRoutes(
+        lcrRouteDataMap.data.filter(
+          (route) => route.lcr_route_sid !== defaultLcrRouteSid
+        )
+      );
+  }, [defaultLcrRouteSid]);
+
+  const addLcrRoutes = () => {
+    const ls = [
+      ...lcrRoutes,
+      {
+        ...LCR_ROUTE_TEMPLATE,
+        priority: lcrRoutes.length,
+      },
+    ];
+    setLcrRoutes(ls);
+  };
+
+  const getLcrPayload = (): Lcr => {
+    return {
+      name: lcrName,
+      is_active: isActive,
+      account_sid: accountSid,
+      service_provider_sid:
+        currentServiceProvider?.service_provider_sid || null,
+      default_carrier_set_entry_sid: defaultLcrCarrierSetEntrySid,
+    };
+  };
+
+  const handleLcrPost = () => {
+    const lcrPayload: Lcr = getLcrPayload();
+    postLcr(lcrPayload)
+      .then(({ json }) => {
+        Promise.all(
+          lcrRoutes.map((route, i) => handleLcrRoutePost(json.sid, route, i))
+        )
+          .then(() => {
+            handleLcrDefaultCarrierPost(json.sid);
+          })
+          .catch(({ msg }) => {
+            toastError(msg);
+          });
+      })
+      .catch(({ msg }) => {
+        toastError(msg);
+      });
+  };
+
+  const handleLcrDefaultCarrierPost = (lcr_sid: string) => {
+    const defaultRoute = {
+      lcr_sid: lcr_sid,
+      regex: ".*",
+      desciption: "System Default Route",
+      priority: 9999,
+      lcr_carrier_set_entries: [
+        {
+          lcr_route_sid: "",
+          voip_carrier_sid: defaultLcrCarrier,
+          priority: 0,
+        },
+      ],
+    };
+
+    handleLcrRoutePost(lcr_sid, defaultRoute, 9999).then((lcr_route_sid) => {
+      // There is small hack here to wait the data commited in bd for lcr entries
+      new Promise(async (r) => setTimeout(() => r(0), 300)).then(() => {
+        getLcrRoute(lcr_route_sid).then(({ json }) => {
+          if (json.lcr_carrier_set_entries?.length) {
+            const lcr_carrier_set_entry_sid =
+              json.lcr_carrier_set_entries[0].lcr_carrier_set_entry_sid;
+            putLcr(lcr_sid, {
+              default_carrier_set_entry_sid: lcr_carrier_set_entry_sid,
+            })
+              .then(() => {
+                if (lcrDataMap) {
+                  toastSuccess("Least cost routing successfully updated");
+                } else {
+                  toastSuccess("Least cost routing successfully created");
+                  if (user?.access === Scope.admin) {
+                    navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
+                  } else {
+                    navigate(
+                      `${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr_sid}/edit`
+                    );
+                  }
+                  // Update global state
+                  dispatch({ type: "lcr" });
+                }
+              })
+              .catch((error) => {
+                toastError(error);
+              });
+          }
+        });
+      });
+    });
+  };
+
+  const handleLcrRoutePost = (
+    lcr_sid: string,
+    route: LcrRoute,
+    priority: number
+  ): Promise<string> => {
+    return new Promise(async (resolve, reject) => {
+      const lcrRoutePayload: LcrRoute = {
+        lcr_sid,
+        regex: route.regex,
+        priority,
+      };
+      postLcrRoute(lcrRoutePayload)
+        .then(({ json }) => {
+          if (route.lcr_carrier_set_entries) {
+            Promise.all(
+              route.lcr_carrier_set_entries.map((entry) => {
+                handleLcrCarrierSetEntryPost(json.sid, entry);
+              })
+            )
+              .then(() => {
+                resolve(json.sid);
+              })
+              .catch((error) => {
+                reject(error);
+              });
+          }
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  };
+
+  const handleLcrCarrierSetEntryPost = (
+    lcr_route_sid: string,
+    entry: LcrCarrierSetEntry
+  ): Promise<string> => {
+    const lcrCarrierSetEntryPayload: LcrCarrierSetEntry = {
+      ...entry,
+      voip_carrier_sid: entry.voip_carrier_sid || defaultCarrier,
+      lcr_route_sid,
+    };
+    return new Promise<string>(async (r, e) => {
+      postLcrCarrierSetEntry(lcrCarrierSetEntryPayload)
+        .then(({ json }) => r(json.sid))
+        .catch((error) => e(error));
+    });
+  };
+
+  const handleLcrPut = () => {
+    if (lcrDataMap && lcrDataMap.data && lcrDataMap.data.lcr_sid) {
+      // update LCR
+      const lcrPayload: Lcr = getLcrPayload();
+      putLcr(lcrDataMap.data.lcr_sid, lcrPayload).then(() => {
+        Promise.all(
+          lcrRoutes.map((route, i) => {
+            if (
+              route.lcr_route_sid &&
+              !route.lcr_route_sid?.startsWith(NOT_AVAILABLE_PREFIX)
+            ) {
+              handleLcrRoutePut(
+                lcrDataMap.data?.lcr_sid || "",
+                route.lcr_route_sid,
+                route,
+                i
+              );
+            } else {
+              handleLcrRoutePost(lcrDataMap.data?.lcr_sid || "", route, i);
+            }
+          })
+        )
+          .then(() => {
+            if (defaultLcrCarrierSetEntrySid) {
+              const defaultEntry: LcrCarrierSetEntry = {
+                lcr_route_sid: defaultLcrRouteSid,
+                voip_carrier_sid: defaultLcrCarrier,
+                priority: 0,
+              };
+
+              handleLcrCarrierEntryPut(
+                defaultLcrRouteSid,
+                defaultLcrCarrierSetEntrySid,
+                defaultEntry
+              ).then(() => {
+                toastSuccess("Least cost routing rule successfully updated");
+              });
+            }
+          })
+          .catch((error) => toastError(error));
+      });
+    }
+
+    const handleLcrRoutePut = (
+      lcr_sid: string,
+      lcr_route_sid: string,
+      route: LcrRoute,
+      priority: number
+    ): Promise<string> => {
+      return new Promise(async (resolve, reject) => {
+        const lcrRoutePayload: LcrRoute = {
+          lcr_sid,
+          regex: route.regex,
+          priority,
+        };
+        putLcrRoutes(lcr_route_sid, lcrRoutePayload).then(() => {
+          if (
+            route.lcr_carrier_set_entries &&
+            route.lcr_carrier_set_entries.length > 0
+          ) {
+            Promise.all(
+              route.lcr_carrier_set_entries.map((entry) => {
+                if (entry.lcr_carrier_set_entry_sid) {
+                  return handleLcrCarrierEntryPut(
+                    entry.lcr_route_sid || lcr_route_sid,
+                    entry.lcr_carrier_set_entry_sid,
+                    entry
+                  );
+                } else {
+                  return handleLcrCarrierSetEntryPost(lcr_route_sid, entry);
+                }
+              })
+            )
+              .then(() => {
+                resolve("Least cost routing rule successfully updated");
+              })
+              .catch((error) => {
+                reject(error);
+              });
+          }
+        });
+      });
+    };
+
+    const handleLcrCarrierEntryPut = (
+      lcr_route_sid: string,
+      lcr_carrier_set_entry_sid: string,
+      entry: LcrCarrierSetEntry
+    ): Promise<string> => {
+      const lcrCarrierSetEntryPayload: LcrCarrierSetEntry = {
+        lcr_route_sid,
+        workload: entry.workload,
+        voip_carrier_sid: entry.voip_carrier_sid || defaultCarrier,
+        priority: entry.priority,
+      };
+      return new Promise<string>(async (r, e) => {
+        putLcrCarrierSetEntries(
+          lcr_carrier_set_entry_sid,
+          lcrCarrierSetEntryPayload
+        )
+          .then(() => r("success"))
+          .catch((error) => e(error));
+      });
+    };
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (lcrDataMap) {
+      handleLcrPut();
+    } else {
+      handleLcrPost();
+    }
+  };
+
+  const handleDelete = () => {
+    if (lcrForDelete) {
+      deleteLcr(lcrForDelete.lcr_sid || "")
+        .then(() => {
+          toastSuccess(
+            <>
+              Deleted least cost routing <strong>{lcrForDelete?.name}</strong>
+            </>
+          );
+          setLcrForDelete(null);
+          if (user?.access === Scope.admin) {
+            navigate(ROUTE_INTERNAL_LEST_COST_ROUTING);
+          } else {
+            navigate(`${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`);
+          }
+          dispatch({ type: "lcr" });
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  return (
+    <>
+      <Section slim>
+        <form className="form form--internal" onSubmit={handleSubmit}>
+          <fieldset>
+            <MS>{MSG_REQUIRED_FIELDS}</MS>
+            {errorMessage && <Message message={errorMessage} />}
+          </fieldset>
+          <fieldset>
+            <div className="multi">
+              <div className="inp">
+                <label htmlFor="lcr_name">Name</label>
+                <input
+                  id="lcr_name"
+                  name="lcr_name"
+                  type="text"
+                  placeholder="name"
+                  value={lcrName}
+                  onChange={(e) => setLcrName(e.target.value)}
+                />
+              </div>
+            </div>
+            <label htmlFor="is_active" className="chk">
+              <input
+                id="is_active"
+                name="is_active"
+                type="checkbox"
+                checked={isActive}
+                onChange={(e) => setIsActive(e.target.checked)}
+              />
+              <div>Active</div>
+            </label>
+            <div className="sel sel--preset">
+              <label htmlFor="predefined_select">
+                Select a default outbound carrier<span>*</span>
+              </label>
+              <Selector
+                id="defailt_carrier"
+                name="defailt_carrier"
+                value={defaultLcrCarrier}
+                options={carrierSelectorOptions}
+                required
+                onChange={(e) => {
+                  setDefaultLcrCarrier(e.target.value);
+                }}
+              />
+            </div>
+          </fieldset>
+          {user?.scope === USER_ADMIN && (
+            <fieldset>
+              <AccountSelect
+                accounts={accounts}
+                account={[accountSid, setAccountSid]}
+                label="Used by"
+                required={false}
+                defaultOption={true}
+                disabled={lcrDataMap !== undefined}
+              />
+            </fieldset>
+          )}
+          <fieldset>
+            <label htmlFor="lcr_route">
+              Route based on first match<span>*</span>
+            </label>
+            <MXS>
+              <em>Drag and drop to rearrange the order.</em>
+            </MXS>
+            <label htmlFor="sip_gateways">Digit pattern / Carrier</label>
+            <DndProvider backend={HTML5Backend}>
+              <Container
+                lcrRoute={[lcrRoutes, setLcrRoutes]}
+                carrierSelectorOptions={carrierSelectorOptions}
+              />
+            </DndProvider>
+            <ButtonGroup left>
+              <button
+                className="btnty"
+                type="button"
+                title="Add route"
+                onClick={() => {
+                  addLcrRoutes();
+                }}
+              >
+                <Icon subStyle="teal">
+                  <Icons.Plus />
+                </Icon>
+              </button>
+            </ButtonGroup>
+          </fieldset>
+          <fieldset>
+            <div className="grid grid--col3">
+              <div className="grid__row">
+                <div>
+                  <ButtonGroup left>
+                    {user?.access === Scope.admin && (
+                      <Button
+                        small
+                        subStyle="grey"
+                        as={Link}
+                        to={ROUTE_INTERNAL_LEST_COST_ROUTING}
+                      >
+                        Cancel
+                      </Button>
+                    )}
+                    <Button
+                      type="submit"
+                      small
+                      disabled={carrierSelectorOptions.length === 0}
+                    >
+                      Save
+                    </Button>
+                  </ButtonGroup>
+                </div>
+                <div />
+                <div>
+                  {user?.scope !== USER_ADMIN &&
+                    lcrDataMap &&
+                    lcrDataMap.data &&
+                    lcrDataMap.data.lcr_sid && (
+                      <ButtonGroup right>
+                        <Button
+                          type="button"
+                          small
+                          subStyle="grey"
+                          onClick={() => {
+                            setLcrForDelete(lcrDataMap.data);
+                          }}
+                        >
+                          Delete
+                        </Button>
+                      </ButtonGroup>
+                    )}
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </form>
+      </Section>
+      {lcrForDelete && (
+        <DeleteLcr
+          lcr={lcrForDelete}
+          handleCancel={() => setLcrForDelete(null)}
+          handleSubmit={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default LcrForm;
--- a/src/containers/internal/views/least-cost-routing/index.tsx
+++ b/src/containers/internal/views/least-cost-routing/index.tsx
@@ -0,0 +1,223 @@
+import React, { useMemo } from "react";
+import { Button, H1, Icon, M } from "@jambonz/ui-kit";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { deleteLcr, useApiData, useServiceProviderData } from "src/api";
+// import { USER_ACCOUNT } from "src/api/constants";
+import type { Account, Lcr } from "src/api/types";
+import {
+  AccountFilter,
+  Icons,
+  SearchFilter,
+  Section,
+  Spinner,
+} from "src/components";
+import { ScopedAccess } from "src/components/scoped-access";
+import { ROUTE_INTERNAL_LEST_COST_ROUTING } from "src/router/routes";
+import { toastSuccess, toastError, useSelectState } from "src/store";
+// import { getAccountFilter, setLocation } from "src/store/localStore";
+import { Scope } from "src/store/types";
+import {
+  hasLength,
+  hasValue,
+  useFilteredResults,
+  useScopedRedirect,
+} from "src/utils";
+import { USER_ACCOUNT } from "src/api/constants";
+import DeleteLcr from "./delete";
+
+export const Lcrs = () => {
+  const user = useSelectState("user");
+  useScopedRedirect(
+    Scope.admin,
+    `${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`,
+    user,
+    "You do not have permissions to manage all outbound call routes"
+  );
+  const [lcrs, refetch] = useApiData<Lcr[]>("Lcrs");
+  const [filter, setFilter] = useState("");
+  const [accountSid, setAccountSid] = useState("");
+
+  const currentServiceProvider = useSelectState("currentServiceProvider");
+  const [lcr, setLcr] = useState<Lcr | null>();
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+
+  const lcrsFiltered = useMemo(() => {
+    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
+      setAccountSid(user?.account_sid);
+      return lcrs;
+    }
+
+    return lcrs
+      ? lcrs.filter((lcr) =>
+          accountSid
+            ? lcr.account_sid === accountSid
+            : currentServiceProvider?.service_provider_sid
+            ? lcr.service_provider_sid ==
+              currentServiceProvider.service_provider_sid
+            : lcr.account_sid === null
+        )
+      : [];
+  }, [accountSid, lcrs]);
+  const filteredLcrs = useFilteredResults<Lcr>(filter, lcrsFiltered);
+
+  const handleDelete = () => {
+    if (lcr) {
+      deleteLcr(lcr.lcr_sid || "")
+        .then(() => {
+          toastSuccess(
+            <>
+              Deleted outbound call route <strong>{lcr?.name}</strong>
+            </>
+          );
+          setLcr(null);
+          refetch();
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  return (
+    <>
+      <section className="mast">
+        <H1 className="h2">Outbound call routing</H1>
+        <Link
+          to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`}
+          title="Add a Least cost routing"
+        >
+          {" "}
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Link>
+      </section>
+      <section>
+        <M>
+          Outbound call routing is used to select a carrier when there are
+          multiple carriers available.
+        </M>
+      </section>
+      <section className="filters filters--spaced">
+        <SearchFilter placeholder="Filter lcrs" filter={[filter, setFilter]} />
+        <ScopedAccess user={user} scope={Scope.admin}>
+          <AccountFilter
+            account={[accountSid, setAccountSid]}
+            accounts={accounts}
+            label="Used by"
+            defaultOption
+          />
+        </ScopedAccess>
+      </section>
+      <Section {...(hasLength(filteredLcrs) && { slim: true })}>
+        <div className="list">
+          {!hasValue(filteredLcrs) && hasLength(accounts) ? (
+            <Spinner />
+          ) : hasLength(filteredLcrs) ? (
+            filteredLcrs.map((lcr) => (
+              <div className="item" key={lcr.lcr_sid}>
+                <div className="item__info">
+                  <div className="item__title">
+                    <ScopedAccess
+                      user={user}
+                      scope={
+                        !lcr.account_sid
+                          ? Scope.service_provider
+                          : Scope.account
+                      }
+                    >
+                      <Link
+                        to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr.lcr_sid}/edit`}
+                        title="Edit outbound call routes"
+                        className="i"
+                      >
+                        <strong>{lcr.name}</strong>
+                        <Icons.ArrowRight />
+                      </Link>
+                    </ScopedAccess>
+                  </div>
+                  <div className="item__meta">
+                    <div>
+                      <div
+                        className={`i txt--${lcr.is_active ? "teal" : "grey"}`}
+                      >
+                        {lcr.is_active ? (
+                          <Icons.CheckCircle />
+                        ) : (
+                          <Icons.XCircle />
+                        )}
+                        <span>{lcr.is_active ? "Active" : "Inactive"}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <div className={`i txt--teal`}>
+                        <Icons.Activity />
+                        <span>
+                          {lcr.account_sid
+                            ? accounts?.find(
+                                (acct) => acct.account_sid === lcr.account_sid
+                              )?.name
+                            : currentServiceProvider?.name}
+                        </span>
+                      </div>
+                    </div>
+                    <div>
+                      <div className={`i txt--teal`}>
+                        <Icons.Share2 />
+                        <span>{`${
+                          lcr.number_routes && lcr.number_routes > 1
+                            ? lcr.number_routes - 1
+                            : 0
+                        } routes`}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <ScopedAccess
+                  user={user}
+                  scope={
+                    !lcr.account_sid ? Scope.service_provider : Scope.account
+                  }
+                >
+                  <div className="item__actions">
+                    <Link
+                      to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/${lcr.lcr_sid}/edit`}
+                      title="Edit carrier"
+                    >
+                      <Icons.Edit3 />
+                    </Link>
+                    <button
+                      type="button"
+                      title="Delete outbound call route"
+                      onClick={() => setLcr(lcr)}
+                      className="btnty"
+                    >
+                      <Icons.Trash />
+                    </button>
+                  </div>
+                </ScopedAccess>
+              </div>
+            ))
+          ) : (
+            <M>No outbound call routes.</M>
+          )}
+        </div>
+      </Section>
+      <Section clean>
+        <Button small as={Link} to={`${ROUTE_INTERNAL_LEST_COST_ROUTING}/add`}>
+          Add outbound call routes
+        </Button>
+      </Section>
+      {lcr && (
+        <DeleteLcr
+          lcr={lcr}
+          handleCancel={() => setLcr(null)}
+          handleSubmit={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default Lcrs;
--- a/src/containers/internal/views/least-cost-routing/styles.scss
+++ b/src/containers/internal/views/least-cost-routing/styles.scss
@@ -0,0 +1,17 @@
+.lcr-card {
+  background-color: white;
+  cursor: pointer;
+}
+
+.lcr-card:hover {
+  box-shadow: -7px 7px 5px #d5d7db, -5px -5px 10px #ffffff;
+  transform: translateY(-3px) translateX(-3px);
+}
+
+.lcr-card-appear {
+  opacity: 1;
+}
+
+.lcr-card-disappear {
+  opacity: 0;
+}
--- a/src/containers/internal/views/ms-teams-tenants/add.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/add.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { MsTeamsTenantForm } from "./form";

--- a/src/containers/internal/views/ms-teams-tenants/delete.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/delete.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { P } from "jambonz-ui";
+import { P } from "@jambonz/ui-kit";

 import { Modal } from "src/components";

--- a/src/containers/internal/views/ms-teams-tenants/edit.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/edit.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
--- a/src/containers/internal/views/ms-teams-tenants/form.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/form.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, ButtonGroup, MS } from "jambonz-ui";
+import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";

 import {
--- a/src/containers/internal/views/ms-teams-tenants/index.tsx
+++ b/src/containers/internal/views/ms-teams-tenants/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { Button, H1, Icon, M } from "jambonz-ui";
+import { Button, H1, Icon, M } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";

 import {
--- a/src/containers/internal/views/phone-numbers/add.tsx
+++ b/src/containers/internal/views/phone-numbers/add.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { PhoneNumberForm } from "./form";

--- a/src/containers/internal/views/phone-numbers/delete.tsx
+++ b/src/containers/internal/views/phone-numbers/delete.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { P } from "jambonz-ui";
+import { P } from "@jambonz/ui-kit";

 import { Modal } from "src/components";

--- a/src/containers/internal/views/phone-numbers/edit.tsx
+++ b/src/containers/internal/views/phone-numbers/edit.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";

 import { useApiData } from "src/api";
--- a/src/containers/internal/views/phone-numbers/form.tsx
+++ b/src/containers/internal/views/phone-numbers/form.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, MS } from "jambonz-ui";
+import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";

--- a/src/containers/internal/views/phone-numbers/index.tsx
+++ b/src/containers/internal/views/phone-numbers/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Button, ButtonGroup, H1, Icon, MS } from "jambonz-ui";
+import { Button, ButtonGroup, H1, Icon, MS } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";

 import {
--- a/src/containers/internal/views/recent-calls/call-detail.tsx
+++ b/src/containers/internal/views/recent-calls/call-detail.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { RecentCall } from "src/api/types";
+
+export type CallDetailProps = {
+  call: RecentCall;
+};
+
+export const CallDetail = ({ call }: CallDetailProps) => {
+  return (
+    <>
+      <div className="item__details">
+        <div className="pre-grid">
+          {Object.keys(call).map((key) => (
+            <React.Fragment key={key}>
+              <div>{key}:</div>
+              <div>
+                {call[key as keyof typeof call]
+                  ? call[key as keyof typeof call].toString()
+                  : "null"}
+              </div>
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CallDetail;
--- a/src/containers/internal/views/recent-calls/call-tracing.tsx
+++ b/src/containers/internal/views/recent-calls/call-tracing.tsx
@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+import { Bar } from "./jaeger/bar";
+import { JaegerGroup, JaegerRoot, JaegerSpan } from "src/api/jaeger-types";
+import { getJaegerTrace } from "src/api";
+import { toastError } from "src/store";
+import { RecentCall } from "src/api/types";
+
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: 100,
+    height: 100,
+  });
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}
+
+export type CallTracingProps = {
+  call: RecentCall;
+};
+
+export const CallTracing = ({ call }: CallTracingProps) => {
+  const [jaegerRoot, setJaegerRoot] = useState<JaegerRoot>();
+  const [jaegerGroup, setJaegerGroup] = useState<JaegerGroup>();
+  const windowSize = useWindowSize();
+
+  const getSpansFromJaegerRoot = (trace: JaegerRoot) => {
+    setJaegerRoot(trace);
+    const spans: JaegerSpan[] = [];
+    trace.resourceSpans.forEach((resourceSpan) => {
+      resourceSpan.instrumentationLibrarySpans.forEach(
+        (instrumentationLibrarySpan) => {
+          instrumentationLibrarySpan.spans.forEach((value) => {
+            const attrs = value.attributes.filter(
+              (attr) =>
+                !(
+                  attr.key.startsWith("telemetry") ||
+                  attr.key.startsWith("internal")
+                )
+            );
+            value.attributes = attrs;
+            spans.push(value);
+          });
+        }
+      );
+    });
+    spans.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
+    return spans;
+  };
+
+  const getGroupsByParent = (spanId: string, groups: JaegerGroup[]) => {
+    groups.sort((a, b) => a.startTimeUnixNano - b.startTimeUnixNano);
+    return groups.filter((value) => value.parentSpanId === spanId);
+  };
+
+  const getRootSpan = (spans: JaegerSpan[]) => {
+    const spanIds = spans.map((value) => value.spanId);
+    return spans.find((value) => spanIds.indexOf(value.parentSpanId) == -1);
+  };
+
+  const getRootGroup = (grps: JaegerGroup[]) => {
+    const spanIds = grps.map((value) => value.spanId);
+    return grps.find((value) => spanIds.indexOf(value.parentSpanId) == -1);
+  };
+
+  const calculateRatio = (span: JaegerSpan) => {
+    const { innerWidth } = window;
+    const durationMs =
+      (span.endTimeUnixNano - span.startTimeUnixNano) / 1_000_000;
+
+    if (durationMs > innerWidth) {
+      const offset = innerWidth > 1200 ? 3 : innerWidth > 800 ? 2.5 : 2;
+      return durationMs / (innerWidth - innerWidth / offset);
+    }
+
+    return 1;
+  };
+
+  const buildSpans = (root: JaegerRoot) => {
+    const spans = getSpansFromJaegerRoot(root);
+    const rootSpan = getRootSpan(spans);
+    if (rootSpan) {
+      const startTime = rootSpan.startTimeUnixNano;
+      const ratio = calculateRatio(rootSpan);
+      calculateRatio(rootSpan);
+      const groups: JaegerGroup[] = spans.map((span) => {
+        const level = 0;
+        const children: JaegerGroup[] = [];
+        const startMs = (span.startTimeUnixNano - startTime) / 1_000_000;
+        const durationMs =
+          (span.endTimeUnixNano - span.startTimeUnixNano) / 1_000_000;
+        const startPx = startMs / ratio;
+        const durationPx = durationMs / ratio;
+        const endPx = startPx + durationPx;
+        const endMs = startMs + durationMs;
+        return {
+          level,
+          children,
+          startPx,
+          endPx,
+          durationPx,
+          startMs,
+          endMs,
+          durationMs,
+          ...span,
+        };
+      });
+
+      const rootGroup = getRootGroup(groups);
+      if (rootGroup) {
+        rootGroup.children = buildChildren(
+          rootGroup.level + 1,
+          rootGroup,
+          groups
+        );
+        setJaegerGroup(rootGroup);
+      }
+    }
+  };
+
+  const buildChildren = (
+    level: number,
+    rootGroup: JaegerGroup,
+    groups: JaegerGroup[]
+  ): JaegerGroup[] => {
+    return getGroupsByParent(rootGroup.spanId, groups).map((group) => {
+      group.level = level;
+      group.children = buildChildren(group.level + 1, group, groups);
+      return group;
+    });
+  };
+
+  useEffect(() => {
+    if (call.trace_id && call.trace_id != "00000000000000000000000000000000") {
+      getJaegerTrace(call.account_sid, call.trace_id)
+        .then(({ json }) => {
+          if (json) {
+            buildSpans(json);
+          }
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (jaegerRoot) {
+      buildSpans(jaegerRoot);
+    }
+  }, [windowSize]);
+
+  if (jaegerGroup) {
+    return (
+      <>
+        <div className="item__details">
+          <div className="barGroup">
+            <Bar group={jaegerGroup} />
+          </div>
+        </div>
+      </>
+    );
+  }
+  return null;
+};
+
+export default CallTracing;
--- a/src/containers/internal/views/recent-calls/details.tsx
+++ b/src/containers/internal/views/recent-calls/details.tsx
@@ -4,8 +4,11 @@ import dayjs from "dayjs";
 import { Icons } from "src/components";
 import { formatPhoneNumber } from "src/utils";
 import { PcapButton } from "./pcap";
-
 import type { RecentCall } from "src/api/types";
+import { Tabs, Tab } from "@jambonz/ui-kit";
+import CallDetail from "./call-detail";
+import CallTracing from "./call-tracing";
+import { DISABLE_JAEGER_TRACING } from "src/api/constants";

 type DetailsItemProps = {
  call: RecentCall;
@@ -13,6 +16,7 @@ type DetailsItemProps = {

 export const DetailsItem = ({ call }: DetailsItemProps) => {
  const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("");

  return (
    <div className="item">
@@ -55,21 +59,30 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
            </div>
          </div>
        </summary>
-        <div className="item__details">
-          <div className="pre-grid">
-            {Object.keys(call).map((key) => (
-              <React.Fragment key={key}>
-                <div>{key}:</div>
-                <div>
-                  {call[key as keyof typeof call]
-                    ? call[key as keyof typeof call].toString()
-                    : "null"}
-                </div>
-              </React.Fragment>
-            ))}
+        {call.trace_id === "00000000000000000000000000000000" ||
+        DISABLE_JAEGER_TRACING ? (
+          <CallDetail call={call} />
+        ) : (
+          <Tabs active={[activeTab, setActiveTab]}>
+            <Tab id="details" label="Details">
+              <CallDetail call={call} />
+            </Tab>
+            <Tab id="tracing" label="Tracing">
+              <CallTracing call={call} />
+            </Tab>
+          </Tabs>
+        )}
+        {open && (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              width: "300px",
+            }}
+          >
+            <PcapButton call={call} />
          </div>
-          {open && <PcapButton call={call} />}
-        </div>
+        )}
      </details>
    </div>
  );
--- a/src/containers/internal/views/recent-calls/index.tsx
+++ b/src/containers/internal/views/recent-calls/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { ButtonGroup, H1, M, MS } from "jambonz-ui";
+import { ButtonGroup, H1, M, MS } from "@jambonz/ui-kit";
 import dayjs from "dayjs";

 import { getRecentCalls, useServiceProviderData } from "src/api";
--- a/src/containers/internal/views/recent-calls/jaeger/bar.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/bar.tsx
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { JaegerGroup } from "src/api/jaeger-types";
+
+import "./styles.scss";
+import { formattedDuration } from "./utils";
+import { JaegerDetail } from "./detail";
+import { ModalClose } from "src/components";
+import { P } from "@jambonz/ui-kit";
+
+type BarProps = {
+  group: JaegerGroup;
+};
+
+export const Bar = ({ group }: BarProps) => {
+  const [jaegerDetail, setJaegerDetail] = useState<JaegerGroup | null>(null);
+  const titleMargin = group.level * 30;
+
+  const truncate = (str: string) => {
+    if (str.length > 36) {
+      return str.substring(0, 36) + "...";
+    }
+    return str;
+  };
+
+  return (
+    <>
+      <div
+        className="barWrapper"
+        role={"presentation"}
+        onClick={() => setJaegerDetail(group)}
+      >
+        <div role="presentation" className="barWrapper__row">
+          <div
+            className="barWrapper__header"
+            style={{ paddingLeft: `${titleMargin}px` }}
+          >
+            {truncate(group.name)}
+          </div>
+          <button
+            className="barWrapper__span"
+            style={{
+              marginLeft: `${group.startPx}px`,
+              width: group.durationPx,
+            }}
+          />
+          <div className="barWrapper__duration">
+            {formattedDuration(group.durationMs)}
+          </div>
+        </div>
+      </div>
+      {jaegerDetail && (
+        <ModalClose handleClose={() => setJaegerDetail(null)}>
+          <div className="spanDetailsWrapper__header">
+            <P>
+              <strong>Span:</strong> {group.name.replaceAll(",", ", ")}
+            </P>
+          </div>
+          <JaegerDetail group={jaegerDetail} />
+        </ModalClose>
+      )}
+      {group.children.map((value) => (
+        <Bar key={value.spanId} group={value} />
+      ))}
+    </>
+  );
+};
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { JaegerGroup, JaegerValue } from "src/api/jaeger-types";
+import dayjs from "dayjs";
+import "./styles.scss";
+import { formattedDuration } from "./utils";
+
+type JaegerDetailProps = {
+  group: JaegerGroup;
+};
+
+const extractSpanGroupValue = (value: JaegerValue): string => {
+  const ret = String(value.stringValue || value.doubleValue || value.boolValue);
+  // add white space for wrap the line
+  return ret.replaceAll(",", ", ");
+};
+
+export const JaegerDetail = ({ group }: JaegerDetailProps) => {
+  return (
+    <div className="spanDetailsWrapper">
+      <div className="spanDetailsWrapper__detailsWrapper">
+        <div className="spanDetailsWrapper__details">
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Span ID:</strong>
+          </div>
+          <div className="spanDetailsWrapper__details_body">{group.spanId}</div>
+        </div>
+        <div className="spanDetailsWrapper__details">
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Span Start:</strong>
+          </div>
+          <div className="spanDetailsWrapper__details_body">
+            {dayjs
+              .unix(group.startTimeUnixNano / 1000000000)
+              .format("DD/MM/YY HH:mm:ss.SSS")}
+          </div>
+        </div>
+        <div className="spanDetailsWrapper__details">
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Span End:</strong>
+          </div>
+          <div className="spanDetailsWrapper__details_body">
+            {dayjs
+              .unix(group.endTimeUnixNano / 1000000000)
+              .format("DD/MM/YY HH:mm:ss.SSS")}
+          </div>
+        </div>
+        <div className="spanDetailsWrapper__details">
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Duration:</strong>
+          </div>
+          <div className="spanDetailsWrapper__details_body">
+            {formattedDuration(group.durationMs)}
+          </div>
+        </div>
+        {group.attributes.map((attribute) => (
+          <div key={attribute.key} className="spanDetailsWrapper__details">
+            <div className="spanDetailsWrapper__details_header">
+              <strong>{attribute.key}</strong>:
+            </div>
+            <div className="spanDetailsWrapper__details_body">
+              {extractSpanGroupValue(attribute.value)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
--- a/src/containers/internal/views/recent-calls/jaeger/styles.scss
+++ b/src/containers/internal/views/recent-calls/jaeger/styles.scss
@@ -0,0 +1,124 @@
+@use "src/styles/vars";
+@use "src/styles/mixins";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+
+.barGroup {
+  border-radius: ui-vars.$px01;
+  @include mixins.code();
+  text-align: left;
+  padding: ui-vars.$px03;
+  color: ui-vars.$pink;
+  background-color: ui-vars.$dark;
+  border-radius: ui-vars.$px01;
+  margin-top: ui-vars.$px02;
+  overflow-x: auto;
+  overflow-y: scroll;
+
+  @media (max-width: 600px) {
+    padding: 15px;
+    height: 40vh;
+  }
+}
+
+.barWrapper {
+  width: 100%;
+
+  &__row {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  &__row:hover {
+    font-weight: bolder;
+    color: ui-vars.$purple;
+  }
+
+  &__row:hover button {
+    font-weight: bolder;
+    background-color: ui-vars.$purple;
+    cursor: pointer;
+  }
+
+  &__header {
+    min-width: 400px;
+    height: 15px;
+    padding-top: 4px;
+    font-size: small;
+
+    @media (max-width: 600px) {
+      padding-top: 4px;
+      min-width: 250px;
+      font-size: x-small;
+    }
+  }
+
+  &__span {
+    padding-top: 4px;
+    height: 5px;
+    flex-shrink: 0;
+    vertical-align: middle;
+    border: 3px solid #444;
+    border-radius: 8px;
+    background-color: ui-vars.$jambonz;
+    min-width: 6px;
+  }
+
+  &__duration {
+    margin: 5px;
+    min-width: 150px;
+  }
+}
+
+.spanDetailsWrapper {
+  border-radius: ui-vars.$px01;
+  @include mixins.code();
+  text-align: left;
+  padding: ui-vars.$px01;
+  background-color: ui-vars.$white;
+  border-radius: ui-vars.$px01;
+  color: ui-vars.$dark;
+  font-size: ui-vars.$mxs-size;
+  max-width: ui-vars.$width-tablet-2;
+  max-height: 500px;
+  overflow-y: scroll;
+
+  &__detailsWrapper {
+    height: 100%;
+    padding: 10px;
+    font-size: 0.9em;
+
+    @media (max-width: 600px) {
+      padding: 5px;
+      font-size: 0.7em;
+    }
+
+    @media (min-width: 600px) {
+      padding: 15px;
+      font-size: 0.9em;
+    }
+  }
+
+  &__details {
+    display: flex;
+  }
+
+  &__details_header {
+    padding: 3px;
+    min-width: 150px;
+  }
+
+  &__details_body {
+    flex-grow: 1;
+    white-space: pre-line;
+    padding: 2px;
+    width: 100%;
+  }
+
+  &__header {
+    background-color: ui-vars.$white;
+    color: ui-vars.$jambonz;
+    padding: 5px 10px 10px 10px;
+    border-bottom: thin solid ui-vars.$grey;
+  }
+}
--- a/src/containers/internal/views/recent-calls/jaeger/utils.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/utils.tsx
@@ -0,0 +1,16 @@
+export const formattedDuration = (duration: number) => {
+  if (duration < 1) {
+    return (Math.round(duration * 100) / 100).toFixed(2) + "ms";
+  } else if (duration < 1000) {
+    return (Math.round(duration * 100) / 100).toFixed(0) + "ms";
+  } else if (duration >= 1000) {
+    const min = Math.floor((duration / 1000 / 60) << 0);
+    if (min == 0) {
+      const secs = parseFloat(`${duration / 1000}`).toFixed(2);
+      return `${secs}s`;
+    } else {
+      const sec = Math.floor((duration / 1000) % 60);
+      return `${min}m ${sec}s`;
+    }
+  }
+};
--- a/src/containers/internal/views/recent-calls/pcap.tsx
+++ b/src/containers/internal/views/recent-calls/pcap.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";

-import { getPcap, getRecentCall } from "src/api";
+import { getPcap } from "src/api";
 import { toastError } from "src/store";

 import type { Pcap, RecentCall } from "src/api/types";
@@ -13,21 +13,13 @@ export const PcapButton = ({ call }: PcapButtonProps) => {
  const [pcap, setPcap] = useState<Pcap>();

  useEffect(() => {
-    getRecentCall(call.account_sid, call.sip_callid)
-      .then(({ json }) => {
-        if (json.total > 0) {
-          getPcap(call.account_sid, call.sip_callid)
-            .then(({ blob }) => {
-              if (blob) {
-                setPcap({
-                  data_url: URL.createObjectURL(blob),
-                  file_name: `callid-${call.sip_callid}.pcap`,
-                });
-              }
-            })
-            .catch((error) => {
-              toastError(error.msg);
-            });
+    getPcap(call.account_sid, call.sip_callid)
+      .then(({ blob }) => {
+        if (blob) {
+          setPcap({
+            data_url: URL.createObjectURL(blob),
+            file_name: `callid-${call.sip_callid}.pcap`,
+          });
        }
      })
      .catch((error) => {
--- a/src/containers/internal/views/settings/admin-settings.tsx
+++ b/src/containers/internal/views/settings/admin-settings.tsx
@@ -1,8 +1,12 @@
 import React, { useEffect, useState } from "react";

-import { ButtonGroup, Button } from "jambonz-ui";
-import { useApiData, postPasswordSettings } from "src/api";
-import { PasswordSettings } from "src/api/types";
+import { ButtonGroup, Button } from "@jambonz/ui-kit";
+import {
+  useApiData,
+  postPasswordSettings,
+  postSystemInformation,
+} from "src/api";
+import { PasswordSettings, SystemInformation } from "src/api/types";
 import { toastError, toastSuccess } from "src/store";
 import { Selector } from "src/components/forms";
 import { hasValue } from "src/utils";
@@ -11,21 +15,36 @@ import { PASSWORD_LENGTHS_OPTIONS, PASSWORD_MIN } from "src/api/constants";
 export const AdminSettings = () => {
  const [passwordSettings, passwordSettingsFetcher] =
    useApiData<PasswordSettings>("PasswordSettings");
+  const [systemInformatin, systemInformationFetcher] =
+    useApiData<SystemInformation>("SystemInformation");
  // Min value is 8
  const [minPasswordLength, setMinPasswordLength] = useState(PASSWORD_MIN);
  const [requireDigit, setRequireDigit] = useState(false);
  const [requireSpecialCharacter, setRequireSpecialCharacter] = useState(false);
+  const [domainName, setDomainName] = useState("");
+  const [sipDomainName, setSipDomainName] = useState("");
+  const [monitoringDomainName, setMonitoringDomainName] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
-    const payload: Partial<PasswordSettings> = {
+
+    const systemInformationPayload: Partial<SystemInformation> = {
+      domain_name: domainName,
+      sip_domain_name: sipDomainName,
+      monitoring_domain_name: monitoringDomainName,
+    };
+    const passwordSettingsPayload: Partial<PasswordSettings> = {
      min_password_length: minPasswordLength,
      require_digit: requireDigit ? 1 : 0,
      require_special_character: requireSpecialCharacter ? 1 : 0,
    };
-    postPasswordSettings(payload)
+    Promise.all([
+      postSystemInformation(systemInformationPayload),
+      postPasswordSettings(passwordSettingsPayload),
+    ])
      .then(() => {
        passwordSettingsFetcher();
+        systemInformationFetcher();
        toastSuccess("Password settings successfully updated");
      })
      .catch((error) => {
@@ -43,10 +62,45 @@ export const AdminSettings = () => {
        setMinPasswordLength(passwordSettings.min_password_length);
      }
    }
-  }, [passwordSettings]);
+    // if (hasValue(systemInformatin)) {
+    //   setDomainName(systemInformatin.domain_name);
+    //   setSipDomainName(systemInformatin.sip_domain_name);
+    //   setMonitoringDomainName(systemInformatin.monitoring_domain_name);
+    // }
+  }, [passwordSettings, systemInformatin]); //

  return (
    <>
+      <fieldset>
+        <label htmlFor="system_information">System Information</label>
+        <label htmlFor="name">Domain Name</label>
+        <input
+          id="domain_name"
+          type="text"
+          name="domain_name"
+          placeholder="Domain name"
+          value={domainName}
+          onChange={(e) => setDomainName(e.target.value)}
+        />
+        <label htmlFor="name">Sip Domain Name</label>
+        <input
+          id="sip_domain_name"
+          type="text"
+          name="sip_domain_name"
+          placeholder="Sip domain name"
+          value={sipDomainName}
+          onChange={(e) => setSipDomainName(e.target.value)}
+        />
+        <label htmlFor="name">Monitoring Domain Name</label>
+        <input
+          id="monitor_domain_name"
+          type="text"
+          name="monitor_domain_name"
+          placeholder="Monitoring domain name"
+          value={monitoringDomainName}
+          onChange={(e) => setMonitoringDomainName(e.target.value)}
+        />
+      </fieldset>
      <fieldset>
        <label htmlFor="min_password_length">Min password length</label>
        <Selector
--- a/src/containers/internal/views/settings/index.tsx
+++ b/src/containers/internal/views/settings/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { H1, Tabs, Tab, MS } from "jambonz-ui";
+import { H1, Tabs, Tab, MS } from "@jambonz/ui-kit";

 import { useScopedRedirect, withSelectState } from "src/utils";
 import { ApiKeys } from "src/containers/internal/api-keys";
--- a/src/containers/internal/views/settings/service-provider-settings.tsx
+++ b/src/containers/internal/views/settings/service-provider-settings.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { P, Button, ButtonGroup } from "jambonz-ui";
+import { P, Button, ButtonGroup } from "@jambonz/ui-kit";

 import { useDispatch, toastSuccess, toastError } from "src/store";
 import { hasLength } from "src/utils";
--- a/src/containers/internal/views/speech-services/add.tsx
+++ b/src/containers/internal/views/speech-services/add.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { SpeechServiceForm } from "./form";

--- a/src/containers/internal/views/speech-services/delete.tsx
+++ b/src/containers/internal/views/speech-services/delete.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { P } from "jambonz-ui";
+import { P } from "@jambonz/ui-kit";

 import { Modal } from "src/components";

--- a/src/containers/internal/views/speech-services/edit.tsx
+++ b/src/containers/internal/views/speech-services/edit.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { H1 } from "jambonz-ui";
+import { H1 } from "@jambonz/ui-kit";

 import { useApiData } from "src/api";
 import { toastError, useSelectState } from "src/store";
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Quan HL	54779ca31e	wip	2023-05-12 07:10:24 +07:00
Quan HL	2a6674a630	wip	2023-05-12 07:07:31 +07:00
Dave Horton	986b9a5eeb	0.8.3	2023-05-11 09:24:18 -04:00
Hoan Luu Huu	683693ec0e	fix: tts.cached boolValue does not showup on spain detail (#250 ) * fix: tts.cached boolValue does not showup on spain detail * wip * wip * wip * add env to disable jaeger tracing view * fix: tts.cached boolValue does not showup on spain detail * wip * wip * wip * add env to disable jaeger tracing view * fix: review coments * fix review comment * fix review comment	2023-05-11 08:34:16 -04:00
Hoan Luu Huu	6cb1c50cf0	feat: forgot password (#218 ) * feat: forgot password * feat: forgot password * fix: enable flag --------- Co-authored-by: Quan HL <quanluuhoang8@gmail.com>	2023-05-10 21:32:14 -04:00
Hoan Luu Huu	3d9a39ac3b	fix: add/edit lcr should have secondary text to explain the purpose of lcr (#247 )	2023-05-10 16:05:57 -04:00
Hoan Luu Huu	4d7e84fa43	feat: add sip gateway protocol for outbound traffic (#249 ) * feat: add sip gateway protocol for outbound traffic * fix: add tls/srtp	2023-05-10 16:02:39 -04:00
Hoan Luu Huu	41423a443a	add secondary text to lcr list (#245 )	2023-05-08 09:23:32 -04:00
Hoan Luu Huu	bfbd66ef5c	Feat/jaeger (#243 ) * added dummy jaeger json file * added jaeger types file * added dev jaeger endpoint * added jaeger modal with trace visual / information * refactored jaeger logic fixed offsets on short duration spans * refactored into smaller components & added basic scroll bar * removed buttons, added scroll-x, fixed details height and scroll-y * shrunk bar graph to fit view port * slight adjustments * removed ref and now calculate width based on window innerwidth * @media for phone layouts * -fixed details width and padding. -removed scroll.tsx as not needed now -using SpanKind to find parent for now * -reduced truncate size for smaller screens * -root span is now determined from parentSpanId not being found * removed un-needed calls to /getRecentCalls as this was causing a race condition when pcap & jaeger fetching at same time - removed console.log's * wip: add tabs for recent callt tracing * wip: add tabs for recent callt tracing * wip: add tabs for recent callt tracing * fix: review comments * fix: review comments --------- Co-authored-by: ajukes <ajukes@vibecoms.co.uk>	2023-05-05 20:12:46 -04:00
Hoan Luu Huu	414bca4fdc	fix: unchecked checkzone still render input with required (#242 )	2023-05-05 07:34:37 -04:00
Hoan Luu Huu	a6c8257b60	feat: Lcr (#237 ) * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix: final review version * fix: review comments * fix: review comments * fix: review comments * fix: review comments * wip: implement drag and drop * add box shadow for lcr route * fix review comment	2023-05-04 19:54:46 -04:00
Hoan Luu Huu	dbb39db54e	#239 (#240 ) * system Information * system Information	2023-05-04 19:41:25 -04:00
EgleH	6712d8944b	add a fallback accountSid for account users (#238 ) Co-authored-by: eglehelms <e.helms@cognigy.com>	2023-04-24 07:47:42 -04:00
Hoan Luu Huu	7051985aad	fix: update active sip_gateways (#235 )	2023-04-13 10:22:08 -04:00
EgleH	88dae20666	Update base image to node:18.15-alpine3.16 (#234 )	2023-04-12 13:15:39 -04:00
Dave Horton	977a08eaf7	push to docker	2023-04-10 09:41:37 -04:00
EgleH	1bfc722960	fix the webapp blocking account name if exists in anohter SP (#229 ) * fix the webapp blocking account name if exists in anohter SP * hard reload when changing SP * password settings enhance special chars --------- Co-authored-by: eglehelms <e.helms@cognigy.com>	2023-04-06 07:43:10 -04:00
Hoan Luu Huu	49c18ebd26	feat: carrier register status (#226 ) * feat: carrier register status * fix: typo issue * update PcapButton * is active for voice gateway to true * fix: download pcap * fix: download pcap	2023-04-03 13:21:26 -04:00
EgleH	aba8b2be3a	logout with one click (#223 ) Co-authored-by: eglehelms <e.helms@cognigy.com>	2023-03-30 07:44:19 -04:00
EgleH	f4d7880ab7	Add Logout call to signout (#221 ) * Add Logout call to signout * clean local storage even on error --------- Co-authored-by: eglehelms <e.helms@cognigy.com>	2023-03-29 08:54:17 -04:00
Dave Horton	7f93489580	bump version	2023-03-28 14:15:26 -04:00
Dave Horton	19fafdc908	minor label change	2023-03-25 12:13:13 -04:00
Hoan Luu Huu	a165bfc4d6	feat: onpremise nuance (#220 ) Co-authored-by: Quan HL <quanluuhoang8@gmail.com>	2023-03-25 11:21:14 -04:00
Hoan Luu Huu	e26d9b95cb	fix: edit application does not clear webhook user/pass when checkbox is uncheck (#217 ) Co-authored-by: Quan HL <quanluuhoang8@gmail.com>	2023-03-21 20:14:16 -04:00
Hoan Luu Huu	e425d825bc	feat: custom Vendor (#215 ) * feat: custom Vendor * feat: custom Vendor * fix: application with custom tts/stt vendor * fix custom speech name when editing * fix: all comments * fix: remove custom in the list and show extra (custom) * fix: prettier and application sythesizer selector * fix: addd VITE_DISABLE_CUSTOM_SPEECH --------- Co-authored-by: Quan HL <quanluuhoang8@gmail.com>	2023-03-14 08:45:06 -04:00
EgleH	a8d28da221	add soniox as speech provider (#211 ) Co-authored-by: EgleHelms <e.helms@cognigy.com>	2023-03-03 18:53:46 -05:00
EgleH	e3855e83f7	conditional required causing issue with focusable fields (#210 ) Co-authored-by: EgleHelms <e.helms@cognigy.com>	2023-02-23 12:18:01 -05:00
Dave Horton	446b6e76e2	update dockerfile	2023-02-23 08:21:09 -05:00
EgleH	0b55cdcf85	add env VITE_APP_DISABLE_DEFAULT_TRUNK_ROUTING (#209 ) Co-authored-by: EgleHelms <e.helms@cognigy.com>	2023-02-22 14:05:56 -05:00
Snyk bot	f1743a9129	fix: Dockerfile to reduce vulnerabilities (#208 ) The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-ALPINE316-OPENSSL-3314624 - https://snyk.io/vuln/SNYK-ALPINE316-OPENSSL-3314641 - https://snyk.io/vuln/SNYK-ALPINE316-OPENSSL-3314641 - https://snyk.io/vuln/SNYK-ALPINE316-OPENSSL-3314643 - https://snyk.io/vuln/SNYK-ALPINE316-OPENSSL-3314643	2023-02-22 07:32:42 -05:00
EgleH	ec46121696	upgrade node image (#206 ) Co-authored-by: EgleHelms <e.helms@cognigy.com>	2023-02-20 10:31:07 -05:00
Hoan Luu Huu	b0808187bc	feat: add app_json to application (#188 ) * feat: add app_json to application * fix: review comment * fix: review comment * fix: review comment * textarea for initial json in applications form * check/uncheck overide app_json will not erase app_json, update faile still have app_json --------- Co-authored-by: Quan HL <quanluuhoang8@gmail.com> Co-authored-by: Dave Horton <daveh@beachdognet.com>	2023-02-15 10:35:45 -05:00
Snyk bot	4a320b3c8c	fix: Dockerfile to reduce vulnerabilities (#204 ) The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-UPSTREAM-NODE-3035792 - https://snyk.io/vuln/SNYK-UPSTREAM-NODE-3035795 - https://snyk.io/vuln/SNYK-UPSTREAM-NODE-3092932 - https://snyk.io/vuln/SNYK-UPSTREAM-NODE-3092933 - https://snyk.io/vuln/SNYK-UPSTREAM-NODE-3105822	2023-02-15 08:11:36 -05:00
EgleH	c09ce5947e	Bug/speech backwards compatibility (#203 ) * add /Accounts api call back * add /accounts call back * include sp user into check --------- Co-authored-by: EgleHelms <e.helms@cognigy.com>	2023-02-14 15:34:11 -05:00
Hoan Luu Huu	7890b7031f	feat: update @jambonz/ui-kit:0.0.21 (#200 ) * feat: update @jambonz/ui-kit:0.0.21 * fix security vulnerabilities --------- Co-authored-by: Quan HL <quanluuhoang8@gmail.com> Co-authored-by: Dave Horton <daveh@beachdognet.com>	2023-02-13 08:47:56 -05:00
Hoan Luu Huu	1be5dcc06b	feat: nvidia tts/stt speech (#201 ) * feat: nvidia tts/stt speech * fix: rename riva server uri * fix: review comments * fix: review comments * sort vendors in alphabetic order --------- Co-authored-by: Quan HL <quanluuhoang8@gmail.com> Co-authored-by: Dave Horton <daveh@beachdognet.com>	2023-02-13 08:37:32 -05:00