fix: Dockerfile to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-ALPINE317-OPENSSL-3368755
- https://snyk.io/vuln/SNYK-ALPINE317-OPENSSL-3368755
- https://snyk.io/vuln/SNYK-ALPINE317-OPENSSL-6032385
- https://snyk.io/vuln/SNYK-ALPINE317-OPENSSL-6032385
- https://snyk.io/vuln/SNYK-ALPINE317-OPENSSL-6148880

.env

@@ -2,4 +2,27 @@ 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
+## enable record All Calls feature
+#VITE_APP_DISABLE_CALL_RECORDING=true
+## enable Forgot password
+#VITE_APP_ENABLE_FORGOT_PASSWORD=true
+## enable hosted system
+#VITE_APP_ENABLE_HOSTED_SYSTEM=true
+## Google Client ID
+#VITE_APP_GOOGLE_CLIENT_ID=
+## Github Client ID
+#VITE_APP_GITHUB_CLIENT_ID=
+## Default jambonz service provider SID
+#VITE_APP_DEFAULT_SERVICE_PROVIDER_SID=
+## Base url for jambomz webapp
+#VITE_APP_BASE_URL="http://jambonz.one"
+## Strip publishable key
+#VITE_APP_STRIPE_PUBLISHABLE_KEY="pk_test_EChRaX9Tjk8csZZVSeoGqNvu00lsJzjaU1"

.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=jambonz/webapp
 
           # 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

.github/workflows/pr-checks.yml

@@ -12,18 +12,18 @@ jobs:
   pr-checks:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Cache node_modules
         id: node-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: node-modules-${{ hashFiles('package-lock.json') }}
 
       - name: Cache cypress binary
         id: cypress-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: /home/runner/.cache/Cypress
           key: cypress-${{ hashFiles('package-lock.json') }}

CODEOWNERS

@@ -1,4 +1,4 @@
 # see https://bit.ly/3t2LLMR for CODEOWNERS syntax
 
 # all files owned by:
-* @davehorton @kitajchuk
+* @davehorton

Dockerfile

@@ -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.18.1-alpine as webapp
 RUN apk add curl
 WORKDIR /opt/app
 COPY . /opt/app

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
 

entrypoint.sh

@@ -9,9 +9,16 @@ API_PORT="${API_PORT:-3000}"
 API_VERSION="${API_VERSION:-v1}"
 API_BASE_URL=${API_BASE_URL:-http://$PUBLIC_IPV4:$API_PORT/$API_VERSION}
 
+# Default to "false" if not set
+DISABLE_LCR=${DISABLE_LCR:-false}
+DISABLE_JAEGER_TRACING=${DISABLE_JAEGER_TRACING:-false}
+DISABLE_CUSTOM_SPEECH=${DISABLE_CUSTOM_SPEECH:-false}
+ENABLE_FORGOT_PASSWORD=${ENABLE_FORGOT_PASSWORD:-false}
+DISABLE_CALL_RECORDING=${DISABLE_CALL_RECORDING:-false}
+
 # Serialize window global to provide the API URL to static frontend dist
 # This is declared and utilized in the web app: src/api/constants.ts
-SCRIPT_TAG="<script>window.JAMBONZ = { API_BASE_URL: \"${API_BASE_URL}\" };</script>"
+SCRIPT_TAG="<script>window.JAMBONZ = {API_BASE_URL: \"${API_BASE_URL}\",DISABLE_LCR: \"${DISABLE_LCR}\",DISABLE_JAEGER_TRACING: \"${DISABLE_JAEGER_TRACING}\",DISABLE_CUSTOM_SPEECH: \"${DISABLE_CUSTOM_SPEECH}\",ENABLE_FORGOT_PASSWORD: \"${ENABLE_FORGOT_PASSWORD}\",DISABLE_CALL_RECORDING: \"${DISABLE_CALL_RECORDING}\"};</script>"
 sed -i -e "\@</head>@i\    $SCRIPT_TAG" ./dist/index.html
 
 # Start the frontend web app static server

index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Simple provisioning webapp for jambonz."
+      content="Build innovative voice and collaboration services with jambonz, the open-source communication platform for conversational AI providers and CSPs."
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -46,7 +46,7 @@
       as="font"
       type="font/woff"
     />
-    <title>Jambonz Web App</title>
+    <title>Jambonz Portal | Jambonz CPaaS</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jambonz-webapp",
   "description": "A simple provisioning web app for jambonz",
-  "version": "v1.0.0",
+  "version": "0.8.5",
   "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",
@@ -41,12 +41,18 @@
     "deploy": "npm i && npm run build && npm run pm2"
   },
   "dependencies": {
+    "@jambonz/ui-kit": "^0.0.21",
+    "@stripe/react-stripe-js": "^2.1.1",
+    "@stripe/stripe-js": "^1.54.1",
     "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"
+    "react-router-dom": "^6.3.0",
+    "wavesurfer.js": "^7.3.4"
   },
   "devDependencies": {
     "@types/cors": "^2.8.12",
@@ -54,6 +60,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",

server/dev.server.ts

@@ -31,9 +31,10 @@ app.get(
     for (let i = 0; i < 500; i++) {
       const attempted_at = new Date(start.getTime() + i * increment);
       const failed = 0 === i % 5;
+      const call_sid = nanoid();
       const call: RecentCall = {
         account_sid: req.params.account_sid,
-        call_sid: nanoid(),
+        call_sid,
         from: "15083084809",
         to: "18882349999",
         answered: !failed,
@@ -48,6 +49,8 @@ app.get(
         remote_host: "3.55.24.34",
         direction: 0 === i % 2 ? "inbound" : "outbound",
         trunk: 0 === i % 2 ? "twilio" : "user",
+        trace_id: nanoid(),
+        recording_url: `http://127.0.0.1:3002/api/Accounts/${req.params.account_sid}/RecentCalls/${call_sid}/record`,
       };
       data.push(call);
     }
@@ -136,6 +139,35 @@ app.get(
   }
 );
 
+app.get(
+  "/api/Accounts/:account_sid/RecentCalls/:call_sid/record",
+  (req: Request, res: Response) => {
+    /** Sample pcap file from: https://wiki.wireshark.org/SampleCaptures#sip-and-rtp */
+    const wav: Buffer = fs.readFileSync(
+      path.resolve(process.cwd(), "server", "example.mp3")
+    );
+
+    res
+      .status(200)
+      .set({
+        "Content-Type": "audio/wav",
+        "Content-Disposition": "attachment",
+      })
+      .send(wav); // server: Buffer => client: Blob
+  }
+);
+
+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[] = [];

src/api/constants.ts

@@ -1,4 +1,6 @@
 import type {
+  Currency,
+  ElevenLabsOptions,
   LimitField,
   LimitUnitOption,
   PasswordSettings,
@@ -13,6 +15,17 @@ import type {
 /** The API url is constructed with the docker containers `ip:port` */
 interface JambonzWindowObject {
   API_BASE_URL: string;
+  DISABLE_LCR: string;
+  DISABLE_JAEGER_TRACING: string;
+  DISABLE_CUSTOM_SPEECH: string;
+  ENABLE_FORGOT_PASSWORD: string;
+  ENABLE_HOSTED_SYSTEM: string;
+  DISABLE_CALL_RECORDING: string;
+  GITHUB_CLIENT_ID: string;
+  GOOGLE_CLIENT_ID: string;
+  BASE_URL: string;
+  DEFAULT_SERVICE_PROVIDER_SID: string;
+  STRIPE_PUBLISHABLE_KEY: string;
 }
 
 declare global {
@@ -28,6 +41,52 @@ 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 =
+  window.JAMBONZ?.DISABLE_CUSTOM_SPEECH === "true" ||
+  JSON.parse(import.meta.env.VITE_DISABLE_CUSTOM_SPEECH || "false");
+
+/** Enable Forgot Password */
+export const ENABLE_FORGOT_PASSWORD: boolean =
+  window.JAMBONZ?.ENABLE_FORGOT_PASSWORD === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_ENABLE_FORGOT_PASSWORD || "false");
+
+/** Enable Cloud version */
+export const ENABLE_HOSTED_SYSTEM: boolean =
+  window.JAMBONZ?.ENABLE_HOSTED_SYSTEM === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_ENABLE_HOSTED_SYSTEM || "false");
+/** Disable Lcr */
+export const DISABLE_LCR: boolean =
+  window.JAMBONZ?.DISABLE_LCR === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_LCR_DISABLED || "false");
+
+/** Disable jaeger tracing */
+export const DISABLE_JAEGER_TRACING: boolean =
+  window.JAMBONZ?.DISABLE_JAEGER_TRACING === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_JAEGER_TRACING_DISABLED || "false");
+
+/** Enable Record All Call Feature */
+export const DISABLE_CALL_RECORDING: boolean =
+  window.JAMBONZ?.DISABLE_CALL_RECORDING === "true" ||
+  JSON.parse(import.meta.env.VITE_APP_DISABLE_CALL_RECORDING || "false");
+
+export const DEFAULT_SERVICE_PROVIDER_SID: string =
+  window.JAMBONZ?.DEFAULT_SERVICE_PROVIDER_SID ||
+  import.meta.env.VITE_APP_DEFAULT_SERVICE_PROVIDER_SID;
+
+export const GITHUB_CLIENT_ID: string =
+  window.JAMBONZ?.GITHUB_CLIENT_ID || import.meta.env.VITE_APP_GITHUB_CLIENT_ID;
+
+export const BASE_URL: string =
+  window.JAMBONZ?.BASE_URL || import.meta.env.VITE_APP_BASE_URL;
+
+export const GOOGLE_CLIENT_ID: string =
+  window.JAMBONZ?.GOOGLE_CLIENT_ID || import.meta.env.VITE_APP_GOOGLE_CLIENT_ID;
+
+export const STRIPE_PUBLISHABLE_KEY: string =
+  window.JAMBONZ?.STRIPE_PUBLISHABLE_KEY ||
+  import.meta.env.VITE_APP_STRIPE_PUBLISHABLE_KEY;
+
 /** TCP Max Port */
 export const TCP_MAX_PORT = 65535;
 
@@ -54,7 +113,7 @@ export const DEFAULT_SIP_GATEWAY: SipGateway = {
   ipv4: "",
   port: 5060,
   netmask: 32,
-  is_active: false,
+  is_active: true,
   inbound: 1,
   outbound: 0,
 };
@@ -69,7 +128,6 @@ export const DEFAULT_SMPP_GATEWAY: SmppGateway = {
   inbound: 1,
   outbound: 1,
 };
-
 /** Netmask Bits */
 export const NETMASK_BITS = Array(32)
   .fill(0)
@@ -81,6 +139,87 @@ 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",
+  },
+];
+/**
+ * Record bucket type
+ */
+export const BUCKET_VENDOR_AWS = "aws_s3";
+export const BUCKET_VENDOR_S3_COMPATIBLE = "s3_compatible";
+export const BUCKET_VENDOR_GOOGLE = "google";
+export const BUCKET_VENDOR_AZURE = "azure";
+export const BUCKET_VENDOR_OPTIONS = [
+  {
+    name: "NONE",
+    value: "",
+  },
+  {
+    name: "AWS S3",
+    value: BUCKET_VENDOR_AWS,
+  },
+  {
+    name: "AWS S3 Compatible",
+    value: BUCKET_VENDOR_S3_COMPATIBLE,
+  },
+  {
+    name: "Azure Cloud Storage",
+    value: BUCKET_VENDOR_AZURE,
+  },
+  {
+    name: "Google Cloud Storage",
+    value: BUCKET_VENDOR_GOOGLE,
+  },
+];
+
+export const AUDIO_FORMAT_OPTIONS = [
+  {
+    name: "mp3",
+    value: "mp3",
+  },
+  {
+    name: "wav",
+    value: "wav",
+  },
+];
+
+export const DEFAULT_ELEVENLABS_MODEL = "eleven_multilingual_v2";
+
+export const DEFAULT_WHISPER_MODEL = "tts-1";
+
+// Google Custom Voice reported usage options
+
+export const DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = "REALTIME";
+export const GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = [
+  { name: "REPORTED_USAGE_UNSPECIFIED", value: "REPORTED_USAGE_UNSPECIFIED" },
+  { name: "REALTIME", value: "REALTIME" },
+  { name: "OFFLINE", value: "OFFLINE" },
+];
+// Eleven Labs options
+export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
+  optimize_streaming_latency: 3,
+  voice_settings: {
+    stability: 0.5,
+    similarity_boost: 0.5,
+    use_speaker_boost: true,
+  },
+};
 /** Password Length options */
 
 export const PASSWORD_MIN = 8;
@@ -106,9 +245,9 @@ export const PER_PAGE_SELECTION = [
 ];
 
 export const USER_SCOPE_SELECTION: SelectorOptions[] = [
-  { name: "All Scopes", value: "all" },
+  { name: "All scopes", value: "all" },
   { name: "Admin", value: "admin" },
-  { name: "Service Provider", value: "service_provider" },
+  { name: "Service provider", value: "service_provider" },
   { name: "Account", value: "account" },
 ];
 
@@ -172,6 +311,16 @@ export const DEFAULT_PSWD_SETTINGS: PasswordSettings = {
   require_special_character: 0,
 };
 
+export const PlanType = {
+  PAID: "paid",
+  TRIAL: "trial",
+  FREE: "free",
+};
+
+export const CurrencySymbol: Currency = {
+  usd: "$",
+};
+
 /** User scope values values */
 export const USER_ADMIN = "admin";
 export const USER_SP = "service_provider";
@@ -182,8 +331,16 @@ 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";
+
+export const PRIVACY_POLICY = "https://jambonz.org/privacy";
+export const TERMS_OF_SERVICE = "https://jambonz.org/terms";
+
 /** 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 +353,18 @@ 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`;
+export const API_TTS_CACHE = `${API_BASE_URL}/TtsCache`;
+export const API_CLIENTS = `${API_BASE_URL}/Clients`;
+export const API_REGISTER = `${API_BASE_URL}/register`;
+export const API_ACTIVATION_CODE = `${API_BASE_URL}/ActivationCode`;
+export const API_AVAILABILITY = `${API_BASE_URL}/Availability`;
+export const API_PRICE = `${API_BASE_URL}/Prices`;
+export const API_SUBSCRIPTIONS = `${API_BASE_URL}/Subscriptions`;
+export const API_CHANGE_PASSWORD = `${API_BASE_URL}/change-password`;
+export const API_SIGNIN = `${API_BASE_URL}/signin`;
+export const API_GOOGLE_CUSTOM_VOICES = `${API_BASE_URL}/GoogleCustomVoices`;

src/api/index.ts

@@ -17,7 +17,23 @@ 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,
+  API_TTS_CACHE,
+  API_CLIENTS,
+  API_REGISTER,
+  API_ACTIVATION_CODE,
+  API_AVAILABILITY,
+  API_PRICE,
+  API_SUBSCRIPTIONS,
+  API_CHANGE_PASSWORD,
+  API_SIGNIN,
+  API_GOOGLE_CUSTOM_VOICES,
 } from "./constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import {
@@ -58,8 +74,29 @@ import type {
   Limit,
   LimitCategories,
   PasswordSettings,
+  ForgotPassword,
+  SystemInformation,
+  Lcr,
+  LcrRoute,
+  LcrCarrierSetEntry,
+  BucketCredential,
+  BucketCredentialTestResult,
+  Client,
+  RegisterRequest,
+  RegisterResponse,
+  ActivationCode,
+  CurrentUserData,
+  PriceInfo,
+  Subscription,
+  DeleteAccount,
+  ChangePassword,
+  SignIn,
+  GoogleCustomVoice,
+  GoogleCustomVoicesQuery,
+  SpeechSupportedLanguagesAndVoices,
 } from "./types";
-import { StatusCodes } from "./types";
+import { Availability, StatusCodes } from "./types";
+import { JaegerRoot } from "./jaeger-types";
 
 /** Wrap all requests to normalize response handling */
 const fetchTransport = <Type>(
@@ -70,6 +107,7 @@ const fetchTransport = <Type>(
     try {
       const response = await fetch(url, options);
       const transport: FetchTransport<Type> = {
+        headers: response.headers,
         status: response.status,
         json: <Type>{},
       };
@@ -145,7 +183,7 @@ const getAuthHeaders = () => {
 
   return {
     "Content-Type": "application/json",
-    Authorization: `Bearer ${token}`,
+    ...(token && { Authorization: `Bearer ${token}` }),
   };
 };
 
@@ -221,6 +259,17 @@ export const deleteFetch = <Type>(url: string) => {
   });
 };
 
+export const deleteFetchWithPayload = <Type, Payload>(
+  url: string,
+  payload: Payload
+) => {
+  return fetchTransport<Type>(url, {
+    method: "DELETE",
+    headers: getAuthHeaders(),
+    body: JSON.stringify(payload),
+  });
+};
+
 /** All APIs need a wrapper utility that uses the FetchTransport */
 
 export const postLogin = (payload: UserLoginPayload) => {
@@ -233,6 +282,10 @@ export const postLogin = (payload: UserLoginPayload) => {
   });
 };
 
+export const postLogout = () => {
+  return postFetch<undefined>(API_LOGOUT);
+};
+
 /** Named wrappers for `postFetch` */
 
 export const postServiceProviders = (payload: Partial<ServiceProvider>) => {
@@ -250,6 +303,16 @@ export const postAccount = (payload: Partial<Account>) => {
   return postFetch<SidResponse, Partial<Account>>(API_ACCOUNTS, payload);
 };
 
+export const postAccountBucketCredentialTest = (
+  sid: string,
+  payload: Partial<BucketCredential>
+) => {
+  return postFetch<BucketCredentialTestResult, Partial<BucketCredential>>(
+    `${API_ACCOUNTS}/${sid}/BucketCredentialTest`,
+    payload
+  );
+};
+
 export const postApplication = (payload: Partial<Application>) => {
   return postFetch<SidResponse, Partial<Application>>(
     API_APPLICATIONS,
@@ -346,6 +409,89 @@ 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 postLcrCreateRoutes = (
+  sid: string,
+  payload: Partial<LcrRoute[]>
+) => {
+  return postFetch<EmptyResponse, Partial<LcrRoute[]>>(
+    `${API_LCRS}/${sid}/Routes`,
+    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
+  );
+};
+
+export const postClient = (payload: Partial<Client>) => {
+  return postFetch<SidResponse, Partial<Client>>(API_CLIENTS, payload);
+};
+
+export const postRegister = (payload: Partial<RegisterRequest>) => {
+  return postFetch<RegisterResponse, Partial<RegisterRequest>>(
+    API_REGISTER,
+    payload
+  );
+};
+
+export const postSipRealms = (accountSid: string, domain: string) => {
+  return postFetch<EmptyResponse>(
+    `${API_ACCOUNTS}/${accountSid}/SipRealms/${domain}`
+  );
+};
+
+export const postSubscriptions = (payload: Partial<Subscription>) => {
+  return postFetch<Subscription, Partial<Subscription>>(
+    API_SUBSCRIPTIONS,
+    payload
+  );
+};
+
+export const postChangepassword = (payload: Partial<ChangePassword>) => {
+  return postFetch<EmptyResponse, Partial<ChangePassword>>(
+    API_CHANGE_PASSWORD,
+    payload
+  );
+};
+
+export const postSignIn = (payload: Partial<SignIn>) => {
+  return postFetch<SignIn, Partial<SignIn>>(API_SIGNIN, payload);
+};
+
+export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
+  return postFetch<SidResponse, Partial<GoogleCustomVoice>>(
+    API_GOOGLE_CUSTOM_VOICES,
+    payload
+  );
+};
 /** Named wrappers for `putFetch` */
 
 export const putUser = (sid: string, payload: Partial<UserUpdatePayload>) => {
@@ -438,6 +584,64 @@ 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 putLcrUpdateRoutes = (
+  sid: string,
+  payload: Partial<LcrRoute[]>
+) => {
+  return putFetch<EmptyResponse, Partial<LcrRoute[]>>(
+    `${API_LCRS}/${sid}/Routes`,
+    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
+  );
+};
+
+export const putClient = (sid: string, payload: Partial<Client>) => {
+  return putFetch<EmptyResponse, Partial<Client>>(
+    `${API_CLIENTS}/${sid}`,
+    payload
+  );
+};
+
+export const putActivationCode = (
+  code: string,
+  payload: Partial<ActivationCode>
+) => {
+  return putFetch<EmptyResponse, Partial<ActivationCode>>(
+    `${API_ACTIVATION_CODE}/${code}`,
+    payload
+  );
+};
+
+export const putGoogleCustomVoice = (
+  sid: string,
+  payload: Partial<GoogleCustomVoice>
+) => {
+  return putFetch<EmptyResponse, Partial<GoogleCustomVoice>>(
+    `${API_GOOGLE_CUSTOM_VOICES}/${sid}`,
+    payload
+  );
+};
+
 /** Named wrappers for `deleteFetch` */
 
 export const deleteUser = (sid: string) => {
@@ -452,8 +656,11 @@ export const deleteApiKey = (sid: string) => {
   return deleteFetch<EmptyResponse>(`${API_API_KEYS}/${sid}`);
 };
 
-export const deleteAccount = (sid: string) => {
-  return deleteFetch<EmptyResponse>(`${API_ACCOUNTS}/${sid}`);
+export const deleteAccount = (sid: string, payload: Partial<DeleteAccount>) => {
+  return deleteFetchWithPayload<EmptyResponse, Partial<DeleteAccount>>(
+    `${API_ACCOUNTS}/${sid}`,
+    payload
+  );
 };
 
 export const deleteApplication = (sid: string) => {
@@ -501,6 +708,33 @@ 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}`);
+};
+
+export const deleteTtsCache = () => {
+  return deleteFetch<EmptyResponse>(API_TTS_CACHE);
+};
+
+export const deleteAccountTtsCache = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_BASE_URL}/Accounts/${sid}/TtsCache`);
+};
+
+export const deleteClient = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_CLIENTS}/${sid}`);
+};
+
+export const deleteRecord = (url: string) => {
+  return deleteFetch<EmptyResponse>(url);
+};
+
+export const deleteGoogleCustomVoice = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_GOOGLE_CUSTOM_VOICES}/${sid}`);
+};
 /** Named wrappers for `getFetch` */
 
 export const getUser = (sid: string) => {
@@ -517,8 +751,55 @@ 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}`
+  );
+};
+
+export const getClients = () => {
+  return getFetch<Client[]>(API_CLIENTS);
+};
+
+export const getClient = (sid: string) => {
+  return getFetch<Client[]>(`${API_CLIENTS}/${sid}`);
+};
+
+export const getAvailability = (domain: string) => {
+  return getFetch<Availability>(
+    `${API_AVAILABILITY}?type=subdomain&value=${domain}`
+  );
+};
+
+export const getGoogleCustomVoices = (
+  query: Partial<GoogleCustomVoicesQuery>
+) => {
+  const qryStr = getQuery<Partial<GoogleCustomVoicesQuery>>(query);
+  return getFetch<GoogleCustomVoice[]>(`${API_GOOGLE_CUSTOM_VOICES}?${qryStr}`);
+};
+
 /** Wrappers for APIs that can have a mock dev server response */
 
+export const getMe = () => {
+  return getFetch<CurrentUserData>(`${API_USERS}/me`);
+};
+
 export const getRecentCalls = (sid: string, query: Partial<CallQuery>) => {
   const qryStr = getQuery<Partial<CallQuery>>(query);
 
@@ -537,11 +818,42 @@ export const getRecentCall = (sid: string, sipCallId: string) => {
   );
 };
 
-export const getPcap = (sid: string, sipCallId: string) => {
+export const getPcap = (sid: string, sipCallId: string, method: string) => {
   return getBlob(
     import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/pcap`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/pcap`
+      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+  );
+};
+
+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,
+  method: string
+) => {
+  return getBlob(
+    import.meta.env.DEV
+      ? `${DEV_BASE_URL}/ServiceProviders/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
+      : `${API_SERVICE_PROVIDERS}/${sid}/RecentCalls/${sipCallId}/${method}/pcap`
   );
 };
 
@@ -555,6 +867,26 @@ export const getAlerts = (sid: string, query: Partial<PageQuery>) => {
   );
 };
 
+export const getPrice = () => {
+  return getFetch<PriceInfo[]>(API_PRICE);
+};
+
+export const getSpeechSupportedLanguagesAndVoices = (
+  sid: string | undefined,
+  vendor: string,
+  label: string
+) => {
+  const userData = parseJwt(getToken());
+  const apiUrl =
+    (userData.scope === USER_ACCOUNT
+      ? `${API_ACCOUNTS}/${userData.account_sid}`
+      : `${API_SERVICE_PROVIDERS}/${sid}`) +
+    `/SpeechCredentials/speech/supportedLanguagesAndVoices?vendor=${vendor}${
+      label ? `&label=${label}` : ""
+    }`;
+  return getFetch<SpeechSupportedLanguagesAndVoices>(apiUrl);
+};
+
 /** Hooks for components to fetch data with refetch method */
 
 /** :GET /{apiPath} -- this is generic for any fetch of data collections */

src/api/jaeger-types.ts

@@ -0,0 +1,87 @@
+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 WaveSurferSttResult {
+  vendor: string;
+  transcript: string;
+  confidence: number;
+  language_code: string;
+  latency?: number;
+}
+
+export interface WaveSurferTtsLatencyResult {
+  vendor: string;
+  latency: string;
+  isCached: string;
+}
+
+export interface WaveSurferGatherSpeechVerbHookLatencyResult {
+  statusCode: number;
+  latency: string;
+}
+
+export interface WaveSurferDtmfResult {
+  dtmf: string;
+  duration: string;
+}
+
+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[];
+}

src/api/types.ts

@@ -1,4 +1,4 @@
-import type { Vendor } from "src/vendor/types";
+import type { Language, Model, Vendor, VoiceLanguage } from "src/vendor/types";
 
 /** Simple types */
 
@@ -51,6 +51,7 @@ export enum StatusCodes {
 /** Fetch transport interfaces */
 
 export interface FetchTransport<Type> {
+  headers: Headers;
   status: StatusCodes;
   json: Type;
   blob?: Blob;
@@ -87,7 +88,7 @@ export interface SelectorOptions {
   value: string;
 }
 
-export interface Pcap {
+export interface DownloadedBlob {
   data_url: string;
   file_name: string;
 }
@@ -102,6 +103,11 @@ export interface CredentialTestResult {
   tts: CredentialTest;
 }
 
+export interface BucketCredentialTestResult {
+  status: CredentialStatus;
+  reason: string;
+}
+
 export interface LimitField {
   label: string;
   category: LimitCategories;
@@ -113,6 +119,20 @@ 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;
+}
+
+export interface TtsCache {
+  size: number;
+}
+
 /** API responses/payloads */
 
 export interface User {
@@ -128,6 +148,7 @@ export interface User {
   service_provider_name?: string | null;
   initial_password?: string;
   permissions?: UserPermissions[];
+  provider?: null | string;
 }
 
 export interface UserLogin {
@@ -166,12 +187,15 @@ export interface UserJWT {
 
 export interface CurrentUserData {
   user: User;
+  account?: Account;
+  subscription?: null | Subscription;
 }
 
 export interface ServiceProvider {
   name: string;
   ms_teams_fqdn: null | string;
   service_provider_sid: string;
+  lcr_sid: null | string;
 }
 
 export interface Limit {
@@ -224,6 +248,7 @@ export interface Smpp {
 export interface Account {
   name: string;
   sip_realm: null | string;
+  root_domain?: null | string;
   account_sid: string;
   webhook_secret: string;
   siprec_hook_sid: null | string;
@@ -231,10 +256,63 @@ export interface Account {
   registration_hook: null | WebHook;
   service_provider_sid: string;
   device_calling_application_sid: null | string;
+  record_all_calls: number;
+  record_format?: null | string;
+  bucket_credential: null | BucketCredential;
+  plan_type?: string;
+  device_to_call_ratio?: number;
+  trial_end_date?: null | string;
+  is_active: boolean;
+}
+
+export interface Product {
+  price_id?: null | string;
+  product_sid?: null | string;
+  name?: string;
+  quantity?: number;
+}
+
+export interface Subscription {
+  action?: null | string;
+  payment_method_id?: null | string;
+  account_subscription_sid?: null | string;
+  stripe_customer_id?: null | string;
+  products?: null | Product[];
+  start_date?: string;
+  status?: string;
+  client_secret?: null | string;
+  last4?: null | string;
+  exp_month?: null | string;
+  exp_year?: null | string;
+  card_type?: null | string;
+  reason?: null | string;
+  dry_run?: boolean;
+  currency?: null | string;
+  prorated_cost?: number;
+  monthly_cost?: number;
+  next_invoice_date?: null | string;
+}
+
+export interface AwsTag {
+  Key: string;
+  Value: string;
+}
+
+export interface BucketCredential {
+  vendor: null | string;
+  region?: null | string;
+  name?: null | string;
+  access_key_id?: null | string;
+  secret_access_key?: null | string;
+  tags?: null | AwsTag[];
+  service_key?: null | string;
+  connection_string?: null | string;
+  endpoint?: null | string;
 }
 
 export interface Application {
   name: string;
+  app_json: null | string;
   call_hook: null | WebHook;
   account_sid: null | string;
   messaging_hook: null | WebHook;
@@ -243,8 +321,19 @@ export interface Application {
   speech_synthesis_voice: null | string;
   speech_synthesis_vendor: null | Lowercase<Vendor>;
   speech_synthesis_language: null | string;
+  speech_synthesis_label: null | string;
   speech_recognizer_vendor: null | Lowercase<Vendor>;
   speech_recognizer_language: null | string;
+  speech_recognizer_label: null | string;
+  record_all_calls: number;
+  use_for_fallback_speech: number;
+  fallback_speech_synthesis_vendor: null | string;
+  fallback_speech_synthesis_language: null | string;
+  fallback_speech_synthesis_voice: null | string;
+  fallback_speech_synthesis_label: null | string;
+  fallback_speech_recognizer_vendor: null | string;
+  fallback_speech_recognizer_language: null | string;
+  fallback_speech_recognizer_label: null | string;
 }
 
 export interface PhoneNumber {
@@ -280,6 +369,16 @@ export interface RecentCall {
   remote_host: string;
   direction: string;
   trunk: string;
+  trace_id: string;
+  recording_url?: string;
+}
+
+export interface GoogleCustomVoice {
+  google_custom_voice_sid?: string;
+  speech_credential_sid?: string;
+  name: string;
+  reported_usage: string;
+  model: string;
 }
 
 export interface SpeechCredential {
@@ -297,16 +396,31 @@ export interface SpeechCredential {
   secret_access_key: null | string;
   service_key: null | string;
   use_custom_tts: number;
+  custom_tts_endpoint_url: null | string;
   custom_tts_endpoint: null | string;
   use_custom_stt: number;
+  custom_stt_endpoint_url: null | string;
   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;
+  label: null | string;
+  cobalt_server_uri: null | string;
+  model_id: null | string;
+  model: null | string;
+  options: null | string;
+  deepgram_stt_uri: null | string;
+  deepgram_stt_use_tls: number;
 }
 
 export interface Alert {
@@ -317,6 +431,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 +463,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 {
@@ -352,7 +474,6 @@ export interface PredefinedCarrier extends Carrier {
 export interface Gateway {
   voip_carrier_sid: string;
   ipv4: string;
-  port: number;
   netmask: number;
   inbound: number;
   outbound: number;
@@ -361,12 +482,54 @@ export interface Gateway {
 export interface SipGateway extends Gateway {
   sip_gateway_sid?: null | string;
   is_active: boolean;
+  protocol?: string;
+  port: number | null;
+  pad_crypto?: boolean;
 }
 
 export interface SmppGateway extends Gateway {
   smpp_gateway_sid?: null | string;
   is_primary: boolean;
   use_tls: boolean;
+  port: number;
+}
+
+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;
+  description?: 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 Client {
+  client_sid?: null | string;
+  account_sid: null | string;
+  username: null | string;
+  password?: null | string;
+  is_active: boolean;
+  allow_direct_app_calling: boolean;
+  allow_direct_queue_calling: boolean;
+  allow_direct_user_calling: boolean;
 }
 
 export interface PageQuery {
@@ -381,6 +544,13 @@ export interface CallQuery extends PageQuery {
   answered?: string;
 }
 
+export interface GoogleCustomVoicesQuery {
+  speech_credential_sid?: string;
+  label?: string;
+  account_sid?: string;
+  service_provider_sid: string;
+}
+
 export interface PagedResponse<Type> {
   page_size: number;
   total: number;
@@ -411,3 +581,142 @@ export interface EmptyResponse {
 export interface TotalResponse {
   total: number;
 }
+
+export interface RegisterRequest {
+  service_provider_sid: string;
+  provider: string;
+  oauth2_code?: string;
+  oauth2_state?: string;
+  oauth2_client_id?: string;
+  oauth2_redirect_uri?: string;
+  locationBeforeAuth?: string;
+  name?: string;
+  email?: string;
+  password?: string;
+  email_activation_code?: string;
+  inviteCode?: string;
+}
+
+export interface RegisterResponse {
+  jwt: string;
+  user_sid: string;
+  account_sid: string;
+  root_domain: string;
+}
+
+export interface ActivationCode {
+  user_sid: string;
+  type: string;
+}
+
+export interface Availability {
+  available: boolean;
+}
+
+export interface Invoice {
+  total: number;
+  currency: null | string;
+  next_payment_attempt: null | string;
+}
+
+export type Currency = {
+  [key: string]: null | string;
+};
+
+export interface Recurring {
+  aggregate_usage: null | string;
+  interval: null | string;
+  interval_count: number;
+  trial_period_days: null | string;
+  usage_type: string;
+}
+
+export interface Price {
+  billing_scheme: string;
+  currency: string;
+  recurring: Recurring;
+  stripe_price_id: null | string;
+  tiers_mode: null | string;
+  type: null | string;
+  unit_amount: number;
+  unit_amount_decimal: null | string;
+}
+
+export interface PriceInfo {
+  category: null | string;
+  description: null | string;
+  name: null | string;
+  prices: Price[];
+  product_sid: null | string;
+  stripe_product_id: null | string;
+  unit_label: null | string;
+}
+
+export interface StripeCustomerId {
+  stripe_customer_id: null | string;
+}
+
+export interface Tier {
+  up_to: number;
+  flat_amount: number;
+  unit_amount: number;
+}
+
+export interface ServiceData {
+  category: null | string;
+  name: null | string;
+  service: null | string;
+  fees: number;
+  feesLabel: null | string;
+  cost: number;
+  capacity: number;
+  invalid: boolean;
+  currency: null | string;
+  min: number;
+  max: number;
+  dirty: boolean;
+  visible: boolean;
+  required: boolean;
+  billing_scheme?: null | string;
+  stripe_price_id?: null | string;
+  unit_label?: null | string;
+  product_sid?: null | string;
+  stripe_product_id?: null | string;
+  tiers?: Tier[];
+}
+
+export interface DeleteAccount {
+  password: string;
+}
+
+export interface ChangePassword {
+  old_password: null | string;
+  new_password: null | string;
+}
+
+export interface SignIn {
+  link?: null | string;
+  jwt?: null | string;
+  account_sid?: null | string;
+}
+
+export interface GetLanguagesAndVoices {
+  vendor: string;
+  label: string;
+}
+
+export interface SpeechSupportedLanguagesAndVoices {
+  tts: VoiceLanguage[];
+  stt: Language[];
+  models: Model[];
+}
+
+export interface ElevenLabsOptions {
+  optimize_streaming_latency: number;
+  voice_settings: Partial<{
+    similarity_boost: number;
+    stability: number;
+    style: number;
+    use_speaker_boost: boolean;
+  }>;
+}

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";
 

src/components/account-filter.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";
 
 import { Icons } from "src/components/icons";
 
 import type { Account } from "src/api/types";
 import { hasLength, sortLocaleName } from "src/utils";
+import { setAccountFilter } from "src/store/localStore";
 
 export type AccountFilterProps = {
   label?: string;
@@ -37,13 +38,16 @@ export const AccountFilter = ({
 
   return (
     <div className={classNames(classes)}>
-      <label htmlFor="account_filter">{label}:</label>
+      {label && <label htmlFor="account_filter">{label}:</label>}
       <div>
         <select
           id="account_filter"
           name="account_filter"
           value={accountSid}
-          onChange={(e) => setAccountSid(e.target.value)}
+          onChange={(e) => {
+            setAccountSid(e.target.value);
+            setAccountFilter(e.target.value);
+          }}
           onFocus={() => setFocus(true)}
           onBlur={() => setFocus(false)}
         >

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";

src/components/domain-input/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Icons } from "../icons";
+import "./styles.scss";
+
+type DomainInputProbs = {
+  id?: string;
+  name?: string;
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  root_domain: string;
+  placeholder?: string;
+  is_valid: boolean;
+};
+
+export const DomainInput = ({
+  id,
+  name,
+  value,
+  setValue,
+  root_domain,
+  is_valid,
+  placeholder,
+}: DomainInputProbs) => {
+  return (
+    <>
+      <div className="clipboard clipboard-domain">
+        <div className="input-container">
+          <input
+            id={id}
+            name={name}
+            type="text"
+            value={value}
+            placeholder={placeholder}
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <div className={`input-icon txt--${is_valid ? "teal" : "red"}`}>
+            {is_valid ? <Icons.CheckCircle /> : <Icons.XCircle />}
+          </div>
+        </div>
+        <div className="root-domain">
+          <p>{root_domain}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DomainInput;

src/components/domain-input/styles.scss

@@ -0,0 +1,55 @@
+@use "../../styles/vars";
+@use "../../styles/mixins";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;
+
+.input-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.clipboard-domain {
+  display: flex;
+  align-items: center;
+
+  input[type="text"],
+  input[type="number"] {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    width: 100%;
+    height: vars.$clipheight;
+
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+
+  .internal form & {
+    max-width: calc(#{vars.$widthinput} - #{vars.$clipheight});
+  }
+
+  .input-icon {
+    position: absolute;
+    right: 5%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left: 0;
+  }
+
+  .root-domain {
+    height: vars.$clipheight;
+    border-bottom-right-radius: ui-vars.$px01;
+    border-top-right-radius: ui-vars.$px01;
+    border: 2px solid ui-vars.$grey;
+    border-left: 0;
+    background-color: ui-vars.$pink;
+    padding: ui-vars.$px01;
+    display: flex;
+    align-items: center;
+
+    &[disabled] {
+      @include mixins.disabled();
+    }
+  }
+}

src/components/editboard/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Icons } from "src/components/icons";
+
+type EditBoardProps = {
+  id?: string;
+  name?: string;
+  text: string;
+  path: string;
+  title?: string;
+};
+
+export const EditBoard = ({
+  text,
+  id = "",
+  name = "",
+  path,
+  title,
+}: EditBoardProps) => {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(path);
+  };
+
+  return (
+    <div className="clipboard inpbtn">
+      <input id={id} name={name} type="text" readOnly value={text} />
+      <button
+        className="btnty"
+        type="button"
+        title={title ? title : "Edit"}
+        onClick={handleClick}
+      >
+        <Icons.Edit />
+      </button>
+    </div>
+  );
+};

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";
 
@@ -7,9 +7,11 @@ type CheckzoneProps = {
   id?: string;
   name: string;
   label: string;
+  labelNode?: React.ReactNode;
   hidden?: boolean;
   children: React.ReactNode;
   initialCheck: boolean;
+  disabled?: boolean;
   handleChecked?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
@@ -22,10 +24,12 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
       id,
       name,
       label,
+      labelNode,
       hidden = false,
       children,
       initialCheck,
       handleChecked,
+      disabled = false,
     }: CheckzoneProps,
     ref
   ) => {
@@ -47,23 +51,27 @@ export const Checkzone = forwardRef<CheckzoneRef, CheckzoneProps>(
     return (
       <div className={classesTop}>
         <label>
-          <input
-            ref={ref}
-            type="checkbox"
-            name={name}
-            id={id || name}
-            onChange={(e) => {
-              setChecked(e.target.checked);
+          <div className="label-container">
+            <input
+              disabled={disabled}
+              ref={ref}
+              type="checkbox"
+              name={name}
+              id={id || name}
+              onChange={(e) => {
+                setChecked(e.target.checked);
 
-              if (handleChecked) {
-                handleChecked(e);
-              }
-            }}
-            checked={checked}
-          />
-          <div>{label}</div>
+                if (handleChecked) {
+                  handleChecked(e);
+                }
+              }}
+              checked={checked}
+            />
+            {label && <div>{label}</div>}
+            {labelNode && labelNode}
+          </div>
         </label>
-        <div className={classesIn}>{children}</div>
+        {checked && <div className={classesIn}>{children}</div>}
       </div>
     );
   }

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;
@@ -9,11 +9,14 @@
   width: 100%;
   max-width: vars.$widthinput;
 
-  > label {
+  .label-container {
     display: flex;
-    align-items: center;
+    justify-content: center;
+  }
 
+  > label {
     input {
+      margin-top: ui-vars.$px01;
       margin-right: ui-vars.$px02;
     }
   }
@@ -35,6 +38,10 @@
       margin-top: ui-vars.$px01;
     }
 
+    > a {
+      width: 100%;
+    }
+
     &.active {
       cursor: auto;
       opacity: 1;

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";
 

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 {

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();

src/components/forms/passwd/index.tsx

@@ -31,6 +31,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
     return (
       <div className="passwd">
         <input
+          autoComplete={"off"}
           ref={ref}
           type={reveal ? "text" : "password"}
           name={name}

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;

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";
 
@@ -42,7 +42,7 @@ export const Selector = forwardRef<SelectorRef, SelectorProps>(
           {...restProps}
         >
           {options.map((option) => (
-            <option key={option.value} value={option.value}>
+            <option key={`${id}_${option.value}`} value={option.value}>
               {option.name}
             </option>
           ))}

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;

src/components/icons.ts

@@ -39,6 +39,18 @@ import {
   PhoneOutgoing,
   PhoneIncoming,
   MoreHorizontal,
+  Share2,
+  ArrowUp,
+  ArrowDown,
+  Play,
+  Pause,
+  ChevronsLeft,
+  ChevronsRight,
+  Download,
+  Smartphone,
+  Youtube,
+  Mail,
+  Tag,
 } from "react-feather";
 
 import type { Icon } from "react-feather";
@@ -88,4 +100,16 @@ export const Icons: IconMap = {
   PhoneOutgoing,
   PhoneIncoming,
   MoreHorizontal,
+  Share2,
+  ArrowUp,
+  ArrowDown,
+  Play,
+  Pause,
+  ChevronsLeft,
+  ChevronsRight,
+  Download,
+  Smartphone,
+  Youtube,
+  Mail,
+  Tag,
 };

src/components/modal/index.tsx

@@ -1,8 +1,9 @@
 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";
+import { Spinner } from "../spinner";
 
 type ModalProps = {
   disabled?: boolean;
@@ -69,6 +70,7 @@ export const ModalForm = ({
         }}
       >
         <div className="modal__stuff">{children}</div>
+
         <ButtonGroup right>
           <Button
             small
@@ -91,9 +93,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
@@ -104,3 +116,37 @@ export const ModalClose = ({ children, handleClose }: CloseProps) => {
     portal
   );
 };
+
+type LoaderProps = {
+  children: React.ReactNode;
+};
+
+export const ModalLoader = ({ children }: LoaderProps) => {
+  return ReactDOM.createPortal(
+    <div className="modal" role="presentation">
+      <div
+        className="modal__box"
+        role="presentation"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="modal__stuff"
+          role="presentation"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Spinner />
+        </div>
+      </div>
+    </div>,
+    portal
+  );
+};

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;

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();

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";
 

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;

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";
 

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";

src/components/search-filter/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useCallback } from "react";
-import { classNames } from "jambonz-ui";
+import React, { useState, useCallback, useRef } from "react";
+import { classNames } from "@jambonz/ui-kit";
 
 import { Icons } from "src/components/icons";
 
@@ -7,14 +7,18 @@ import "./styles.scss";
 
 type SearchFilterProps = JSX.IntrinsicElements["input"] & {
   filter: [string, React.Dispatch<React.SetStateAction<string>>];
+  delay?: number | null;
 };
 
 export const SearchFilter = ({
   placeholder,
   filter: [filterValue, setFilterValue],
+  delay,
 }: SearchFilterProps) => {
   const [focus, setFocus] = useState(false);
+  const [tmpFilterValue, setTmpFilterValue] = useState(filterValue);
   const [appearance, setAppearance] = useState(false);
+  const typingTimeoutRef = useRef<number | null>(null);
   const classes = {
     "search-filter": true,
     focused: focus,
@@ -23,7 +27,18 @@ export const SearchFilter = ({
 
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      setFilterValue(e.target.value.toLowerCase());
+      setTmpFilterValue(e.target.value.toLowerCase());
+      if (delay) {
+        if (typingTimeoutRef.current) {
+          clearTimeout(typingTimeoutRef.current);
+        }
+
+        typingTimeoutRef.current = setTimeout(() => {
+          setFilterValue(e.target.value.toLowerCase());
+        }, delay);
+      } else {
+        setFilterValue(e.target.value.toLowerCase());
+      }
 
       if (e.target.value) {
         setAppearance(true);
@@ -51,7 +66,7 @@ export const SearchFilter = ({
         type="search"
         name="search_filter"
         placeholder={placeholder}
-        value={filterValue}
+        value={tmpFilterValue}
         onChange={handleChange}
         onFocus={() => {
           setFocus(true);

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;

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";
 

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;

src/components/select-filter.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
-import { classNames } from "jambonz-ui";
+import { classNames } from "@jambonz/ui-kit";
 
 import { Icons } from "src/components/icons";
 
 import type { SelectorOption } from "./forms/selector";
+import { setQueryFilter } from "src/store/localStore";
+import { createFilterString } from "src/utils";
 
 type SelectFilterProps = {
   id: string;
@@ -38,6 +40,11 @@ export const SelectFilter = ({
           value={filterValue}
           onChange={(e) => {
             setFilterValue(e.target.value);
+            const queryFilter = createFilterString(
+              e.target.value,
+              label as string
+            );
+            setQueryFilter(queryFilter);
 
             if (handleSelect) {
               handleSelect(e);

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";
 

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/ */
 

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";
 

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;

src/components/tooltip/index.tsx

@@ -9,14 +9,15 @@ import "./styles.scss";
 type TooltipProps = {
   text: IMessage;
   children: React.ReactNode;
+  subStyle?: string;
 };
 
-export const Tooltip = ({ text, children }: TooltipProps) => {
+export const Tooltip = ({ text, children, subStyle }: TooltipProps) => {
   return (
     <div className="tooltip">
       <div className="tooltip__reveal">{text}</div>
       {children}
-      <Icons.HelpCircle />
+      {subStyle === "info" ? <Icons.Info /> : <Icons.HelpCircle />}
     </div>
   );
 };

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;

src/constants/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const TOAST_TIME = 3000;
+export const TOAST_TIME = 5000;
 export const SESS_FLASH_MSG = "SESS_FLASH_MSG";
 export const SESS_USER_SID = "SESS_USER_SID";
 export const SESS_OLD_PASSWORD = "SESS_OLD_PASSWORD";
@@ -13,16 +13,6 @@ export const MSG_PASSWD_MATCH = "Passwords do not match";
 export const MSG_SERVER_DOWN = "The server cannot be reached";
 export const MSG_LOGGED_OUT = "You've successfully logged out.";
 export const MSG_MUST_LOGIN = "You must log in to view that page";
-export const MSG_PASSWD_CRITERIA = (
-  <>
-    Password must:
-    <ul>
-      <li>Be at least 6 characters</li>
-      <li>Contain at least one letter</li>
-      <li>Contain at least one number</li>
-    </ul>
-  </>
-);
 export const MSG_REQUIRED_FIELDS = (
   <>
     Fields marked with an asterisk<span>*</span> are required.

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";

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";

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";
@@ -11,6 +11,7 @@ import {
   toastSuccess,
   toastError,
 } from "src/store";
+import { getActiveSP, setActiveSP } from "src/store/localStore";
 import { postServiceProviders } from "src/api";
 
 import type { NaviItem } from "./items";
@@ -19,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;
@@ -33,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}
       >
@@ -60,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");
@@ -98,6 +104,7 @@ export const Navi = ({
         );
         dispatch({ type: "serviceProviders" });
         setSid(json.sid);
+        setActiveSP(json.sid);
         setName("");
         setModal(false);
       })
@@ -113,6 +120,7 @@ export const Navi = ({
 
   /** Subscribe to change events on the service provider <select> */
   useEffect(() => {
+    setSid(getActiveSP());
     if (sid) {
       const serviceProvider = serviceProviders.find(
         (sp) => sp.service_provider_sid === sid
@@ -128,6 +136,7 @@ export const Navi = ({
   useEffect(() => {
     dispatch({ type: "user" });
     dispatch({ type: "serviceProviders" });
+    dispatch({ type: "lcr" });
   }, []);
 
   return (
@@ -153,8 +162,12 @@ export const Navi = ({
           <div className="smsel smsel--navi">
             <div>
               <select
-                value={currentServiceProvider?.service_provider_sid}
-                onChange={(e) => setSid(e.target.value)}
+                value={sid || currentServiceProvider?.service_provider_sid}
+                onChange={(e) => {
+                  setSid(e.target.value);
+                  setActiveSP(e.target.value);
+                  navigate(ROUTE_LOGIN);
+                }}
                 disabled={user?.scope !== USER_ADMIN}
               >
                 {currentServiceProvider ? (
@@ -212,6 +225,7 @@ export const Navi = ({
               <Item
                 key={item.label}
                 user={user}
+                lcr={lcr}
                 item={item}
                 handleMenu={handleMenu}
               />

src/containers/internal/navi/items.ts

@@ -9,28 +9,41 @@ import {
   ROUTE_INTERNAL_SPEECH,
   ROUTE_INTERNAL_PHONE_NUMBERS,
   ROUTE_INTERNAL_MS_TEAMS_TENANTS,
+  ROUTE_INTERNAL_LEST_COST_ROUTING,
+  ROUTE_INTERNAL_CLIENTS,
 } 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,
+  ENABLE_HOSTED_SYSTEM as ENABLE_HOSTED_SYSTEM,
+} 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;
 }
 
 export const naviTop: NaviItem[] = [
-  {
-    label: "Users",
-    icon: Icons.UserCheck,
-    route: () => ROUTE_INTERNAL_USERS,
-  },
+  // User is not allowed in hosted app
+  ...(!ENABLE_HOSTED_SYSTEM
+    ? [
+        {
+          label: "Users",
+          icon: Icons.UserCheck,
+          route: () => ROUTE_INTERNAL_USERS,
+        },
+      ]
+    : []),
+
   {
     label: "Settings",
     icon: Icons.Settings,
@@ -50,13 +63,18 @@ export const naviTop: NaviItem[] = [
     scope: Scope.account,
     restrict: true,
   },
+  {
+    label: "Clients",
+    icon: Icons.Smartphone,
+    route: () => ROUTE_INTERNAL_CLIENTS,
+  },
   {
     label: "Applications",
     icon: Icons.Grid,
     route: () => ROUTE_INTERNAL_APPLICATIONS,
   },
   {
-    label: "Recent Calls",
+    label: "Recent calls",
     icon: Icons.List,
     route: () => ROUTE_INTERNAL_RECENT_CALLS,
   },
@@ -89,4 +107,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,
+      ]
+    : []),
 ];

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%;

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 {

src/containers/internal/user-me/index.tsx

@@ -1,18 +1,32 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
 
 import { Icons } from "src/components";
-import { ROUTE_INTERNAL_USERS } from "src/router/routes";
+import {
+  ROUTE_INTERNAL_USERS,
+  ROUTE_REGISTER_SUB_DOMAIN,
+} from "src/router/routes";
 import { useApiData } from "src/api";
 import { useSelectState } from "src/store";
 
 import type { CurrentUserData } from "src/api/types";
 
 import "./styles.scss";
+import { ENABLE_HOSTED_SYSTEM } from "src/api/constants";
+import { setRootDomain } from "src/store/localStore";
 
 export const UserMe = () => {
   const user = useSelectState("user");
   const [userData] = useApiData<CurrentUserData>("Users/me");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // If hosted platform is enabled, the account should have sip realm
+    if (ENABLE_HOSTED_SYSTEM && userData && !userData.account?.sip_realm) {
+      setRootDomain(userData?.account?.root_domain || "");
+      navigate(ROUTE_REGISTER_SUB_DOMAIN);
+    }
+  }, [userData]);
 
   return (
     <div className="user">

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 {

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";
 

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";
@@ -155,7 +155,7 @@ export const DeleteAccount = ({
           {hasLength(inUse.apiKeys) && (
             <InUseItems
               items={inUse.apiKeys}
-              itemsLabel="API Keys"
+              itemsLabel="API keys"
               sidKey="api_key_sid"
               labelKey="token"
             />

src/containers/internal/views/accounts/edit-sip-realm.tsx

@@ -0,0 +1,100 @@
+import { Button, ButtonGroup, H1, MS } from "@jambonz/ui-kit";
+import React, { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { getAvailability, postSipRealms, useApiData } from "src/api";
+import { CurrentUserData } from "src/api/types";
+import { Section } from "src/components";
+import DomainInput from "src/components/domain-input";
+import { Message } from "src/components/forms";
+import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
+import { hasValue } from "src/utils";
+
+export const EditSipRealm = () => {
+  const [name, setName] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const navigate = useNavigate();
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const typingTimeoutRef = useRef<number | null>(null);
+  const [isValidDomain, setIsValidDomain] = useState(false);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const rootDomain = userData?.account?.root_domain;
+    const account_sid = userData?.account?.account_sid;
+
+    postSipRealms(account_sid || "", `${name}.${rootDomain}`)
+      .then(() => {
+        navigate(`${ROUTE_INTERNAL_ACCOUNTS}/${account_sid}/edit`);
+      })
+      .catch((error) => {
+        setErrorMessage(error.msg);
+      });
+  };
+
+  useEffect(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    if (!name || name.length < 3) {
+      setIsValidDomain(false);
+      return;
+    }
+    setIsValidDomain(false);
+    typingTimeoutRef.current = setTimeout(() => {
+      getAvailability(`${name}.${userData?.account?.root_domain}`)
+        .then(({ json }) =>
+          setIsValidDomain(
+            Boolean(json.available) && hasValue(name) && name.length != 0
+          )
+        )
+        .catch((error) => {
+          setErrorMessage(error.msg);
+          setIsValidDomain(false);
+        });
+    }, 500);
+  }, [name]);
+
+  return (
+    <>
+      <H1 className="h2">Edit Sip Realm</H1>
+      <Section slim>
+        <form className="form form--internal" onSubmit={handleSubmit}>
+          <fieldset>
+            <MS>
+              This is the domain name where your carrier will send calls, and
+              where you can register devices to.
+            </MS>
+            {errorMessage && <Message message={errorMessage} />}
+            <br />
+            <DomainInput
+              id="sip_realm"
+              name="sip_realm"
+              value={name}
+              setValue={setName}
+              placeholder="Your name here"
+              root_domain={`.${userData?.account?.root_domain || ""}`}
+              is_valid={isValidDomain}
+            />
+          </fieldset>
+          <fieldset>
+            <ButtonGroup left>
+              <Button
+                small
+                subStyle="grey"
+                as={Link}
+                to={`${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" small disabled={!isValidDomain}>
+                Change Sip Realm
+              </Button>
+            </ButtonGroup>
+          </fieldset>
+        </form>
+      </Section>
+    </>
+  );
+};
+
+export default EditSipRealm;

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";
@@ -7,7 +7,7 @@ import { useApiData } from "src/api";
 import { toastError, useSelectState } from "src/store";
 import { AccountForm } from "./form";
 
-import type { Account, Application, Limit } from "src/api/types";
+import type { Account, Application, Limit, TtsCache } from "src/api/types";
 import {
   ROUTE_INTERNAL_ACCOUNTS,
   ROUTE_INTERNAL_APPLICATIONS,
@@ -25,6 +25,9 @@ export const EditAccount = () => {
     `Accounts/${params.account_sid}/Limits`
   );
   const [apps] = useApiData<Application[]>("Applications");
+  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>(
+    `Accounts/${params.account_sid}/TtsCache`
+  );
 
   useScopedRedirect(
     Scope.account,
@@ -50,6 +53,7 @@ export const EditAccount = () => {
         apps={apps}
         account={{ data, refetch, error }}
         limits={{ data: limitsData, refetch: refetchLimits }}
+        ttsCache={{ data: ttsCache, refetch: ttsCacheFetcher }}
       />
       <ApiKeys
         path={`Accounts/${params.account_sid}/ApiKeys`}

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";
@@ -45,7 +45,7 @@ export const Accounts = () => {
         return;
       }
 
-      deleteAccount(account.account_sid)
+      deleteAccount(account.account_sid, {})
         .then(() => {
           refetch();
           setAccount(null);
@@ -71,7 +71,7 @@ export const Accounts = () => {
           </Icon>
         </Link>
       </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
         <SearchFilter
           placeholder="Filter accounts"
           filter={[filter, setFilter]}

src/containers/internal/views/accounts/manage-payment-form.tsx

@@ -0,0 +1,191 @@
+import { Button, ButtonGroup, H1, P } from "@jambonz/ui-kit";
+import {
+  PaymentElement,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { postSubscriptions, useApiData } from "src/api";
+import { CurrentUserData, Subscription } from "src/api/types";
+import { Section } from "src/components";
+import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
+import { toastError, toastSuccess, useSelectState } from "src/store";
+import { PaymentMethod } from "@stripe/stripe-js";
+import { ModalLoader } from "src/components/modal";
+
+export const ManagePaymentForm = () => {
+  const user = useSelectState("user");
+  const stripe = useStripe();
+  const elements = useElements();
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const [isChangePayment, setIsChangePayment] = useState(false);
+  const [isSavingNewCard, setIsSavingNewCard] = useState(false);
+  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
+  const navigate = useNavigate();
+
+  const createSubscription = async (paymentMethod: PaymentMethod) => {
+    const body: Subscription = {
+      action: "update-payment-method",
+      payment_method_id: paymentMethod.id,
+    };
+
+    postSubscriptions(body)
+      .then(({ json }) => {
+        if (json.status === "success") {
+          toastSuccess("Payment completed successfully");
+          navigate(
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          );
+        } else if (json.status === "action required") {
+          if (stripe) {
+            const location = window.location;
+            stripe
+              .confirmPayment({
+                clientSecret: json.client_secret || "",
+                confirmParams: {
+                  return_url: `${location.protocol}//${location.host}${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+                },
+              })
+              .then((error) => {
+                if (error) {
+                  toastError(error.error.message || "");
+                  return;
+                }
+              })
+              .finally(() => {
+                setIsSavingNewCard(false);
+                setIsShowModalLoader(false);
+              });
+          }
+        } else if (json.status === "card error") {
+          setIsSavingNewCard(false);
+          setIsShowModalLoader(false);
+          toastError(json.reason || "Something went wrong, please try again.");
+        }
+      })
+      .catch((error) => {
+        toastError(error.msg || "Something went wrong, please try again.");
+      })
+      .finally(() => {
+        setIsSavingNewCard(false);
+        setIsShowModalLoader(false);
+      });
+  };
+
+  const handleSaveNewCard = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    const card = elements.getElement(PaymentElement);
+    if (!card) {
+      return;
+    }
+    const { error: elementsError } = await elements.submit();
+    if (elementsError) {
+      toastError(elementsError.message || "");
+      return;
+    }
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      element: card,
+    });
+
+    if (error) {
+      toastError(error.message || "Something went wrong, please try again.");
+      return;
+    }
+    setIsSavingNewCard(true);
+    setIsShowModalLoader(true);
+    createSubscription(paymentMethod);
+  };
+  return (
+    <>
+      <H1 className="h2">Manage Payment Information</H1>
+      {userData?.subscription && (
+        <Section>
+          <H1 className="h3">Current Payment Information</H1>
+          <div className="item__details">
+            <div className="pre-grid-white">
+              <div>Card Type:</div>
+              <div>{userData.subscription.card_type}</div>
+              <div>Card Number:</div>
+              <div>
+                {userData.subscription.last4
+                  ? `**** **** **** ${userData.subscription.last4}`
+                  : ""}
+              </div>
+              <div>Expiration:</div>
+              <div>
+                {userData.subscription.exp_year
+                  ? `${userData.subscription.exp_month}/${userData.subscription.exp_year}`
+                  : ""}
+              </div>
+            </div>
+          </div>
+          <ButtonGroup right>
+            <Button
+              type="button"
+              subStyle="grey"
+              as={Link}
+              to={`${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`}
+              small
+            >
+              Cancel
+            </Button>
+            <Button onClick={() => setIsChangePayment(true)} small>
+              Change Payment Info
+            </Button>
+          </ButtonGroup>
+        </Section>
+      )}
+      {isChangePayment && (
+        <Section>
+          <div className="grid--col4--users">
+            <H1 className="h3">New Payment Information</H1>
+            <div className="grid__row">
+              <div></div>
+              <div>
+                <PaymentElement
+                  options={{
+                    paymentMethodOrder: ["card"],
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+          <ButtonGroup right>
+            <Button
+              type="button"
+              subStyle="grey"
+              onClick={() => setIsChangePayment(false)}
+              small
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleSaveNewCard}
+              disabled={!stripe || isSavingNewCard}
+              small
+            >
+              Save New Card
+            </Button>
+          </ButtonGroup>
+        </Section>
+      )}
+      {isShowModalLoader && (
+        <ModalLoader>
+          <P>
+            Your requested changes are being processed. Please do not leave the
+            page or hit the back button until complete.
+          </P>
+        </ModalLoader>
+      )}
+    </>
+  );
+};
+
+export default ManagePaymentForm;

src/containers/internal/views/accounts/manage-payment.tsx

@@ -0,0 +1,23 @@
+import { Elements } from "@stripe/react-stripe-js";
+import { stripePromise } from "./subscription";
+import ManagePaymentForm from "./manage-payment-form";
+import React from "react";
+
+export const ManagePayment = () => {
+  return (
+    <>
+      <Elements
+        stripe={stripePromise}
+        options={{
+          mode: "setup",
+          currency: "usd",
+          paymentMethodCreation: "manual",
+        }}
+      >
+        <ManagePaymentForm />
+      </Elements>
+    </>
+  );
+};
+
+export default ManagePayment;

src/containers/internal/views/accounts/subscription-form.tsx

@@ -0,0 +1,633 @@
+import { Button, ButtonGroup, H1, P } from "@jambonz/ui-kit";
+import React, { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { postSubscriptions, useApiData } from "src/api";
+import { CurrencySymbol } from "src/api/constants";
+import {
+  CurrentUserData,
+  PriceInfo,
+  ServiceData,
+  StripeCustomerId,
+  Subscription,
+} from "src/api/types";
+import { Modal, Section } from "src/components";
+import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
+import { hasValue } from "src/utils";
+import {
+  PaymentElement,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js";
+import { PaymentMethod } from "@stripe/stripe-js";
+import { toastError, toastSuccess } from "src/store";
+import { ModalLoader } from "src/components/modal";
+
+const SubscriptionForm = () => {
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const [priceInfo] = useApiData<PriceInfo[]>("/Prices");
+  const [userStripeInfo] = useApiData<StripeCustomerId>("/StripeCustomerId");
+  const [total, setTotal] = useState(0);
+  const [cardErrorCase, setCardErrorCase] = useState(false);
+  const [isReviewChanges, setIsReviewChanges] = useState(false);
+  const [isReturnToFreePlan, setIsReturnToFreePlan] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isModifySubscription = location.pathname.includes(
+    "modify-subscription"
+  );
+  const [billingCharge, setBillingCharge] = useState<Subscription | null>(null);
+  const [isShowModalLoader, setIsShowModalLoader] = useState(false);
+  const [isDisableSubmitButton, setIsDisableSubmitButton] =
+    useState(isModifySubscription);
+
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const createSubscription = async (paymentMethod: PaymentMethod) => {
+    let body: Subscription = {};
+
+    if (cardErrorCase) {
+      body = {
+        action: "update-payment-method",
+        payment_method_id: paymentMethod.id,
+      };
+    } else {
+      body = {
+        action: "upgrade-to-paid",
+        payment_method_id: paymentMethod.id,
+        stripe_customer_id: userStripeInfo?.stripe_customer_id,
+        products: serviceData.map((service) => ({
+          price_id: service.stripe_price_id,
+          product_sid: service.product_sid,
+          quantity: service.capacity || 0,
+        })),
+      };
+    }
+
+    postSubscriptions(body)
+      .then(({ json }) => {
+        if (json.status === "success") {
+          toastSuccess("Payment completed successfully");
+          navigate(
+            `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+          );
+        } else if (json.status === "action required") {
+          if (stripe) {
+            const location = window.location;
+            stripe
+              .confirmPayment({
+                clientSecret: json.client_secret || "",
+                confirmParams: {
+                  return_url: `${location.protocol}//${location.host}${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`,
+                },
+              })
+              .then((error) => {
+                if (error) {
+                  toastError(error.error.message || "");
+                  return;
+                }
+              })
+              .finally(() => {
+                setIsDisableSubmitButton(false);
+                setIsShowModalLoader(false);
+              });
+          }
+        } else if (json.status === "card error") {
+          setIsDisableSubmitButton(false);
+          setIsShowModalLoader(false);
+          setCardErrorCase(true);
+        }
+      })
+      .catch((error) => {
+        setIsDisableSubmitButton(false);
+        setIsShowModalLoader(false);
+        toastError(error.msg || "Something went wrong, please try again.");
+      });
+  };
+
+  const retrieveBillingChanges = async () => {
+    const updatedProducts = serviceData.map((product) => ({
+      price_id: product.stripe_price_id,
+      product_sid: product.product_sid,
+      quantity: product.capacity || 0,
+    }));
+
+    postSubscriptions({
+      action: "update-quantities",
+      dry_run: true,
+      products: updatedProducts,
+    })
+      .then(({ json }) => {
+        setBillingCharge(json);
+        setIsReviewChanges(true);
+      })
+      .catch((error) => {
+        toastError(error.msg || "Something went wrong, please try again.");
+        setIsDisableSubmitButton(false);
+      });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+
+    setIsDisableSubmitButton(true);
+    if (isModifySubscription) {
+      retrieveBillingChanges();
+      return;
+    }
+    setIsShowModalLoader(true);
+    const { error: elementsError } = await elements.submit();
+    if (elementsError) {
+      setIsDisableSubmitButton(false);
+      setIsShowModalLoader(false);
+      toastError(elementsError.message || "");
+      return;
+    }
+    const card = elements.getElement(PaymentElement);
+    if (!card) {
+      setIsDisableSubmitButton(false);
+      setIsShowModalLoader(false);
+      return;
+    }
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      element: card,
+    });
+    if (error) {
+      setIsDisableSubmitButton(false);
+      setIsShowModalLoader(false);
+      toastError(error.message || "");
+      return;
+    }
+
+    createSubscription(paymentMethod);
+  };
+
+  const handleReturnToFreePlan = () => {
+    setIsReturnToFreePlan(false);
+    setIsShowModalLoader(true);
+    const body: Subscription = {
+      action: "downgrade-to-free",
+    };
+
+    postSubscriptions(body)
+      .then(() => {
+        toastSuccess("Downgrade to free plan completed successfully");
+        navigate(
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+        );
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      })
+      .finally(() => setIsShowModalLoader(false));
+  };
+
+  const handleReviewChangeSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsShowModalLoader(true);
+
+    const updatedProducts = serviceData.map((product) => ({
+      price_id: product.stripe_price_id,
+      product_sid: product.product_sid,
+      quantity: product.capacity,
+    }));
+
+    postSubscriptions({
+      action: "update-quantities",
+      products: updatedProducts,
+    })
+      .then(() => {
+        toastSuccess(
+          "Your subscription capacity has been successfully modified."
+        );
+        navigate(
+          `${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`
+        );
+      })
+      .catch(() => {
+        toastError(
+          `The additional capacity you that you requested could not be granted due to a failure processing payment.
+          Please configure a valid credit card for your account and the upgrade will be automatically processed`
+        );
+      })
+      .finally(() => {
+        setIsShowModalLoader(false);
+        setIsDisableSubmitButton(false);
+      });
+  };
+  // subscription categories
+  const [serviceData, setServiceData] = useState<ServiceData[]>([
+    {
+      category: "voice_call_session",
+      name: "concurrent call session",
+      service: "Maximum concurrent call sessions",
+      fees: 0,
+      feesLabel: "",
+      cost: 0,
+      capacity: 0,
+      invalid: false,
+      currency: "usd",
+      min: 5,
+      max: 1000,
+      dirty: false,
+      visible: true,
+      required: true,
+    },
+    {
+      category: "device",
+      name: "registered device",
+      service: "Additional device registrations",
+      fees: 0,
+      feesLabel: "",
+      cost: 0,
+      capacity: 0,
+      invalid: false,
+      currency: "usd",
+      min: 0,
+      max: 200,
+      dirty: false,
+      visible: false,
+      required: false,
+    },
+  ]);
+  const [originalServiceData, setOriginalServiceData] = useState<ServiceData[]>(
+    []
+  );
+
+  const initFeesAndCost = (priceData: PriceInfo[]) => {
+    serviceData.forEach((service) => {
+      const record = priceData.find(
+        (item) => item.category === service.category
+      );
+
+      if (record) {
+        const price = record.prices.find(
+          (item) => item.currency === service.currency
+        );
+
+        if (price) {
+          let fees = 0;
+          switch (price.billing_scheme) {
+            case "per_unit":
+              fees = (price.unit_amount * 1) / 100;
+              break;
+            default:
+              break;
+          }
+          service.billing_scheme = price.billing_scheme;
+          service.stripe_price_id = price.stripe_price_id;
+          service.unit_label = record.unit_label;
+          service.product_sid = record.product_sid;
+          service.stripe_product_id = record.stripe_product_id;
+          service.fees = fees;
+          service.feesLabel = `${
+            CurrencySymbol[service.currency || "usd"]
+          }${fees} per ${
+            record.unit_label?.slice(0, 3) === "per"
+              ? record.unit_label.slice(3)
+              : record.unit_label
+          }`;
+        }
+      }
+    });
+
+    setServiceData([...serviceData]);
+  };
+
+  const getServicePrice = (
+    service: ServiceData,
+    capacity: number
+  ): [number, string, number] => {
+    let fees = 0;
+    let feesLabel = "";
+    let cost = 0;
+    const capacityNum = capacity;
+    if (service.billing_scheme === "per_unit") {
+      fees = service.fees;
+      cost = fees * capacityNum;
+    } else if (service.billing_scheme === "tiered") {
+      const filteredTiers = service.tiers
+        ? service.tiers.filter(
+            (item) => !item.up_to || item.up_to >= capacityNum
+          )
+        : [];
+      if (filteredTiers.length) {
+        const tier = filteredTiers[0];
+        if (typeof tier.flat_amount === "number") {
+          fees = tier.flat_amount / 100;
+          cost = fees;
+        } else {
+          fees = tier.unit_amount / 100;
+          cost = fees * capacityNum;
+        }
+      }
+    }
+    feesLabel = `${CurrencySymbol[service.currency || "usd"]}${fees} per ${
+      service.unit_label && service.unit_label.slice(0, 3) === "per"
+        ? service.unit_label.slice(3)
+        : service.unit_label
+    }`;
+
+    return [fees, feesLabel, cost];
+  };
+
+  const setProductsInfo = (data: CurrentUserData) => {
+    const { products } = data.subscription || {};
+
+    const services = serviceData.map((service) => {
+      const { quantity } = products
+        ? products.find((item) => item.name === service.name) || {}
+        : { quantity: null };
+      const [fees, feesLabel, cost] = getServicePrice(service, quantity || 0);
+      return {
+        ...service,
+        capacity: quantity || 0,
+        invalid: false,
+        fees,
+        feesLabel,
+        cost,
+        visible: hasValue(quantity) && quantity > 0,
+      };
+    });
+
+    setServiceData(services);
+    setOriginalServiceData([...services]);
+  };
+
+  const updateServiceData = (
+    index: number,
+    key: string,
+    value: typeof serviceData[number][keyof ServiceData]
+  ) => {
+    setServiceData(
+      serviceData.map((g, i) =>
+        i === index
+          ? {
+              ...g,
+              [key]: value,
+              ...(key === "capacity" && { cost: Number(value) * g.fees }),
+            }
+          : g
+      )
+    );
+  };
+
+  useEffect(() => {
+    if (priceInfo) {
+      initFeesAndCost(priceInfo);
+    }
+
+    if (userData && priceInfo) {
+      setProductsInfo(userData);
+    }
+  }, [priceInfo, userData]);
+
+  useEffect(() => {
+    if (isModifySubscription && originalServiceData.length > 0) {
+      setIsDisableSubmitButton(
+        serviceData[0].capacity === originalServiceData[0].capacity &&
+          serviceData[1].capacity === originalServiceData[1].capacity
+      );
+    }
+    setTotal(serviceData.reduce((res, service) => res + service.cost || 0, 0));
+  }, [serviceData]);
+
+  return (
+    <>
+      <H1 className="h2">
+        {isModifySubscription
+          ? "Configure Your Subscription"
+          : "Upgrade your Subscription"}
+      </H1>
+      {isShowModalLoader && (
+        <ModalLoader>
+          <P>
+            Your requested changes are being processed. Please do not leave the
+            page or hit the back button until complete.
+          </P>
+        </ModalLoader>
+      )}
+      {isReviewChanges && !isShowModalLoader && (
+        <Modal
+          handleCancel={() => {
+            setIsReviewChanges(false);
+            setIsDisableSubmitButton(false);
+          }}
+          handleSubmit={handleReviewChangeSubmit}
+        >
+          <H1 className="h4">Confirm Changes</H1>
+          <P>
+            By pressing{" "}
+            <span>
+              <strong>Confirm</strong>
+            </span>{" "}
+            below, your plan will be immediately adjusted to the following
+            levels:
+          </P>
+          <ul className="m">
+            <li>{`- ${serviceData[0].capacity} simultaneous calls`}</li>
+            {userData?.account && userData?.account.device_to_call_ratio && (
+              <li>{`- ${
+                userData?.account.device_to_call_ratio *
+                (serviceData[0].capacity + serviceData[1].capacity)
+              } registered devices`}</li>
+            )}
+          </ul>
+          <P>
+            {(billingCharge?.prorated_cost || 0) > 0 &&
+              `Your new monthly charge will be $${
+                (billingCharge?.monthly_cost || 0) / 100
+              }, and you will immediately be charged a one-time prorated amount of $${
+                (billingCharge?.prorated_cost || 0) / 100
+              } to cover the remainder of the current billing period.`}
+            {billingCharge?.prorated_cost === 0 &&
+              `Your monthly charge will be $${
+                (billingCharge.monthly_cost || 0) / 100
+              }.`}
+            {(billingCharge?.prorated_cost || 0) < 0 &&
+              `Your new monthly charge will be $${
+                (billingCharge?.monthly_cost || 0) / 100
+              }, and you will receive a credit of $${
+                -(billingCharge?.prorated_cost || 0) / 100
+              } on your next invoice to reflect changes made during the current billing period.`}
+          </P>
+        </Modal>
+      )}
+      {isReturnToFreePlan && !isShowModalLoader && (
+        <Modal
+          handleCancel={() => setIsReturnToFreePlan(false)}
+          handleSubmit={handleReturnToFreePlan}
+        >
+          <H1 className="h4">Return to Free Plan</H1>
+          <P>
+            Returning to the free plan will reduce your capacity to a maximum of
+            1 simultaneous call session and 1 registered device. Your current
+            plan and capacity will continue through the rest of the billing
+            cycle and your plan change will take effect at the beginning of the
+            next billing cycle. Are you sure you want to continue?
+          </P>
+        </Modal>
+      )}
+      <Section slim>
+        <form className="form form--internal" onSubmit={handleSubmit}>
+          <div className="grid grid--col4--users">
+            <div className="grid__row grid__th">
+              <div>Service</div>
+              <div>Capacity</div>
+              <div>Price</div>
+              <div>Cost</div>
+            </div>
+
+            {serviceData &&
+              serviceData
+                .filter((service) => service.visible)
+                .map((service, idx) => (
+                  <React.Fragment key={`subscription-${idx}`}>
+                    <div className="grid__row">
+                      <div>
+                        <label htmlFor={service.name || ""}>
+                          {service.service}
+                          <span>*</span>
+                        </label>
+                      </div>
+                      <div>
+                        <input
+                          id="tech_prefix"
+                          name="tech_prefix"
+                          type="number"
+                          value={service.capacity}
+                          required
+                          min={service.min}
+                          max={service.max}
+                          onChange={(e) => {
+                            updateServiceData(
+                              idx,
+                              "capacity",
+                              e.target.value ? Number(e.target.value) : ""
+                            );
+                          }}
+                        />
+                      </div>
+
+                      <div>
+                        <em>{service.feesLabel}</em>
+                      </div>
+
+                      <div>
+                        <P>
+                          <strong>
+                            {CurrencySymbol[service.currency || "usd"]}
+                            {service.cost}
+                          </strong>
+                        </P>
+                      </div>
+                    </div>
+                  </React.Fragment>
+                ))}
+            {serviceData[0].capacity !== 0 && !serviceData[1].visible && (
+              <>
+                <div className="grid__row">
+                  <label htmlFor="max_concurrent_call_sessons">
+                    {`With ${
+                      serviceData[0].capacity
+                    } call sessions you can register ${
+                      serviceData[0].capacity *
+                      (userData?.account?.device_to_call_ratio || 0)
+                    } concurrent devices`}
+                  </label>
+
+                  <div>
+                    <Button
+                      mainStyle="hollow"
+                      onClick={() =>
+                        setServiceData((prev) => {
+                          prev[1].visible = true;
+                          return [...prev];
+                        })
+                      }
+                    >
+                      Would you like to purchase additional device
+                      registrations?
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+            <div className="grid__row">
+              <div>
+                <label htmlFor="total">Total Monthly Cost</label>
+              </div>
+              <div></div>
+              <div></div>
+              <div>
+                <P>
+                  <strong>
+                    {CurrencySymbol[serviceData[0].currency || "usd"]}
+                    {total}
+                  </strong>
+                </P>
+              </div>
+            </div>
+            {!isModifySubscription && (
+              <fieldset>
+                <label htmlFor="total">Payment Information</label>
+                <div className="grid__row">
+                  <div></div>
+                  <div>
+                    <PaymentElement
+                      options={{
+                        paymentMethodOrder: ["card"],
+                      }}
+                    />
+                  </div>
+                </div>
+              </fieldset>
+            )}
+          </div>
+          <fieldset>
+            <>
+              <div className={isModifySubscription ? "mast" : ""}>
+                {isModifySubscription && (
+                  <ButtonGroup right>
+                    <Button
+                      type="button"
+                      subStyle="grey"
+                      mainStyle="hollow"
+                      onClick={() => setIsReturnToFreePlan(true)}
+                      small
+                    >
+                      Return to free plan
+                    </Button>
+                  </ButtonGroup>
+                )}
+
+                <ButtonGroup right>
+                  <Button
+                    subStyle="grey"
+                    as={Link}
+                    to={`${ROUTE_INTERNAL_ACCOUNTS}/${userData?.account?.account_sid}/edit`}
+                    small
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" disabled={isDisableSubmitButton} small>
+                    {isModifySubscription
+                      ? "Review Changes"
+                      : `Pay ${CurrencySymbol[serviceData[0].currency || "usd"]}
+                ${total} and Upgrade to Paid Plan`}
+                  </Button>
+                </ButtonGroup>
+              </div>
+            </>
+          </fieldset>
+        </form>
+      </Section>
+    </>
+  );
+};
+
+export default SubscriptionForm;

src/containers/internal/views/accounts/subscription.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {
+  ENABLE_HOSTED_SYSTEM,
+  STRIPE_PUBLISHABLE_KEY,
+} from "src/api/constants";
+
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import SubscriptionForm from "./subscription-form";
+
+export const stripePromise = ENABLE_HOSTED_SYSTEM
+  ? loadStripe(STRIPE_PUBLISHABLE_KEY)
+  : null;
+
+export const Subscription = () => {
+  return (
+    <>
+      <Elements
+        stripe={stripePromise}
+        options={{
+          mode: "setup",
+          currency: "usd",
+          paymentMethodCreation: "manual",
+        }}
+      >
+        <SubscriptionForm />
+      </Elements>
+    </>
+  );
+};
+
+export default Subscription;

src/containers/internal/views/alerts/alert-detail-item.tsx

@@ -0,0 +1,59 @@
+import dayjs from "dayjs";
+import React, { useState } from "react";
+import { Alert } from "src/api/types";
+import { Icons } from "src/components";
+
+type AlertDetailsItemProps = {
+  alert: Alert;
+};
+
+export const AlertDetailItem = ({ alert }: AlertDetailsItemProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="item">
+      <details
+        className="clean"
+        onToggle={(e: React.BaseSyntheticEvent) => {
+          if (e.target.open && !open) {
+            setOpen(e.target.open);
+          }
+        }}
+      >
+        <summary className="txt--jam">
+          <div className="item__info">
+            <div className="item__title">
+              <strong>
+                {dayjs(alert.time).format("YYYY MM.DD hh:mm:ss a")}
+              </strong>
+            </div>
+            <div className="item__meta">
+              <div>
+                <div className="i txt--teal">
+                  <Icons.AlertCircle />
+                  <span>{alert.message}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </summary>
+        <div className="item__details">
+          <div className="pre-grid">
+            {Object.keys(alert).map((key) => (
+              <React.Fragment key={key}>
+                <div>{key}:</div>
+                <div>
+                  {alert[key as keyof typeof alert]
+                    ? String(alert[key as keyof typeof alert])
+                    : "null"}
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </details>
+    </div>
+  );
+};
+
+export default AlertDetailItem;

src/containers/internal/views/alerts/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { ButtonGroup, H1, M, MS } from "jambonz-ui";
+import React, { useEffect, useMemo, useState } from "react";
+import { ButtonGroup, H1, M, MS } from "@jambonz/ui-kit";
 import dayjs from "dayjs";
 
 import { getAlerts, useServiceProviderData } from "src/api";
@@ -16,12 +16,17 @@ import {
   Section,
   SelectFilter,
   Spinner,
-  Icons,
 } from "src/components";
 
 import type { Account, Alert, PageQuery } from "src/api/types";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
+import {
+  getAccountFilter,
+  getQueryFilter,
+  setLocation,
+} from "src/store/localStore";
+import AlertDetailItem from "./alert-detail-item";
 
 export const Alerts = () => {
   const user = useSelectState("user");
@@ -57,7 +62,17 @@ export const Alerts = () => {
       });
   };
 
+  useMemo(() => {
+    if (getQueryFilter()) {
+      const [date] = getQueryFilter().split("/");
+      setAccountSid(getAccountFilter() || accountSid);
+      if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
+      setDateFilter(date);
+    }
+  }, [accountSid]);
+
   useEffect(() => {
+    setLocation();
     if (user?.account_sid && user.scope === USER_ACCOUNT) {
       setAccountSid(user?.account_sid);
     }
@@ -93,25 +108,11 @@ export const Alerts = () => {
       </section>
       <Section {...(hasLength(alerts) && { slim: true })}>
         <div className="list">
-          {!hasValue(alerts) ? (
+          {!hasValue(alerts) && hasLength(accounts) ? (
             <Spinner />
           ) : hasLength(alerts) ? (
             alerts.map((alert) => (
-              <div className="item" key={`${alert.alert_type}-${alert.time}`}>
-                <div className="item__info">
-                  <div className="item__title txt--jam">
-                    <strong>
-                      {dayjs(alert.time).format("YYYY MM.DD hh:mm a")}
-                    </strong>
-                  </div>
-                  <div className="item__meta">
-                    <div className="i">
-                      <Icons.AlertCircle />
-                      <span>{alert.message}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <AlertDetailItem key={alert.time} alert={alert} />
             ))
           ) : (
             <M>No data.</M>

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";
 

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";

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";
@@ -34,7 +34,7 @@ export const EditApplication = () => {
 
   return (
     <>
-      <H1 className="h2">Edit Application</H1>
+      <H1 className="h2">Edit application</H1>
       <ApplicationForm application={{ data, refetch, error }} />
     </>
   );

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 React, { useEffect, useMemo, useState } from "react";
+import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";
 
 import { toastError, toastSuccess, useSelectState } from "src/store";
@@ -16,10 +16,7 @@ import {
   LANG_EN_US,
   VENDOR_GOOGLE,
   LANG_EN_US_STANDARD_C,
-  VENDOR_AWS,
-  VENDOR_WELLSAID,
-  useSpeechVendors,
-  VENDOR_DEEPGRAM,
+  VENDOR_CUSTOM,
 } from "src/vendor";
 import {
   postApplication,
@@ -31,14 +28,17 @@ import {
   ROUTE_INTERNAL_ACCOUNTS,
   ROUTE_INTERNAL_APPLICATIONS,
 } from "src/router/routes";
-import { DEFAULT_WEBHOOK, WEBHOOK_METHODS } from "src/api/constants";
+import {
+  DEFAULT_WEBHOOK,
+  DISABLE_CALL_RECORDING,
+  WEBHOOK_METHODS,
+} from "src/api/constants";
 
 import type {
   RecognizerVendors,
   SynthesisVendors,
-  Voice,
-  VoiceLanguage,
-  Language,
+  VendorOptions,
+  LabelOptions,
 } from "src/vendor/types";
 
 import type {
@@ -47,9 +47,12 @@ 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";
+import SpeechProviderSelection from "./speech-selection";
 
 type ApplicationFormProps = {
   application?: UseApiDataMap<Application>;
@@ -57,18 +60,27 @@ type ApplicationFormProps = {
 
 export const ApplicationForm = ({ application }: ApplicationFormProps) => {
   const navigate = useNavigate();
-  const { synthesis, recognizers } = useSpeechVendors();
   const user = useSelectState("user");
+  const currentServiceProvider = useSelectState("currentServiceProvider");
   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);
@@ -78,6 +90,43 @@ 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 [ttsVendorOptions, setttsVendorOptions] =
+    useState<VendorOptions[]>(vendors);
+  const [sttVendorOptions, setSttVendorOptions] =
+    useState<VendorOptions[]>(vendors);
+  const [recogLabel, setRecogLabel] = useState("");
+  const [ttsLabelOptions, setTtsLabelOptions] = useState<LabelOptions[]>([]);
+  const [sttLabelOptions, setSttLabelOptions] = useState<LabelOptions[]>([]);
+  const [fallbackTtsLabelOptions, setFallbackTtsLabelOptions] = useState<
+    LabelOptions[]
+  >([]);
+  const [fallbackSttLabelOptions, setFallbackSttLabelOptions] = useState<
+    LabelOptions[]
+  >([]);
+  const [synthLabel, setSynthLabel] = useState("");
+  const [recordAllCalls, setRecordAllCalls] = useState(false);
+
+  const [useForFallbackSpeech, setUseForFallbackSpeech] = useState(false);
+  const [fallbackSpeechSynthsisVendor, setFallbackSpeechSynthsisVendor] =
+    useState<keyof SynthesisVendors>(VENDOR_GOOGLE);
+  const [fallbackSpeechSynthsisLanguage, setFallbackSpeechSynthsisLanguage] =
+    useState(LANG_EN_US);
+  const [fallbackSpeechSynthsisVoice, setFallbackSpeechSynthsisVoice] =
+    useState(LANG_EN_US_STANDARD_C);
+  const [fallbackSpeechSynthsisLabel, setFallbackSpeechSynthsisLabel] =
+    useState("");
+  const [fallbackSpeechRecognizerVendor, setFallbackSpeechRecognizerVendor] =
+    useState<keyof RecognizerVendors>(VENDOR_GOOGLE);
+  const [
+    fallbackSpeechRecognizerLanguage,
+    setFallbackSpeechRecognizerLanguage,
+  ] = useState(LANG_EN_US);
+  const [fallbackSpeechRecognizerLabel, setFallbackSpeechRecognizerLabel] =
+    useState("");
+  const [initalCheckFallbackSpeech, setInitalCheckFallbackSpeech] =
+    useState(false);
 
   /** This lets us map and render the same UI for each... */
   const webhooks = [
@@ -85,15 +134,19 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
       label: "Calling",
       prefix: "call_webhook",
       stateVal: callWebhook,
+      tmpStateVal: tmpCallWebhook,
       stateSet: setCallWebhook,
+      tmpStateSet: setTmpCallWebhook,
       initialCheck: initialCallWebhook,
       required: true,
     },
     {
-      label: "Call Status",
+      label: "Call status",
       prefix: "status_webhook",
       stateVal: statusWebhook,
+      tmpStateVal: tmpStatusWebhook,
       stateSet: setStatusWebhook,
+      tmpStateSet: setTmpStatusWebhook,
       initialCheck: initialStatusWebhook,
       required: true,
     },
@@ -101,7 +154,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
       label: "Messaging",
       prefix: "message_webhook",
       stateVal: messageWebhook,
+      tmpStateVal: tmpMessageWebhook,
       stateSet: setMessageWebhook,
+      tmpStateSet: setTmpMessageWebhook,
       initialCheck: initialMessageWebhook,
       required: false,
     },
@@ -142,17 +197,43 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
       }
     }
 
-    const payload = {
+    const payload: Partial<Application> = {
       name: applicationName,
+      app_json: applicationJson || null,
       call_hook: callWebhook || null,
       account_sid: accountSid || null,
       messaging_hook: messageWebhook || null,
       call_status_hook: statusWebhook || null,
       speech_synthesis_vendor: synthVendor || null,
       speech_synthesis_language: synthLang || null,
+      speech_synthesis_label: synthLabel || null,
       speech_synthesis_voice: synthVoice || null,
       speech_recognizer_vendor: recogVendor || null,
       speech_recognizer_language: recogLang || null,
+      speech_recognizer_label: recogLabel || null,
+      record_all_calls: recordAllCalls ? 1 : 0,
+      use_for_fallback_speech: useForFallbackSpeech ? 1 : 0,
+      fallback_speech_synthesis_vendor: useForFallbackSpeech
+        ? fallbackSpeechSynthsisVendor || null
+        : null,
+      fallback_speech_synthesis_language: useForFallbackSpeech
+        ? fallbackSpeechSynthsisLanguage || null
+        : null,
+      fallback_speech_synthesis_voice: useForFallbackSpeech
+        ? fallbackSpeechSynthsisVoice || null
+        : null,
+      fallback_speech_synthesis_label: useForFallbackSpeech
+        ? fallbackSpeechSynthsisLabel || null
+        : null,
+      fallback_speech_recognizer_vendor: useForFallbackSpeech
+        ? fallbackSpeechRecognizerVendor || null
+        : null,
+      fallback_speech_recognizer_language: useForFallbackSpeech
+        ? fallbackSpeechRecognizerLanguage || null
+        : null,
+      fallback_speech_recognizer_label: useForFallbackSpeech
+        ? fallbackSpeechRecognizerLabel || null
+        : null,
     };
 
     if (application && application.data) {
@@ -172,6 +253,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
         .then(() => {
           toastSuccess("Application created successfully");
           navigate(ROUTE_INTERNAL_APPLICATIONS);
+          setAccountFilter(accountSid);
         })
         .catch((error) => {
           toastError(error.msg);
@@ -179,12 +261,195 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
     }
   };
 
+  useMemo(() => {
+    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,
+          })
+        );
+      setttsVendorOptions(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,
+          })
+        );
+      setSttVendorOptions(vendors.concat(v2));
+
+      const noneLabelObject = {
+        name: "None",
+        value: "",
+      };
+
+      let c1 = credentials.filter(
+        (c) =>
+          c.vendor === synthVendor &&
+          (!c.account_sid || c.account_sid === accountSid) &&
+          c.use_for_tts
+      );
+      let c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+
+      setTtsLabelOptions(
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+      );
+
+      c1 = fallbackSpeechSynthsisVendor
+        ? credentials.filter(
+            (c) =>
+              c.vendor === fallbackSpeechSynthsisVendor &&
+              (!c.account_sid || c.account_sid === accountSid) &&
+              c.use_for_tts
+          )
+        : [];
+
+      c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+      setFallbackTtsLabelOptions(
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+      );
+
+      c1 = credentials.filter(
+        (c) =>
+          c.vendor === recogVendor &&
+          (!c.account_sid || c.account_sid === accountSid) &&
+          c.use_for_stt
+      );
+      c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+
+      setSttLabelOptions(
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+      );
+
+      c1 = fallbackSpeechRecognizerVendor
+        ? credentials.filter(
+            (c) =>
+              c.vendor === fallbackSpeechRecognizerVendor &&
+              (!c.account_sid || c.account_sid === accountSid) &&
+              c.use_for_stt
+          )
+        : [];
+      c2 = c1
+        .filter((c) => c.label)
+        .map((c) =>
+          Object.assign({
+            name: c.label,
+            value: c.label,
+          })
+        );
+
+      setFallbackSttLabelOptions(
+        c1.length !== c2.length ? [noneLabelObject, ...c2] : c2
+      );
+    }
+  }, [
+    credentials,
+    synthVendor,
+    recogVendor,
+    fallbackSpeechRecognizerVendor,
+    fallbackSpeechSynthsisVendor,
+  ]);
+
   useEffect(() => {
+    if (accountSid) {
+      setApiUrl(`Accounts/${accountSid}/SpeechCredentials`);
+    }
+  }, [accountSid]);
+
+  useEffect(() => {
+    let label: string;
+    // Synthesis Label
+    label = application?.data?.speech_synthesis_label || "";
+    if (ttsLabelOptions && !ttsLabelOptions.find((l) => l.value === label)) {
+      label = ttsLabelOptions.length ? ttsLabelOptions[0].value : "";
+    }
+    setSynthLabel(label);
+
+    // fallback Synthesis Label
+    label = application?.data?.fallback_speech_synthesis_label || "";
+    if (
+      fallbackTtsLabelOptions &&
+      !fallbackTtsLabelOptions.find((l) => l.value === label)
+    ) {
+      label = fallbackTtsLabelOptions.length
+        ? fallbackTtsLabelOptions[0].value
+        : "";
+    }
+    setFallbackSpeechSynthsisLabel(label);
+
+    // regconizer label
+    label = application?.data?.speech_recognizer_label || "";
+    if (sttLabelOptions && !sttLabelOptions.find((l) => l.value === label)) {
+      label = sttLabelOptions.length ? sttLabelOptions[0].value : "";
+    }
+    setRecogLabel(label);
+
+    // fallback regconizer label
+    label = application?.data?.fallback_speech_recognizer_label || "";
+    if (
+      fallbackSttLabelOptions &&
+      !fallbackSttLabelOptions.find((l) => l.value === label)
+    ) {
+      label = fallbackSttLabelOptions.length
+        ? fallbackSttLabelOptions[0].value
+        : "";
+    }
+    setFallbackSpeechRecognizerLabel(label);
+  }, [
+    ttsLabelOptions,
+    sttLabelOptions,
+    fallbackTtsLabelOptions,
+    fallbackSttLabelOptions,
+    application,
+  ]);
+
+  useEffect(() => {
+    setLocation();
     if (application && application.data) {
       setApplicationName(application.data.name);
+      setRecordAllCalls(application.data.record_all_calls ? true : false);
+      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 ||
@@ -196,6 +461,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 ||
@@ -207,6 +473,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 ||
@@ -242,12 +509,84 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
 
       if (application.data.speech_recognizer_language)
         setRecogLang(application.data.speech_recognizer_language);
+
+      if (application.data.use_for_fallback_speech) {
+        setUseForFallbackSpeech(application.data.use_for_fallback_speech > 0);
+        setInitalCheckFallbackSpeech(
+          application.data.use_for_fallback_speech > 0
+        );
+      }
+      if (application.data.fallback_speech_recognizer_vendor) {
+        setFallbackSpeechRecognizerVendor(
+          application.data
+            .fallback_speech_recognizer_vendor as keyof RecognizerVendors
+        );
+      }
+      if (application.data.fallback_speech_recognizer_language) {
+        setFallbackSpeechRecognizerLanguage(
+          application.data.fallback_speech_recognizer_language
+        );
+      }
+
+      if (application.data.fallback_speech_synthesis_vendor) {
+        setFallbackSpeechSynthsisVendor(
+          application.data
+            .fallback_speech_synthesis_vendor as keyof SynthesisVendors
+        );
+      }
+      if (application.data.fallback_speech_synthesis_language) {
+        setFallbackSpeechSynthsisLanguage(
+          application.data.fallback_speech_synthesis_language
+        );
+      }
+      if (application.data.fallback_speech_synthesis_voice) {
+        setFallbackSpeechSynthsisVoice(
+          application.data.fallback_speech_synthesis_voice
+        );
+      }
     }
   }, [application]);
 
+  const swapPrimaryAndfalloverSpeech = () => {
+    let tmp;
+
+    tmp = synthVendor;
+    setSynthVendor(fallbackSpeechSynthsisVendor);
+    setFallbackSpeechSynthsisVendor(tmp);
+
+    tmp = synthLang;
+    setSynthLang(fallbackSpeechSynthsisLanguage);
+    setFallbackSpeechSynthsisLanguage(synthLang);
+
+    tmp = synthVoice;
+    setSynthVoice(fallbackSpeechSynthsisVoice);
+    setFallbackSpeechSynthsisVoice(tmp);
+
+    tmp = synthLabel;
+    setSynthLabel(fallbackSpeechSynthsisLabel);
+    setFallbackSpeechSynthsisLabel(tmp);
+
+    tmp = recogVendor;
+    setRecogVendor(fallbackSpeechRecognizerVendor);
+    setFallbackSpeechRecognizerVendor(tmp);
+
+    tmp = recogLang;
+    setRecogLang(fallbackSpeechRecognizerLanguage);
+    setFallbackSpeechRecognizerLanguage(tmp);
+
+    tmp = recogLabel;
+    setRecogLabel(fallbackSpeechRecognizerLabel);
+    setFallbackSpeechRecognizerLabel(tmp);
+  };
+
   return (
     <Section slim>
-      <form className="form form--internal" onSubmit={handleSubmit}>
+      <form
+        className={`form form--internal ${
+          !application?.data && application?.refetch ? "form--blur" : ""
+        }`}
+        onSubmit={handleSubmit}
+      >
         <fieldset>
           <MS>{MSG_REQUIRED_FIELDS}</MS>
         </fieldset>
@@ -287,7 +626,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
               <div className="multi">
                 <div className="inp">
                   <label htmlFor={`${webhook.prefix}_url`}>
-                    {webhook.label} Webhook{" "}
+                    {webhook.label} webhook{" "}
                     {webhook.required ? <span>*</span> : ""}
                   </label>
                   <input
@@ -324,8 +663,20 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
               <Checkzone
                 hidden
                 name={webhook.prefix}
-                label="Use HTTP Basic Authentication"
+                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>
@@ -341,13 +692,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
@@ -361,163 +705,137 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                       password: e.target.value,
                     });
                   }}
-                  required={
-                    webhook.required &&
-                    webhook.stateVal.username &&
-                    !webhook.stateVal.password
-                      ? true
-                      : false
-                  }
                 />
               </Checkzone>
             </fieldset>
           );
         })}
-        {synthesis && (
-          <fieldset>
-            <label htmlFor="synthesis_vendor">Speech Synthesis Vendor</label>
-            <Selector
-              id="synthesis_vendor"
-              name="synthesis_vendor"
-              value={synthVendor}
-              options={vendors.filter(
-                (vendor) => vendor.value != VENDOR_DEEPGRAM
-              )}
-              onChange={(e) => {
-                const vendor = e.target.value as keyof SynthesisVendors;
-                setSynthVendor(vendor);
+        <SpeechProviderSelection
+          serviceProviderSid={
+            currentServiceProvider?.service_provider_sid || ""
+          }
+          accountSid={accountSid}
+          credentials={credentials}
+          ttsVendor={[synthVendor, setSynthVendor]}
+          ttsVendorOptions={ttsVendorOptions}
+          ttsVoice={[synthVoice, setSynthVoice]}
+          ttsLang={[synthLang, setSynthLang]}
+          ttsLabelOptions={ttsLabelOptions}
+          ttsLabel={[synthLabel, setSynthLabel]}
+          sttVendor={[recogVendor, setRecogVendor]}
+          sttVendorOptions={sttVendorOptions}
+          sttLang={[recogLang, setRecogLang]}
+          sttLabelOptions={sttLabelOptions}
+          sttLabel={[recogLabel, setRecogLabel]}
+        />
 
-                /** When using Google and en-US, ensure "Standard-C" is used as default */
-                if (
-                  e.target.value === VENDOR_GOOGLE &&
-                  synthLang === LANG_EN_US
-                ) {
-                  setSynthVoice(LANG_EN_US_STANDARD_C);
-                  return;
-                }
-
-                /** Google and AWS have different language lists */
-                /** If the new language doesn't map then default to "en-US" */
-                let newLang = synthesis[vendor].find(
-                  (lang) => lang.code === synthLang
-                );
-
-                if (newLang) {
-                  setSynthVoice(newLang.voices[0].value);
-                  return;
-                }
-
-                newLang = synthesis[vendor].find(
-                  (lang) => lang.code === LANG_EN_US
-                );
-
-                setSynthLang(LANG_EN_US);
-                setSynthVoice(newLang!.voices[0].value);
-              }}
+        <fieldset>
+          <Checkzone
+            hidden
+            name="cz_fallback_speech"
+            label="Use a fallback speech vendor if primary fails"
+            initialCheck={initalCheckFallbackSpeech}
+            handleChecked={(e) => {
+              setUseForFallbackSpeech(e.target.checked);
+            }}
+          >
+            <SpeechProviderSelection
+              serviceProviderSid={
+                currentServiceProvider?.service_provider_sid || ""
+              }
+              accountSid={accountSid}
+              credentials={credentials}
+              ttsVendor={[
+                fallbackSpeechSynthsisVendor,
+                setFallbackSpeechSynthsisVendor,
+              ]}
+              ttsVendorOptions={ttsVendorOptions}
+              ttsVoice={[
+                fallbackSpeechSynthsisVoice,
+                setFallbackSpeechSynthsisVoice,
+              ]}
+              ttsLang={[
+                fallbackSpeechSynthsisLanguage,
+                setFallbackSpeechSynthsisLanguage,
+              ]}
+              ttsLabelOptions={fallbackTtsLabelOptions}
+              ttsLabel={[
+                fallbackSpeechSynthsisLabel,
+                setFallbackSpeechSynthsisLabel,
+              ]}
+              sttVendor={[
+                fallbackSpeechRecognizerVendor,
+                setFallbackSpeechRecognizerVendor,
+              ]}
+              sttVendorOptions={sttVendorOptions}
+              sttLang={[
+                fallbackSpeechRecognizerLanguage,
+                setFallbackSpeechRecognizerLanguage,
+              ]}
+              sttLabelOptions={fallbackSttLabelOptions}
+              sttLabel={[
+                fallbackSpeechRecognizerLabel,
+                setFallbackSpeechRecognizerLabel,
+              ]}
             />
-            {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) => ({
-                      name: lang.name,
-                      value: lang.code,
-                    })
-                  )}
-                  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;
-                    }
-
-                    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[]
-                  }
-                  onChange={(e) => setSynthVoice(e.target.value)}
-                />
-              </>
-            )}
-          </fieldset>
-        )}
-        {recognizers && (
+            <fieldset>
+              <Button
+                type="button"
+                small
+                onClick={swapPrimaryAndfalloverSpeech}
+              >
+                Swap primary and fallback
+              </Button>
+            </fieldset>
+          </Checkzone>
+        </fieldset>
+        {(import.meta.env.INITIAL_APP_JSON_ENABLED === undefined ||
+          import.meta.env.INITIAL_APP_JSON_ENABLED) && (
           <fieldset>
-            <label htmlFor="recognizer_vendor">Speech Recognizer Vendor</label>
-            <Selector
-              id="recognizer_vendor"
-              name="recognizer_vendor"
-              value={recogVendor}
-              options={vendors.filter(
-                (vendor) => vendor.value != VENDOR_WELLSAID
-              )}
-              onChange={(e) => {
-                const vendor = e.target.value as keyof RecognizerVendors;
-                setRecogVendor(vendor);
-
-                /** Google and AWS have different language lists */
-                /** If the new language doesn't map then default to "en-US" */
-                const newLang = recognizers[vendor].find(
-                  (lang: Language) => lang.code === recogLang
-                );
-
-                if (
-                  (vendor === VENDOR_GOOGLE || vendor === VENDOR_AWS) &&
-                  !newLang
-                ) {
-                  setRecogLang(LANG_EN_US);
+            <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("");
                 }
               }}
-            />
-            {recogVendor && 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);
-                  }}
-                />
-              </>
-            )}
+            >
+              <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>
         )}
+        {!DISABLE_CALL_RECORDING &&
+          accounts?.filter((a) => a.account_sid === accountSid).length &&
+          !accounts?.filter((a) => a.account_sid === accountSid)[0]
+            .record_all_calls && (
+            <fieldset>
+              <label htmlFor="record_all_call" className="chk">
+                <input
+                  id="record_all_call"
+                  name="record_all_call"
+                  type="checkbox"
+                  onChange={(e) => setRecordAllCalls(e.target.checked)}
+                  checked={recordAllCalls}
+                />
+                <div>Record all calls</div>
+              </label>
+            </fieldset>
+          )}
         {message && <fieldset>{<Message message={message} />}</fieldset>}
         <fieldset>
           <ButtonGroup left>

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";
@@ -27,6 +27,7 @@ import type { Application, Account } from "src/api/types";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
 import { USER_ACCOUNT } from "src/api/constants";
+import { getAccountFilter, setLocation } from "src/store/localStore";
 
 export const Applications = () => {
   const user = useSelectState("user");
@@ -68,8 +69,11 @@ export const Applications = () => {
   };
 
   useEffect(() => {
+    setLocation();
     if (user?.account_sid && user.scope === USER_ACCOUNT) {
       setAccountSid(user?.account_sid);
+    } else {
+      setAccountSid(getAccountFilter() || accountSid);
     }
 
     if (accountSid) {
@@ -92,7 +96,7 @@ export const Applications = () => {
           </Link>
         )}
       </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
         <SearchFilter
           placeholder="Filter applications"
           filter={[filter, setFilter]}
@@ -106,7 +110,7 @@ export const Applications = () => {
       </section>
       <Section {...(hasLength(filteredApplications) && { slim: true })}>
         <div className="list">
-          {!hasValue(applications) ? (
+          {!hasValue(applications) && hasLength(accounts) ? (
             <Spinner />
           ) : hasLength(filteredApplications) ? (
             filteredApplications.map((application) => {

src/containers/internal/views/applications/speech-selection.tsx

@@ -0,0 +1,577 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  getGoogleCustomVoices,
+  getSpeechSupportedLanguagesAndVoices,
+} from "src/api";
+import { USER_ADMIN } from "src/api/constants";
+import {
+  SpeechCredential,
+  SpeechSupportedLanguagesAndVoices,
+} from "src/api/types";
+import { Selector } from "src/components/forms";
+import { SelectorOption } from "src/components/forms/selector";
+import { toastError, useSelectState } from "src/store";
+import { hasLength } from "src/utils";
+import {
+  ELEVENLABS_LANG_EN,
+  LANG_COBALT_EN_US,
+  LANG_EN_US,
+  LANG_EN_US_STANDARD_C,
+  VENDOR_AWS,
+  VENDOR_COBALT,
+  VENDOR_CUSTOM,
+  VENDOR_DEEPGRAM,
+  VENDOR_ASSEMBLYAI,
+  VENDOR_ELEVENLABS,
+  VENDOR_GOOGLE,
+  VENDOR_MICROSOFT,
+  VENDOR_SONIOX,
+  VENDOR_WELLSAID,
+  VENDOR_WHISPER,
+} from "src/vendor";
+import {
+  LabelOptions,
+  RecognizerVendors,
+  SynthesisVendors,
+  VendorOptions,
+} from "src/vendor/types";
+type SpeechProviderSelectionProbs = {
+  accountSid: string;
+  serviceProviderSid: string;
+  credentials: SpeechCredential[] | undefined;
+  ttsVendor: [
+    keyof SynthesisVendors,
+    React.Dispatch<React.SetStateAction<keyof SynthesisVendors>>
+  ];
+  ttsVendorOptions: VendorOptions[];
+  ttsVoice: [string, React.Dispatch<React.SetStateAction<string>>];
+  ttsLang: [string, React.Dispatch<React.SetStateAction<string>>];
+  ttsLabelOptions: LabelOptions[];
+  ttsLabel: [string, React.Dispatch<React.SetStateAction<string>>];
+  sttVendor: [
+    keyof RecognizerVendors,
+    React.Dispatch<React.SetStateAction<keyof RecognizerVendors>>
+  ];
+  sttVendorOptions: VendorOptions[];
+  sttLang: [string, React.Dispatch<React.SetStateAction<string>>];
+  sttLabelOptions: LabelOptions[];
+  sttLabel: [string, React.Dispatch<React.SetStateAction<string>>];
+};
+
+export const SpeechProviderSelection = ({
+  accountSid,
+  serviceProviderSid,
+  credentials,
+  ttsVendor: [synthVendor, setSynthVendor],
+  ttsVendorOptions,
+  ttsVoice: [synthVoice, setSynthVoice],
+  ttsLang: [synthLang, setSynthLang],
+  ttsLabelOptions,
+  ttsLabel: [synthLabel, setSynthLabel],
+  sttVendor: [recogVendor, setRecogVendor],
+  sttVendorOptions,
+  sttLang: [recogLang, setRecogLang],
+  sttLabelOptions,
+  sttLabel: [recogLabel, setRecogLabel],
+}: SpeechProviderSelectionProbs) => {
+  const user = useSelectState("user");
+  const [
+    synthesisSupportedLanguagesAndVoices,
+    setSynthesisSupportedLanguagesAndVoices,
+  ] = useState<SpeechSupportedLanguagesAndVoices | null>();
+  const [selectedCredential, setSelectedCredential] = useState<
+    SpeechCredential | undefined
+  >();
+  const [synthesisVoiceOptions, setSynthesisVoiceOptions] = useState<
+    SelectorOption[]
+  >([]);
+  const [synthesisLanguageOptions, setSynthesisLanguageOptions] = useState<
+    SelectorOption[]
+  >([]);
+  const [synthesisModelOptions, setSynthesisModelOptions] = useState<
+    SelectorOption[]
+  >([]);
+  const [
+    synthesisGoogleCustomVoiceOptions,
+    setSynthesisGoogleCustomVoiceOptions,
+  ] = useState<SelectorOption[]>([]);
+  const [recogLanguageOptions, setRecogLanguageOptions] = useState<
+    SelectorOption[]
+  >([]);
+
+  const currentTtsVendor = useRef(synthVendor);
+  const currentSttVendor = useRef(recogVendor);
+  const shouldUpdateTtsVoice = useRef(false);
+  const shouldUpdateSttLanguage = useRef(false);
+  const ttsEffectTimer = useRef<number | null>(null);
+  const sttEffectTimer = useRef<number | null>(null);
+
+  // Get Synthesis languages and voices
+  useEffect(() => {
+    if (
+      !user ||
+      !synthVendor ||
+      (user?.scope === USER_ADMIN && !serviceProviderSid)
+    ) {
+      return;
+    }
+    currentTtsVendor.current = synthVendor;
+    /** When Custom Vendor is used, user you have to input the lange and voice. */
+    if (synthVendor.toString().startsWith(VENDOR_CUSTOM)) {
+      setSynthVoice("");
+      return;
+    }
+    // just execute last change
+    if (ttsEffectTimer.current) {
+      clearTimeout(ttsEffectTimer.current);
+    }
+
+    ttsEffectTimer.current = setTimeout(() => {
+      configSynthesis();
+    }, 200);
+  }, [synthVendor, synthLabel, serviceProviderSid]);
+
+  // Get Recognizer languages and voices
+  useEffect(() => {
+    /** When Custom Vendor is used, user you have to input the lange and voice. */
+    if (recogVendor.toString().startsWith(VENDOR_CUSTOM)) {
+      setRecogLang(LANG_EN_US);
+      return;
+    }
+    if (
+      !user ||
+      !recogVendor ||
+      (user?.scope === USER_ADMIN && !serviceProviderSid)
+    ) {
+      return;
+    }
+    currentSttVendor.current = recogVendor;
+    // just execute last change
+    if (sttEffectTimer.current) {
+      clearTimeout(sttEffectTimer.current);
+    }
+
+    sttEffectTimer.current = setTimeout(() => {
+      configRecognizer();
+    }, 200);
+  }, [recogVendor, recogLabel, serviceProviderSid]);
+
+  useEffect(() => {
+    if (credentials) {
+      setSelectedCredential(
+        credentials.find(
+          (c) => c.vendor === synthVendor && (c.label || "") === synthLabel
+        )
+      );
+    }
+  }, [synthVendor, synthLabel, credentials]);
+
+  useEffect(() => {
+    if (!synthLabel && ttsLabelOptions?.length > 0) {
+      setSynthLabel(ttsLabelOptions[0].value);
+    }
+    if (!recogLabel && sttLabelOptions?.length > 0) {
+      setRecogLabel(sttLabelOptions[0].value);
+    }
+  }, [ttsLabelOptions, sttLabelOptions]);
+
+  useEffect(() => {
+    if (synthesisSupportedLanguagesAndVoices) {
+      // Extract Voice
+      const voicesOpts =
+        synthesisSupportedLanguagesAndVoices.tts?.find((lang) => {
+          if (synthVendor === VENDOR_ELEVENLABS && lang.voices.length > 0) {
+            return true;
+          }
+          return lang.value === synthLang;
+        })?.voices || [];
+
+      if (synthVendor === VENDOR_GOOGLE && synthesisGoogleCustomVoiceOptions) {
+        if (synthesisGoogleCustomVoiceOptions) {
+          setSynthesisVoiceOptions([
+            ...synthesisGoogleCustomVoiceOptions,
+            ...voicesOpts,
+          ]);
+        } else {
+          setSynthesisVoiceOptions(voicesOpts);
+        }
+        if (synthesisGoogleCustomVoiceOptions.length > 0) {
+          updateTtsVoice(synthesisGoogleCustomVoiceOptions[0].value);
+        }
+      } else {
+        setSynthesisVoiceOptions(voicesOpts);
+      }
+    }
+  }, [
+    synthLang,
+    synthesisSupportedLanguagesAndVoices,
+    synthesisGoogleCustomVoiceOptions,
+  ]);
+
+  const configSynthesis = () => {
+    getSpeechSupportedLanguagesAndVoices(
+      serviceProviderSid,
+      synthVendor,
+      synthLabel
+    )
+      .then(({ json }) => {
+        // while fetching data, user might change the vendor
+        if (currentTtsVendor.current !== synthVendor) {
+          return;
+        }
+        setSynthesisSupportedLanguagesAndVoices(json);
+        // Extract model
+        if (json.models && json.models.length) {
+          setSynthesisModelOptions(json.models);
+          if (synthVendor === VENDOR_DEEPGRAM) {
+            setSynthVoice(json.models[0].value);
+            return;
+          }
+        }
+
+        if (json.tts && json.tts.length) {
+          // Extract Language
+          const langOpts = json.tts.map((lang) => ({
+            name: lang.name,
+            value: lang.value,
+          }));
+          setSynthesisLanguageOptions(langOpts);
+
+          // Default setting
+          const googleLang = json.tts.find((lang) => lang.value === synthLang);
+          if (
+            synthVendor === VENDOR_GOOGLE &&
+            (!googleLang ||
+              !googleLang.voices.find((v) => v.value === synthVoice))
+          ) {
+            setSynthLang(LANG_EN_US);
+            updateTtsVoice(LANG_EN_US_STANDARD_C);
+            return;
+          }
+          if (synthVendor === VENDOR_ELEVENLABS) {
+            // Samve Voices applied to all languages
+            // Voices are only available for the 1st language.
+            setSynthLang(ELEVENLABS_LANG_EN);
+            updateTtsVoice(json.tts[0].voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_WHISPER) {
+            const newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
+            setSynthLang(LANG_EN_US);
+            updateTtsVoice(newLang!.voices[0].value);
+            return;
+          }
+          /** Google and AWS have different language lists */
+          /** If the new language doesn't map then default to "en-US" */
+          let newLang = json.tts.find((lang) => lang.value === synthLang);
+
+          if (newLang) {
+            updateTtsVoice(newLang.voices[0].value);
+            return;
+          }
+
+          newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
+
+          setSynthLang(LANG_EN_US);
+          updateTtsVoice(newLang!.voices[0].value);
+        }
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+
+    if (synthVendor === VENDOR_GOOGLE) {
+      getGoogleCustomVoices({
+        ...(synthLabel && { label: synthLabel }),
+        account_sid: accountSid,
+        service_provider_sid: serviceProviderSid,
+      }).then(({ json }) => {
+        // If after successfully fetching data, vendor is still good, then apply value
+        if (currentTtsVendor.current !== VENDOR_GOOGLE) {
+          return;
+        }
+        const customVOices = json.map((v) => ({
+          name: `${v.name} (Custom)`,
+          value: `custom_${v.google_custom_voice_sid}`,
+        }));
+        setSynthesisGoogleCustomVoiceOptions(customVOices);
+      });
+    }
+  };
+
+  const updateTtsVoice = (value: string) => {
+    if (shouldUpdateTtsVoice.current) {
+      setSynthVoice(value);
+      shouldUpdateTtsVoice.current = false;
+    }
+  };
+
+  const configRecognizer = () => {
+    getSpeechSupportedLanguagesAndVoices(
+      serviceProviderSid,
+      recogVendor,
+      recogLabel
+    )
+      .then(({ json }) => {
+        // while fetching data, the user might change the vendor
+        if (currentSttVendor.current !== recogVendor) {
+          return;
+        }
+        // Extract Language
+        const langOpts = json.stt.map((lang) => ({
+          name: lang.name,
+          value: lang.value,
+        }));
+        setRecogLanguageOptions(langOpts);
+
+        /**When vendor is custom, Language is input by user */
+        if (
+          recogVendor.toString() === VENDOR_CUSTOM ||
+          !shouldUpdateSttLanguage.current
+        )
+          return;
+        shouldUpdateSttLanguage.current = false;
+        /** Google and AWS have different language lists */
+        /** If the new language doesn't map then default to "en-US" */
+        const newLang = json.stt.find((lang) => lang.value === recogLang);
+
+        if (
+          (recogVendor === VENDOR_GOOGLE || recogVendor === VENDOR_AWS) &&
+          !newLang
+        ) {
+          setRecogLang(LANG_EN_US);
+        } else if (recogVendor === VENDOR_COBALT && !newLang) {
+          setRecogLang(LANG_COBALT_EN_US);
+        } else if (langOpts.length && !newLang) {
+          setRecogLang(langOpts[0].value);
+        }
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
+  return (
+    <>
+      <fieldset>
+        <label htmlFor="synthesis_vendor">Speech synthesis vendor</label>
+        <Selector
+          id="synthesis_vendor"
+          name="synthesis_vendor"
+          value={synthVendor}
+          options={ttsVendorOptions.filter(
+            (vendor) =>
+              vendor.value != VENDOR_ASSEMBLYAI &&
+              vendor.value != VENDOR_SONIOX &&
+              vendor.value !== VENDOR_CUSTOM &&
+              vendor.value !== VENDOR_COBALT
+          )}
+          onChange={(e) => {
+            const vendor = e.target.value as keyof SynthesisVendors;
+            shouldUpdateTtsVoice.current = true;
+            setSynthVendor(vendor);
+            setSynthLabel("");
+            setSynthesisLanguageOptions([]);
+            setSynthesisVoiceOptions([]);
+          }}
+        />
+        {hasLength(ttsLabelOptions) && (
+          <>
+            <label htmlFor="synthesis_label">Label</label>
+            <Selector
+              id="systhesis_label"
+              name="systhesis_label"
+              value={synthLabel}
+              options={ttsLabelOptions}
+              onChange={(e) => {
+                setSynthLabel(e.target.value);
+              }}
+            />
+          </>
+        )}
+        {synthesisModelOptions && synthVendor === VENDOR_DEEPGRAM && (
+          <>
+            <label htmlFor="synthesis_lang">Model</label>
+            <Selector
+              id="synthesis_voice"
+              name="synthesis_voice"
+              value={synthVoice}
+              options={synthesisModelOptions}
+              onChange={(e) => setSynthVoice(e.target.value)}
+            />
+          </>
+        )}
+        {synthVendor &&
+          !synthVendor.toString().startsWith(VENDOR_CUSTOM) &&
+          synthVendor !== VENDOR_DEEPGRAM &&
+          synthLang && (
+            <>
+              <label htmlFor="synthesis_lang">Language</label>
+              <Selector
+                id="synthesis_lang"
+                name="synthesis_lang"
+                value={synthLang}
+                options={synthesisLanguageOptions}
+                onChange={(e) => {
+                  shouldUpdateTtsVoice.current = true;
+                  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;
+                  }
+
+                  const voices =
+                    synthesisSupportedLanguagesAndVoices?.tts.find(
+                      (lang) => lang.value === language
+                    )?.voices || [];
+                  if (
+                    synthVendor === VENDOR_GOOGLE &&
+                    synthesisGoogleCustomVoiceOptions &&
+                    synthesisGoogleCustomVoiceOptions.length
+                  ) {
+                    setSynthesisVoiceOptions([
+                      ...synthesisGoogleCustomVoiceOptions,
+                      ...voices,
+                    ]);
+                  } else {
+                    setSynthesisVoiceOptions(voices);
+                  }
+
+                  setSynthVoice(voices[0].value);
+                }}
+              />
+              <label htmlFor="synthesis_voice">Voice</label>
+              {synthVendor === VENDOR_MICROSOFT &&
+              selectedCredential &&
+              selectedCredential.use_custom_tts ? (
+                <input
+                  id="custom_microsoft_synthesis_voice"
+                  type="text"
+                  name="custom_microsoft_synthesis_voice"
+                  placeholder="Required"
+                  required
+                  value={synthVoice}
+                  onChange={(e) => {
+                    setSynthVoice(e.target.value);
+                  }}
+                />
+              ) : (
+                <Selector
+                  id="synthesis_voice"
+                  name="synthesis_voice"
+                  value={synthVoice}
+                  options={synthesisVoiceOptions}
+                  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="custom_vendor_synthesis_voice">Voice</label>
+            <input
+              id="custom_vendor_synthesis_voice"
+              type="text"
+              name="custom_vendor_synthesis_voice"
+              placeholder="Required"
+              required
+              value={synthVoice}
+              onChange={(e) => {
+                setSynthVoice(e.target.value);
+              }}
+            />
+          </>
+        )}
+      </fieldset>
+      <fieldset>
+        <label htmlFor="recognizer_vendor">Speech recognizer vendor</label>
+        <Selector
+          id="recognizer_vendor"
+          name="recognizer_vendor"
+          value={recogVendor}
+          options={sttVendorOptions.filter(
+            (vendor) =>
+              vendor.value != VENDOR_WELLSAID &&
+              vendor.value != VENDOR_ELEVENLABS &&
+              vendor.value != VENDOR_WHISPER &&
+              vendor.value !== VENDOR_CUSTOM
+          )}
+          onChange={(e) => {
+            const vendor = e.target.value as keyof RecognizerVendors;
+            shouldUpdateSttLanguage.current = true;
+            setRecogVendor(vendor);
+            setRecogLabel("");
+
+            setRecogLanguageOptions([]);
+          }}
+        />
+        {hasLength(sttLabelOptions) && (
+          <>
+            <label htmlFor="recog_label">Label</label>
+            <Selector
+              id="recog_label"
+              name="recog_label"
+              value={recogLabel}
+              options={sttLabelOptions}
+              onChange={(e) => {
+                setRecogLabel(e.target.value);
+              }}
+            />
+          </>
+        )}
+        {recogVendor &&
+          !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
+          recogLang && (
+            <>
+              <label htmlFor="recognizer_lang">Language</label>
+              <Selector
+                id="recognizer_lang"
+                name="recognizer_lang"
+                value={recogLang}
+                options={recogLanguageOptions}
+                onChange={(e) => {
+                  setRecogLang(e.target.value);
+                }}
+              />
+            </>
+          )}
+        {recogVendor.toString().startsWith(VENDOR_CUSTOM) && (
+          <>
+            <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}
+              onChange={(e) => {
+                setRecogLang(e.target.value);
+              }}
+            />
+          </>
+        )}
+      </fieldset>
+    </>
+  );
+};
+
+export default SpeechProviderSelection;

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";
 

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";

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";

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,
@@ -22,7 +22,9 @@ import {
   FQDN,
   FQDN_TOP_LEVEL,
   INVALID,
+  IP,
   NETMASK_OPTIONS,
+  SIP_GATEWAY_PROTOCOL_OPTIONS,
   TCP_MAX_PORT,
   TECH_PREFIX_MINLENGTH,
   USER_ACCOUNT,
@@ -45,6 +47,9 @@ import {
   isUserAccountScope,
   hasLength,
   isValidPort,
+  disableDefaultTrunkRouting,
+  hasValue,
+  isNotBlank,
 } from "src/utils";
 
 import type {
@@ -58,6 +63,8 @@ import type {
   Smpp,
   Application,
 } from "src/api/types";
+import { setAccountFilter, setLocation } from "src/store/localStore";
+import { RegisterStatus } from "./register-status";
 
 type CarrierFormProps = {
   carrier?: UseApiDataMap<Carrier>;
@@ -134,6 +141,7 @@ export const CarrierForm = ({
 
   const setCarrierStates = (obj: Carrier) => {
     if (obj) {
+      setIsActive(obj.is_active);
       if (obj.name) {
         setCarrierName(obj.name);
       }
@@ -231,7 +239,20 @@ export const CarrierForm = ({
     value: typeof sipGateways[number][keyof SipGateway]
   ) => {
     setSipGateways(
-      sipGateways.map((g, i) => (i === index ? { ...g, [key]: value } : g))
+      sipGateways.map((g, i) =>
+        i === index
+          ? {
+              ...g,
+              [key]: value,
+              // If Change to ipv4 and port is null, change port to 5060
+              ...(key === "ipv4" &&
+                value &&
+                typeof value === "string" &&
+                getIpValidationType(value) === IP &&
+                g.port === null && { port: 5060 }),
+            }
+          : g
+      )
     );
   };
 
@@ -315,10 +336,13 @@ export const CarrierForm = ({
       const gateway = sipGateways[i];
       const type = getIpValidationType(gateway.ipv4);
 
+      /** DH: unclear why we had this restriction, removing for now
       if (type === FQDN_TOP_LEVEL) {
         refSipIp.current[i].focus();
         return "When using an FQDN, you must use a subdomain (e.g. sip.example.com).";
       } else if (type === FQDN && (!gateway.outbound || gateway.inbound)) {
+      */
+      if (type === FQDN && (!gateway.outbound || gateway.inbound)) {
         refSipIp.current[i].focus();
         return "A fully qualified domain name may only be used for outbound calls.";
       } else if (type === INVALID) {
@@ -404,7 +428,9 @@ export const CarrierForm = ({
     /** When to switch to `sip` tab */
 
     const emptySipIp = sipGateways.find((g) => g.ipv4.trim() === "");
-    const invalidSipPort = sipGateways.find((g) => !isValidPort(g.port));
+    const invalidSipPort = sipGateways.find(
+      (g) => hasValue(g.port) && !isValidPort(g.port)
+    );
     const sipGatewayValidation = getSipValidation();
 
     /** Empty SIP gateway */
@@ -532,6 +558,7 @@ export const CarrierForm = ({
 
             toastSuccess("Carrier created successfully");
             navigate(ROUTE_INTERNAL_CARRIERS);
+            setAccountFilter(accountSid);
           })
           .catch((error) => {
             toastError(error.msg);
@@ -541,6 +568,7 @@ export const CarrierForm = ({
   };
 
   useEffect(() => {
+    setLocation();
     if (predefinedName && hasLength(predefinedCarriers)) {
       const predefinedCarrierSid = predefinedCarriers.find(
         (a) => a.name === predefinedName
@@ -611,10 +639,24 @@ export const CarrierForm = ({
 
   return (
     <Section slim>
-      <form className="form form--internal" onSubmit={handleSubmit}>
+      <form
+        className={`form form--internal ${
+          !carrier?.data && carrier?.refetch ? "form--blur" : ""
+        }`}
+        onSubmit={handleSubmit}
+      >
         <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">
@@ -697,7 +739,7 @@ export const CarrierForm = ({
                   checked={e164}
                   onChange={(e) => setE164(e.target.checked)}
                 />
-                <div>E.164 Syntax</div>
+                <div>E.164 syntax</div>
               </label>
               <MXS>
                 <em>Prepend a leading + on origination attempts.</em>
@@ -711,7 +753,7 @@ export const CarrierForm = ({
                     : accounts
                 }
                 account={[accountSid, setAccountSid]}
-                label="Used By"
+                label="Used by"
                 required={false}
                 defaultOption={checkSelectOptions(user, carrier?.data)}
                 disabled={
@@ -722,24 +764,27 @@ 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
                 hidden
                 name="sip_credentials"
-                label="Outbound Authentication"
+                label="Outbound authentication"
                 initialCheck={initialRegister}
                 handleChecked={(e) => {
                   if (!e.target.checked) {
@@ -757,7 +802,7 @@ export const CarrierForm = ({
                   Does your carrier require authentication on outbound calls?
                 </MS>
                 <label htmlFor="sip_username">
-                  Username {sipPass || sipRegister ? <span>*</span> : ""}
+                  Auth username {sipPass || sipRegister ? <span>*</span> : ""}
                 </label>
                 <input
                   id="sip_username"
@@ -801,7 +846,7 @@ export const CarrierForm = ({
                       calls.
                     </MS>
                     <label htmlFor="sip_realm">
-                      SIP Realm{sipRegister ? <span>*</span> : ""}
+                      SIP realm{sipRegister ? <span>*</span> : ""}
                     </label>
                     <input
                       id="sip_realm"
@@ -812,7 +857,7 @@ export const CarrierForm = ({
                       required={sipRegister}
                       onChange={(e) => setSipRealm(e.target.value)}
                     />
-                    <label htmlFor="from_user">SIP From User</label>
+                    <label htmlFor="from_user">Username</label>
                     <input
                       id="from_user"
                       name="from_user"
@@ -821,7 +866,7 @@ export const CarrierForm = ({
                       placeholder="Optional: specify user part of SIP From header"
                       onChange={(e) => setFromUser(e.target.value)}
                     />
-                    <label htmlFor="from_domain">SIP From Domain</label>
+                    <label htmlFor="from_domain">SIP from domain</label>
                     <input
                       id="from_domain"
                       name="from_domain"
@@ -840,7 +885,7 @@ export const CarrierForm = ({
                           setRegPublicIpInContact(e.target.checked)
                         }
                       />
-                      <div>Use Public IP in Contact</div>
+                      <div>Use public IP in contact</div>
                     </label>
                   </>
                 )}
@@ -850,7 +895,7 @@ export const CarrierForm = ({
               <Checkzone
                 hidden
                 name="tech_prefix_check"
-                label="Tech Prefix"
+                label="Tech prefix"
                 initialCheck={initialPrefix}
                 handleChecked={(e) => {
                   if (!e.target.checked) {
@@ -904,13 +949,13 @@ export const CarrierForm = ({
             </fieldset>
             <fieldset>
               <label htmlFor="sip_gateways">
-                SIP Gateways<span>*</span>
+                SIP gateways<span>*</span>
               </label>
               <MXS>
                 <em>At least one SIP gateway is required.</em>
               </MXS>
               <label htmlFor="sip_gateways">
-                Network Address / Port / Netmask
+                Network address / Port / Netmask
               </label>
               {sipMessage && <Message message={sipMessage} />}
               {hasLength(sipGateways) &&
@@ -943,13 +988,21 @@ export const CarrierForm = ({
                           type="number"
                           min="0"
                           max={TCP_MAX_PORT}
-                          placeholder={DEFAULT_SIP_GATEWAY.port.toString()}
-                          value={g.port}
+                          placeholder={
+                            g.protocol === "tls" || g.protocol === "tls/srtp"
+                              ? ""
+                              : DEFAULT_SIP_GATEWAY.port?.toString()
+                          }
+                          value={g.port === null ? "" : g.port}
                           onChange={(e) => {
                             updateSipGateways(
                               i,
                               "port",
-                              Number(e.target.value)
+                              g.outbound > 0 &&
+                                !isNotBlank(e.target.value) &&
+                                getIpValidationType(g.ipv4) !== IP
+                                ? null
+                                : Number(e.target.value)
                             );
                           }}
                           ref={(ref: HTMLInputElement) =>
@@ -957,20 +1010,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
@@ -1009,6 +1098,29 @@ export const CarrierForm = ({
                           <div>Outbound</div>
                         </label>
                       </div>
+                      {g.outbound > 0 && g.protocol === "tls/srtp" && (
+                        <div>
+                          <label
+                            htmlFor={`sip_pad_crypto_${i}`}
+                            className="chk"
+                          >
+                            <input
+                              id={`sip_pad_crypto_${i}`}
+                              name={`sip_pad_crypto_${i}`}
+                              type="checkbox"
+                              checked={g.pad_crypto ? true : false}
+                              onChange={(e) => {
+                                updateSipGateways(
+                                  i,
+                                  "pad_crypto",
+                                  e.target.checked
+                                );
+                              }}
+                            />
+                            <div>Pad crypto</div>
+                          </label>
+                        </div>
+                      )}
                     </div>
 
                     <button
@@ -1097,7 +1209,7 @@ export const CarrierForm = ({
                 }}
               />
               <label htmlFor="outbound_smpp">
-                Carrier SMPP Gateways
+                Carrier SMPP gateways
                 <span>{smppSystemId || smppPass ? "*" : ""}</span>
               </label>
               <MXS>
@@ -1250,7 +1362,7 @@ export const CarrierForm = ({
                 }}
               />
               <label htmlFor="inbound_smpp">
-                Carrier IP Address(es) to whitelist
+                Carrier IP address(es) to whitelist
               </label>
               <MXS>
                 <em>

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,15 +29,25 @@ import {
 import {
   API_SIP_GATEWAY,
   API_SMPP_GATEWAY,
+  CARRIER_REG_OK,
+  ENABLE_HOSTED_SYSTEM,
   USER_ACCOUNT,
 } from "src/api/constants";
 import { DeleteCarrier } from "./delete";
 
-import type { Account, Carrier, SipGateway, SmppGateway } from "src/api/types";
+import type {
+  Account,
+  Carrier,
+  CurrentUserData,
+  SipGateway,
+  SmppGateway,
+} from "src/api/types";
 import { Scope } from "src/store/types";
+import { getAccountFilter, setLocation } from "src/store/localStore";
 
 export const Carriers = () => {
   const user = useSelectState("user");
+  const [userData] = useApiData<CurrentUserData>("Users/me");
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [apiUrl, setApiUrl] = useState("");
   const [carrier, setCarrier] = useState<Carrier | null>(null);
@@ -47,6 +57,11 @@ export const Carriers = () => {
   const [filter, setFilter] = useState("");
 
   const carriersFiltered = useMemo(() => {
+    setAccountSid(getAccountFilter());
+    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
+      setAccountSid(user?.account_sid);
+    }
+
     return carriers
       ? carriers.filter((carrier) =>
           accountSid
@@ -112,9 +127,8 @@ export const Carriers = () => {
   };
 
   useEffect(() => {
-    if (accountSid) {
-      setApiUrl(`Accounts/${accountSid}/VoipCarriers`);
-    } else if (currentServiceProvider) {
+    setLocation();
+    if (currentServiceProvider) {
       setApiUrl(
         `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`
       );
@@ -124,7 +138,16 @@ export const Carriers = () => {
   return (
     <>
       <section className="mast">
-        <H1 className="h2">Carriers</H1>
+        <div>
+          <H1 className="h2">Carriers</H1>
+          {ENABLE_HOSTED_SYSTEM && (
+            <M>
+              Have your carrier send calls to{" "}
+              <span>{userData?.account?.sip_realm}</span>
+            </M>
+          )}
+        </div>
+
         <Link to={`${ROUTE_INTERNAL_CARRIERS}/add`} title="Add a Carrier">
           {" "}
           <Icon>
@@ -132,21 +155,23 @@ export const Carriers = () => {
           </Icon>
         </Link>
       </section>
-      <section className="filters filters--spaced">
+      <section className="filters filters--multi">
         <SearchFilter
           placeholder="Filter carriers"
           filter={[filter, setFilter]}
         />
-        <AccountFilter
-          account={[accountSid, setAccountSid]}
-          accounts={accounts}
-          label="Used by"
-          defaultOption
-        />
+        <ScopedAccess user={user} scope={Scope.service_provider}>
+          <AccountFilter
+            account={[accountSid, setAccountSid]}
+            accounts={accounts}
+            label="Used by"
+            defaultOption
+          />
+        </ScopedAccess>
       </section>
       <Section {...(hasLength(filteredCarriers) && { slim: true })}>
         <div className="list">
-          {!hasValue(carriers) ? (
+          {!hasValue(carriers) && hasLength(accounts) ? (
             <Spinner />
           ) : hasLength(filteredCarriers) ? (
             filteredCarriers.map((carrier) => (
@@ -156,19 +181,21 @@ export const Carriers = () => {
                     <ScopedAccess
                       user={user}
                       scope={
-                        !accountSid ? Scope.service_provider : Scope.account
+                        !carrier.account_sid
+                          ? Scope.service_provider
+                          : Scope.account
                       }
                     >
                       <Link
                         to={`${ROUTE_INTERNAL_CARRIERS}/${carrier.voip_carrier_sid}/edit`}
-                        title="Edit Carrier"
+                        title="Edit carrier"
                         className="i"
                       >
                         <strong>{carrier.name}</strong>
                         <Icons.ArrowRight />
                       </Link>
                     </ScopedAccess>
-                    {!accountSid && user?.scope === USER_ACCOUNT && (
+                    {!carrier.account_sid && user?.scope === USER_ACCOUNT && (
                       <strong>{carrier.name}</strong>
                     )}
                   </div>
@@ -187,17 +214,41 @@ 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>
                 <ScopedAccess
                   user={user}
-                  scope={!accountSid ? Scope.service_provider : Scope.account}
+                  scope={
+                    !carrier.account_sid
+                      ? Scope.service_provider
+                      : Scope.account
+                  }
                 >
                   <div className="item__actions">
                     <Link
                       to={`${ROUTE_INTERNAL_CARRIERS}/${carrier.voip_carrier_sid}/edit`}
-                      title="Edit Carrier"
+                      title="Edit carrier"
                     >
                       <Icons.Edit3 />
                     </Link>
@@ -220,7 +271,7 @@ export const Carriers = () => {
       </Section>
       <Section clean>
         <Button small as={Link} to={`${ROUTE_INTERNAL_CARRIERS}/add`}>
-          Add Carrier
+          Add carrier
         </Button>
       </Section>
       {carrier && (

src/containers/internal/views/carriers/pcap.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  getRecentCall,
+  getServiceProviderRecentCall,
+  getPcap,
+  getServiceProviderPcap,
+} from "src/api";
+import { toastError } from "src/store";
+
+import type { DownloadedBlob } from "src/api/types";
+
+type PcapButtonProps = {
+  accountSid: string;
+  serviceProviderSid: string;
+  sipCallId: string;
+};
+
+export const PcapButton = ({
+  accountSid,
+  serviceProviderSid,
+  sipCallId,
+}: PcapButtonProps) => {
+  const [pcap, setPcap] = useState<DownloadedBlob>();
+
+  useEffect(() => {
+    if (!sipCallId) return;
+    const p = accountSid
+      ? getRecentCall(accountSid, sipCallId)
+      : getServiceProviderRecentCall(serviceProviderSid, sipCallId);
+    p.then(({ json }) => {
+      if (json.total > 0) {
+        const p1 = accountSid
+          ? getPcap(accountSid, sipCallId, "register")
+          : getServiceProviderPcap(serviceProviderSid, sipCallId, "register");
+        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;
+};

src/containers/internal/views/carriers/register-status.tsx

@@ -0,0 +1,59 @@
+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 getReason = () => {
+    return carrier.register_status.reason
+      ? typeof carrier.register_status.reason === "string"
+        ? carrier.register_status.reason
+        : "Not Started"
+      : "Not Started";
+  };
+  const renderStatus = () => {
+    return (
+      <div
+        className={`i txt--${
+          carrier.register_status.status
+            ? carrier.register_status.status === CARRIER_REG_OK
+              ? "teal"
+              : "jam"
+            : "jean"
+        }`}
+        title={getReason()}
+      >
+        {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> {getReason()}
+      </MS>
+      <PcapButton
+        accountSid={carrier.account_sid || ""}
+        serviceProviderSid={carrier.service_provider_sid}
+        sipCallId={carrier.register_status.callId || ""}
+      />
+    </details>
+  );
+};

src/containers/internal/views/clients/add.tsx

@@ -0,0 +1,14 @@
+import { H1 } from "@jambonz/ui-kit";
+import React from "react";
+import ClientsForm from "./form";
+
+export const ClientsAdd = () => {
+  return (
+    <>
+      <H1 className="h2">Add sip client</H1>
+      <ClientsForm />
+    </>
+  );
+};
+
+export default ClientsAdd;

src/containers/internal/views/clients/delete.tsx

@@ -0,0 +1,28 @@
+import { P } from "@jambonz/ui-kit";
+import React from "react";
+import { Client } from "src/api/types";
+import { Modal } from "src/components";
+
+type ClientsDeleteProps = {
+  client: Client;
+  handleCancel: () => void;
+  handleSubmit: () => void;
+};
+export const ClientsDelete = ({
+  client,
+  handleCancel,
+  handleSubmit,
+}: ClientsDeleteProps) => {
+  return (
+    <>
+      <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
+        <P>
+          Are you sure you want to delete the sip client{" "}
+          <strong>{client.username}</strong>?
+        </P>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientsDelete;

src/containers/internal/views/clients/edit.tsx

@@ -0,0 +1,33 @@
+import { H1 } from "@jambonz/ui-kit";
+import React, { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useApiData } from "src/api";
+import { Client } from "src/api/types";
+import { toastError } from "src/store";
+import ClientsForm from "./form";
+import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
+
+export const ClientsEdit = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [data, refetch, error] = useApiData<Client>(
+    `Clients/${params.client_sid}`
+  );
+
+  /** Handle error toast at top level... */
+  useEffect(() => {
+    if (error) {
+      toastError(error.msg);
+      navigate(ROUTE_INTERNAL_CLIENTS);
+    }
+  }, [error]);
+
+  return (
+    <>
+      <H1 className="h2">Edit sip client</H1>
+      <ClientsForm client={{ data, refetch, error }} />
+    </>
+  );
+};
+
+export default ClientsEdit;

src/containers/internal/views/clients/form.tsx

@@ -0,0 +1,272 @@
+import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  deleteClient,
+  postClient,
+  putClient,
+  useServiceProviderData,
+} from "src/api";
+import { USER_ACCOUNT } from "src/api/constants";
+import { Account, Client, UseApiDataMap } from "src/api/types";
+import { Section, Tooltip } from "src/components";
+import { AccountSelect, Message, Passwd } from "src/components/forms";
+import { MSG_REQUIRED_FIELDS } from "src/constants";
+import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
+import { toastError, toastSuccess, useSelectState } from "src/store";
+import ClientsDelete from "./delete";
+import { hasValue } from "src/utils";
+import { IMessage } from "src/store/types";
+
+type ClientsFormProps = {
+  client?: UseApiDataMap<Client>;
+};
+
+export const ClientsForm = ({ client }: ClientsFormProps) => {
+  const user = useSelectState("user");
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+  const navigate = useNavigate();
+
+  const [accountSid, setAccountSid] = useState("");
+  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+  const [isActive, setIsActive] = useState(
+    client ? client.data?.is_active : true
+  );
+  const [allowDirectAppCalling, setAllowDirectAppCalling] = useState(true);
+  const [allowDirectQueueCalling, setAllowDirectQueueCalling] = useState(true);
+  const [allowDirectUserCalling, setAllowDirectUserCalling] = useState(true);
+  const [modal, setModal] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!client) {
+      postClient({
+        account_sid: accountSid,
+        username: username,
+        password: password,
+        is_active: isActive,
+        allow_direct_app_calling: allowDirectAppCalling,
+        allow_direct_queue_calling: allowDirectQueueCalling,
+        allow_direct_user_calling: allowDirectUserCalling,
+      })
+        .then(() => {
+          toastSuccess("Client created successfully");
+          navigate(ROUTE_INTERNAL_CLIENTS);
+        })
+        .catch((error: { msg: IMessage }) => {
+          toastError(error.msg);
+        });
+    } else {
+      putClient(client.data?.client_sid || "", {
+        is_active: isActive,
+        allow_direct_app_calling: allowDirectAppCalling,
+        allow_direct_queue_calling: allowDirectQueueCalling,
+        allow_direct_user_calling: allowDirectUserCalling,
+      })
+        .then(() => {
+          toastSuccess("Client updated successfully");
+          navigate(ROUTE_INTERNAL_CLIENTS);
+        })
+        .catch((error: { msg: IMessage }) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  const handleCancel = () => {
+    setModal(false);
+  };
+
+  const handleDelete = () => {
+    if (client) {
+      deleteClient(client.data?.client_sid || "")
+        .then(() => {
+          toastSuccess("Client deleted successfully");
+          navigate(ROUTE_INTERNAL_CLIENTS);
+        })
+        .catch((error: { msg: IMessage }) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  useEffect(() => {
+    if (client && client.data) {
+      if (client.data.username) {
+        setUsername(client.data.username);
+      }
+
+      if (client.data.account_sid) {
+        setAccountSid(client.data.account_sid);
+      }
+
+      if (client.data.password) {
+        setPassword(client.data.password);
+      }
+
+      setIsActive(client.data.is_active);
+      setAllowDirectAppCalling(client.data.allow_direct_app_calling);
+      setAllowDirectQueueCalling(client.data.allow_direct_queue_calling);
+      setAllowDirectUserCalling(client.data.allow_direct_user_calling);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    const acc = accounts?.find((a) => a.account_sid === accountSid);
+    if (!accountSid || !accounts || !acc) return;
+    if (!acc?.sip_realm) {
+      setErrorMessage(`Sip realm is not set for the account.`);
+    } else {
+      setErrorMessage("");
+    }
+  }, [accountSid]);
+  return (
+    <>
+      <Section slim>
+        <form
+          className={`form form--internal ${
+            !client?.data && client?.refetch ? "form--blur" : ""
+          }`}
+          onSubmit={handleSubmit}
+        >
+          <fieldset>
+            <MS>{MSG_REQUIRED_FIELDS}</MS>
+            {errorMessage && <Message message={errorMessage} />}
+          </fieldset>
+          <fieldset>
+            <div className="multi">
+              <div className="inp">
+                <label htmlFor="lcr_name">
+                  User Name<span>*</span>
+                </label>
+                <input
+                  id="client_username"
+                  name="client_username"
+                  type="text"
+                  placeholder="user name"
+                  value={username}
+                  required={true}
+                  disabled={hasValue(client)}
+                  autoComplete="off"
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+              </div>
+            </div>
+            <label htmlFor="password">
+              Password{!hasValue(client) && <span>*</span>}
+            </label>
+            <Passwd
+              id="password"
+              required={!hasValue(client)}
+              name="password"
+              value={password}
+              placeholder="Password"
+              setValue={setPassword}
+              disabled={hasValue(client)}
+              autoComplete="off"
+            />
+          </fieldset>
+          <fieldset>
+            <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>
+            <label htmlFor="allow_direct_app_calling" className="chk">
+              <input
+                id="allow_direct_app_calling"
+                name="allow_direct_app_calling"
+                type="checkbox"
+                checked={allowDirectAppCalling}
+                onChange={(e) => setAllowDirectAppCalling(e.target.checked)}
+              />
+              <div>Allow direct calling to applications</div>
+              <Tooltip text="Allow user to call applications without configuring an application for sip device calls.">
+                {" "}
+              </Tooltip>
+            </label>
+            <label htmlFor="allow_direct_queue_calling" className="chk">
+              <input
+                id="allow_direct_queue_calling"
+                name="allow_direct_queue_calling"
+                type="checkbox"
+                checked={allowDirectQueueCalling}
+                onChange={(e) => setAllowDirectQueueCalling(e.target.checked)}
+              />
+              <div>Allow direct calling to queues</div>
+              <Tooltip text="Allow user to take calls from queues without configuring an application for sip device calls.">
+                {" "}
+              </Tooltip>
+            </label>
+            <label htmlFor="allow_direct_user_calling" className="chk">
+              <input
+                id="allow_direct_user_calling"
+                name="allow_direct_user_calling"
+                type="checkbox"
+                checked={allowDirectUserCalling}
+                onChange={(e) => setAllowDirectUserCalling(e.target.checked)}
+              />
+              <div>Allow direct calling to other users</div>
+              <Tooltip text="Allow user to call other users without configuring an application for sip device calls.">
+                {" "}
+              </Tooltip>
+            </label>
+          </fieldset>
+          {user?.scope !== USER_ACCOUNT && (
+            <fieldset>
+              <AccountSelect
+                accounts={accounts}
+                account={[accountSid, setAccountSid]}
+                label="Belongs to"
+                required={true}
+                defaultOption={false}
+                disabled={hasValue(client)}
+              />
+            </fieldset>
+          )}
+          <fieldset>
+            <ButtonGroup left className={client && "btns--spaced"}>
+              <Button
+                small
+                subStyle="grey"
+                as={Link}
+                to={ROUTE_INTERNAL_CLIENTS}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" small disabled={errorMessage !== ""}>
+                Save
+              </Button>
+              {client && client.data && (
+                <Button
+                  small
+                  type="button"
+                  subStyle="grey"
+                  onClick={() => setModal(true)}
+                >
+                  Delete User
+                </Button>
+              )}
+            </ButtonGroup>
+          </fieldset>
+        </form>
+      </Section>
+      {client && client.data && modal && (
+        <ClientsDelete
+          client={client.data}
+          handleCancel={handleCancel}
+          handleSubmit={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default ClientsForm;

src/containers/internal/views/clients/index.tsx

@@ -0,0 +1,229 @@
+import { Button, H1, Icon, M } from "@jambonz/ui-kit";
+import React, { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { deleteClient, useApiData, useServiceProviderData } from "src/api";
+import { Account, Client, CurrentUserData } from "src/api/types";
+import {
+  AccountFilter,
+  Icons,
+  ScopedAccess,
+  SearchFilter,
+  Section,
+  Spinner,
+} from "src/components";
+import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
+import { toastError, toastSuccess, useSelectState } from "src/store";
+import { Scope } from "src/store/types";
+import { hasLength, hasValue, useFilteredResults } from "src/utils";
+import ClientsDelete from "./delete";
+import { USER_ACCOUNT } from "src/api/constants";
+
+export const Clients = () => {
+  const user = useSelectState("user");
+  const [userData] = useApiData<CurrentUserData>("Users/me");
+  const [accounts] = useServiceProviderData<Account[]>("Accounts");
+  const [clients, refetch] = useApiData<Client[]>("Clients");
+
+  const [accountSid, setAccountSid] = useState("");
+  const [selectedAccount, setSelectedAccount] = useState<
+    Account | null | undefined
+  >(null);
+  const [filter, setFilter] = useState("");
+  const [client, setClient] = useState<Client | null>();
+
+  const tmpFilteredClients = useMemo(() => {
+    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
+      setAccountSid(user?.account_sid);
+      return clients;
+    }
+
+    setSelectedAccount(
+      accountSid
+        ? accounts?.find((a: Account) => a.account_sid === accountSid)
+        : null
+    );
+
+    return clients
+      ? clients.filter((c) => {
+          return accountSid
+            ? c.account_sid === accountSid
+            : accounts
+            ? accounts.map((a) => a.account_sid).includes(c.account_sid || "")
+            : false;
+        })
+      : [];
+  }, [accountSid, clients, accounts]);
+
+  const filteredClients = useFilteredResults(filter, tmpFilteredClients);
+
+  const handleDelete = () => {
+    if (client) {
+      deleteClient(client.client_sid || "")
+        .then(() => {
+          toastSuccess(
+            <>
+              Deleted sip client <strong>{client.username}</strong>
+            </>
+          );
+          setClient(null);
+          refetch();
+        })
+        .catch((error) => {
+          toastError(error.msg);
+        });
+    }
+  };
+
+  return (
+    <>
+      <section className="mast">
+        <div>
+          <H1 className="h2">SIP client credentials</H1>
+          {user?.scope === USER_ACCOUNT ? (
+            userData?.account?.sip_realm ? (
+              <>
+                <M>
+                  Your sip realm is <span>{userData?.account?.sip_realm}</span>
+                </M>
+                <M>
+                  You can add sip credentials below to allow sip devices to
+                  register to this realm and make calls.
+                </M>
+              </>
+            ) : (
+              <M>
+                You need to associate a sip realm to this account in order to
+                add sip credentials.
+              </M>
+            )
+          ) : selectedAccount ? (
+            selectedAccount?.sip_realm ? (
+              <>
+                <M>
+                  Your sip realm is <span>{selectedAccount.sip_realm}</span>
+                </M>
+                <M>
+                  You can add sip credentials below to allow sip devices to
+                  register to this realm and make calls.
+                </M>
+              </>
+            ) : (
+              <M>
+                You need to associate a sip realm to this account in order to
+                add sip credentials.
+              </M>
+            )
+          ) : (
+            <></>
+          )}
+        </div>
+
+        <Link to={`${ROUTE_INTERNAL_CLIENTS}/add`} title="Add sip client">
+          {" "}
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Link>
+      </section>
+
+      <section className="filters filters--multi">
+        <SearchFilter
+          placeholder="Filter clients"
+          filter={[filter, setFilter]}
+        />
+        <ScopedAccess user={user} scope={Scope.admin}>
+          <AccountFilter
+            account={[accountSid, setAccountSid]}
+            accounts={accounts}
+            label=""
+            defaultOption
+          />
+        </ScopedAccess>
+      </section>
+      <Section {...(hasLength(filteredClients) && { slim: true })}>
+        <div className="list">
+          {!hasValue(filteredClients) && hasLength(accounts) ? (
+            <Spinner />
+          ) : hasLength(filteredClients) ? (
+            filteredClients.map((c) => (
+              <div className="item" key={c.client_sid}>
+                <div className="item__info">
+                  <div className="item__title">
+                    <Link
+                      to={`${ROUTE_INTERNAL_CLIENTS}/${c.client_sid}/edit`}
+                      title="Edit outbound call routes"
+                      className="i"
+                    >
+                      <strong>{c.username}</strong>
+                      <Icons.ArrowRight />
+                    </Link>
+                  </div>
+                  <div className="item__meta">
+                    <div>
+                      <div
+                        className={`i txt--${c.is_active ? "teal" : "grey"}`}
+                      >
+                        {c.is_active ? (
+                          <Icons.CheckCircle />
+                        ) : (
+                          <Icons.XCircle />
+                        )}
+                        <span>{c.is_active ? "Active" : "Inactive"}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className={`i txt--${c.account_sid ? "teal" : "grey"}`}
+                      >
+                        <Icons.Activity />
+                        <span>
+                          {
+                            accounts?.find(
+                              (acct) => acct.account_sid === c.account_sid
+                            )?.name
+                          }
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="item__actions">
+                  <Link
+                    to={`${ROUTE_INTERNAL_CLIENTS}/${c.client_sid}/edit`}
+                    title="Edit Client"
+                  >
+                    <Icons.Edit3 />
+                  </Link>
+                  <button
+                    type="button"
+                    title="Delete client"
+                    onClick={() => setClient(c)}
+                    className="btnty"
+                  >
+                    <Icons.Trash />
+                  </button>
+                </div>
+              </div>
+            ))
+          ) : (
+            <M>No sip clients.</M>
+          )}
+        </div>
+      </Section>
+      <Section clean>
+        <Button small as={Link} to={`${ROUTE_INTERNAL_CLIENTS}/add`}>
+          Add sip client
+        </Button>
+      </Section>
+      {client && (
+        <ClientsDelete
+          client={client}
+          handleCancel={() => setClient(null)}
+          handleSubmit={handleDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default Clients;

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;

src/containers/internal/views/least-cost-routing/card.tsx

@@ -0,0 +1,177 @@
+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"
+      }`}
+      // eslint-disable-next-line react/no-unknown-property
+      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;

src/containers/internal/views/least-cost-routing/container.tsx

@@ -0,0 +1,94 @@
+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";
+
+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) {
+      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 || i}
+            lr={lr}
+            index={i}
+            moveCard={moveCard}
+            updateLcrRoute={updateLcrRoute}
+            updateLcrCarrierSetEntries={updateLcrCarrierSetEntries}
+            handleRouteDelete={handleRouteDelete}
+            carrierSelectorOptions={carrierSelectorOptions}
+          />
+        ))}
+    </>
+  );
+};
+
+export default Container;

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;

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;

src/containers/internal/views/least-cost-routing/form.tsx

@@ -0,0 +1,474 @@
+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 } from "src/constants";
+import { setLocation } from "src/store/localStore";
+import { AccountSelect, Message, Selector } from "src/components/forms";
+import type {
+  Account,
+  Carrier,
+  Lcr,
+  LcrRoute,
+  UseApiDataMap,
+} from "src/api/types";
+import { ROUTE_INTERNAL_LEST_COST_ROUTING } from "src/router/routes";
+import {
+  deleteLcr,
+  putLcr,
+  postLcrCreateRoutes,
+  putLcrUpdateRoutes,
+  useApiData,
+  useServiceProviderData,
+} from "src/api";
+import { USER_ACCOUNT, USER_ADMIN } from "src/api/constants";
+import { postLcr } 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 { hasValue } from "src/utils";
+
+type LcrFormProps = {
+  lcrDataMap?: UseApiDataMap<Lcr>;
+  lcrRouteDataMap?: UseApiDataMap<LcrRoute[]>;
+};
+
+export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
+  const LCR_ROUTE_TEMPLATE: LcrRoute = {
+    lcr_route_sid: "",
+    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 [defaultLcrRoute, setDefaultLcrRoute] = useState<LcrRoute | null>(null);
+  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);
+  }
+
+  useMemo(() => {
+    let default_lcr_route_sid = "";
+    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
+            );
+            default_lcr_route_sid = entry.lcr_route_sid || "";
+            setDefaultLcrRoute(lr);
+          }
+        });
+      });
+    }
+
+    if (lcrRouteDataMap && lcrRouteDataMap.data)
+      setLcrRoutes(
+        lcrRouteDataMap.data.filter(
+          (route) => route.lcr_route_sid !== default_lcr_route_sid
+        )
+      );
+  }, [lcrRouteDataMap?.data]);
+
+  const addLcrRoutes = () => {
+    const newLcrRoute = LCR_ROUTE_TEMPLATE;
+    const ls = [
+      ...lcrRoutes,
+      {
+        ...newLcrRoute,
+        priority: lcrRoutes.length,
+        lcr_carrier_set_entries: newLcrRoute.lcr_carrier_set_entries?.map(
+          (r) => ({
+            ...r,
+            voip_carrier_sid: defaultCarrier || carrierSelectorOptions[0].value,
+          })
+        ),
+      },
+    ];
+    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 }) => {
+        const lcrsPayload = lcrRoutes.map((l, i) => ({
+          ...l,
+          lcr_carrier_set_entries: l.lcr_carrier_set_entries?.map((e) => ({
+            ...e,
+            voip_carrier_sid:
+              e.voip_carrier_sid ||
+              defaultCarrier ||
+              carrierSelectorOptions[0]?.value,
+          })),
+          lcr_sid: json.sid,
+          priority: i,
+        }));
+        lcrsPayload.push({
+          lcr_sid: json.sid,
+          regex: ".*",
+          description: "System Default Route",
+          priority: 9999,
+          lcr_carrier_set_entries: [
+            {
+              lcr_route_sid: "",
+              voip_carrier_sid:
+                defaultLcrCarrier || carrierSelectorOptions[0]?.value,
+              priority: 0,
+            },
+          ],
+        });
+        postLcrCreateRoutes(json.sid, lcrsPayload)
+          .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}/${json.sid}/edit`
+                );
+              }
+              // Update global state
+              dispatch({ type: "lcr" });
+            }
+          })
+          .catch(({ msg }) => {
+            toastError(msg);
+          });
+      })
+      .catch(({ msg }) => {
+        toastError(msg);
+      });
+  };
+
+  const handleLcrPut = () => {
+    if (lcrDataMap && lcrDataMap.data && lcrDataMap.data.lcr_sid) {
+      // update LCR
+      const lcrPayload: Lcr = getLcrPayload();
+      putLcr(lcrDataMap.data.lcr_sid, lcrPayload).then(() => {
+        putLcrUpdateRoutes(lcrDataMap.data?.lcr_sid || "", [
+          ...lcrRoutes.map((r, i) => ({
+            ...r,
+            priority: i,
+          })),
+          ...(hasValue(defaultLcrRoute)
+            ? [
+                {
+                  ...defaultLcrRoute,
+                  lcr_carrier_set_entries:
+                    defaultLcrRoute.lcr_carrier_set_entries?.map((r) => ({
+                      ...r,
+                      voip_carrier_sid:
+                        defaultLcrCarrier ||
+                        r.voip_carrier_sid ||
+                        carrierSelectorOptions[0].value,
+                    })),
+                },
+              ]
+            : []),
+        ])
+          .then(() => {
+            toastSuccess("Least cost routing rule successfully updated");
+          })
+          .catch((error) => toastError(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 ${
+            !lcrDataMap?.data && lcrDataMap?.refetch ? "form--blur" : ""
+          }`}
+          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;

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--multi">
+        <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 Client"
+                    >
+                      <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;

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;
+}

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";
 

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";