remove filter for active carriers from phone number config

* Hide create carrier/number controls if ADMIN_CARRIER env var is set

* hide add caririer button

* add to example .env

* hide delete phone number

.env

@@ -1,5 +1,5 @@
-VITE_API_BASE_URL=http://127.0.0.1:3000/v1
-VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1
+# 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
@@ -25,4 +25,12 @@ VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1
 ## Base url for jambomz webapp
 #VITE_APP_BASE_URL="http://jambonz.one"
 ## Strip publishable key
-#VITE_APP_STRIPE_PUBLISHABLE_KEY="pk_test_EChRaX9Tjk8csZZVSeoGqNvu00lsJzjaU1"
+#VITE_APP_STRIPE_PUBLISHABLE_KEY="pk_test_EChRaX9Tjk8csZZVSeoGqNvu00lsJzjaU1"
+## ignore some specific speech vendors, defined by ADDITIONAL_SPEECH_VENDORS constant
+# VITE_APP_DISABLE_ADDITIONAL_SPEECH_VENDORS=true
+## AWS region for enabling Recent Call Feature server logs
+#VITE_APP_AWS_REGION=us-west-2
+## enable lazy loading for phone numbers (improves performance when managing large quantities)
+# VITE_APP_ENABLE_PHONE_NUMBER_LAZY_LOAD=true
+# hides controlls to add Carrier and Phone number from non Admin/SP Users (also need to set flag on API server to block API calls)
+#VITE_ADMIN_CARRIER=1

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.15-alpine3.16 as builder
+FROM node:20-alpine 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.14.1-alpine as webapp
+FROM node:20-alpine AS webapp
 RUN apk add curl
 WORKDIR /opt/app
 COPY . /opt/app

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Drachtio Communications Services, LLC
+Copyright (c) 2018-2024 FirstFive8, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

entrypoint.sh

@@ -18,7 +18,7 @@ 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}\",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>"
+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}\",ADMIN_CARRIER: \"${ADMIN_CARRIER}\"};</script>"
 sed -i -e "\@</head>@i\    $SCRIPT_TAG" ./dist/index.html
 
 # Start the frontend web app static server

package.json

@@ -1,11 +1,11 @@
 {
   "name": "jambonz-webapp",
   "description": "A simple provisioning web app for jambonz",
-  "version": "0.9.0",
+  "version": "0.9.5",
   "license": "MIT",
   "type": "module",
   "engines": {
-    "node": ">=14.18"
+    "node": ">=18"
   },
   "contributors": [
     {
@@ -41,7 +41,7 @@
     "deploy": "npm i && npm run build && npm run pm2"
   },
   "dependencies": {
-    "@jambonz/ui-kit": "^0.0.21",
+    "@jambonz/ui-kit": "^0.0.22",
     "@stripe/react-stripe-js": "^2.6.2",
     "@stripe/stripe-js": "^3.2.0",
     "dayjs": "^1.11.10",
@@ -71,16 +71,16 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "express": "^4.19.2",
+    "express": "^5.1.0",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "nanoid": "^5.0.7",
+    "lint-staged": "^16.1.2",
+    "nanoid": "^5.1.5",
     "prettier": "^3.2.5",
-    "sass": "^1.74.1",
-    "serve": "^14.2.1",
+    "sass": "^1.89.2",
+    "serve": "^14.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.4",
-    "vite": "^5.2.8"
+    "vite": "^6.4.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --max-warnings=0",

src/api/constants.ts

@@ -1,6 +1,9 @@
 import type {
+  CartesiaOptions,
   Currency,
   ElevenLabsOptions,
+  GoogleCustomVoice,
+  InworldOptions,
   LimitField,
   LimitUnitOption,
   PasswordSettings,
@@ -12,6 +15,7 @@ import type {
   WebHook,
   WebhookOption,
 } from "./types";
+import { Vendor } from "src/vendor/types";
 
 /** This window object is serialized and injected at docker runtime */
 /** The API url is constructed with the docker containers `ip:port` */
@@ -28,6 +32,10 @@ interface JambonzWindowObject {
   BASE_URL: string;
   DEFAULT_SERVICE_PROVIDER_SID: string;
   STRIPE_PUBLISHABLE_KEY: string;
+  DISABLE_ADDITIONAL_SPEECH_VENDORS: string;
+  AWS_REGION: string;
+  ENABLE_PHONE_NUMBER_LAZY_LOAD: string;
+  ADMIN_CARRIER: string;
 }
 
 declare global {
@@ -37,8 +45,12 @@ declare global {
 }
 
 /** https://vitejs.dev/guide/env-and-mode.html#env-files */
-export const API_BASE_URL =
+const CONFIGURED_API_BASE_URL =
   window.JAMBONZ?.API_BASE_URL || import.meta.env.VITE_API_BASE_URL;
+export const API_BASE_URL =
+  CONFIGURED_API_BASE_URL && CONFIGURED_API_BASE_URL.length !== 0
+    ? CONFIGURED_API_BASE_URL
+    : `${window.location.protocol}//${window.location.hostname}/api/v1`;
 
 /** Serves mock API responses from a local dev API server */
 export const DEV_BASE_URL = import.meta.env.VITE_DEV_BASE_URL;
@@ -72,6 +84,16 @@ export const DISABLE_CALL_RECORDING: boolean =
   window.JAMBONZ?.DISABLE_CALL_RECORDING === "true" ||
   JSON.parse(import.meta.env.VITE_APP_DISABLE_CALL_RECORDING || "false");
 
+/** Disable additional speech vendors */
+export const DISABLE_ADDITIONAL_SPEECH_VENDORS: boolean =
+  window.JAMBONZ?.DISABLE_ADDITIONAL_SPEECH_VENDORS === "true" ||
+  JSON.parse(
+    import.meta.env.VITE_APP_DISABLE_ADDITIONAL_SPEECH_VENDORS || "false",
+  );
+
+export const AWS_REGION: string =
+  window.JAMBONZ?.AWS_REGION || import.meta.env.VITE_APP_AWS_REGION;
+
 export const DEFAULT_SERVICE_PROVIDER_SID: string =
   window.JAMBONZ?.DEFAULT_SERVICE_PROVIDER_SID ||
   import.meta.env.VITE_APP_DEFAULT_SERVICE_PROVIDER_SID;
@@ -89,6 +111,8 @@ export const STRIPE_PUBLISHABLE_KEY: string =
   window.JAMBONZ?.STRIPE_PUBLISHABLE_KEY ||
   import.meta.env.VITE_APP_STRIPE_PUBLISHABLE_KEY;
 
+export const ADMIN_CARRIER: string =
+  window.JAMBONZ?.ADMIN_CARRIER || import.meta.env.VITE_ADMIN_CARRIER || "0";
 /** TCP Max Port */
 export const TCP_MAX_PORT = 65535;
 
@@ -110,7 +134,7 @@ export const DEFAULT_WEBHOOK: WebHook = {
 };
 
 /** Default SIP/SMPP Gateways  */
-export const DEFAULT_SIP_GATEWAY: SipGateway = {
+export const DEFAULT_SIP_INBOUND_GATEWAY: SipGateway = {
   voip_carrier_sid: "",
   ipv4: "",
   port: 5060,
@@ -201,10 +225,39 @@ export const AUDIO_FORMAT_OPTIONS = [
   },
 ];
 
+export const LOG_LEVEL_OPTIONS = [
+  {
+    name: "Info",
+    value: "info",
+  },
+  {
+    name: "Debug",
+    value: "debug",
+  },
+];
+
 export const DEFAULT_ELEVENLABS_MODEL = "eleven_multilingual_v2";
 
 export const DEFAULT_WHISPER_MODEL = "tts-1";
 
+// VERBIO
+export const VERBIO_STT_MODELS = [
+  { name: "V1", value: "V1" },
+  { name: "V2", value: "V2" },
+];
+
+export const DEFAULT_VERBIO_MODEL = "V1";
+
+// ASSEMBLYAI
+export const ASSEMBLYAI_STT_VERSIONS = [
+  { name: "V2", value: "v2" },
+  { name: "V3", value: "v3" },
+];
+
+export const DEFAULT_ASSEMBLYAI_STT_VERSION = "v2";
+
+export const ADDITIONAL_SPEECH_VENDORS: Lowercase<Vendor>[] = ["speechmatics"];
+
 // Google Custom Voice reported usage options
 
 export const DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = "REALTIME";
@@ -213,6 +266,13 @@ export const GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = [
   { name: "REALTIME", value: "REALTIME" },
   { name: "OFFLINE", value: "OFFLINE" },
 ];
+export const DEFAULT_GOOGLE_CUSTOM_VOICE: GoogleCustomVoice = {
+  name: "",
+  reported_usage: DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
+  model: "",
+  use_voice_cloning_key: 0,
+  voice_cloning_key_file: null,
+};
 // ElevenLabs options
 export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
   optimize_streaming_latency: 3,
@@ -229,6 +289,14 @@ export const DEFAULT_RIMELABS_OPTIONS: Partial<RimelabsOptions> = {
   reduceLatency: true,
 };
 
+export const DEFAULT_INWORLD_OPTIONS: Partial<InworldOptions> = {
+  audioConfig: {
+    pitch: 0.0,
+    speakingRate: 1.0,
+  },
+  temperature: 0.8,
+};
+
 // PlayHT options
 export const DEFAULT_PLAYHT_OPTIONS: Partial<PlayHTOptions> = {
   quality: "medium",
@@ -240,6 +308,12 @@ export const DEFAULT_PLAYHT_OPTIONS: Partial<PlayHTOptions> = {
   style_guidance: 20,
   text_guidance: 1,
 };
+
+// Cartesia options
+export const DEFAULT_CARTESIA_OPTIONS: Partial<CartesiaOptions> = {
+  speed: 0.0,
+  emotion: "positivity:high",
+};
 /** Password Length options */
 
 export const PASSWORD_MIN = 8;
@@ -253,6 +327,7 @@ export const PASSWORD_LENGTHS_OPTIONS = Array(13)
 /** List view filters */
 export const DATE_SELECTION = [
   { name: "today", value: "today" },
+  { name: "yesterday", value: "yesterday" },
   { name: "last 7d", value: "7" },
   { name: "last 14d", value: "14" },
   { name: "last 30d", value: "30" },
@@ -271,6 +346,17 @@ export const USER_SCOPE_SELECTION: SelectorOptions[] = [
   { name: "Account", value: "account" },
 ];
 
+export const DTMF_TYPE_SELECTION: SelectorOptions[] = [
+  { name: "RFC 2833", value: "rfc2833" },
+  { name: "Tones", value: "tones" },
+];
+
+export const TRUNK_TYPE_SELECTION: SelectorOptions[] = [
+  { name: "IP Trunk", value: "static_ip" },
+  { name: "Auth Trunk", value: "auth" },
+  { name: "Registration Trunk", value: "reg" },
+];
+
 /** Available webhook methods */
 export const WEBHOOK_METHODS: WebhookOption[] = [
   {
@@ -341,6 +427,11 @@ export const CurrencySymbol: Currency = {
   usd: "$",
 };
 
+export const DEEPGRAM_STT_ENPOINT = [
+  { name: "US (Default)", value: "" },
+  { name: "EU-hosted", value: "api.eu.deepgram.com" },
+];
+
 /** User scope values values */
 export const USER_ADMIN = "admin";
 export const USER_SP = "service_provider";
@@ -388,3 +479,4 @@ 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`;
+export const API_APP_ENV = `${API_BASE_URL}/AppEnv`;

src/api/index.ts

@@ -34,6 +34,7 @@ import {
   API_CHANGE_PASSWORD,
   API_SIGNIN,
   API_GOOGLE_CUSTOM_VOICES,
+  API_APP_ENV,
 } from "./constants";
 import { ROUTE_LOGIN } from "src/router/routes";
 import {
@@ -94,6 +95,10 @@ import type {
   GoogleCustomVoice,
   GoogleCustomVoicesQuery,
   SpeechSupportedLanguagesAndVoices,
+  AppEnv,
+  PhoneNumberQuery,
+  ApplicationQuery,
+  VoipCarrierQuery,
 } from "./types";
 import { Availability, StatusCodes } from "./types";
 import { JaegerRoot } from "./jaeger-types";
@@ -225,6 +230,16 @@ export const getBlob = (url: string) => {
   });
 };
 
+export const postBlobFetch = <Type>(url: string, formdata?: FormData) => {
+  return fetchTransport<Type>(url, {
+    method: "POST",
+    body: formdata,
+    headers: {
+      Authorization: `Bearer ${getToken()}`,
+    },
+  });
+};
+
 /** Simple wrappers for fetchTransport calls to any API, :GET, :POST, :PUT, :DELETE */
 
 export const getFetch = <Type>(url: string) => {
@@ -492,6 +507,15 @@ export const postGoogleCustomVoice = (payload: Partial<GoogleCustomVoice>) => {
     payload,
   );
 };
+
+export const postGoogleVoiceCloningKey = (sid: string, file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  return postBlobFetch<EmptyResponse>(
+    `${API_GOOGLE_CUSTOM_VOICES}/${sid}/VoiceCloningKey`,
+    formData,
+  );
+};
 /** Named wrappers for `putFetch` */
 
 export const putUser = (sid: string, payload: Partial<UserUpdatePayload>) => {
@@ -793,6 +817,33 @@ export const getGoogleCustomVoices = (
   const qryStr = getQuery<Partial<GoogleCustomVoicesQuery>>(query);
   return getFetch<GoogleCustomVoice[]>(`${API_GOOGLE_CUSTOM_VOICES}?${qryStr}`);
 };
+// ENV VARS
+
+export const getAppEnvSchema = (url: string) => {
+  return getFetch<AppEnv>(`${API_APP_ENV}?url=${url}`);
+};
+
+export const getApplications = (
+  sid: string,
+  query: Partial<ApplicationQuery>,
+) => {
+  const qryStr = getQuery<Partial<ApplicationQuery>>(query);
+
+  return getFetch<PagedResponse<Application>>(
+    `${API_ACCOUNTS}/${sid}/Applications?${qryStr}`,
+  );
+};
+
+export const getSPVoipCarriers = (
+  sid: string,
+  query: Partial<VoipCarrierQuery>,
+) => {
+  const qryStr = getQuery<Partial<VoipCarrierQuery>>(query);
+
+  return getFetch<PagedResponse<Carrier>>(
+    `${API_SERVICE_PROVIDERS}/${sid}/VoipCarriers?${qryStr}`,
+  );
+};
 
 /** Wrappers for APIs that can have a mock dev server response */
 
@@ -804,17 +855,19 @@ export const getRecentCalls = (sid: string, query: Partial<CallQuery>) => {
   const qryStr = getQuery<Partial<CallQuery>>(query);
 
   return getFetch<PagedResponse<RecentCall>>(
-    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls?${qryStr}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`,
+    `${API_ACCOUNTS}/${sid}/RecentCalls?${qryStr}`,
   );
 };
 
 export const getRecentCall = (sid: string, sipCallId: string) => {
   return getFetch<TotalResponse>(
-    import.meta.env.DEV
-      ? `${DEV_BASE_URL}/Accounts/${sid}/RecentCalls/${sipCallId}`
-      : `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`,
+    `${API_ACCOUNTS}/${sid}/RecentCalls/${sipCallId}`,
+  );
+};
+
+export const getRecentCallLog = (sid: string, callSid: string) => {
+  return getFetch<string[]>(
+    `${API_ACCOUNTS}/${sid}/RecentCalls/${callSid}/logs`,
   );
 };
 
@@ -871,10 +924,17 @@ export const getPrice = () => {
   return getFetch<PriceInfo[]>(API_PRICE);
 };
 
+export const getPhoneNumbers = (query: Partial<PhoneNumberQuery>) => {
+  const qryStr = getQuery<Partial<PhoneNumberQuery>>(query);
+
+  return getFetch<PagedResponse<PhoneNumber>>(`${API_PHONE_NUMBERS}?${qryStr}`);
+};
+
 export const getSpeechSupportedLanguagesAndVoices = (
   sid: string | undefined,
   vendor: string,
   label: string,
+  create_new: boolean = false,
 ) => {
   const userData = parseJwt(getToken());
   const apiUrl =
@@ -883,7 +943,7 @@ export const getSpeechSupportedLanguagesAndVoices = (
       : `${API_SERVICE_PROVIDERS}/${sid}`) +
     `/SpeechCredentials/speech/supportedLanguagesAndVoices?vendor=${vendor}${
       label ? `&label=${label}` : ""
-    }`;
+    }${create_new ? "&create_new=true" : ""}`;
   return getFetch<SpeechSupportedLanguagesAndVoices>(apiUrl);
 };
 

src/api/types.ts

@@ -1,4 +1,10 @@
-import type { Language, Model, Vendor, VoiceLanguage } from "src/vendor/types";
+import type {
+  JambonzResourceOptions,
+  Language,
+  Model,
+  Vendor,
+  VoiceLanguage,
+} from "src/vendor/types";
 
 /** Simple types */
 
@@ -26,6 +32,8 @@ export interface LimitUnitOption {
 /** User roles / permissions */
 export type UserScopes = "admin" | "service_provider" | "account";
 
+export type LogLevel = "info" | "debug";
+
 export type UserPermissions =
   | "VIEW_ONLY"
   | "PROVISION_SERVICES"
@@ -122,9 +130,11 @@ export interface ForgotPassword {
 }
 
 export interface SystemInformation {
-  domain_name: string;
-  sip_domain_name: string;
-  monitoring_domain_name: string;
+  domain_name: null | string;
+  sip_domain_name: null | string;
+  monitoring_domain_name: null | string;
+  private_network_cidr: null | string;
+  log_level: LogLevel;
 }
 
 export interface TtsCache {
@@ -139,6 +149,7 @@ export interface User {
   name: string;
   email: string;
   is_active: boolean;
+  is_view_only: boolean;
   force_change: boolean;
   account_sid: string | null;
   account_name?: string | null;
@@ -170,6 +181,7 @@ export interface UserUpdatePayload {
   name: string;
   force_change: boolean;
   is_active: boolean;
+  is_view_only: boolean;
   service_provider_sid: string | null;
   account_sid: string | null;
 }
@@ -261,6 +273,7 @@ export interface Account {
   device_to_call_ratio?: number;
   trial_end_date?: null | string;
   is_active: boolean;
+  enable_debug_log: boolean;
 }
 
 export interface Product {
@@ -313,7 +326,6 @@ export interface Application {
   app_json: null | string;
   call_hook: null | WebHook;
   account_sid: null | string;
-  messaging_hook: null | WebHook;
   application_sid: string;
   call_status_hook: null | WebHook;
   speech_synthesis_voice: null | string;
@@ -332,6 +344,7 @@ export interface Application {
   fallback_speech_recognizer_vendor: null | string;
   fallback_speech_recognizer_language: null | string;
   fallback_speech_recognizer_label: null | string;
+  env_vars: null | Record<string, string | number | boolean>;
 }
 
 export interface PhoneNumber {
@@ -376,7 +389,10 @@ export interface GoogleCustomVoice {
   speech_credential_sid?: string;
   name: string;
   reported_usage: string;
-  model: string;
+  model?: string;
+  use_voice_cloning_key: number;
+  voice_cloning_key?: string | null;
+  voice_cloning_key_file?: File | null;
 }
 
 export interface SpeechCredential {
@@ -402,6 +418,8 @@ export interface SpeechCredential {
   custom_stt_endpoint_url: null | string;
   custom_stt_endpoint: null | string;
   client_id: null | string;
+  client_secret: null | string;
+  client_key: null | string;
   secret: null | string;
   nuance_tts_uri: null | string;
   nuance_stt_uri: null | string;
@@ -414,14 +432,25 @@ export interface SpeechCredential {
   auth_token: null | string;
   custom_stt_url: null | string;
   custom_tts_url: null | string;
+  custom_tts_streaming_url: null | string;
   label: null | string;
   cobalt_server_uri: null | string;
   model_id: null | string;
+  stt_model_id: null | string;
   voice_engine: null | string;
+  engine_version: null | string;
+  service_version: null | string;
   model: null | string;
   options: null | string;
   deepgram_stt_uri: null | string;
+  deepgram_tts_uri: null | string;
   deepgram_stt_use_tls: number;
+  speechmatics_stt_uri: null | string;
+  playht_tts_uri: null | string;
+  resemble_tts_uri: null | string;
+  resemble_tts_use_tls: number;
+  api_uri: null | string;
+  houndify_server_uri: null | string;
 }
 
 export interface Alert {
@@ -439,6 +468,10 @@ export interface CarrierRegisterStatus {
   callId: null | string;
 }
 
+export type DtmfType = "rfc2833" | "tones" | "info";
+
+export type TrunkType = "static_ip" | "auth" | "reg";
+
 export interface Carrier {
   voip_carrier_sid: string;
   name: string;
@@ -465,6 +498,9 @@ export interface Carrier {
   smpp_inbound_password: null | string;
   smpp_enquire_link_interval: number;
   register_status: CarrierRegisterStatus;
+  dtmf_type: DtmfType;
+  outbound_sip_proxy: string | null;
+  trunk_type: TrunkType;
 }
 
 export interface PredefinedCarrier extends Carrier {
@@ -487,6 +523,7 @@ export interface SipGateway extends Gateway {
   port: number | null;
   pad_crypto?: boolean;
   send_options_ping?: boolean;
+  use_sips_scheme?: boolean;
 }
 
 export interface SmppGateway extends Gateway {
@@ -536,16 +573,32 @@ export interface Client {
 
 export interface PageQuery {
   page: number;
+  page_size?: number;
   count: number;
   start?: string;
   days?: number;
 }
 
+export interface PhoneNumberQuery extends PageQuery {
+  service_provider_sid?: string;
+  account_sid?: string;
+  filter?: string;
+}
+
 export interface CallQuery extends PageQuery {
   direction?: string;
   answered?: string;
 }
 
+export interface ApplicationQuery extends PageQuery {
+  name?: string;
+}
+
+export interface VoipCarrierQuery extends PageQuery {
+  name?: string;
+  account_sid?: string;
+}
+
 export interface GoogleCustomVoicesQuery {
   speech_credential_sid?: string;
   label?: string;
@@ -639,8 +692,9 @@ export interface Price {
   recurring: Recurring;
   stripe_price_id: null | string;
   tiers_mode: null | string;
+  tiers?: null | Tier[];
   type: null | string;
-  unit_amount: number;
+  unit_amount: null | number;
   unit_amount_decimal: null | string;
 }
 
@@ -659,9 +713,11 @@ export interface StripeCustomerId {
 }
 
 export interface Tier {
-  up_to: number;
-  flat_amount: number;
-  unit_amount: number;
+  up_to: null | number;
+  flat_amount: null | number;
+  unit_amount: null | number;
+  flat_amount_decimal: null | string;
+  unit_amount_decimal: null | string;
 }
 
 export interface ServiceData {
@@ -711,6 +767,7 @@ export interface SpeechSupportedLanguagesAndVoices {
   tts: VoiceLanguage[];
   stt: Language[];
   models: Model[];
+  sttModels: Model[];
 }
 
 export interface ElevenLabsOptions {
@@ -738,3 +795,52 @@ export interface RimelabsOptions {
   speedAlpha: number;
   reduceLatency: boolean;
 }
+
+export interface InworldOptions {
+  audioConfig: {
+    bitRate?: number;
+    sampleRateHertz?: number;
+    pitch?: number;
+    speakingRate?: number;
+  };
+  temperature?: number;
+}
+
+export type CartesiaEmotions =
+  | "anger:lowest"
+  | "anger:low"
+  | "anger:high"
+  | "anger:highest"
+  | "positivity:lowest"
+  | "positivity:low"
+  | "positivity:high"
+  | "positivity:highest"
+  | "surprise:lowest"
+  | "surprise:high"
+  | "surprise:highest"
+  | "sadness:lowest"
+  | "sadness:low"
+  | "curiosity:low"
+  | "curiosity:high"
+  | "curiosity:highest";
+
+export interface CartesiaOptions {
+  speed: number;
+  emotion: CartesiaEmotions;
+}
+
+export interface AppEnvProperty {
+  description: string;
+  type: string;
+  required?: boolean;
+  default?: string | number | boolean;
+  obscure?: boolean;
+  uiHint?: "input" | "textarea" | "filepicker";
+  enum?: string[];
+  jambonzResource?: "carriers";
+  jambonzResourceOptions?: JambonzResourceOptions[];
+}
+
+export interface AppEnv {
+  [key: string]: AppEnvProperty;
+}

src/components/account-filter.cy.tsx

@@ -43,32 +43,63 @@ describe("<AccountFilter>", () => {
     cy.mount(<AccountFilterTestWrapper />);
 
     /** Default value is properly set to first option */
-    cy.get("select").should("have.value", accountsSorted[0].account_sid);
+    cy.get("input").should("have.value", accountsSorted[0].name);
   });
 
   it("updates value onChange", () => {
     cy.mount(<AccountFilterTestWrapper />);
 
     /** Assert onChange value updates */
-    cy.get("select").select(accountsSorted[1].account_sid);
-    cy.get("select").should("have.value", accountsSorted[1].account_sid);
+    cy.get("input").clear();
+    cy.get("input").type(accountsSorted[1].name);
+    cy.get("input").should("have.value", accountsSorted[1].name);
   });
 
   it("manages the focused state", () => {
     cy.mount(<AccountFilterTestWrapper />);
 
     /** Test the `focused` state className (applied onFocus) */
-    cy.get("select").select(accountsSorted[1].account_sid);
-    cy.get(".account-filter").should("have.class", "focused");
-    cy.get("select").blur();
-    cy.get(".account-filter").should("not.have.class", "focused");
+    cy.get("input").clear();
+    cy.get("input").type(accountsSorted[1].name);
+    cy.get("input").parent().should("have.class", "focused");
+    cy.get("input").blur();
+    cy.get("input").parent().should("not.have.class", "focused");
   });
 
   it("renders with default option", () => {
     /** Test with the `defaultOption` prop */
     cy.mount(<AccountFilterTestWrapper defaultOption />);
-
     /** No default value is set when this prop is present */
-    cy.get("select").should("have.value", "");
+    cy.get("input").should("have.value", "All accounts");
+  });
+
+  it("verify the typeahead dropdown", () => {
+    /** Test by typing cus then custom account is selected */
+    cy.mount(<AccountFilterTestWrapper defaultOption />);
+    cy.get("input").clear();
+    cy.get("input").type("cus");
+    cy.get("div#account_filter-option-1").should("have.text", "custom account");
+  });
+  it("handles Enter key press", () => {
+    cy.mount(<AccountFilterTestWrapper />);
+
+    cy.get("input").clear();
+    cy.get("input").type("cus{enter}");
+    cy.get("input").should("have.value", "custom account");
+  });
+  it("navigates down and up with arrow keys", () => {
+    cy.mount(<AccountFilterTestWrapper />);
+
+    cy.get("input").clear();
+    // Press arrow down to move to the first option
+    cy.get("input").type("{downarrow}");
+    cy.get("input").type("{enter}");
+    cy.get("input").should("have.value", "default account");
+
+    // Press up to move to the previous option
+    cy.get("input").type("{uparrow}");
+    cy.get("input").type("{uparrow}");
+    cy.get("input").type("{enter}");
+    cy.get("input").should("have.value", "custom account");
   });
 });

src/components/account-filter.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { classNames } from "@jambonz/ui-kit";
 
-import { Icons } from "src/components/icons";
+import { TypeaheadSelector } from "src/components/forms";
 
 import type { Account } from "src/api/types";
 import { hasLength, sortLocaleName } from "src/utils";
@@ -22,12 +22,10 @@ export const AccountFilter = ({
   accounts,
   defaultOption,
 }: AccountFilterProps) => {
-  const [focus, setFocus] = useState(false);
   const classes = {
     smsel: true,
     "smsel--filter": true,
     "account-filter": true,
-    focused: focus,
   };
 
   useEffect(() => {
@@ -36,41 +34,30 @@ export const AccountFilter = ({
     }
   }, [accounts, defaultOption, setAccountSid]);
 
+  const options = [
+    ...(defaultOption ? [{ name: "All accounts", value: "" }] : []),
+    ...(hasLength(accounts)
+      ? accounts.sort(sortLocaleName).map((acct) => ({
+          name: acct.name,
+          value: acct.account_sid,
+        }))
+      : []),
+  ];
+
   return (
     <div className={classNames(classes)}>
       {label && <label htmlFor="account_filter">{label}:</label>}
-      <div>
-        <select
-          id="account_filter"
-          name="account_filter"
-          value={accountSid}
-          onChange={(e) => {
-            setAccountSid(e.target.value);
-            setAccountFilter(e.target.value);
-          }}
-          onFocus={() => setFocus(true)}
-          onBlur={() => setFocus(false)}
-        >
-          {defaultOption ? (
-            <option value="">All accounts</option>
-          ) : (
-            accounts &&
-            !accounts.length && <option value="">No accounts</option>
-          )}
-          {hasLength(accounts) &&
-            accounts.sort(sortLocaleName).map((acct) => {
-              return (
-                <option key={acct.account_sid} value={acct.account_sid}>
-                  {acct.name}
-                </option>
-              );
-            })}
-        </select>
-        <span>
-          <Icons.ChevronUp />
-          <Icons.ChevronDown />
-        </span>
-      </div>
+      <TypeaheadSelector
+        id="account_filter"
+        name="account_filter"
+        value={accountSid}
+        options={options}
+        className="small"
+        onChange={(e) => {
+          setAccountSid(e.target.value);
+          setAccountFilter(e.target.value);
+        }}
+      />
     </div>
   );
 };

src/components/clipboard/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Icons } from "src/components/icons";
-import { toastError, toastSuccess } from "src/store";
+import { useToast } from "../toast/toast-provider";
 
 type ClipBoardProps = {
   id?: string;
@@ -13,6 +13,7 @@ type ClipBoardProps = {
 const hasClipboard = typeof navigator.clipboard !== "undefined";
 
 export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
+  const { toastSuccess, toastError } = useToast();
   const handleClick = () => {
     navigator.clipboard
       .writeText(text)

src/components/forms/account-select.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, forwardRef } from "react";
 
-import { Selector } from "src/components/forms";
+import { TypeaheadSelector } from "src/components/forms";
 
 import type { Account } from "src/api/types";
 import { hasLength } from "src/utils";
@@ -16,7 +16,7 @@ type AccountSelectProps = {
   disabled?: boolean;
 };
 
-type SelectorRef = HTMLSelectElement;
+type SelectorRef = HTMLInputElement;
 
 export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
   (
@@ -41,7 +41,7 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
         <label htmlFor="account_sid">
           {label} {required && <span>*</span>}
         </label>
-        <Selector
+        <TypeaheadSelector
           ref={ref}
           id="account_sid"
           name="account_sid"

src/components/forms/application-select.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, forwardRef } from "react";
 
-import { Selector } from "src/components/forms";
+import { TypeaheadSelector } from "src/components/forms";
 import { hasLength } from "src/utils";
 
 import type { Application } from "src/api/types";
@@ -18,7 +18,7 @@ type ApplicationSelectProps = {
   disabled?: boolean;
 };
 
-type SelectorRef = HTMLSelectElement;
+type SelectorRef = HTMLInputElement;
 
 export const ApplicationSelect = forwardRef<
   SelectorRef,
@@ -47,7 +47,7 @@ export const ApplicationSelect = forwardRef<
         <label htmlFor={id}>
           {label} {required && <span>*</span>}
         </label>
-        <Selector
+        <TypeaheadSelector
           ref={ref}
           id={id}
           name={id}

src/components/forms/index.ts

@@ -6,6 +6,7 @@ import { FileUpload } from "./file-upload";
 import { AccountSelect } from "./account-select";
 import { ApplicationSelect } from "./application-select";
 import { LocalLimits, useLocalLimitsRef } from "./local-limits";
+import { TypeaheadSelector } from "./typeahead-selector";
 
 export {
   Passwd,
@@ -17,4 +18,5 @@ export {
   ApplicationSelect,
   LocalLimits,
   useLocalLimitsRef,
+  TypeaheadSelector,
 };

src/components/forms/passwd/index.tsx

@@ -8,6 +8,8 @@ type PasswdProps = JSX.IntrinsicElements["input"] & {
   locked?: boolean;
   /** This is optional in case an onChange override is necessary... */
   setValue?: React.Dispatch<React.SetStateAction<string>>;
+  /** Whether to ignore password managers */
+  ignorePasswordManager?: boolean;
 };
 
 type PasswdRef = HTMLInputElement;
@@ -22,16 +24,27 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
       setValue,
       placeholder,
       locked = false,
+      ignorePasswordManager = true,
       ...restProps
     }: PasswdProps,
     ref,
   ) => {
     const [reveal, setReveal] = useState(false);
 
+    // Create object with conditional password manager attributes
+    const passwordManagerAttributes = ignorePasswordManager
+      ? {
+          "data-lpignore": "true",
+          "data-1p-ignore": "",
+          "data-form-type": "other",
+          "data-bwignore": "",
+        }
+      : {};
+
     return (
       <div className="passwd">
         <input
-          autoComplete={"off"}
+          autoComplete="off"
           ref={ref}
           type={reveal ? "text" : "password"}
           name={name}
@@ -43,6 +56,7 @@ export const Passwd = forwardRef<PasswdRef, PasswdProps>(
             }
           }}
           {...restProps}
+          {...passwordManagerAttributes}
         />
         {!locked && (
           <button

src/components/forms/selector/styles.scss

@@ -25,7 +25,6 @@
   }
 
   select {
-    @include ui-mixins.m();
     appearance: none;
     padding: ui-vars.$px01 ui-vars.$px02;
     border-radius: ui-vars.$px01;
@@ -33,6 +32,7 @@
     background-color: ui-vars.$white;
     width: 100%;
     max-width: vars.$widthinput;
+    @include ui-mixins.m();
 
     &:focus {
       border-color: ui-vars.$dark;

src/components/forms/typeahead-selector/index.tsx

@@ -0,0 +1,391 @@
+import React, { useState, forwardRef, useEffect } from "react";
+import { classNames } from "@jambonz/ui-kit";
+import { Icons } from "src/components/icons";
+
+import "./styles.scss";
+
+/**
+ * Represents an option in the typeahead selector dropdown
+ * @interface TypeaheadOption
+ * @property {string} name - The display text shown in the dropdown
+ * @property {string} value - The underlying value used when the option is selected
+ */
+export interface TypeaheadOption {
+  name: string;
+  value: string;
+}
+
+/**
+ * Props for the TypeaheadSelector component
+ * @extends {JSX.IntrinsicElements["input"]} - Inherits all standard HTML input props
+ * @typedef TypeaheadSelectorProps
+ * @property {TypeaheadOption[]} options - Array of selectable options to display in the dropdown
+ * @property {string} [className] - Optional CSS class name to apply to the component
+ */
+type TypeaheadSelectorProps = JSX.IntrinsicElements["input"] & {
+  options: TypeaheadOption[];
+  className?: string;
+};
+
+type TypeaheadSelectorRef = HTMLInputElement;
+
+/**
+ * TypeaheadSelector - A searchable dropdown component with keyboard navigation
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.id - Unique identifier for the input
+ * @param {string} props.name - Form field name
+ * @param {string} props.value - Currently selected value
+ * @param {TypeaheadOption[]} props.options - Array of selectable options
+ * @param {boolean} props.disabled - Whether the input is disabled
+ * @param {Function} props.onChange - Callback when selection changes
+ * @param {Ref} ref - Forwarded ref for the input element
+ *
+ * Features:
+ * - Keyboard navigation (up/down arrows, enter to select, escape to close)
+ * - Auto-scroll selected option into view
+ * - Filtering options by typing
+ * - Click or keyboard selection
+ * - Maintains value synchronization with parent component
+ * - Accessibility support with ARIA attributes
+ */
+export const TypeaheadSelector = forwardRef<
+  TypeaheadSelectorRef,
+  TypeaheadSelectorProps
+>(
+  (
+    {
+      id,
+      name,
+      value = "",
+      options,
+      disabled,
+      onChange,
+      className,
+      ...restProps
+    }: TypeaheadSelectorProps,
+    ref,
+  ) => {
+    const [inputValue, setInputValue] = useState("");
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [isOpen, setIsOpen] = useState(false);
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+    const classes = {
+      "typeahead-selector": true,
+      [`typeahead-selector${className}`]: true,
+      focused: isOpen,
+      disabled: !!disabled,
+    };
+    const [activeIndex, setActiveIndex] = useState(-1);
+
+    /**
+     * Synchronizes the input field with external value changes
+     * - Updates the input value when the selected value changes externally
+     * - Sets the input text to the name of the selected option
+     * - Updates the active index to match the selected option
+     * - Runs when either the value prop or options array changes
+     */
+    useEffect(() => {
+      let selectedIndex = options.findIndex((opt) => opt.value === value);
+      selectedIndex = selectedIndex < 0 ? 0 : selectedIndex;
+      const selected = options[selectedIndex];
+      setInputValue(selected?.name ?? "");
+      setActiveIndex(selectedIndex);
+    }, [value, options]);
+
+    /**
+     * Handles changes to the input field value
+     * @param {React.ChangeEvent<HTMLInputElement>} e - Input change event
+     *
+     * - Updates the input field with user's typed value
+     * - Opens the dropdown menu
+     * - Shows all available options (unfiltered)
+     * - Finds and highlights the first option that starts with the input text
+     * - Scrolls the highlighted option into view
+     */
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const input = e.target.value;
+      setInputValue(input);
+      setIsOpen(true);
+      setFilteredOptions(options);
+
+      const currentIndex = options.findIndex((opt) =>
+        opt.name.toLowerCase().startsWith(input.toLowerCase()),
+      );
+      setActiveIndex(currentIndex);
+
+      // Wait for dropdown to render, then scroll to the selected option
+      setTimeout(() => {
+        scrollActiveOptionIntoView(currentIndex);
+      }, 0);
+    };
+
+    /**
+     * Scrolls the option at the specified index into view within the dropdown
+     * @param {number} index - The index of the option to scroll into view
+     *
+     * - Uses the option's ID to find its DOM element
+     * - Smoothly scrolls the option into view if found
+     * - Does nothing if the option element doesn't exist
+     */
+    const scrollActiveOptionIntoView = (index: number) => {
+      const optionElement = document.getElementById(`${id}-option-${index}`);
+      if (optionElement) {
+        optionElement.scrollIntoView({ block: "nearest" });
+      }
+    };
+
+    /**
+     * Handles keyboard navigation and selection within the dropdown
+     * @param {React.KeyboardEvent<HTMLInputElement>} e - Keyboard event
+     *
+     * Keyboard controls:
+     * - ArrowDown/ArrowUp: Opens dropdown if closed, otherwise navigates options
+     * - Enter: Selects the currently highlighted option
+     * - Escape: Closes the dropdown
+     *
+     * Features:
+     * - Prevents default arrow key scrolling behavior
+     * - Auto-scrolls the active option into view
+     * - Wraps navigation within available options
+     * - Maintains current selection if at list boundaries
+     */
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!isOpen) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          setIsOpen(true);
+          setFilteredOptions(options);
+          return;
+        }
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const newIndex =
+              prev < filteredOptions.length - 1 ? prev + 1 : prev;
+            scrollActiveOptionIntoView(newIndex);
+            return newIndex;
+          });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            const newIndex = prev > 0 ? prev - 1 : prev;
+            scrollActiveOptionIntoView(newIndex);
+            return newIndex;
+          });
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+            handleOptionSelect(filteredOptions[activeIndex], e);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+      }
+    };
+
+    /**
+     * Handles the selection of an option from the dropdown
+     * @param {TypeaheadOption} option - The selected option object
+     * @param {React.MouseEvent | React.KeyboardEvent} e - Optional event object
+     *
+     * - Updates the input field with the selected option's name
+     * - Closes the dropdown
+     * - Triggers the onChange callback with a synthetic event containing the selected value
+     */
+    const handleOptionSelect = (
+      option: TypeaheadOption,
+      e?: React.MouseEvent | React.KeyboardEvent,
+    ) => {
+      e?.preventDefault();
+      setInputValue(option.name);
+      setIsOpen(false);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: option.value, name },
+        } as React.ChangeEvent<HTMLInputElement>;
+        onChange(syntheticEvent);
+      }
+    };
+
+    /**
+     * Handles the input focus event
+     *
+     * - Opens the dropdown menu
+     * - Shows all available options (unfiltered)
+     * - Finds and highlights the currently selected option based on value or input text
+     * - Scrolls the highlighted option into view after dropdown renders
+     *
+     * Note: Uses setTimeout to ensure the dropdown is rendered before attempting to scroll
+     */
+    const handleFocus = () => {
+      setIsOpen(true);
+      setFilteredOptions(options);
+      // Find and highlight the current value in the dropdown
+      const currentIndex = options.findIndex(
+        (opt) => opt.value === value || opt.name === inputValue,
+      );
+      setActiveIndex(currentIndex);
+
+      // Wait for dropdown to render, then scroll to the selected option
+      setTimeout(() => {
+        scrollActiveOptionIntoView(currentIndex);
+      }, 0);
+    };
+
+    /**
+     * Handles the input blur (focus loss) event
+     * @param {React.FocusEvent} e - The blur event object
+     *
+     * - Checks if focus is moving outside the component
+     * - If focus leaves component:
+     *   - Validates current input value against available options
+     *   - Resets input to last valid selection if no match found
+     *   - Closes the dropdown menu
+     * - Preserves focus state if clicking within component (e.g., dropdown options)
+     */
+    const handleBlur = (e: React.FocusEvent) => {
+      // Check if the new focus target is within our component
+      const relatedTarget = e.relatedTarget as Node;
+      const container = inputRef.current?.parentElement;
+
+      if (!container?.contains(relatedTarget)) {
+        // Reset value if it doesn't match any option
+        const matchingOption = options.find(
+          (opt) => opt.name.toLowerCase() === inputValue.toLowerCase(),
+        );
+        if (!matchingOption) {
+          const selected = options.find((opt) => opt.value === value);
+          setInputValue(selected?.name || "");
+        }
+        setIsOpen(false);
+      }
+    };
+    /**
+     * Renders a typeahead selector component with dropdown functionality.
+     *
+     * Key features:
+     * - Input field with autocomplete functionality
+     * - Dropdown toggle button with chevron icons
+     * - Dropdown list of filterable options
+     * - Keyboard navigation support
+     * - Accessibility attributes (ARIA)
+     *
+     * Component Structure:
+     * 1. Input field:
+     *    - Handles text input, focus/blur events
+     *    - Supports both function and object refs
+     *    - Disables browser autocomplete features
+     *
+     * 2. Toggle button:
+     *    - Opens/closes dropdown
+     *    - Shows up/down chevron icons
+     *    - Resets filtered options on click
+     *    - Auto-scrolls to selected option
+     *
+     * 3. Dropdown menu:
+     *    - Displays filtered options
+     *    - Supports mouse and keyboard interaction
+     *    - Highlights active option
+     *    - Implements proper ARIA attributes for accessibility
+     *
+     * States managed:
+     * - isOpen: Controls dropdown visibility
+     * - activeIndex: Tracks currently focused option
+     * - inputValue: Current input text
+     * - filteredOptions: Available options based on input
+     */
+    return (
+      <div className={classNames(classes)}>
+        <input
+          className={classNames({
+            active: isOpen,
+            disabled: !!disabled,
+          })}
+          ref={(node) => {
+            // Handle both refs
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            inputRef.current = node;
+          }}
+          id={id}
+          name={name}
+          value={inputValue}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          {...restProps}
+        />
+        <span
+          role="button"
+          tabIndex={0}
+          onBlur={handleBlur}
+          className={classNames({
+            active: isOpen,
+            disabled: !!disabled,
+            pointerevents: true,
+          })}
+          onClick={() => {
+            setIsOpen(!isOpen);
+            setFilteredOptions(options);
+            const currentIndex = options.findIndex(
+              (opt) => opt.value === value || opt.name === inputValue,
+            );
+            setActiveIndex(currentIndex);
+
+            // Wait for dropdown to render, then scroll to the selected option
+            setTimeout(() => {
+              scrollActiveOptionIntoView(currentIndex);
+            }, 0);
+          }}
+          onKeyDown={handleKeyDown}
+        >
+          <Icons.ChevronUp />
+          <Icons.ChevronDown />
+        </span>
+
+        {isOpen && (
+          <div
+            className="typeahead-dropdown"
+            role="listbox"
+            id={`${id}-listbox`}
+          >
+            {filteredOptions.map((option, index) => (
+              <div
+                key={`${id}_${option.value}`}
+                className={classNames({
+                  "typeahead-option": true,
+                  active: index === activeIndex,
+                })}
+                role="option"
+                id={`${id}-option-${index}`}
+                aria-selected={index === activeIndex}
+                tabIndex={-1}
+                onMouseDown={() => handleOptionSelect(option)}
+                onMouseEnter={() => setActiveIndex(index)}
+              >
+                {option.name}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+TypeaheadSelector.displayName = "TypeaheadSelector";

src/components/forms/typeahead-selector/styles.scss

@@ -0,0 +1,182 @@
+@use "src/styles/vars";
+@use "src/styles/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;
+
+// ... imports remain the same ...
+
+// Common mixins for shared styles
+@mixin typeahead-base {
+  position: relative;
+  max-width: vars.$widthtypeaheadselector;
+
+  &.disabled {
+    @include mixins.disabled();
+  }
+
+  &.focused {
+    input {
+      border-color: ui-vars.$dark;
+      outline: 0;
+    }
+
+    span {
+      background-color: ui-vars.$dark;
+    }
+  }
+}
+
+@mixin typeahead-input {
+  appearance: none;
+  padding: ui-vars.$px01 ui-vars.$px02;
+  border-radius: ui-vars.$px01;
+  border: 2px solid ui-vars.$grey;
+  background-color: ui-vars.$white;
+  max-width: vars.$widthtypeaheadinput;
+  transition: border-color 0.2s ease;
+  font-family: inherit;
+  @include ui-mixins.m();
+
+  &:focus {
+    border-color: ui-vars.$dark;
+    outline: 0;
+  }
+
+  &[disabled] {
+    @include mixins.disabled();
+  }
+}
+
+@mixin typeahead-span {
+  height: 100%;
+  width: 50px;
+  background-color: ui-vars.$grey;
+  border-radius: 0 ui-vars.$px01 ui-vars.$px01 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+
+  &.disabled {
+    @include mixins.disabled();
+  }
+
+  &.active {
+    background-color: ui-vars.$dark;
+  }
+
+  svg {
+    stroke: ui-vars.$white;
+    cursor: default;
+
+    &:first-child {
+      transform: translateY(5px);
+    }
+    &:last-child {
+      transform: translateY(-5px);
+    }
+  }
+}
+
+@mixin typeahead-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: ui-vars.$white;
+  border: 1px solid ui-vars.$dark;
+  max-height: 200px;
+  overflow-y: auto;
+  @include ui-mixins.m();
+}
+
+@mixin typeahead-option {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: normal;
+  display: block;
+  padding-block-start: 0px;
+  padding-block-end: 1px;
+  min-block-size: 1.2em;
+  padding-inline: 2px;
+  white-space: nowrap;
+  padding-left: 16px;
+  font-family: inherit;
+  line-height: 30.4px;
+
+  &:hover,
+  &.active {
+    background-color: #006dff;
+    color: ui-vars.$white;
+  }
+
+  &.active {
+    cursor: default;
+  }
+}
+
+// Main classes using the mixins
+.typeahead-selector {
+  @include typeahead-base();
+  width: 100%;
+
+  input {
+    width: 100%;
+    @include typeahead-input();
+  }
+
+  span {
+    @include typeahead-span();
+  }
+
+  .typeahead-dropdown {
+    z-index: 1000;
+    @include typeahead-dropdown();
+  }
+
+  .typeahead-option {
+    @include typeahead-option();
+  }
+}
+
+.typeahead-selectorsmall {
+  @include typeahead-base();
+  width: auto;
+
+  input {
+    height: 34px;
+    min-width: 370px;
+    font-size: var(--mxs-size);
+    @include typeahead-input();
+  }
+
+  span {
+    @include typeahead-span();
+  }
+
+  .typeahead-dropdown {
+    width: 100%;
+    @include typeahead-dropdown();
+  }
+
+  .typeahead-option {
+    font-size: var(--mxs-size);
+    @include typeahead-option();
+  }
+
+  .pointerevents {
+    pointer-events: all;
+    cursor: default;
+  }
+}
+
+.filters--multi {
+  overflow-x: visible !important;
+  white-space: nowrap;
+  grid-gap: 16px;
+}

src/components/obscure-input/index.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Icons } from "src/components/icons";
+import "./styles.scss";
+
+interface ObscureInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const ObscureInput = ({
+  value,
+  onChange,
+  className = "",
+  ...props
+}: ObscureInputProps) => {
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <div className="passwd">
+      <input
+        type={revealed ? "text" : "password"}
+        value={value}
+        onChange={onChange}
+        className={className}
+        {...props}
+      />
+      <button
+        className="btnty"
+        type="button"
+        onClick={() => setRevealed(!revealed)}
+        aria-label={revealed ? "Hide text" : "Show text"}
+      >
+        {revealed ? <Icons.EyeOff /> : <Icons.Eye />}
+      </button>
+    </div>
+  );
+};
+
+export default ObscureInput;

src/components/obscure-input/styles.scss

@@ -0,0 +1,39 @@
+@use "src/styles/vars";
+@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;
+@use "@jambonz/ui-kit/src/styles/mixins" as ui-mixins;
+
+.obscure-input {
+  position: relative; // This is correct
+  width: 100%;
+  display: block; // Add this to ensure proper containing block
+
+  &__field {
+    width: 100%;
+    padding-right: 40px;
+    font-family: ui-vars.$font-mono;
+    box-sizing: border-box; // Add this to ensure padding doesn't expand width
+  }
+
+  &__toggle {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    height: 100%; // Make the button take full height of input
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2; // Ensure button is above input
+
+    svg {
+      stroke: ui-vars.$jambonz;
+      pointer-events: none;
+      width: 18px; // Control icon size
+      height: 18px;
+    }
+  }
+}

src/components/require-auth.cy.tsx

@@ -2,15 +2,18 @@ import React from "react";
 import { H1 } from "@jambonz/ui-kit";
 
 import { RequireAuth } from "./require-auth";
+import { ToastProvider } from "./toast/toast-provider";
 
 /** Wrapper to pass different auth contexts */
 const RequireAuthTestWrapper = () => {
   return (
-    <RequireAuth>
-      <div className="auth-div">
-        <H1>Protected Route</H1>
-      </div>
-    </RequireAuth>
+    <ToastProvider>
+      <RequireAuth>
+        <div className="auth-div">
+          <H1>Protected Route</H1>
+        </div>
+      </RequireAuth>
+    </ToastProvider>
   );
 };
 

src/components/require-auth.tsx

@@ -2,14 +2,15 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useAuth } from "src/router/auth";
-import { toastError } from "src/store";
 import { ROUTE_LOGIN } from "src/router/routes";
 import { MSG_MUST_LOGIN } from "src/constants";
+import { useToast } from "./toast/toast-provider";
 
 /**
  * Wrapper component that enforces valid authorization to the app
  */
 export const RequireAuth = ({ children }: { children: React.ReactNode }) => {
+  const { toastError } = useToast();
   const { authorized } = useAuth();
   const navigate = useNavigate();
 

src/components/toast/toast-provider.tsx

@@ -0,0 +1,96 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import { Toast } from "./index";
+import type { IMessage, Toast as ToastProps } from "src/store/types";
+import { TOAST_TIME } from "src/constants";
+
+// Define the context type
+interface ToastContextType {
+  toastSuccess: (message: IMessage) => void;
+  toastError: (message: IMessage) => void;
+}
+
+// Create the context with a default value
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+/**
+ * Provider component that makes toast functionality available to any
+ * nested components that call useToast().
+ */
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [toast, setToast] = useState<ToastProps | null>(null);
+  const timeoutRef = useRef<number | null>(null);
+
+  // Clear any existing toasts and timeouts
+  const clearToast = useCallback(() => {
+    setToast(null);
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  // Show a toast with the specified type and message
+  const showToast = useCallback(
+    (type: "success" | "error", message: IMessage) => {
+      clearToast();
+
+      setToast({ type, message });
+
+      // Auto-hide after specified time
+      timeoutRef.current = window.setTimeout(() => {
+        setToast(null);
+      }, TOAST_TIME);
+    },
+    [clearToast],
+  );
+
+  // Exposed methods
+  const toastSuccess = useCallback(
+    (message: IMessage) => {
+      showToast("success", message);
+    },
+    [showToast],
+  );
+
+  const toastError = useCallback(
+    (message: IMessage) => {
+      showToast("error", message);
+    },
+    [showToast],
+  );
+
+  // Context value
+  const contextValue = useMemo(
+    () => ({
+      toastSuccess,
+      toastError,
+    }),
+    [toastSuccess, toastError],
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      {toast && <Toast type={toast.type} message={toast.message} />}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+
+  if (context === undefined) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+
+  return context;
+};

src/containers/internal/api-keys/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { P, Button } from "@jambonz/ui-kit";
 
-import { toastSuccess, toastError } from "src/store";
 import { useApiData, postApiKey, deleteApiKey } from "src/api";
 import { Modal, ModalClose, Obscure, ClipBoard, Section } from "src/components";
 import { getHumanDateTime, hasLength } from "src/utils";
 
 import type { ApiKey, TokenResponse } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 type ApiKeyProps = {
   path: string;
@@ -18,6 +18,7 @@ type ApiKeyProps = {
 };
 
 export const ApiKeys = ({ path, post, label }: ApiKeyProps) => {
+  const { toastSuccess, toastError } = useToast();
   const [apiKeys, apiKeysRefetcher] = useApiData<ApiKey[]>(path);
   const [deleteKey, setDeleteKey] = useState<ApiKey | null>(null);
   const [addedKey, setAddedKey] = useState<TokenResponse | null>(null);

src/containers/internal/navi/index.tsx

@@ -5,13 +5,12 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Icons, ModalForm } from "src/components";
 import { naviTop, naviByo } from "./items";
 import { UserMe } from "../user-me";
+import { useSelectState, useDispatch } from "src/store";
 import {
-  useSelectState,
-  useDispatch,
-  toastSuccess,
-  toastError,
-} from "src/store";
-import { getActiveSP, setActiveSP } from "src/store/localStore";
+  getActiveSP,
+  removeAccountFilter,
+  setActiveSP,
+} from "src/store/localStore";
 import { postServiceProviders } from "src/api";
 
 import type { NaviItem } from "./items";
@@ -22,6 +21,7 @@ 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";
+import { useToast } from "src/components/toast/toast-provider";
 
 type CommonProps = {
   handleMenu: () => void;
@@ -63,6 +63,7 @@ export const Navi = ({
   handleMenu,
   handleLogout,
 }: NaviProps) => {
+  const { toastSuccess, toastError } = useToast();
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const user = useSelectState("user");
@@ -166,6 +167,7 @@ export const Navi = ({
                 onChange={(e) => {
                   setSid(e.target.value);
                   setActiveSP(e.target.value);
+                  removeAccountFilter();
                   navigate(ROUTE_LOGIN);
                 }}
                 disabled={user?.scope !== USER_ADMIN}

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

@@ -4,7 +4,7 @@ import { useParams } from "react-router-dom";
 
 import { ApiKeys } from "src/containers/internal/api-keys";
 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { AccountForm } from "./form";
 
 import type { Account, Application, Limit, TtsCache } from "src/api/types";
@@ -14,8 +14,10 @@ import {
 } from "src/router/routes";
 import { useScopedRedirect } from "src/utils";
 import { Scope } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const EditAccount = () => {
+  const { toastError } = useToast();
   const params = useParams();
   const user = useSelectState("user");
   const [data, refetch, error] = useApiData<Account>(

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { P, Button, ButtonGroup, MS, Icon, H1 } from "@jambonz/ui-kit";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
   putAccount,
   postAccount,
@@ -14,7 +14,14 @@ import {
   postAccountBucketCredentialTest,
   deleteAccount,
 } from "src/api";
-import { ClipBoard, Icons, Modal, Section, Tooltip } from "src/components";
+import {
+  ClipBoard,
+  Icons,
+  Modal,
+  ScopedAccess,
+  Section,
+  Tooltip,
+} from "src/components";
 import {
   Selector,
   Checkzone,
@@ -67,6 +74,8 @@ import dayjs from "dayjs";
 import { EditBoard } from "src/components/editboard";
 import { ModalLoader } from "src/components/modal";
 import { useAuth } from "src/router/auth";
+import { Scope } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 type AccountFormProps = {
   apps?: Application[];
@@ -81,6 +90,7 @@ export const AccountForm = ({
   account,
   ttsCache,
 }: AccountFormProps) => {
+  const { toastError, toastSuccess } = useToast();
   const params = useParams();
   const navigate = useNavigate();
   const user = useSelectState("user");
@@ -115,10 +125,13 @@ export const AccountForm = ({
   const [tmpBucketVendor, setTmpBucketVendor] = useState("");
   const [recordFormat, setRecordFormat] = useState("mp3");
   const [bucketRegion, setBucketRegion] = useState("us-east-1");
+  const [tmpBucketRegion, setTmpBucketRegion] = useState("");
   const [bucketName, setBucketName] = useState("");
   const [tmpBucketName, setTmpBucketName] = useState("");
   const [bucketAccessKeyId, setBucketAccessKeyId] = useState("");
+  const [tmpBucketAccessKeyId, setTmpBucketAccessKeyId] = useState("");
   const [bucketSecretAccessKey, setBucketSecretAccessKey] = useState("");
+  const [tmpBucketSecretAccessKey, setTmpBucketSecretAccessKey] = useState("");
   const [bucketCredentialChecked, setBucketCredentialChecked] = useState(false);
   const [bucketTags, setBucketTags] = useState<AwsTag[]>([]);
   const [bucketGoogleServiceKey, setBucketGoogleServiceKey] =
@@ -136,7 +149,10 @@ export const AccountForm = ({
   const deleteMessageRef = useRef<HTMLInputElement | null>(null);
   const [isShowModalLoader, setIsShowModalLoader] = useState(false);
   const [azureConnectionString, setAzureConnectionString] = useState("");
+  const [tmpAzureConnectionString, setTmpAzureConnectionString] = useState("");
   const [endpoint, setEndpoint] = useState("");
+  const [tmpEndpoint, setTmpEndpoint] = useState("");
+  const [enableDebugLog, setEnableDebugLog] = useState(false);
 
   /** This lets us map and render the same UI for each... */
   const webhooks = [
@@ -275,6 +291,7 @@ export const AccountForm = ({
         endpoint: endpoint,
         access_key_id: bucketAccessKeyId,
         secret_access_key: bucketSecretAccessKey,
+        ...(bucketRegion && { region: bucketRegion }),
       }),
     };
 
@@ -381,6 +398,7 @@ export const AccountForm = ({
     if (account && account.data) {
       putAccount(account.data.account_sid, {
         name,
+        enable_debug_log: enableDebugLog,
         ...(!ENABLE_HOSTED_SYSTEM && { sip_realm: realm || null }),
         webhook_secret: account.data.webhook_secret,
         siprec_hook_sid: recId || null,
@@ -422,6 +440,9 @@ export const AccountForm = ({
             access_key_id: bucketAccessKeyId || null,
             secret_access_key: bucketSecretAccessKey || null,
             ...(hasLength(bucketTags) && { tags: bucketTags }),
+            ...(bucketRegion && {
+              region: bucketRegion,
+            }),
           },
         }),
         ...(!bucketCredentialChecked && {
@@ -450,6 +471,7 @@ export const AccountForm = ({
         queue_event_hook: queueHook || null,
         registration_hook: regHook || null,
         service_provider_sid: currentServiceProvider.service_provider_sid,
+        enable_debug_log: enableDebugLog,
       })
         .then(({ json }) => {
           toastSuccess("Account created successfully");
@@ -465,6 +487,7 @@ export const AccountForm = ({
   /** Set current account data values if applicable -- e.g. "edit mode" */
   useEffect(() => {
     if (account && account.data) {
+      setEnableDebugLog(account.data.enable_debug_log);
       setName(account.data.name);
 
       if (account.data.sip_realm) {
@@ -517,23 +540,38 @@ export const AccountForm = ({
         setBucketName(account.data.bucket_credential?.name);
       }
 
-      if (account.data.bucket_credential?.access_key_id) {
+      if (tmpBucketAccessKeyId) {
+        setBucketAccessKeyId(tmpBucketAccessKeyId);
+      } else if (account.data.bucket_credential?.access_key_id) {
         setBucketAccessKeyId(account.data.bucket_credential?.access_key_id);
       }
-      if (account.data.bucket_credential?.secret_access_key) {
+      if (tmpBucketSecretAccessKey) {
+        setBucketSecretAccessKey(tmpBucketSecretAccessKey);
+      } else if (account.data.bucket_credential?.secret_access_key) {
         setBucketSecretAccessKey(
           account.data.bucket_credential?.secret_access_key,
         );
       }
-      if (account.data.bucket_credential?.region) {
+      if (tmpBucketRegion) {
+        setBucketRegion(tmpBucketRegion);
+      } else if (account.data.bucket_credential?.region) {
         setBucketRegion(account.data.bucket_credential?.region);
+      } else if (
+        account.data.bucket_credential?.vendor === BUCKET_VENDOR_S3_COMPATIBLE
+      ) {
+        setBucketRegion("");
       }
-      if (account.data.bucket_credential?.connection_string) {
+
+      if (tmpAzureConnectionString) {
+        setAzureConnectionString(tmpAzureConnectionString);
+      } else if (account.data.bucket_credential?.connection_string) {
         setAzureConnectionString(
           account.data.bucket_credential.connection_string,
         );
       }
-      if (account.data.bucket_credential?.endpoint) {
+      if (tmpEndpoint) {
+        setEndpoint(tmpEndpoint);
+      } else if (account.data.bucket_credential?.endpoint) {
         setEndpoint(account.data.bucket_credential.endpoint);
       }
       if (account.data.record_all_calls) {
@@ -555,9 +593,7 @@ export const AccountForm = ({
           JSON.parse(account.data.bucket_credential?.service_key),
         );
       }
-      setInitialCheckRecordAllCall(
-        hasValue(bucketVendor) && bucketVendor.length !== 0,
-      );
+      setInitialCheckRecordAllCall(hasValue(account.data.bucket_credential));
     }
   }, [account]);
 
@@ -1021,6 +1057,22 @@ export const AccountForm = ({
               } cached TTS prompts`}</MS>
             </fieldset>
           )}
+          <ScopedAccess scope={Scope.admin} user={user}>
+            <fieldset>
+              <label htmlFor="enable_debug_log" className="chk">
+                <input
+                  id="enable_debug_log"
+                  name="enable_debug_log"
+                  type="checkbox"
+                  onChange={(e) => setEnableDebugLog(e.target.checked)}
+                  checked={enableDebugLog}
+                />
+                <Tooltip text="You can enable debug log for calls only to this account">
+                  Enable debug log for this account
+                </Tooltip>
+              </label>
+            </fieldset>
+          </ScopedAccess>
           {!DISABLE_CALL_RECORDING && (
             <>
               <fieldset>
@@ -1058,6 +1110,18 @@ export const AccountForm = ({
                       onChange={(e) => {
                         setBucketVendor(e.target.value);
                         setTmpBucketVendor(e.target.value);
+                        if (
+                          e.target.value === BUCKET_VENDOR_AWS &&
+                          !regions?.aws.find((r) => r.value === bucketRegion)
+                        ) {
+                          setBucketRegion("us-east-1");
+                          setTmpBucketRegion("us-east-1");
+                        } else if (
+                          e.target.value === BUCKET_VENDOR_S3_COMPATIBLE
+                        ) {
+                          setBucketRegion("");
+                          setTmpBucketRegion("");
+                        }
                       }}
                     />
                   </div>
@@ -1075,6 +1139,18 @@ export const AccountForm = ({
                         value={endpoint}
                         onChange={(e) => {
                           setEndpoint(e.target.value);
+                          setTmpEndpoint(e.target.value);
+                        }}
+                      />
+                      <label htmlFor="endpoint">Region (Optional)</label>
+                      <input
+                        id="aws_compatible_region"
+                        type="text"
+                        name="aws_compatible_region"
+                        value={bucketRegion}
+                        onChange={(e) => {
+                          setBucketRegion(e.target.value);
+                          setTmpBucketRegion(e.target.value);
                         }}
                       />
                     </>
@@ -1122,7 +1198,10 @@ export const AccountForm = ({
                                   value: "",
                                 },
                               ].concat(regions["aws"])}
-                              onChange={(e) => setBucketRegion(e.target.value)}
+                              onChange={(e) => {
+                                setBucketRegion(e.target.value);
+                                setTmpBucketRegion(e.target.value);
+                              }}
                             />
                           </>
                         )}
@@ -1138,6 +1217,7 @@ export const AccountForm = ({
                         value={bucketAccessKeyId}
                         onChange={(e) => {
                           setBucketAccessKeyId(e.target.value);
+                          setTmpBucketAccessKeyId(e.target.value);
                         }}
                       />
                       <label htmlFor="bucket_aws_secret_key">
@@ -1151,6 +1231,7 @@ export const AccountForm = ({
                         value={bucketSecretAccessKey}
                         onChange={(e) => {
                           setBucketSecretAccessKey(e.target.value);
+                          setTmpBucketSecretAccessKey(e.target.value);
                         }}
                       />
                     </>
@@ -1199,6 +1280,7 @@ export const AccountForm = ({
                         value={azureConnectionString}
                         onChange={(e) => {
                           setAzureConnectionString(e.target.value);
+                          setTmpAzureConnectionString(e.target.value);
                         }}
                       />
                     </>

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

@@ -6,7 +6,7 @@ import { useServiceProviderData, deleteAccount } from "src/api";
 import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
 import { Section, Icons, Spinner, SearchFilter } from "src/components";
 import { DeleteAccount } from "./delete";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
   hasLength,
   hasValue,
@@ -17,8 +17,10 @@ import { USER_ACCOUNT } from "src/api/constants";
 
 import { Scope } from "src/store/types";
 import type { Account } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const Accounts = () => {
+  const { toastError, toastSuccess } = useToast();
   const user = useSelectState("user");
   const [accounts, refetch] = useServiceProviderData<Account[]>("Accounts");
   const [account, setAccount] = useState<Account | null>(null);

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

@@ -10,11 +10,13 @@ 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 { useSelectState } from "src/store";
 import { PaymentMethod } from "@stripe/stripe-js";
 import { ModalLoader } from "src/components/modal";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const ManagePaymentForm = () => {
+  const { toastError, toastSuccess } = useToast();
   const user = useSelectState("user");
   const stripe = useStripe();
   const elements = useElements();

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

@@ -19,10 +19,11 @@ import {
   useStripe,
 } from "@stripe/react-stripe-js";
 import { PaymentMethod } from "@stripe/stripe-js";
-import { toastError, toastSuccess } from "src/store";
 import { ModalLoader } from "src/components/modal";
+import { useToast } from "src/components/toast/toast-provider";
 
 const SubscriptionForm = () => {
+  const { toastError, toastSuccess } = useToast();
   const [userData] = useApiData<CurrentUserData>("Users/me");
   const [priceInfo] = useApiData<PriceInfo[]>("/Prices");
   const [userStripeInfo] = useApiData<StripeCustomerId>("/StripeCustomerId");
@@ -257,7 +258,10 @@ const SubscriptionForm = () => {
     [],
   );
 
-  const initFeesAndCost = (priceData: PriceInfo[]) => {
+  const initFeesAndCost = (
+    priceData: PriceInfo[],
+    serviceData: ServiceData[],
+  ) => {
     serviceData.forEach((service) => {
       const record = priceData.find(
         (item) => item.category === service.category,
@@ -272,7 +276,23 @@ const SubscriptionForm = () => {
           let fees = 0;
           switch (price.billing_scheme) {
             case "per_unit":
-              fees = (price.unit_amount * 1) / 100;
+              fees = ((price.unit_amount || 0) * 1) / 100;
+              break;
+            case "tiered":
+              if (price.tiers && price.tiers.length) {
+                const tier = price.tiers.find(
+                  (item) => !item.up_to || item.up_to >= service.capacity,
+                );
+                if (tier) {
+                  if (typeof tier.flat_amount === "number") {
+                    fees = tier.flat_amount / 100;
+                  } else {
+                    fees = ((tier.unit_amount || 0) * 1) / 100;
+                  }
+                }
+                service.tiers = price.tiers;
+              }
+
               break;
             default:
               break;
@@ -283,6 +303,7 @@ const SubscriptionForm = () => {
           service.product_sid = record.product_sid;
           service.stripe_product_id = record.stripe_product_id;
           service.fees = fees;
+          service.cost = fees * service.capacity;
           service.feesLabel = `${
             CurrencySymbol[service.currency || "usd"]
           }${fees} per ${
@@ -294,7 +315,7 @@ const SubscriptionForm = () => {
       }
     });
 
-    setServiceData([...serviceData]);
+    return [...serviceData];
   };
 
   const getServicePrice = (
@@ -320,7 +341,7 @@ const SubscriptionForm = () => {
           fees = tier.flat_amount / 100;
           cost = fees;
         } else {
-          fees = tier.unit_amount / 100;
+          fees = (tier.unit_amount || 0) / 100;
           cost = fees * capacityNum;
         }
       }
@@ -362,22 +383,23 @@ const SubscriptionForm = () => {
     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,
-      ),
+    let serviceD = serviceData.map((g, i) =>
+      i === index
+        ? {
+            ...g,
+            [key]: value,
+          }
+        : g,
     );
+    if (key === "capacity" && priceInfo) {
+      serviceD = initFeesAndCost(priceInfo, serviceD);
+    }
+    setServiceData([...serviceD]);
   };
 
   useEffect(() => {
     if (priceInfo) {
-      initFeesAndCost(priceInfo);
+      setServiceData(initFeesAndCost(priceInfo, serviceData));
     }
 
     if (userData && priceInfo) {

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

@@ -8,7 +8,7 @@ import {
   PER_PAGE_SELECTION,
   USER_ACCOUNT,
 } from "src/api/constants";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { hasLength, hasValue } from "src/utils";
 import {
   AccountFilter,
@@ -27,8 +27,10 @@ import {
   setLocation,
 } from "src/store/localStore";
 import AlertDetailItem from "./alert-detail-item";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const Alerts = () => {
+  const { toastError } = useToast();
   const user = useSelectState("user");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [accountSid, setAccountSid] = useState("");
@@ -47,7 +49,12 @@ export const Alerts = () => {
       count: Number(perPageFilter),
       ...(dateFilter === "today"
         ? { start: dayjs().startOf("date").toISOString() }
-        : { days: Number(dateFilter) }),
+        : dateFilter === "yesterday"
+          ? {
+              start: dayjs().subtract(1, "day").startOf("day").toISOString(),
+              end: dayjs().subtract(1, "day").endOf("day").toISOString(),
+            }
+          : { days: Number(dateFilter) }),
     };
 
     getAlerts(accountSid, payload)
@@ -63,10 +70,10 @@ export const Alerts = () => {
   };
 
   useMemo(() => {
+    setAccountSid(getAccountFilter() || accountSid);
+    if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
     if (getQueryFilter()) {
       const [date] = getQueryFilter().split("/");
-      setAccountSid(getAccountFilter() || accountSid);
-      if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
       setDateFilter(date);
     }
   }, [accountSid]);
@@ -103,7 +110,7 @@ export const Alerts = () => {
           id="date_filter"
           label="Date"
           filter={[dateFilter, setDateFilter]}
-          options={DATE_SELECTION.slice(0, 2)}
+          options={DATE_SELECTION}
         />
       </section>
       <Section {...(hasLength(alerts) && { slim: true })}>

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

@@ -3,15 +3,17 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";
 
 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { ApplicationForm } from "./form";
 
 import type { Application } from "src/api/types";
 import { useScopedRedirect } from "src/utils/use-scoped-redirect";
 import { Scope } from "src/store/types";
 import { ROUTE_INTERNAL_APPLICATIONS } from "src/router/routes";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const EditApplication = () => {
+  const { toastError } = useToast();
   const params = useParams();
   const user = useSelectState("user");
   const [data, refetch, error] = useApiData<Application>(

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

@@ -1,15 +1,16 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, 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";
-import { ClipBoard, Section } from "src/components";
+import { useSelectState } from "src/store";
+import { ClipBoard, Section, Tooltip } from "src/components";
 import {
   Selector,
   Checkzone,
   Passwd,
   Message,
   AccountSelect,
+  FileUpload,
 } from "src/components/forms";
 import {
   vendors,
@@ -23,6 +24,8 @@ import {
   putApplication,
   useServiceProviderData,
   useApiData,
+  getAppEnvSchema,
+  getSPVoipCarriers,
 } from "src/api";
 import {
   ROUTE_INTERNAL_ACCOUNTS,
@@ -48,17 +51,26 @@ import type {
   WebhookMethod,
   UseApiDataMap,
   SpeechCredential,
+  AppEnv,
 } from "src/api/types";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
-import { hasLength, isUserAccountScope, useRedirect } from "src/utils";
+import {
+  hasLength,
+  hasValue,
+  isUserAccountScope,
+  useRedirect,
+} from "src/utils";
 import { setAccountFilter, setLocation } from "src/store/localStore";
 import SpeechProviderSelection from "./speech-selection";
+import ObscureInput from "src/components/obscure-input";
+import { useToast } from "src/components/toast/toast-provider";
 
 type ApplicationFormProps = {
   application?: UseApiDataMap<Application>;
 };
 
 export const ApplicationForm = ({ application }: ApplicationFormProps) => {
+  const { toastSuccess, toastError } = useToast();
   const navigate = useNavigate();
   const user = useSelectState("user");
   const currentServiceProvider = useSelectState("currentServiceProvider");
@@ -77,11 +89,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
   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);
   const [synthLang, setSynthLang] = useState(LANG_EN_US);
@@ -127,6 +134,12 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
     useState("");
   const [initalCheckFallbackSpeech, setInitalCheckFallbackSpeech] =
     useState(false);
+  const [appEnv, setAppEnv] = useState<AppEnv | null>(null);
+  const appEnvTimeoutRef = useRef<number | null>(null);
+  const [envVars, setEnvVars] = useState<Record<
+    string,
+    string | number | boolean
+  > | null>(null);
 
   /** This lets us map and render the same UI for each... */
   const webhooks = [
@@ -139,6 +152,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
       tmpStateSet: setTmpCallWebhook,
       initialCheck: initialCallWebhook,
       required: true,
+      webhookEnv: appEnv,
     },
     {
       label: "Call status",
@@ -150,16 +164,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
       initialCheck: initialStatusWebhook,
       required: true,
     },
-    {
-      label: "Messaging",
-      prefix: "message_webhook",
-      stateVal: messageWebhook,
-      tmpStateVal: tmpMessageWebhook,
-      stateSet: setMessageWebhook,
-      tmpStateSet: setTmpMessageWebhook,
-      initialCheck: initialMessageWebhook,
-      required: false,
-    },
   ];
 
   useRedirect<Account>(
@@ -202,7 +206,6 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
       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,
@@ -213,6 +216,25 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
       speech_recognizer_label: recogLabel || null,
       record_all_calls: recordAllCalls ? 1 : 0,
       use_for_fallback_speech: useForFallbackSpeech ? 1 : 0,
+      env_vars: envVars
+        ? Object.keys(envVars).reduce((acc, key) => {
+            const value = envVars[key];
+            // Keep only values that:
+            // 1. Are defined in appEnv schema
+            // 2. Are not empty strings, undefined, or null
+            // 3. For booleans and numbers, keep them even if they're false or 0
+            if (
+              appEnv &&
+              appEnv[key] &&
+              (value === false ||
+                value === 0 ||
+                (value !== "" && value != null))
+            ) {
+              return { ...acc, [key]: value };
+            }
+            return acc;
+          }, {})
+        : null,
       fallback_speech_synthesis_vendor: useForFallbackSpeech
         ? fallbackSpeechSynthsisVendor || null
         : null,
@@ -471,24 +493,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
         else setInitialStatusWebhook(false);
       }
 
-      if (application.data.messaging_hook) {
-        setMessageWebhook(application.data.messaging_hook);
-        setTmpMessageWebhook(application.data.messaging_hook);
-
-        if (
-          application.data.messaging_hook.username ||
-          application.data.messaging_hook.password
-        )
-          setInitialMessageWebhook(true);
-        else setInitialMessageWebhook(false);
-      }
-
       if (application.data.account_sid)
         setAccountSid(application.data.account_sid);
 
-      if (application.data.messaging_hook)
-        setMessageWebhook(application.data.messaging_hook);
-
       if (application.data.speech_synthesis_vendor)
         setSynthVendor(
           application.data.speech_synthesis_vendor as keyof SynthesisVendors,
@@ -544,6 +551,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
           application.data.fallback_speech_synthesis_voice,
         );
       }
+      if (application.data.env_vars) {
+        setEnvVars(application.data.env_vars);
+      }
     }
   }, [application]);
 
@@ -579,6 +589,97 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
     setFallbackSpeechRecognizerLabel(tmp);
   };
 
+  const fetchAppEnvJambonzResources = async (appEnv: AppEnv) => {
+    if (appEnv) {
+      const promises = Object.entries(appEnv).map(async ([key, value]) => {
+        const { jambonzResource } = value;
+        switch (jambonzResource) {
+          case "carriers":
+            const carriers = await getSPVoipCarriers(
+              currentServiceProvider?.service_provider_sid || "",
+              {
+                page: 1,
+                page_size: 10000,
+                ...(user?.account_sid && {
+                  account_sid: user.account_sid,
+                }),
+              },
+            );
+            if (carriers.json.total) {
+              return {
+                key,
+                jambonzResourceOptions: carriers.json.data.map((carrier) => ({
+                  name: carrier.name,
+                  value: carrier.name,
+                })),
+              };
+            }
+            break;
+          default:
+            break;
+        }
+        return { key, jambonzResourceOptions: null };
+      });
+
+      const results = await Promise.all(promises);
+
+      // Merge the results back into appEnv
+      results.forEach(({ key, jambonzResourceOptions }) => {
+        if (jambonzResourceOptions) {
+          appEnv[key].jambonzResourceOptions = jambonzResourceOptions;
+        }
+      });
+    }
+
+    return appEnv;
+  };
+
+  useEffect(() => {
+    if (callWebhook && callWebhook.url) {
+      // Clear any existing timeout to prevent multiple requests
+      if (appEnvTimeoutRef.current) {
+        clearTimeout(appEnvTimeoutRef.current);
+        appEnvTimeoutRef.current = null;
+      }
+
+      appEnvTimeoutRef.current = setTimeout(() => {
+        getAppEnvSchema(callWebhook.url)
+          .then(({ json }) => {
+            // fetch app env jambonz_resource
+            fetchAppEnvJambonzResources(json).then((updatedEnv) => {
+              setAppEnv(updatedEnv);
+              const defaultEnvVars = Object.keys(updatedEnv).reduce(
+                (acc, key) => {
+                  const value = updatedEnv[key];
+                  if (value?.default) {
+                    return { ...acc, [key]: value.default };
+                  }
+                  return acc;
+                },
+                {},
+              );
+
+              setEnvVars((prev) => ({
+                ...defaultEnvVars,
+                ...(prev || {}),
+              }));
+            });
+            // Default value
+          })
+          .catch((error) => {
+            setMessage(error.msg);
+          });
+      }, 500);
+    }
+
+    return () => {
+      if (appEnvTimeoutRef.current) {
+        clearTimeout(appEnvTimeoutRef.current);
+        appEnvTimeoutRef.current = null;
+      }
+    };
+  }, [callWebhook]);
+
   return (
     <Section slim>
       <form
@@ -640,7 +741,29 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                       webhook.stateSet({
                         ...webhook.stateVal,
                         url: e.target.value,
+                        ...(e.target.value.startsWith("ws") && {
+                          method: "GET",
+                        }),
                       });
+                      if (
+                        e.target.value.startsWith("ws") &&
+                        webhook.prefix === "call_webhook"
+                      ) {
+                        const statusWebhook = webhooks.find(
+                          (w) => w.prefix === "status_webhook",
+                        );
+                        if (
+                          statusWebhook &&
+                          ((statusWebhook.stateVal?.url || "").length === 0 ||
+                            statusWebhook.stateVal?.url.startsWith("ws"))
+                        ) {
+                          statusWebhook.stateSet({
+                            ...statusWebhook.stateVal,
+                            url: e.target.value,
+                            method: "GET",
+                          });
+                        }
+                      }
                     }}
                   />
                 </div>
@@ -656,6 +779,7 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                         method: e.target.value as WebhookMethod,
                       });
                     }}
+                    disabled={webhook.stateVal?.url.startsWith("ws")}
                     options={WEBHOOK_METHODS}
                   />
                 </div>
@@ -707,6 +831,191 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                   }}
                 />
               </Checkzone>
+
+              {webhook.webhookEnv &&
+                Object.keys(webhook.webhookEnv).length > 0 && (
+                  <>
+                    {Object.keys(webhook.webhookEnv).map((key) => {
+                      const envType = webhook.webhookEnv![key].type;
+                      const isBoolean = envType === "boolean";
+                      const isNumber = envType === "number";
+                      const defaultValue = webhook.webhookEnv![key].default;
+
+                      return (
+                        <div key={key}>
+                          {isBoolean ? (
+                            // Boolean input as checkbox
+                            <label htmlFor={`env_${key}`} className="chk">
+                              <input
+                                id={`env_${key}`}
+                                type="checkbox"
+                                name={`env_${key}`}
+                                required={webhook.webhookEnv![key].required}
+                                checked={
+                                  envVars && envVars[key] !== undefined
+                                    ? Boolean(envVars[key])
+                                    : Boolean(defaultValue)
+                                }
+                                onChange={(e) => {
+                                  setEnvVars((prev) => ({
+                                    ...(prev || {}),
+                                    [key]: e.target.checked,
+                                  }));
+                                }}
+                              />
+                              <Tooltip
+                                text={webhook.webhookEnv![key].description}
+                              >
+                                {key}
+                                {webhook.webhookEnv![key].required && (
+                                  <span>*</span>
+                                )}
+                              </Tooltip>
+                            </label>
+                          ) : (
+                            // Text or number input
+                            <>
+                              <label htmlFor={`env_${key}`}>
+                                <Tooltip
+                                  text={webhook.webhookEnv![key].description}
+                                >
+                                  {key}
+                                  {webhook.webhookEnv![key].required && (
+                                    <span>*</span>
+                                  )}
+                                </Tooltip>
+                              </label>
+                              {(() => {
+                                // Common props for both input types
+                                const commonProps = {
+                                  id: `env_${key}`,
+                                  name: `env_${key}`,
+                                  required: webhook.webhookEnv![key].required,
+                                  value:
+                                    envVars && envVars[key] !== undefined
+                                      ? String(envVars[key])
+                                      : defaultValue !== undefined
+                                        ? String(defaultValue)
+                                        : "",
+                                  onChange: (
+                                    e: React.ChangeEvent<
+                                      HTMLInputElement | HTMLSelectElement
+                                    >,
+                                  ) => {
+                                    // Convert to proper type based on schema
+                                    let newValue;
+                                    if (isNumber) {
+                                      newValue =
+                                        e.target.value === ""
+                                          ? ""
+                                          : Number(e.target.value);
+                                    } else {
+                                      newValue = e.target.value;
+                                    }
+
+                                    setEnvVars((prev) => ({
+                                      ...(prev || {}),
+                                      [key]: newValue,
+                                    }));
+                                  },
+                                };
+
+                                // Extra props only for regular input
+                                const inputSpecificProps = {
+                                  type: isNumber ? "number" : "text",
+                                };
+
+                                const isDropdown =
+                                  (webhook.webhookEnv![key].type === "string" &&
+                                    (webhook.webhookEnv![key].enum?.length ||
+                                      0) > 0) ||
+                                  hasLength(
+                                    webhook.webhookEnv![key]
+                                      .jambonzResourceOptions,
+                                  );
+
+                                const textAreaSpecificProps = {
+                                  rows: 6,
+                                  cols: 61,
+                                };
+
+                                // Choose component type based on obscure flag
+                                const componentType = webhook.webhookEnv![key]
+                                  .obscure
+                                  ? ObscureInput
+                                  : webhook.webhookEnv![key].uiHint || "input";
+                                if (isDropdown) {
+                                  const options =
+                                    webhook.webhookEnv![key]
+                                      .jambonzResourceOptions ||
+                                    webhook.webhookEnv![key].enum!.map(
+                                      (option) => ({
+                                        name: option,
+                                        value: option,
+                                      }),
+                                    );
+                                  return (
+                                    <Selector
+                                      {...commonProps}
+                                      options={options}
+                                    />
+                                  );
+                                }
+                                if (componentType === "filepicker") {
+                                  return (
+                                    <>
+                                      <FileUpload
+                                        id={`app_env_${key}`}
+                                        name={`app_env_${key}`}
+                                        handleFile={(file) => {
+                                          file
+                                            .text()
+                                            .then((content) => {
+                                              setEnvVars((prev) => ({
+                                                ...(prev || {}),
+                                                [key]: content,
+                                              }));
+                                            })
+                                            .catch((err) => {
+                                              toastError(
+                                                `Failed to read file: ${err.message}`,
+                                              );
+                                            });
+                                        }}
+                                        placeholder="Choose a file"
+                                        required={
+                                          webhook.webhookEnv![key].required &&
+                                          !hasValue(envVars?.[key])
+                                        }
+                                      />
+                                      {React.createElement("textarea", {
+                                        ...commonProps,
+                                        ...inputSpecificProps,
+                                        ...textAreaSpecificProps,
+                                      })}
+                                    </>
+                                  );
+                                }
+                                // Create the component with appropriate props
+                                return React.createElement(
+                                  componentType,
+                                  webhook.webhookEnv![key].obscure
+                                    ? commonProps
+                                    : {
+                                        ...commonProps,
+                                        ...inputSpecificProps,
+                                        ...(webhook.webhookEnv![key].uiHint ===
+                                          "textarea" && textAreaSpecificProps),
+                                      },
+                                );
+                              })()}
+                            </>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </>
+                )}
             </fieldset>
           );
         })}
@@ -714,6 +1023,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
           serviceProviderSid={
             currentServiceProvider?.service_provider_sid || ""
           }
+          application_speech_synthesis_voice={
+            application?.data?.speech_synthesis_voice
+          }
           accountSid={accountSid}
           credentials={credentials}
           ttsVendor={[synthVendor, setSynthVendor]}
@@ -744,6 +1056,9 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
                 currentServiceProvider?.service_provider_sid || ""
               }
               accountSid={accountSid}
+              application_speech_synthesis_voice={
+                application?.data?.fallback_speech_synthesis_voice
+              }
               credentials={credentials}
               ttsVendor={[
                 fallbackSpeechSynthsisVendor,

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

@@ -1,8 +1,12 @@
-import React, { useEffect, useState } from "react";
-import { H1, M, Button, Icon } from "@jambonz/ui-kit";
+import React, { useEffect, useState, useRef } from "react";
+import { H1, M, Button, Icon, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";
 
-import { deleteApplication, useServiceProviderData, useApiData } from "src/api";
+import {
+  deleteApplication,
+  useServiceProviderData,
+  getApplications,
+} from "src/api";
 import {
   ROUTE_INTERNAL_APPLICATIONS,
   ROUTE_INTERNAL_ACCOUNTS,
@@ -13,35 +17,71 @@ import {
   Spinner,
   AccountFilter,
   SearchFilter,
+  Pagination,
+  SelectFilter,
 } from "src/components";
 import { DeleteApplication } from "./delete";
-import { toastError, toastSuccess, useSelectState } from "src/store";
-import {
-  isUserAccountScope,
-  hasLength,
-  hasValue,
-  useFilteredResults,
-} from "src/utils";
+import { useSelectState } from "src/store";
+import { isUserAccountScope, hasLength, hasValue } from "src/utils";
 
 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 { PER_PAGE_SELECTION, USER_ACCOUNT } from "src/api/constants";
 import { getAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const Applications = () => {
+  const { toastError, toastSuccess } = useToast();
   const user = useSelectState("user");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [accountSid, setAccountSid] = useState("");
   const [application, setApplication] = useState<Application | null>(null);
-  const [apiUrl, setApiUrl] = useState("");
-  const [applications, refetch] = useApiData<Application[]>(apiUrl);
+  const [applications, setApplications] = useState<Application[] | null>(null);
   const [filter, setFilter] = useState("");
 
-  const filteredApplications = useFilteredResults<Application>(
-    filter,
-    applications,
-  );
+  const [applicationsTotal, setApplicationsTotal] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [perPageFilter, setPerPageFilter] = useState("25");
+  const [maxPageNumber, setMaxPageNumber] = useState(1);
+
+  // Track previous values to detect changes
+  const prevValuesRef = useRef({
+    accountSid: "",
+    filter: "",
+    pageNumber: 1,
+    perPageFilter: "25",
+  });
+
+  const fetchApplications = (resetPage = false) => {
+    // Don't fetch if no account is selected
+    if (!accountSid) return;
+
+    setApplications(null);
+
+    // Calculate the correct page to use
+    const currentPage = resetPage ? 1 : pageNumber;
+
+    // If we're resetting the page, also update the state
+    if (resetPage && pageNumber !== 1) {
+      setPageNumber(1);
+    }
+
+    getApplications(accountSid, {
+      page: currentPage,
+      page_size: Number(perPageFilter),
+      ...(filter && { name: filter }),
+    })
+      .then(({ json }) => {
+        setApplications(json.data);
+        setApplicationsTotal(json.total);
+        setMaxPageNumber(Math.ceil(json.total / Number(perPageFilter)));
+      })
+      .catch((error) => {
+        setApplications([]);
+        toastError(error.msg);
+      });
+  };
 
   const handleDelete = () => {
     if (application) {
@@ -53,8 +93,7 @@ export const Applications = () => {
       }
       deleteApplication(application.application_sid)
         .then(() => {
-          // getApplications();
-          refetch();
+          fetchApplications(false);
           setApplication(null);
           toastSuccess(
             <>
@@ -68,18 +107,44 @@ export const Applications = () => {
     }
   };
 
+  // Set initial account
   useEffect(() => {
-    setLocation();
     if (user?.account_sid && user.scope === USER_ACCOUNT) {
       setAccountSid(user?.account_sid);
     } else {
-      setAccountSid(getAccountFilter() || accountSid);
+      setAccountSid(
+        getAccountFilter() || accountSid || accounts?.[0]?.account_sid || "",
+      );
     }
+    setLocation();
+  }, [user, accounts]);
 
-    if (accountSid) {
-      setApiUrl(`Accounts/${accountSid}/Applications`);
-    }
-  }, [accountSid, user]);
+  // This single effect handles all data fetching triggers
+  useEffect(() => {
+    const accSid = accountSid || getAccountFilter() || "";
+
+    if (!accSid) return;
+
+    // Determine if the change requires a page reset
+    const prevValues = prevValuesRef.current;
+    const isFilterChange =
+      prevValues.accountSid !== accountSid || prevValues.filter !== filter;
+
+    const isPageSizeChange =
+      prevValues.perPageFilter !== perPageFilter &&
+      prevValues.perPageFilter !== ""; // Skip initial render
+
+    // Update ref with current values for next comparison
+    prevValuesRef.current = {
+      accountSid: accSid,
+      filter,
+      pageNumber,
+      perPageFilter,
+    };
+
+    // Fetch data with page reset if needed
+    fetchApplications(isFilterChange || isPageSizeChange);
+  }, [accountSid, filter, pageNumber, perPageFilter]);
 
   return (
     <>
@@ -100,6 +165,7 @@ export const Applications = () => {
         <SearchFilter
           placeholder="Filter applications"
           filter={[filter, setFilter]}
+          delay={1000}
         />
         <ScopedAccess user={user} scope={Scope.service_provider}>
           <AccountFilter
@@ -108,64 +174,67 @@ export const Applications = () => {
           />
         </ScopedAccess>
       </section>
-      <Section {...(hasLength(filteredApplications) && { slim: true })}>
+      <Section {...(hasLength(applications) && { slim: true })}>
         <div className="list">
           {!hasValue(applications) && hasLength(accounts) ? (
             <Spinner />
-          ) : hasLength(filteredApplications) ? (
-            filteredApplications.map((application) => {
-              return (
-                <div className="item" key={application.application_sid}>
-                  <div className="item__info">
-                    <div className="item__title">
-                      <Link
-                        to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
-                        title="Edit application"
-                        className="i"
-                      >
-                        <strong>{application.name}</strong>
-                        <Icons.ArrowRight />
-                      </Link>
-                    </div>
-                    <div className="item__meta">
-                      <div>
-                        <div
-                          className={`i txt--${
-                            application.account_sid ? "teal" : "grey"
-                          }`}
+          ) : hasLength(applications) ? (
+            applications
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((application) => {
+                return (
+                  <div className="item" key={application.application_sid}>
+                    <div className="item__info">
+                      <div className="item__title">
+                        <Link
+                          to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
+                          title="Edit application"
+                          className="i"
                         >
-                          <Icons.Activity />
-                          <span>
-                            {
-                              accounts?.find(
-                                (acct) =>
-                                  acct.account_sid === application.account_sid,
-                              )?.name
-                            }
-                          </span>
+                          <strong>{application.name}</strong>
+                          <Icons.ArrowRight />
+                        </Link>
+                      </div>
+                      <div className="item__meta">
+                        <div>
+                          <div
+                            className={`i txt--${
+                              application.account_sid ? "teal" : "grey"
+                            }`}
+                          >
+                            <Icons.Activity />
+                            <span>
+                              {
+                                accounts?.find(
+                                  (acct) =>
+                                    acct.account_sid ===
+                                    application.account_sid,
+                                )?.name
+                              }
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
+                    <div className="item__actions">
+                      <Link
+                        to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
+                        title="Edit application"
+                      >
+                        <Icons.Edit3 />
+                      </Link>
+                      <button
+                        type="button"
+                        title="Delete application"
+                        onClick={() => setApplication(application)}
+                        className="btnty"
+                      >
+                        <Icons.Trash />
+                      </button>
+                    </div>
                   </div>
-                  <div className="item__actions">
-                    <Link
-                      to={`${ROUTE_INTERNAL_APPLICATIONS}/${application.application_sid}/edit`}
-                      title="Edit application"
-                    >
-                      <Icons.Edit3 />
-                    </Link>
-                    <button
-                      type="button"
-                      title="Delete application"
-                      onClick={() => setApplication(application)}
-                      className="btnty"
-                    >
-                      <Icons.Trash />
-                    </button>
-                  </div>
-                </div>
-              );
-            })
+                );
+              })
           ) : accountSid ? (
             <M>No applications.</M>
           ) : (
@@ -186,6 +255,26 @@ export const Applications = () => {
           </Button>
         </Section>
       )}
+      <footer>
+        <ButtonGroup>
+          <MS>
+            Total: {applicationsTotal} record
+            {applicationsTotal === 1 ? "" : "s"}
+          </MS>
+          {hasLength(applications) && (
+            <Pagination
+              pageNumber={pageNumber}
+              setPageNumber={setPageNumber}
+              maxPageNumber={maxPageNumber}
+            />
+          )}
+          <SelectFilter
+            id="page_filter"
+            filter={[perPageFilter, setPerPageFilter]}
+            options={PER_PAGE_SELECTION}
+          />
+        </ButtonGroup>
+      </footer>
       {application && (
         <DeleteApplication
           application={application}

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

@@ -10,7 +10,8 @@ import {
 } from "src/api/types";
 import { Selector } from "src/components/forms";
 import { SelectorOption } from "src/components/forms/selector";
-import { toastError, useSelectState } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";
+import { useSelectState } from "src/store";
 import { hasLength } from "src/utils";
 import {
   ELEVENLABS_LANG_EN,
@@ -28,6 +29,16 @@ import {
   VENDOR_SONIOX,
   VENDOR_WELLSAID,
   VENDOR_WHISPER,
+  VENDOR_SPEECHMATICS,
+  VENDOR_PLAYHT,
+  VENDOR_CARTESIA,
+  VENDOR_VOXIST,
+  VENDOR_RIMELABS,
+  VENDOR_OPENAI,
+  VENDOR_INWORLD,
+  VENDOR_DEEPGRAM_FLUX,
+  VENDOR_RESEMBLE,
+  VENDOR_HOUNDIFY,
 } from "src/vendor";
 import {
   LabelOptions,
@@ -38,6 +49,7 @@ import {
 type SpeechProviderSelectionProbs = {
   accountSid: string;
   serviceProviderSid: string;
+  application_speech_synthesis_voice: string | null | undefined;
   credentials: SpeechCredential[] | undefined;
   ttsVendor: [
     keyof SynthesisVendors,
@@ -61,6 +73,7 @@ type SpeechProviderSelectionProbs = {
 export const SpeechProviderSelection = ({
   accountSid,
   serviceProviderSid,
+  application_speech_synthesis_voice,
   credentials,
   ttsVendor: [synthVendor, setSynthVendor],
   ttsVendorOptions,
@@ -74,6 +87,7 @@ export const SpeechProviderSelection = ({
   sttLabelOptions,
   sttLabel: [recogLabel, setRecogLabel],
 }: SpeechProviderSelectionProbs) => {
+  const { toastError } = useToast();
   const user = useSelectState("user");
   const [
     synthesisSupportedLanguagesAndVoices,
@@ -129,7 +143,12 @@ export const SpeechProviderSelection = ({
     ttsEffectTimer.current = setTimeout(() => {
       configSynthesis();
     }, 200);
-  }, [synthVendor, synthLabel, serviceProviderSid]);
+  }, [
+    synthVendor,
+    synthLabel,
+    serviceProviderSid,
+    application_speech_synthesis_voice,
+  ]);
 
   // Get Recognizer languages and voices
   useEffect(() => {
@@ -196,8 +215,21 @@ export const SpeechProviderSelection = ({
           setSynthesisVoiceOptions(voicesOpts);
         }
         if (synthesisGoogleCustomVoiceOptions.length > 0) {
-          updateTtsVoice(synthesisGoogleCustomVoiceOptions[0].value);
+          updateTtsVoice(synthLang, synthesisGoogleCustomVoiceOptions[0].value);
         }
+      }
+      // PlayHT3.0 all voices are listed under english language, all voices can be used for multiple languages
+      else if (
+        synthVendor === VENDOR_PLAYHT &&
+        synthesisSupportedLanguagesAndVoices.tts.some(
+          (l) => l.value === "english",
+        )
+      ) {
+        setSynthesisVoiceOptions(
+          synthesisSupportedLanguagesAndVoices.tts.find(
+            (tts) => tts.value === "english",
+          )!.voices,
+        );
       } else {
         setSynthesisVoiceOptions(voicesOpts);
       }
@@ -223,9 +255,14 @@ export const SpeechProviderSelection = ({
         // Extract model
         if (json.models && json.models.length) {
           setSynthesisModelOptions(json.models);
-          if (synthVendor === VENDOR_DEEPGRAM) {
+          if (
+            synthVendor === VENDOR_DEEPGRAM &&
+            (!application_speech_synthesis_voice ||
+              !json.models.some(
+                (m) => m.value === application_speech_synthesis_voice,
+              ))
+          ) {
             setSynthVoice(json.models[0].value);
-            return;
           }
         }
 
@@ -244,21 +281,48 @@ export const SpeechProviderSelection = ({
             (!googleLang ||
               !googleLang.voices.find((v) => v.value === synthVoice))
           ) {
-            setSynthLang(LANG_EN_US);
-            updateTtsVoice(LANG_EN_US_STANDARD_C);
+            updateTtsVoice(LANG_EN_US, 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);
+            updateTtsVoice(ELEVENLABS_LANG_EN, 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);
+            updateTtsVoice(LANG_EN_US, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_PLAYHT) {
+            const newLang = json.tts.find(
+              (lang) => lang.value === LANG_EN_US || lang.value === "english",
+            );
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_CARTESIA) {
+            const newLang = json.tts.find((lang) => lang.value === "en");
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_RIMELABS) {
+            let newLang = json.tts.find((lang) => lang.value === "eng");
+            // If the new language doesn't map then default to the first one
+            if (!newLang) {
+              newLang = json.tts[0];
+            }
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
+            return;
+          }
+          if (synthVendor === VENDOR_INWORLD) {
+            let newLang = json.tts.find((lang) => lang.value === "en");
+            // If the new language doesn't map then default to the first one
+            if (!newLang) {
+              newLang = json.tts[0];
+            }
+            updateTtsVoice(newLang!.value, newLang!.voices[0].value);
             return;
           }
           /** Google and AWS have different language lists */
@@ -266,14 +330,13 @@ export const SpeechProviderSelection = ({
           let newLang = json.tts.find((lang) => lang.value === synthLang);
 
           if (newLang) {
-            updateTtsVoice(newLang.voices[0].value);
+            updateTtsVoice(synthLang, newLang.voices[0].value);
             return;
           }
 
           newLang = json.tts.find((lang) => lang.value === LANG_EN_US);
 
-          setSynthLang(LANG_EN_US);
-          updateTtsVoice(newLang!.voices[0].value);
+          updateTtsVoice(LANG_EN_US, newLang!.voices[0].value);
         }
       })
       .catch((error) => {
@@ -299,14 +362,18 @@ export const SpeechProviderSelection = ({
     }
   };
 
-  const updateTtsVoice = (value: string) => {
+  const updateTtsVoice = (language: string, voice: string) => {
     if (shouldUpdateTtsVoice.current) {
-      setSynthVoice(value);
+      setSynthLang(language);
+      setSynthVoice(voice);
       shouldUpdateTtsVoice.current = false;
     }
   };
 
   const configRecognizer = () => {
+    if (recogVendor === VENDOR_DEEPGRAM_FLUX) {
+      return;
+    }
     getSpeechSupportedLanguagesAndVoices(
       serviceProviderSid,
       recogVendor,
@@ -350,6 +417,7 @@ export const SpeechProviderSelection = ({
         toastError(error.msg);
       });
   };
+
   return (
     <>
       <fieldset>
@@ -360,9 +428,14 @@ export const SpeechProviderSelection = ({
           value={synthVendor}
           options={ttsVendorOptions.filter(
             (vendor) =>
-              vendor.value != VENDOR_ASSEMBLYAI &&
-              vendor.value != VENDOR_SONIOX &&
+              vendor.value !== VENDOR_ASSEMBLYAI &&
+              vendor.value !== VENDOR_VOXIST &&
+              vendor.value !== VENDOR_SONIOX &&
+              vendor.value !== VENDOR_SPEECHMATICS &&
               vendor.value !== VENDOR_CUSTOM &&
+              vendor.value !== VENDOR_OPENAI &&
+              vendor.value !== VENDOR_DEEPGRAM_FLUX &&
+              vendor.value !== VENDOR_HOUNDIFY &&
               vendor.value !== VENDOR_COBALT,
           )}
           onChange={(e) => {
@@ -383,6 +456,7 @@ export const SpeechProviderSelection = ({
               value={synthLabel}
               options={ttsLabelOptions}
               onChange={(e) => {
+                shouldUpdateTtsVoice.current = true;
                 setSynthLabel(e.target.value);
               }}
             />
@@ -410,7 +484,9 @@ export const SpeechProviderSelection = ({
                 id="synthesis_lang"
                 name="synthesis_lang"
                 value={synthLang}
-                options={synthesisLanguageOptions}
+                options={synthesisLanguageOptions.sort((a, b) =>
+                  a.name.localeCompare(b.name),
+                )}
                 onChange={(e) => {
                   shouldUpdateTtsVoice.current = true;
                   const language = e.target.value;
@@ -465,7 +541,9 @@ export const SpeechProviderSelection = ({
                   id="synthesis_voice"
                   name="synthesis_voice"
                   value={synthVoice}
-                  options={synthesisVoiceOptions}
+                  options={synthesisVoiceOptions.sort((a, b) =>
+                    a.name.localeCompare(b.name),
+                  )}
                   onChange={(e) => setSynthVoice(e.target.value)}
                 />
               )}
@@ -512,6 +590,7 @@ export const SpeechProviderSelection = ({
               vendor.value != VENDOR_WELLSAID &&
               vendor.value != VENDOR_ELEVENLABS &&
               vendor.value != VENDOR_WHISPER &&
+              vendor.value !== VENDOR_RESEMBLE &&
               vendor.value !== VENDOR_CUSTOM,
           )}
           onChange={(e) => {
@@ -539,6 +618,7 @@ export const SpeechProviderSelection = ({
         )}
         {recogVendor &&
           !recogVendor.toString().startsWith(VENDOR_CUSTOM) &&
+          recogVendor !== VENDOR_DEEPGRAM_FLUX &&
           recogLang && (
             <>
               <label htmlFor="recognizer_lang">Language</label>

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

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from "react";
 import { P } from "@jambonz/ui-kit";
 
 import { Modal, ModalClose } from "src/components";
-import { getFetch } from "src/api";
+import { getFetch, getLcrRoutes, getLcrs } from "src/api";
 import { API_PHONE_NUMBERS } from "src/api/constants";
-import { formatPhoneNumber, hasLength } from "src/utils";
+import { formatPhoneNumber, hasLength, hasValue } from "src/utils";
 
-import type { Carrier, PhoneNumber } from "src/api/types";
+import type { Carrier, Lcr, PhoneNumber } from "src/api/types";
 
 type DeleteProps = {
   carrier: Carrier;
@@ -20,28 +20,64 @@ export const DeleteCarrier = ({
   handleSubmit,
 }: DeleteProps) => {
   const [phoneNumbers, setPhoneNumbers] = useState<PhoneNumber[]>();
+  const [lcrs, setLcrs] = useState<Lcr[]>();
 
   useEffect(() => {
     let ignore = false;
 
-    getFetch<PhoneNumber[]>(API_PHONE_NUMBERS).then(({ json }) => {
+    Promise.all([
+      getFetch<PhoneNumber[]>(API_PHONE_NUMBERS),
+      new Promise<Lcr[]>((resolve, reject) => {
+        getLcrs()
+          .then(({ json }) => {
+            Promise.all(
+              json.map((lcr: Lcr) =>
+                getLcrRoutes(lcr.lcr_sid!)
+                  .then(({ json }) => {
+                    if (
+                      json.some((route) =>
+                        route.lcr_carrier_set_entries?.some(
+                          (entry) =>
+                            entry.voip_carrier_sid === carrier.voip_carrier_sid,
+                        ),
+                      )
+                    ) {
+                      return lcr;
+                    }
+                  })
+                  .catch((error) => reject(error)),
+              ),
+            )
+              .then((lcrs) => {
+                resolve(lcrs as Lcr[]);
+              })
+              .catch((error) => reject(error));
+          })
+          .catch((error) => reject(error));
+      }),
+    ]).then(([numbers, fetchedLcrs]) => {
       if (!ignore) {
         setPhoneNumbers(
-          json.filter(
+          numbers.json.filter(
             (phone) => phone.voip_carrier_sid === carrier.voip_carrier_sid,
           ),
         );
+
+        // Only set LCRs if they are not empty
+        setLcrs(fetchedLcrs.filter((p) => hasValue(p)));
       }
     });
 
     return function cleanup() {
       ignore = true;
     };
-  }, []);
+  }, [carrier.voip_carrier_sid]);
+
+  const hasBlockingDependencies = hasLength(phoneNumbers) || hasLength(lcrs);
 
   return (
     <>
-      {phoneNumbers && !hasLength(phoneNumbers) && (
+      {phoneNumbers && lcrs && !hasBlockingDependencies && (
         <Modal handleCancel={handleCancel} handleSubmit={handleSubmit}>
           <P>
             Are you sure you want to delete carrier{" "}
@@ -49,24 +85,49 @@ export const DeleteCarrier = ({
           </P>
         </Modal>
       )}
-      {hasLength(phoneNumbers) && (
+      {hasBlockingDependencies && (
         <ModalClose handleClose={handleCancel}>
           <P>
             In order to delete the carrier it cannot be in use by any{" "}
-            <span>Phone Numbers ({phoneNumbers.length})</span>.
+            {hasLength(phoneNumbers) && (
+              <span>Phone Numbers ({phoneNumbers.length})</span>
+            )}
+            {hasLength(phoneNumbers) && hasLength(lcrs) && " or "}
+            {hasLength(lcrs) && (
+              <span>Outbound call Routings ({lcrs.length})</span>
+            )}
+            .
           </P>
-          <ul className="m">
-            <li>
-              <strong>Phone Numbers:</strong>
-            </li>
-            {phoneNumbers.map((phone) => {
-              return (
-                <li className="txt--teal" key={phone.phone_number_sid}>
-                  {formatPhoneNumber(phone.number)}
-                </li>
-              );
-            })}
-          </ul>
+
+          {hasLength(phoneNumbers) && (
+            <ul className="m">
+              <li>
+                <strong>Phone Numbers:</strong>
+              </li>
+              {phoneNumbers.map((phone) => {
+                return (
+                  <li className="txt--teal" key={phone.phone_number_sid}>
+                    {formatPhoneNumber(phone.number)}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+
+          {hasLength(lcrs) && (
+            <ul className="m">
+              <li>
+                <strong>Outbound Call Routing:</strong>
+              </li>
+              {lcrs.map((lcr) => {
+                return (
+                  <li className="txt--teal" key={lcr.lcr_sid}>
+                    {lcr.name || "Default route"}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
         </ModalClose>
       )}
     </>

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

@@ -3,15 +3,17 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";
 
 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { CarrierForm } from "./form";
 
 import { Carrier, SipGateway, SmppGateway } from "src/api/types";
 import { useScopedRedirect } from "src/utils/use-scoped-redirect";
 import { ROUTE_INTERNAL_CARRIERS } from "src/router/routes";
 import { Scope } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const EditCarrier = () => {
+  const { toastError } = useToast();
   const params = useParams();
   const user = useSelectState("user");
   const [data, refetch, error] = useApiData<Carrier>(

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

@@ -1,15 +1,16 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
-import { Button, H1, Icon, M } from "@jambonz/ui-kit";
+import { Button, ButtonGroup, H1, Icon, M, MS } from "@jambonz/ui-kit";
 import {
   deleteCarrier,
   deleteSipGateway,
   deleteSmppGateway,
   getFetch,
+  getSPVoipCarriers,
   useApiData,
   useServiceProviderData,
 } from "src/api";
-import { toastSuccess, toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { ROUTE_INTERNAL_CARRIERS } from "src/router/routes";
 import {
   AccountFilter,
@@ -17,21 +18,22 @@ import {
   Section,
   Spinner,
   SearchFilter,
+  Pagination,
+  SelectFilter,
 } from "src/components";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Gateways } from "./gateways";
-import {
-  isUserAccountScope,
-  hasLength,
-  hasValue,
-  useFilteredResults,
-} from "src/utils";
+import { isUserAccountScope, hasLength, hasValue } from "src/utils";
 import {
   API_SIP_GATEWAY,
   API_SMPP_GATEWAY,
   CARRIER_REG_OK,
   ENABLE_HOSTED_SYSTEM,
+  PER_PAGE_SELECTION,
   USER_ACCOUNT,
+  ADMIN_CARRIER,
+  USER_ADMIN,
+  USER_SP,
 } from "src/api/constants";
 import { DeleteCarrier } from "./delete";
 
@@ -44,37 +46,62 @@ import type {
 } from "src/api/types";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const Carriers = () => {
+  const { toastError, toastSuccess } = useToast();
   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);
-  const [carriers, refetch] = useApiData<Carrier[]>(apiUrl);
+  const [carriers, setCarriers] = useState<Carrier[] | null>(null);
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [accountSid, setAccountSid] = useState("");
   const [filter, setFilter] = useState("");
 
-  const carriersFiltered = useMemo(() => {
-    setAccountSid(getAccountFilter());
-    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
-      setAccountSid(user?.account_sid);
+  const [carriersTotal, setCarriersTotal] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [perPageFilter, setPerPageFilter] = useState("25");
+  const [maxPageNumber, setMaxPageNumber] = useState(1);
+
+  // Add a ref to track previous values
+  const prevValuesRef = useRef({
+    serviceProviderId: "",
+    accountSid: "",
+    filter: "",
+    pageNumber: 1,
+    perPageFilter: "25",
+  });
+
+  const fetchCarriers = (resetPage = false) => {
+    if (!currentServiceProvider) return;
+
+    setCarriers(null);
+
+    // Calculate the correct page to use
+    const currentPage = resetPage ? 1 : pageNumber;
+
+    // If we're resetting the page, also update the state
+    if (resetPage && pageNumber !== 1) {
+      setPageNumber(1);
     }
 
-    return carriers
-      ? carriers.filter((carrier) =>
-          accountSid
-            ? carrier.account_sid === accountSid
-            : carrier.account_sid === null,
-        )
-      : [];
-  }, [accountSid, carrier, carriers]);
-
-  const filteredCarriers = useFilteredResults<Carrier>(
-    filter,
-    carriersFiltered,
-  );
+    getSPVoipCarriers(currentServiceProvider.service_provider_sid, {
+      page: currentPage,
+      page_size: Number(perPageFilter),
+      ...(filter && { name: filter }),
+      ...(accountSid && { account_sid: accountSid }),
+    })
+      .then(({ json }) => {
+        setCarriers(json.data);
+        setCarriersTotal(json.total);
+        setMaxPageNumber(Math.ceil(json.total / Number(perPageFilter)));
+      })
+      .catch((error) => {
+        setCarriers([]);
+        toastError(error.msg);
+      });
+  };
 
   const handleDelete = () => {
     if (carrier) {
@@ -113,7 +140,7 @@ export const Carriers = () => {
               );
           });
           setCarrier(null);
-          refetch();
+          fetchCarriers(false);
           toastSuccess(
             <>
               Deleted Carrier <strong>{carrier.name}</strong>
@@ -126,14 +153,45 @@ export const Carriers = () => {
     }
   };
 
+  // Initial account setup
   useEffect(() => {
-    setLocation();
-    if (currentServiceProvider) {
-      setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`,
-      );
+    if (user?.account_sid && user?.scope === USER_ACCOUNT) {
+      setAccountSid(user?.account_sid);
+    } else {
+      setAccountSid(getAccountFilter());
     }
-  }, [user, currentServiceProvider, accountSid]);
+    setLocation();
+  }, [user, accounts]);
+
+  // Combined effect for all data fetching
+  useEffect(() => {
+    if (!currentServiceProvider) return;
+
+    const prevValues = prevValuesRef.current;
+    const currentSPId = currentServiceProvider.service_provider_sid;
+
+    // Determine if we should reset pagination
+    const isFilterOrProviderChange =
+      prevValues.serviceProviderId !== currentSPId ||
+      prevValues.accountSid !== accountSid ||
+      prevValues.filter !== filter;
+
+    const isPageSizeChange =
+      prevValues.perPageFilter !== perPageFilter &&
+      prevValues.perPageFilter !== "25"; // Skip initial render
+
+    // Update ref for next comparison
+    prevValuesRef.current = {
+      serviceProviderId: currentSPId,
+      accountSid,
+      filter,
+      pageNumber,
+      perPageFilter,
+    };
+
+    // Fetch data with page reset if filters changed
+    fetchCarriers(isFilterOrProviderChange || isPageSizeChange);
+  }, [currentServiceProvider, accountSid, filter, pageNumber, perPageFilter]);
 
   return (
     <>
@@ -147,18 +205,22 @@ export const Carriers = () => {
             </M>
           )}
         </div>
-
-        <Link to={`${ROUTE_INTERNAL_CARRIERS}/add`} title="Add a Carrier">
-          {" "}
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-        </Link>
+        {((ADMIN_CARRIER === "1" &&
+          (user?.scope === USER_ADMIN || user?.scope === USER_SP)) ||
+          ADMIN_CARRIER === "0") && (
+          <Link to={`${ROUTE_INTERNAL_CARRIERS}/add`} title="Add a Carrier">
+            {" "}
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+          </Link>
+        )}
       </section>
       <section className="filters filters--multi">
         <SearchFilter
           placeholder="Filter carriers"
           filter={[filter, setFilter]}
+          delay={1000}
         />
         <ScopedAccess user={user} scope={Scope.service_provider}>
           <AccountFilter
@@ -169,12 +231,12 @@ export const Carriers = () => {
           />
         </ScopedAccess>
       </section>
-      <Section {...(hasLength(filteredCarriers) && { slim: true })}>
+      <Section {...(hasLength(carriers) && { slim: true })}>
         <div className="list">
           {!hasValue(carriers) && hasLength(accounts) ? (
             <Spinner />
-          ) : hasLength(filteredCarriers) ? (
-            filteredCarriers.map((carrier) => (
+          ) : hasLength(carriers) ? (
+            carriers.map((carrier) => (
               <div className="item" key={carrier.voip_carrier_sid}>
                 <div className="item__info">
                   <div className="item__title">
@@ -269,11 +331,35 @@ export const Carriers = () => {
           )}
         </div>
       </Section>
-      <Section clean>
-        <Button small as={Link} to={`${ROUTE_INTERNAL_CARRIERS}/add`}>
-          Add carrier
-        </Button>
-      </Section>
+      {((ADMIN_CARRIER === "1" &&
+        (user?.scope === USER_ADMIN || user?.scope === USER_SP)) ||
+        ADMIN_CARRIER === "0") && (
+        <Section clean>
+          <Button small as={Link} to={`${ROUTE_INTERNAL_CARRIERS}/add`}>
+            Add carrier
+          </Button>
+        </Section>
+      )}
+      <footer>
+        <ButtonGroup>
+          <MS>
+            Total: {carriersTotal} record
+            {carriersTotal === 1 ? "" : "s"}
+          </MS>
+          {hasLength(carriers) && (
+            <Pagination
+              pageNumber={pageNumber}
+              setPageNumber={setPageNumber}
+              maxPageNumber={maxPageNumber}
+            />
+          )}
+          <SelectFilter
+            id="page_filter"
+            filter={[perPageFilter, setPerPageFilter]}
+            options={PER_PAGE_SELECTION}
+          />
+        </ButtonGroup>
+      </footer>
       {carrier && (
         <DeleteCarrier
           carrier={carrier}

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

@@ -6,9 +6,9 @@ import {
   getPcap,
   getServiceProviderPcap,
 } from "src/api";
-import { toastError } from "src/store";
 
 import type { DownloadedBlob } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 type PcapButtonProps = {
   accountSid: string;
@@ -21,6 +21,7 @@ export const PcapButton = ({
   serviceProviderSid,
   sipCallId,
 }: PcapButtonProps) => {
+  const { toastError } = useToast();
   const [pcap, setPcap] = useState<DownloadedBlob>();
 
   useEffect(() => {

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

@@ -3,11 +3,12 @@ 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";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const ClientsEdit = () => {
+  const { toastError } = useToast();
   const params = useParams();
   const navigate = useNavigate();
   const [data, refetch, error] = useApiData<Client>(

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

@@ -13,16 +13,18 @@ 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 { useSelectState } from "src/store";
 import ClientsDelete from "./delete";
 import { hasValue } from "src/utils";
 import { IMessage } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 type ClientsFormProps = {
   client?: UseApiDataMap<Client>;
 };
 
 export const ClientsForm = ({ client }: ClientsFormProps) => {
+  const { toastError, toastSuccess } = useToast();
   const user = useSelectState("user");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const navigate = useNavigate();

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

@@ -12,13 +12,16 @@ import {
   Spinner,
 } from "src/components";
 import { ROUTE_INTERNAL_CLIENTS } from "src/router/routes";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { 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";
+import { useToast } from "src/components/toast/toast-provider";
+import { getAccountFilter } from "src/store/localStore";
 
 export const Clients = () => {
+  const { toastError, toastSuccess } = useToast();
   const user = useSelectState("user");
   const [userData] = useApiData<CurrentUserData>("Users/me");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
@@ -32,6 +35,7 @@ export const Clients = () => {
   const [client, setClient] = useState<Client | null>();
 
   const tmpFilteredClients = useMemo(() => {
+    setAccountSid(getAccountFilter() || accountSid);
     if (user?.account_sid && user?.scope === USER_ACCOUNT) {
       setAccountSid(user?.account_sid);
       return clients;

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

@@ -4,8 +4,8 @@ import Card from "./card";
 import { hasLength } from "src/utils";
 import update from "immutability-helper";
 import { deleteLcrRoute } from "src/api";
-import { toastError, toastSuccess } from "src/store";
 import { SelectorOption } from "src/components/forms/selector";
+import { useToast } from "src/components/toast/toast-provider";
 
 type ContainerProps = {
   lcrRoute: [LcrRoute[], React.Dispatch<React.SetStateAction<LcrRoute[]>>];
@@ -16,6 +16,7 @@ export const Container = ({
   lcrRoute: [lcrRoutes, setLcrRoutes],
   carrierSelectorOptions,
 }: ContainerProps) => {
+  const { toastSuccess, toastError } = useToast();
   const moveCard = (dragIndex: number, hoverIndex: number) => {
     setLcrRoutes((prevCards) =>
       update(prevCards, {

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

@@ -2,12 +2,7 @@ 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 { 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";
@@ -35,6 +30,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Container from "./container";
 import { hasValue } from "src/utils";
+import { useToast } from "src/components/toast/toast-provider";
 
 type LcrFormProps = {
   lcrDataMap?: UseApiDataMap<Lcr>;
@@ -56,6 +52,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
     ],
   };
 
+  const { toastSuccess, toastError } = useToast();
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
@@ -70,9 +67,6 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
   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>();
@@ -85,7 +79,7 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
     setLocation();
     if (currentServiceProvider) {
       setApiUrl(
-        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers`,
+        `ServiceProviders/${currentServiceProvider.service_provider_sid}/VoipCarriers${accountSid ? `?account_sid=${accountSid}` : ""}`,
       );
     }
   }, [user, currentServiceProvider, accountSid]);
@@ -95,16 +89,8 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
       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) => {
+    const ret = carriers
+      ? carriers.map((c: Carrier, i) => {
           if (i === 0) {
             setDefaultCarrier(c.voip_carrier_sid);
           }
@@ -126,45 +112,47 @@ export const LcrForm = ({ lcrDataMap, lcrRouteDataMap }: LcrFormProps) => {
     return ret;
   }, [accountSid, carriers]);
 
-  if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
-    setLcrName(lcrDataMap.data.name || "");
-    setIsActive(lcrDataMap.data.is_active);
-    setPreviousLcr(lcrDataMap.data);
-  }
+  useEffect(() => {
+    if (lcrDataMap && lcrDataMap.data && lcrDataMap.data !== previouseLcr) {
+      setLcrName(lcrDataMap.data.name || "");
+      setIsActive(lcrDataMap.data.is_active);
+      setPreviousLcr(lcrDataMap.data);
+      if (lcrDataMap.data.account_sid) {
+        setAccountSid(lcrDataMap.data.account_sid);
+      }
+    }
+  }, [lcrDataMap?.data, previouseLcr]);
 
   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
-          ) {
+    // Only process when both lcrDataMap and lcrRouteDataMap are available
+    if (lcrRouteDataMap && lcrRouteDataMap.data && lcrDataMap?.data) {
+      const defaultCarrierSetEntrySid =
+        lcrDataMap.data.default_carrier_set_entry_sid;
+
+      // Find and store default route information
+      lcrRouteDataMap.data.forEach((route) => {
+        route.lcr_carrier_set_entries?.forEach((entry) => {
+          if (entry.lcr_carrier_set_entry_sid === defaultCarrierSetEntrySid) {
             setDefaultLcrCarrier(entry.voip_carrier_sid || defaultCarrier);
             setDefaultLcrCarrierSetEntrySid(
               entry.lcr_carrier_set_entry_sid || null,
             );
-            default_lcr_route_sid = entry.lcr_route_sid || "";
-            setDefaultLcrRoute(lr);
+            setDefaultLcrRoute(route);
           }
         });
       });
-    }
 
-    if (lcrRouteDataMap && lcrRouteDataMap.data)
-      setLcrRoutes(
-        lcrRouteDataMap.data.filter(
-          (route) => route.lcr_route_sid !== default_lcr_route_sid,
-        ),
-      );
-  }, [lcrRouteDataMap?.data]);
+      // Filter out routes that contain the default carrier set entry
+      const filteredRoutes = lcrRouteDataMap.data.filter((route) => {
+        return !route.lcr_carrier_set_entries?.some(
+          (entry) =>
+            entry.lcr_carrier_set_entry_sid === defaultCarrierSetEntrySid,
+        );
+      });
+
+      setLcrRoutes(filteredRoutes);
+    }
+  }, [lcrRouteDataMap?.data, lcrDataMap?.data]);
 
   const addLcrRoutes = () => {
     const newLcrRoute = LCR_ROUTE_TEMPLATE;

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

@@ -14,7 +14,7 @@ import {
 } 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 { useSelectState } from "src/store";
 // import { getAccountFilter, setLocation } from "src/store/localStore";
 import { Scope } from "src/store/types";
 import {
@@ -25,8 +25,10 @@ import {
 } from "src/utils";
 import { USER_ACCOUNT } from "src/api/constants";
 import DeleteLcr from "./delete";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const Lcrs = () => {
+  const { toastError, toastSuccess } = useToast();
   const user = useSelectState("user");
   useScopedRedirect(
     Scope.admin,

src/containers/internal/views/ms-teams-tenants/edit.tsx

@@ -3,12 +3,13 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";
 
 import { useApiData } from "src/api";
-import { toastError } from "src/store";
 import { MsTeamsTenantForm } from "./form";
 
 import type { MSTeamsTenant } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const EditMsTeamsTenant = () => {
+  const { toastError } = useToast();
   const params = useParams();
   const [data, refetch, error] = useApiData<MSTeamsTenant>(
     `MicrosoftTeamsTenants/${params.ms_teams_tenant_sid}`,

src/containers/internal/views/ms-teams-tenants/form.tsx

@@ -15,7 +15,7 @@ import {
   ApplicationSelect,
 } from "src/components/forms";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
   ROUTE_INTERNAL_ACCOUNTS,
   ROUTE_INTERNAL_MS_TEAMS_TENANTS,
@@ -28,6 +28,7 @@ import type {
   MSTeamsTenant,
   UseApiDataMap,
 } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 type MsTeamsTenantFormProps = {
   msTeamsTenant?: UseApiDataMap<MSTeamsTenant>;
@@ -36,6 +37,7 @@ type MsTeamsTenantFormProps = {
 export const MsTeamsTenantForm = ({
   msTeamsTenant,
 }: MsTeamsTenantFormProps) => {
+  const { toastSuccess, toastError } = useToast();
   const navigate = useNavigate();
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");

src/containers/internal/views/ms-teams-tenants/index.tsx

@@ -13,7 +13,6 @@ import {
   withAccessControl,
   useFilteredResults,
 } from "src/utils";
-import { toastError, toastSuccess } from "src/store";
 import {
   Icons,
   Section,
@@ -29,8 +28,10 @@ import { DeleteMsTeamsTenant } from "./delete";
 
 import type { Account, MSTeamsTenant, Application } from "src/api/types";
 import type { ACLGetIMessage } from "src/utils/with-access-control";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const MSTeamsTenants = () => {
+  const { toastSuccess, toastError } = useToast();
   const [msTeamsTenant, setMsTeamsTenant] = useState<MSTeamsTenant | null>(
     null,
   );

src/containers/internal/views/phone-numbers/edit.tsx

@@ -3,12 +3,13 @@ import { H1 } from "@jambonz/ui-kit";
 import { useParams } from "react-router-dom";
 
 import { useApiData } from "src/api";
-import { toastError } from "src/store";
 import { PhoneNumberForm } from "./form";
 
 import type { PhoneNumber } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const EditPhoneNumber = () => {
+  const { toastError } = useToast();
   const params = useParams();
   const [data, refetch, error] = useApiData<PhoneNumber>(
     `PhoneNumbers/${params.phone_number_sid}`,

src/containers/internal/views/phone-numbers/form.tsx

@@ -10,9 +10,9 @@ import {
 import { Section } from "src/components";
 import {
   Message,
-  Selector,
   AccountSelect,
   ApplicationSelect,
+  TypeaheadSelector,
 } from "src/components/forms";
 import { MSG_REQUIRED_FIELDS } from "src/constants";
 import {
@@ -20,7 +20,6 @@ import {
   ROUTE_INTERNAL_CARRIERS,
   ROUTE_INTERNAL_PHONE_NUMBERS,
 } from "src/router/routes";
-import { toastError, toastSuccess } from "src/store";
 import { hasLength, useRedirect } from "src/utils";
 
 import type {
@@ -31,22 +30,25 @@ import type {
   UseApiDataMap,
 } from "src/api/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 type PhoneNumberFormProps = {
   phoneNumber?: UseApiDataMap<PhoneNumber>;
 };
 
 export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
+  const { toastSuccess, toastError } = useToast();
   const navigate = useNavigate();
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [applications] = useServiceProviderData<Application[]>("Applications");
   const [phoneNumbers] = useServiceProviderData<PhoneNumber[]>("PhoneNumbers");
-  const [carriers] = useServiceProviderData<Carrier[]>("VoipCarriers");
+  const [voipCarriers] = useServiceProviderData<Carrier[]>("VoipCarriers");
   const [phoneNumberNum, setPhoneNumberNum] = useState("");
   const [accountSid, setAccountSid] = useState("");
   const [sipTrunkSid, setSipTrunkSid] = useState("");
   const [applicationSid, setApplicationSid] = useState("");
   const [message, setMessage] = useState("");
+  const [carriers, setCarriers] = useState<Carrier[]>(voipCarriers || []);
 
   useRedirect<Account>(
     accounts,
@@ -55,7 +57,7 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
   );
 
   useRedirect<Carrier>(
-    carriers,
+    voipCarriers,
     ROUTE_INTERNAL_CARRIERS,
     "You must create a SIP trunk before you can create a phone number.",
   );
@@ -138,6 +140,20 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
     }
   }, [carriers, sipTrunkSid]);
 
+  // Filter carriers based on account_sid
+  useEffect(() => {
+    if (voipCarriers) {
+      setCarriers(
+        voipCarriers?.filter(
+          (carrier) =>
+            !accountSid ||
+            !carrier.account_sid ||
+            carrier.account_sid === accountSid,
+        ),
+      );
+    }
+  }, [accountSid, voipCarriers]);
+
   return (
     <>
       <Section slim>
@@ -165,11 +181,17 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
               disabled={phoneNumber ? true : false}
             ></input>
           </fieldset>
+          <fieldset>
+            <AccountSelect
+              accounts={accounts}
+              account={[accountSid, setAccountSid]}
+            />
+          </fieldset>
           <fieldset>
             <label htmlFor="sip_trunk">
               Carrier <span>*</span>
             </label>
-            <Selector
+            <TypeaheadSelector
               id="sip_trunk"
               name="sip_trunk"
               required
@@ -188,21 +210,18 @@ export const PhoneNumberForm = ({ phoneNumber }: PhoneNumberFormProps) => {
               disabled={phoneNumber ? true : false}
             />
           </fieldset>
-          <fieldset>
-            <AccountSelect
-              accounts={accounts}
-              account={[accountSid, setAccountSid]}
-            />
-          </fieldset>
+
           <fieldset>
             <ApplicationSelect
               defaultOption="Choose application"
               application={[applicationSid, setApplicationSid]}
               applications={
                 applications
-                  ? applications.filter(
-                      (application) => application.account_sid === accountSid,
-                    )
+                  ? applications
+                      .filter(
+                        (application) => application.account_sid === accountSid,
+                      )
+                      .sort((a, b) => a.name.localeCompare(b.name))
                   : []
               }
             />

src/containers/internal/views/phone-numbers/index.tsx

@@ -1,13 +1,14 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Button, ButtonGroup, H1, Icon, MS } from "@jambonz/ui-kit";
 import { Link } from "react-router-dom";
 
 import {
   deletePhoneNumber,
+  getPhoneNumbers,
   putPhoneNumber,
   useServiceProviderData,
 } from "src/api";
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
   Icons,
   Section,
@@ -15,34 +16,39 @@ import {
   ApplicationFilter,
   SearchFilter,
   AccountFilter,
+  Pagination,
+  SelectFilter,
 } from "src/components";
 import {
   ROUTE_INTERNAL_ACCOUNTS,
   ROUTE_INTERNAL_CARRIERS,
   ROUTE_INTERNAL_PHONE_NUMBERS,
 } from "src/router/routes";
-import {
-  hasLength,
-  hasValue,
-  formatPhoneNumber,
-  useFilteredResults,
-} from "src/utils";
+import { hasLength, hasValue, formatPhoneNumber } from "src/utils";
 import { DeletePhoneNumber } from "./delete";
 
 import type { Account, PhoneNumber, Carrier, Application } from "src/api/types";
-import { USER_ACCOUNT } from "src/api/constants";
+import {
+  PER_PAGE_SELECTION,
+  USER_ACCOUNT,
+  USER_ADMIN,
+  ADMIN_CARRIER,
+  USER_SP,
+} from "src/api/constants";
 import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const PhoneNumbers = () => {
+  const { toastSuccess, toastError } = useToast();
   const user = useSelectState("user");
+  const currentServiceProvider = useSelectState("currentServiceProvider");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [applications] = useServiceProviderData<Application[]>("Applications");
   const [carriers] = useServiceProviderData<Carrier[]>("VoipCarriers");
   const [phoneNumber, setPhoneNumber] = useState<PhoneNumber | null>(null);
-  const [phoneNumbers, refetch] =
-    useServiceProviderData<PhoneNumber[]>("PhoneNumbers");
+  const [phoneNumbers, setPhoneNumbers] = useState<PhoneNumber[] | null>(null);
   const [selectedPhoneNumbers, setSelectedPhoneNumbers] = useState<
     PhoneNumber[]
   >([]);
@@ -51,20 +57,54 @@ export const PhoneNumbers = () => {
   const [applyMassEdit, setApplyMassEdit] = useState(false);
   const [filter, setFilter] = useState("");
   const [accountSid, setAccountSid] = useState("");
+  const [phoneNumbersTotal, setphoneNumbersTotal] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [perPageFilter, setPerPageFilter] = useState("25");
+  const [maxPageNumber, setMaxPageNumber] = useState(1);
 
-  const phoneNumbersFiltered = useMemo(() => {
-    setAccountSid(getAccountFilter());
-    return phoneNumbers
-      ? phoneNumbers.filter(
-          (phn) => !accountSid || phn.account_sid === accountSid,
-        )
-      : [];
-  }, [accountSid, phoneNumbers]);
+  // Add ref to track previous values
+  const prevValuesRef = useRef({
+    serviceProviderId: "",
+    accountSid: "",
+    filter: "",
+    pageNumber: 1,
+    perPageFilter: "25",
+  });
 
-  const filteredPhoneNumbers = useFilteredResults<PhoneNumber>(
-    filter,
-    phoneNumbersFiltered,
-  );
+  const fetchPhoneNumbers = (resetPage = false) => {
+    setPhoneNumbers(null);
+
+    // Calculate the correct page to use
+    const currentPage = resetPage ? 1 : pageNumber;
+
+    // If we're resetting the page, also update the state
+    if (resetPage && pageNumber !== 1) {
+      setPageNumber(1);
+    }
+
+    const accSid = accountSid || getAccountFilter() || "";
+
+    getPhoneNumbers({
+      page: currentPage,
+      page_size: Number(perPageFilter),
+      ...(accSid && { account_sid: accSid }),
+      ...(filter && { filter }),
+      ...(currentServiceProvider?.service_provider_sid && {
+        service_provider_sid: currentServiceProvider.service_provider_sid,
+      }),
+    })
+      .then(({ json }) => {
+        if (json) {
+          setPhoneNumbers(json.data);
+          setphoneNumbersTotal(json.total);
+          setMaxPageNumber(Math.ceil(json.total / Number(perPageFilter)));
+        }
+      })
+      .catch((error) => {
+        setPhoneNumbers([]);
+        toastError(error.msg);
+      });
+  };
 
   const handleMassEdit = () => {
     Promise.all(
@@ -77,9 +117,11 @@ export const PhoneNumbers = () => {
       }),
     )
       .then(() => {
-        refetch();
+        fetchPhoneNumbers(false);
         setApplicationSid("");
         setApplyMassEdit(false);
+        setSelectAll(false);
+        setSelectedPhoneNumbers([]);
         toastSuccess("Number routing updated successfully");
       })
       .catch((error) => {
@@ -93,7 +135,7 @@ export const PhoneNumbers = () => {
     if (phoneNumber) {
       deletePhoneNumber(phoneNumber.phone_number_sid)
         .then(() => {
-          refetch();
+          fetchPhoneNumbers(false);
           setPhoneNumber(null);
           toastSuccess(
             <>
@@ -107,32 +149,68 @@ export const PhoneNumbers = () => {
     }
   };
 
+  // Initial account setup
   useEffect(() => {
-    setLocation();
     if (user?.account_sid && user.scope === USER_ACCOUNT) {
       setAccountSid(user?.account_sid);
+    } else {
+      setAccountSid(getAccountFilter() || accountSid);
     }
+    setLocation();
   }, [user]);
 
+  // Combined effect for all data fetching
+  useEffect(() => {
+    const prevValues = prevValuesRef.current;
+    const currentSPId = currentServiceProvider?.service_provider_sid;
+
+    // Detect changes that require page reset
+    const isFilterOrProviderChange =
+      prevValues.serviceProviderId !== currentSPId ||
+      prevValues.accountSid !== accountSid ||
+      prevValues.filter !== filter;
+
+    const isPageSizeChange =
+      prevValues.perPageFilter !== perPageFilter &&
+      prevValues.perPageFilter !== "25"; // Skip initial render
+
+    // Update ref for next comparison
+    prevValuesRef.current = {
+      serviceProviderId: currentSPId || "",
+      accountSid,
+      filter,
+      pageNumber,
+      perPageFilter,
+    };
+
+    // Fetch data with appropriate reset parameter
+    fetchPhoneNumbers(isFilterOrProviderChange || isPageSizeChange);
+  }, [currentServiceProvider, accountSid, filter, pageNumber, perPageFilter]);
+
   return (
     <>
       <section className="mast">
         <H1 className="h2">Phone numbers</H1>
-        {hasLength(accounts) && hasLength(carriers) && (
-          <Link
-            to={`${ROUTE_INTERNAL_PHONE_NUMBERS}/add`}
-            title="Add a phone number"
-          >
-            <Icon>
-              <Icons.Plus />
-            </Icon>
-          </Link>
-        )}
+        {hasLength(accounts) &&
+          hasLength(carriers) &&
+          ((ADMIN_CARRIER === "1" &&
+            (user?.scope === USER_ADMIN || user?.scope === USER_SP)) ||
+            ADMIN_CARRIER === "0") && (
+            <Link
+              to={`${ROUTE_INTERNAL_PHONE_NUMBERS}/add`}
+              title="Add a phone number"
+            >
+              <Icon>
+                <Icons.Plus />
+              </Icon>
+            </Link>
+          )}
       </section>
       <section className="filters filters--multi">
         <SearchFilter
           placeholder="Filter phone numbers"
           filter={[filter, setFilter]}
+          delay={1000}
         />
         <ScopedAccess user={user} scope={Scope.service_provider}>
           <AccountFilter
@@ -142,11 +220,11 @@ export const PhoneNumbers = () => {
           />
         </ScopedAccess>
       </section>
-      <Section {...(hasLength(filteredPhoneNumbers) && { slim: true })}>
+      <Section {...(hasLength(phoneNumbers) && { slim: true })}>
         <div className="list">
           {!hasValue(phoneNumbers) ? (
             <Spinner />
-          ) : hasLength(filteredPhoneNumbers) ? (
+          ) : hasLength(phoneNumbers) ? (
             <>
               <div className="item item--actions">
                 {accountSid ? (
@@ -160,7 +238,7 @@ export const PhoneNumbers = () => {
                           onChange={(e) => {
                             if (e.target.checked) {
                               setSelectAll(true);
-                              setSelectedPhoneNumbers(filteredPhoneNumbers);
+                              setSelectedPhoneNumbers(phoneNumbers);
                             } else {
                               setSelectAll(false);
                               setSelectedPhoneNumbers([]);
@@ -184,10 +262,8 @@ export const PhoneNumbers = () => {
                         <Button
                           small
                           onClick={() => {
-                            handleMassEdit();
-                            setSelectAll(false);
                             setApplyMassEdit(true);
-                            setSelectedPhoneNumbers([]);
+                            handleMassEdit();
                           }}
                         >
                           Apply
@@ -209,7 +285,7 @@ export const PhoneNumbers = () => {
                   </MS>
                 )}
               </div>
-              {filteredPhoneNumbers.map((phoneNumber) => {
+              {phoneNumbers.map((phoneNumber) => {
                 return (
                   <div className="item" key={phoneNumber.phone_number_sid}>
                     <div className="item__info">
@@ -302,14 +378,19 @@ export const PhoneNumbers = () => {
                       >
                         <Icons.Edit3 />
                       </Link>
-                      <button
-                        type="button"
-                        title="Delete phone number"
-                        onClick={() => setPhoneNumber(phoneNumber)}
-                        className="btnty"
-                      >
-                        <Icons.Trash />
-                      </button>
+                      {((ADMIN_CARRIER === "1" &&
+                        (user?.scope === USER_ADMIN ||
+                          user?.scope === USER_SP)) ||
+                        ADMIN_CARRIER === "0") && (
+                        <button
+                          type="button"
+                          title="Delete phone number"
+                          onClick={() => setPhoneNumber(phoneNumber)}
+                          className="btnty"
+                        >
+                          <Icons.Trash />
+                        </button>
+                      )}
                     </div>
                   </div>
                 );
@@ -338,13 +419,37 @@ export const PhoneNumbers = () => {
           )}
         </div>
       </Section>
-      <Section clean>
-        {hasLength(accounts) && hasLength(carriers) && (
-          <Button small as={Link} to={`${ROUTE_INTERNAL_PHONE_NUMBERS}/add`}>
-            Add phone number
-          </Button>
-        )}
-      </Section>
+      {((ADMIN_CARRIER === "1" &&
+        (user?.scope === USER_ADMIN || user?.scope === USER_SP)) ||
+        ADMIN_CARRIER === "0") && (
+        <Section clean>
+          {hasLength(accounts) && hasLength(carriers) && (
+            <Button small as={Link} to={`${ROUTE_INTERNAL_PHONE_NUMBERS}/add`}>
+              Add phone number
+            </Button>
+          )}
+        </Section>
+      )}
+      <footer>
+        <ButtonGroup>
+          <MS>
+            Total: {phoneNumbersTotal} record
+            {phoneNumbersTotal === 1 ? "" : "s"}
+          </MS>
+          {hasLength(phoneNumbers) && (
+            <Pagination
+              pageNumber={pageNumber}
+              setPageNumber={setPageNumber}
+              maxPageNumber={maxPageNumber}
+            />
+          )}
+          <SelectFilter
+            id="page_filter"
+            filter={[perPageFilter, setPerPageFilter]}
+            options={PER_PAGE_SELECTION}
+          />
+        </ButtonGroup>
+      </footer>
       {phoneNumber && (
         <DeletePhoneNumber
           phoneNumber={phoneNumber}

src/containers/internal/views/recent-calls/call-system-logs.tsx

@@ -0,0 +1,132 @@
+import dayjs from "dayjs";
+import React, { useEffect, useState } from "react";
+import { getRecentCallLog } from "src/api";
+import { RecentCall } from "src/api/types";
+import { Icons, Spinner } from "src/components";
+import { hasValue } from "src/utils";
+import utc from "dayjs/plugin/utc";
+import { useToast } from "src/components/toast/toast-provider";
+dayjs.extend(utc);
+
+type CallSystemLogsProps = {
+  call: RecentCall;
+};
+
+// Helper function to format logs
+const formatLog = (log: string): string => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const parsedLog = JSON.parse(log) as any;
+
+    const l = {
+      ...parsedLog,
+      time: dayjs(parsedLog.time).utc().format("YYYY-MM-DD HH:mm:ssZ"),
+    };
+    return JSON.stringify(l, null, 2);
+  } catch {
+    return log;
+  }
+};
+
+export default function CallSystemLogs({ call }: CallSystemLogsProps) {
+  const { toastError, toastSuccess } = useToast();
+  const [logs, setLogs] = useState<string[] | null>();
+  const [loading, setLoading] = useState(false);
+  const [count, setCount] = useState(0);
+  useEffect(() => {}, [call]);
+  const getLogs = () => {
+    setLoading(true);
+    setCount((prev) => prev + 1);
+    if (call && call.account_sid && call.call_sid) {
+      getRecentCallLog(call.account_sid, call.call_sid)
+        .then(({ json }) => {
+          setLogs(json);
+        })
+        .catch((err) => {
+          if (err.status === 404) {
+            toastError("There is no log for this call");
+          } else {
+            toastError(err.msg);
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  };
+
+  const copyToClipboard = () => {
+    if (!logs) {
+      return;
+    }
+    const textToCopy = logs.map(formatLog).join("\n\n");
+
+    navigator.clipboard
+      .writeText(textToCopy)
+      .then(() => toastSuccess("Logs copied to clipboard"))
+      .catch(() => toastError("Failed to copy logs"));
+  };
+
+  const downloadLogs = () => {
+    if (!logs) {
+      return;
+    }
+    const textToDownload = logs.map(formatLog).join("\n\n");
+
+    const blob = new Blob([textToDownload], { type: "text/plain" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = `${call.call_sid}.log`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+
+  return (
+    <>
+      <>
+        <div className="log-container">
+          <div className="log-buttons">
+            <button
+              onClick={getLogs}
+              className="log-retrieve-button"
+              title="Retrieve Logs"
+              disabled={loading}
+            >
+              <div style={{ display: "flex", gap: "5px" }}>
+                Retrieve Logs
+                {loading && <Spinner small />}
+              </div>
+            </button>
+            {hasValue(logs) && logs.length !== 0 && (
+              <>
+                <button
+                  onClick={copyToClipboard}
+                  className="log-button"
+                  title="Copy to clipboard"
+                >
+                  <Icons.Clipboard />
+                </button>
+                <button
+                  onClick={downloadLogs}
+                  className="log-button"
+                  title="Download logs"
+                >
+                  <Icons.Download />
+                </button>
+              </>
+            )}
+          </div>
+          <pre className="log-content">
+            {hasValue(logs) && logs.length !== 0
+              ? logs?.map((log, index) => (
+                  <div key={index}>{formatLog(log)}</div>
+                ))
+              : count !== 0 && logs === null
+                ? "No logs found"
+                : ""}
+          </pre>
+        </div>
+      </>
+    </>
+  );
+}

src/containers/internal/views/recent-calls/details.tsx

@@ -8,9 +8,10 @@ import type { RecentCall } from "src/api/types";
 import { Tabs, Tab } from "@jambonz/ui-kit";
 import CallDetail from "./call-detail";
 import CallTracing from "./call-tracing";
-import { DISABLE_JAEGER_TRACING } from "src/api/constants";
+import { AWS_REGION, DISABLE_JAEGER_TRACING } from "src/api/constants";
 import { Player } from "./player";
 import "./styles.scss";
+import CallSystemLogs from "./call-system-logs";
 
 type DetailsItemProps = {
   call: RecentCall;
@@ -78,6 +79,13 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
             <Tab id="tracing" label="Tracing">
               {open && <CallTracing call={call} />}
             </Tab>
+            {hasValue(AWS_REGION) ? (
+              <Tab id="logs" label="Logs">
+                {open && <CallSystemLogs call={call} />}
+              </Tab>
+            ) : (
+              <></>
+            )}
           </Tabs>
         )}
         {open && (

src/containers/internal/views/recent-calls/index.tsx

@@ -8,7 +8,7 @@ import {
   PER_PAGE_SELECTION,
   USER_ACCOUNT,
 } from "src/api/constants";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
   Section,
   AccountFilter,
@@ -28,6 +28,7 @@ import {
   getQueryFilter,
   setLocation,
 } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 const directionSelection = [
   { name: "either", value: "io" },
@@ -42,6 +43,7 @@ const statusSelection = [
 ];
 
 export const RecentCalls = () => {
+  const { toastError } = useToast();
   const user = useSelectState("user");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [accountSid, setAccountSid] = useState("");
@@ -63,7 +65,12 @@ export const RecentCalls = () => {
       count: Number(perPageFilter),
       ...(dateFilter === "today"
         ? { start: dayjs().startOf("date").toISOString() }
-        : { days: Number(dateFilter) }),
+        : dateFilter === "yesterday"
+          ? {
+              start: dayjs().subtract(1, "day").startOf("day").toISOString(),
+              end: dayjs().subtract(1, "day").endOf("day").toISOString(),
+            }
+          : { days: Number(dateFilter) }),
       ...(statusFilter !== "all" && { answered: statusFilter }),
       ...(directionFilter !== "io" && { direction: directionFilter }),
       ...(filter && { filter }),
@@ -82,10 +89,10 @@ export const RecentCalls = () => {
   };
 
   useMemo(() => {
+    setAccountSid(getAccountFilter() || accountSid);
+    if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
     if (getQueryFilter()) {
       const [date, direction, status] = getQueryFilter().split("/");
-      setAccountSid(getAccountFilter() || accountSid);
-      if (!accountSid && user?.account_sid) setAccountSid(user?.account_sid);
       setDateFilter(date);
       setDirectionFilter(direction);
       setStatusFilter(status);
@@ -157,7 +164,10 @@ export const RecentCalls = () => {
           {!hasValue(calls) && hasLength(accounts) ? (
             <Spinner />
           ) : hasLength(calls) ? (
-            calls.map((call) => <DetailsItem key={call.call_sid} call={call} />)
+            //call.call_sid is null incase of failure, cannot be used as key
+            calls.map((call) => (
+              <DetailsItem key={call.sip_callid} call={call} />
+            ))
           ) : (
             <M>No data.</M>
           )}

src/containers/internal/views/recent-calls/jaeger/styles.scss

@@ -4,7 +4,6 @@
 
 .barGroup {
   border-radius: ui-vars.$px01;
-  @include mixins.code();
   text-align: left;
   padding: ui-vars.$px03;
   color: ui-vars.$pink;
@@ -13,6 +12,7 @@
   margin-top: ui-vars.$px02;
   overflow-x: auto;
   overflow-y: scroll;
+  @include mixins.code();
 
   @media (max-width: 600px) {
     padding: 15px;
@@ -72,7 +72,6 @@
 
 .spanDetailsWrapper {
   border-radius: ui-vars.$px01;
-  @include mixins.code();
   text-align: left;
   padding: ui-vars.$px01;
   background-color: ui-vars.$white;
@@ -82,6 +81,7 @@
   max-width: ui-vars.$width-tablet-2;
   max-height: 500px;
   overflow-y: scroll;
+  @include mixins.code();
 
   &__detailsWrapper {
     height: 100%;

src/containers/internal/views/recent-calls/pcap.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from "react";
 
 import { getPcap } from "src/api";
-import { toastError } from "src/store";
 
 import type { DownloadedBlob, RecentCall } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 type PcapButtonProps = {
   call: RecentCall;
 };
 
 export const PcapButton = ({ call }: PcapButtonProps) => {
+  const { toastError } = useToast();
   const [pcap, setPcap] = useState<DownloadedBlob | null>(null);
 
   useEffect(() => {

src/containers/internal/views/recent-calls/player.tsx

@@ -22,13 +22,14 @@ import {
   getSpansByNameRegex,
   getSpansFromJaegerRoot,
 } from "./utils";
-import { toastError, toastSuccess } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";
 
 type PlayerProps = {
   call: RecentCall;
 };
 
 export const Player = ({ call }: PlayerProps) => {
+  const { toastSuccess, toastError } = useToast();
   const { recording_url, call_sid } = call;
   const url =
     recording_url && recording_url.startsWith("http://")
@@ -160,6 +161,7 @@ export const Player = ({ call }: PlayerProps) => {
 
   const drawSttRegionForSpan = (
     s: JaegerSpan,
+    allSpans: JaegerSpan[],
     startPoint: JaegerSpan,
     channel = 0,
   ) => {
@@ -174,7 +176,36 @@ export const Player = ({ call }: PlayerProps) => {
         const end =
           (s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
 
-        const endSpeechTime = getSilenceStartTime(start, end, channel);
+        const verbHookSpans = getSpansByNameRegex(allSpans, /verb:hook/);
+        const verbHookSpan = verbHookSpans.find(
+          (v) => v.parentSpanId === s.spanId,
+        );
+
+        let verbHookDurantion = 0;
+        let latency = 0;
+        if (verbHookSpan) {
+          verbHookDurantion =
+            (verbHookSpan.endTimeUnixNano - verbHookSpan.startTimeUnixNano) /
+            1_000_000_000;
+        }
+
+        const [sttLatencyMs] = getSpanAttributeByName(
+          s.attributes,
+          "stt.latency_ms",
+        );
+        let endSpeechTime = 0;
+        if (!sttLatencyMs) {
+          endSpeechTime = getSilenceStartTime(start, end, channel);
+          latency = Number(
+            (end - endSpeechTime - verbHookDurantion).toFixed(2),
+          );
+        } else {
+          endSpeechTime =
+            end -
+            Number(sttLatencyMs.value.stringValue) / 1_000 -
+            verbHookDurantion;
+          latency = Number(sttLatencyMs.value.stringValue) / 1_000;
+        }
 
         const [sttResult] = getSpanAttributeByName(s.attributes, "stt.result");
         let att: WaveSurferSttResult;
@@ -186,7 +217,7 @@ export const Player = ({ call }: PlayerProps) => {
             transcript: data.alternatives[0].transcript,
             confidence: data.alternatives[0].confidence,
             language_code: data.language_code,
-            ...(endSpeechTime > 0 && { latency: end - endSpeechTime }),
+            latency,
           };
 
           const [sttResolve] = getSpanAttributeByName(
@@ -205,7 +236,7 @@ export const Player = ({ call }: PlayerProps) => {
               color: "rgba(255, 255, 0, 0.55)",
               drag: false,
               resize: false,
-              content: `${(end - endSpeechTime).toFixed(2)}s`,
+              content: `${latency}s`,
             });
 
             changeRegionMouseStyle(latencyRegion, channel);
@@ -352,7 +383,7 @@ export const Player = ({ call }: PlayerProps) => {
       if (startPoint) {
         const gatherSpans = getSpansByNameRegex(spans, /:gather{/);
         gatherSpans.forEach((s) => {
-          drawSttRegionForSpan(s, startPoint);
+          drawSttRegionForSpan(s, spans, startPoint);
         });
 
         // Trasscription
@@ -362,6 +393,7 @@ export const Player = ({ call }: PlayerProps) => {
           const channel = Number(cs.name.split(":")[1]);
           drawSttRegionForSpan(
             cs,
+            spans,
             startPoint,
             channel > 0 ? channel - 1 : channel,
           );

src/containers/internal/views/recent-calls/styles.scss

@@ -85,3 +85,82 @@
     margin-top: ui-vars.$px01;
   }
 }
+
+/* CallSystemLogs.css */
+
+/* Styles for the log container */
+.log-container {
+  border-radius: 8px;
+  position: relative;
+  background: #1a1a1a; /* Dark background for the container (optional, if you want the entire container dark) */
+  color: #ffffff; /* Ensure text is visible on dark background */
+}
+
+/* Styles for the log buttons container (optional, if you want to style it separately) */
+.log-buttons {
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  display: flex;
+  gap: 12px;
+}
+
+/* Styles for the log content (pre element) */
+.log-content {
+  margin-top: 16px;
+  background: #1a1a1a; /* Darker background for the log content */
+
+  overflow: auto;
+  min-height: 250px;
+  max-height: 800px;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Slightly darker shadow for contrast */
+  color: #e0e0e0; /* Light gray text for visibility on dark background */
+}
+
+/* Optional: Style for individual log entries (divs within pre) */
+.log-content div {
+  margin-bottom: 10px;
+}
+
+/* Styles for log buttons */
+.log-button {
+  padding: 8px;
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  background: #fff3f6; /* Light gray background for buttons, unchanged */
+  color: #da1c5c;
+  transition: transform 0.1s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.log-retrieve-button {
+  @extend .log-button;
+  border-radius: 8px;
+  width: auto;
+  height: 20px;
+}
+
+/* Hover state for buttons */
+.log-button:hover {
+  background: #d5d5d5;
+  transform: scale(1.05);
+}
+
+.log-fetch-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%; /* Adjust based on your layout */
+  gap: 10px;
+  padding: 20px;
+}

src/containers/internal/views/settings/admin-settings.tsx

@@ -7,14 +7,24 @@ import {
   postSystemInformation,
   deleteTtsCache,
 } from "src/api";
-import { PasswordSettings, SystemInformation, TtsCache } from "src/api/types";
-import { toastError, toastSuccess } from "src/store";
+import {
+  LogLevel,
+  PasswordSettings,
+  SystemInformation,
+  TtsCache,
+} from "src/api/types";
 import { Selector } from "src/components/forms";
-import { hasValue } from "src/utils";
-import { PASSWORD_LENGTHS_OPTIONS, PASSWORD_MIN } from "src/api/constants";
+import { hasValue, isvalidIpv4OrCidr } from "src/utils";
+import {
+  LOG_LEVEL_OPTIONS,
+  PASSWORD_LENGTHS_OPTIONS,
+  PASSWORD_MIN,
+} from "src/api/constants";
 import { Modal } from "src/components";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const AdminSettings = () => {
+  const { toastSuccess, toastError } = useToast();
   const [passwordSettings, passwordSettingsFetcher] =
     useApiData<PasswordSettings>("PasswordSettings");
   const [systemInformation, systemInformationFetcher] =
@@ -25,9 +35,11 @@ export const AdminSettings = () => {
   const [requireDigit, setRequireDigit] = useState(false);
   const [requireSpecialCharacter, setRequireSpecialCharacter] = useState(false);
   const [domainName, setDomainName] = useState("");
+  const [privateNetworkCidr, setPrivateNetworkCidr] = useState("");
   const [sipDomainName, setSipDomainName] = useState("");
   const [monitoringDomainName, setMonitoringDomainName] = useState("");
   const [clearTtsCacheFlag, setClearTtsCacheFlag] = useState(false);
+  const [logLevel, setLogLevel] = useState<LogLevel>("info");
 
   const handleClearCache = () => {
     deleteTtsCache()
@@ -44,10 +56,22 @@ export const AdminSettings = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
+    if (privateNetworkCidr) {
+      const cidrs = privateNetworkCidr.split(",");
+      for (const cidr of cidrs) {
+        if (cidr && !isvalidIpv4OrCidr(cidr)) {
+          toastError(`Invalid private network CIDR "${cidr}"`);
+          return;
+        }
+      }
+    }
+
     const systemInformationPayload: Partial<SystemInformation> = {
-      domain_name: domainName,
-      sip_domain_name: sipDomainName,
-      monitoring_domain_name: monitoringDomainName,
+      domain_name: domainName || null,
+      sip_domain_name: sipDomainName || null,
+      monitoring_domain_name: monitoringDomainName || null,
+      private_network_cidr: privateNetworkCidr || null,
+      log_level: logLevel,
     };
     const passwordSettingsPayload: Partial<PasswordSettings> = {
       min_password_length: minPasswordLength,
@@ -61,7 +85,7 @@ export const AdminSettings = () => {
       .then(() => {
         passwordSettingsFetcher();
         systemInformationFetcher();
-        toastSuccess("Password settings successfully updated");
+        toastSuccess("Admin settings updated successfully");
       })
       .catch((error) => {
         toastError(error.msg);
@@ -78,11 +102,21 @@ export const AdminSettings = () => {
         setMinPasswordLength(passwordSettings.min_password_length);
       }
     }
-    if (hasValue(systemInformation)) {
+    if (systemInformation?.domain_name) {
       setDomainName(systemInformation.domain_name);
+    }
+    if (systemInformation?.sip_domain_name) {
       setSipDomainName(systemInformation.sip_domain_name);
+    }
+    if (systemInformation?.monitoring_domain_name) {
       setMonitoringDomainName(systemInformation.monitoring_domain_name);
     }
+    if (systemInformation?.private_network_cidr) {
+      setPrivateNetworkCidr(systemInformation.private_network_cidr);
+    }
+    if (systemInformation?.log_level) {
+      setLogLevel(systemInformation.log_level);
+    }
   }, [passwordSettings, systemInformation]);
 
   return (
@@ -107,6 +141,15 @@ export const AdminSettings = () => {
           value={sipDomainName}
           onChange={(e) => setSipDomainName(e.target.value)}
         />
+        <label htmlFor="name">Private Network CIDR</label>
+        <input
+          id="private_network_cidr"
+          type="text"
+          name="private_network_cidr"
+          placeholder="Private network CIDR"
+          value={privateNetworkCidr}
+          onChange={(e) => setPrivateNetworkCidr(e.target.value)}
+        />
         <label htmlFor="name">Monitoring Domain Name</label>
         <input
           id="monitor_domain_name"
@@ -116,6 +159,17 @@ export const AdminSettings = () => {
           value={monitoringDomainName}
           onChange={(e) => setMonitoringDomainName(e.target.value)}
         />
+
+        <label htmlFor="audio_format">Log Level</label>
+        <Selector
+          id={"audio_format"}
+          name={"audio_format"}
+          value={logLevel}
+          options={LOG_LEVEL_OPTIONS}
+          onChange={(e) => {
+            setLogLevel(e.target.value as LogLevel);
+          }}
+        />
       </fieldset>
       <fieldset>
         <label htmlFor="min_password_length">Min password length</label>

src/containers/internal/views/settings/service-provider-settings.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { P, Button, ButtonGroup } from "@jambonz/ui-kit";
 
-import { useDispatch, toastSuccess, toastError } from "src/store";
+import { useDispatch } from "src/store";
 import { hasLength } from "src/utils";
 import {
   putServiceProvider,
@@ -15,6 +15,7 @@ import { Checkzone, LocalLimits } from "src/components/forms";
 import { withSelectState } from "src/utils";
 import type { Limit, ServiceProvider } from "src/api/types";
 import { removeActiveSP } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 export type ServiceProviderSettingsProps = {
   serviceProviders: ServiceProvider[];
@@ -25,6 +26,7 @@ export const ServiceProviderSettings = ({
   serviceProviders,
   currentServiceProvider,
 }: ServiceProviderSettingsProps) => {
+  const { toastSuccess, toastError } = useToast();
   const dispatch = useDispatch();
   const [limits, refetchLimits] = useServiceProviderData<Limit[]>("Limits");
   const [name, setName] = useState("");

src/containers/internal/views/speech-services/edit.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { H1 } from "@jambonz/ui-kit";
 
 import { useApiData } from "src/api";
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import { SpeechServiceForm } from "./form";
 
 import type { SpeechCredential } from "src/api/types";
@@ -11,6 +11,7 @@ import { useScopedRedirect } from "src/utils/use-scoped-redirect";
 import { Scope } from "src/store/types";
 import { ROUTE_INTERNAL_SPEECH } from "src/router/routes";
 import { useParams } from "react-router-dom";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const EditSpeechService = () => {
   const params = useParams();
@@ -18,6 +19,7 @@ export const EditSpeechService = () => {
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [url, setUrl] = useState("");
   const [data, refetch, error] = useApiData<SpeechCredential>(url);
+  const { toastError } = useToast();
 
   useScopedRedirect(
     Scope.account,

src/containers/internal/views/speech-services/index.tsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 
 import { USER_ACCOUNT } from "src/api/constants";
 import { AccountFilter, Icons, Section, Spinner } from "src/components";
-import { useSelectState, toastError, toastSuccess } from "src/store";
+import { useSelectState } from "src/store";
 import {
   deleteSpeechService,
   useServiceProviderData,
@@ -12,7 +12,6 @@ import {
 } from "src/api";
 import { ROUTE_INTERNAL_SPEECH } from "src/router/routes";
 import {
-  getHumanDateTime,
   isUserAccountScope,
   hasLength,
   hasValue,
@@ -27,8 +26,10 @@ import { ScopedAccess } from "src/components/scoped-access";
 import { Scope } from "src/store/types";
 import { getAccountFilter, setLocation } from "src/store/localStore";
 import { VENDOR_CUSTOM } from "src/vendor";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const SpeechServices = () => {
+  const { toastError, toastSuccess } = useToast();
   const user = useSelectState("user");
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [apiUrl, setApiUrl] = useState("");
@@ -178,24 +179,6 @@ export const SpeechServices = () => {
                           <span>{getUsage(credential)}</span>
                         </div>
                       </div>
-                      <div>
-                        <div
-                          className={`i txt--${
-                            credential.last_used ? "teal" : "grey"
-                          }`}
-                        >
-                          {credential.last_used ? (
-                            <Icons.CheckCircle />
-                          ) : (
-                            <Icons.XCircle />
-                          )}
-                          <span>
-                            {credential.last_used
-                              ? getHumanDateTime(credential.last_used)
-                              : "Never used"}
-                          </span>
-                        </div>
-                      </div>
                       <div>
                         <CredentialStatus cred={credential} />
                       </div>

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

@@ -5,11 +5,12 @@ import { useParams } from "react-router-dom";
 import { UserForm } from "./form";
 import { useApiData } from "src/api";
 import { User } from "src/api/types";
-import { toastError } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const EditUser = () => {
   const params = useParams();
   const [data, refetch, error] = useApiData<User>(`Users/${params.user_sid}`);
+  const { toastError } = useToast();
 
   /** Handle error toast at top level... */
   useEffect(() => {

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Button, ButtonGroup, MS } from "@jambonz/ui-kit";
 import { Link, useNavigate } from "react-router-dom";
 
-import { toastError, toastSuccess, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 import {
   deleteUser,
   postFetch,
@@ -38,12 +38,14 @@ import type {
 } from "src/api/types";
 import type { IMessage } from "src/store/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 type UserFormProps = {
   user?: UseApiDataMap<User>;
 };
 
 export const UserForm = ({ user }: UserFormProps) => {
+  const { toastSuccess, toastError } = useToast();
   const { signout } = useAuth();
   const navigate = useNavigate();
   const currentUser = useSelectState("user");
@@ -61,6 +63,7 @@ export const UserForm = ({ user }: UserFormProps) => {
   const [forceChange, setForceChange] = useState(true);
   const [modal, setModal] = useState(false);
   const [accountSid, setAccountSid] = useState("");
+  const [isViewOnly, setIsViewOnly] = useState(false);
 
   const handleCancel = () => {
     setModal(false);
@@ -115,6 +118,7 @@ export const UserForm = ({ user }: UserFormProps) => {
         initial_password: initialPassword,
         force_change: forceChange,
         is_active: isActive,
+        is_view_only: isViewOnly,
         service_provider_sid:
           scope === USER_ADMIN && currentUser?.scope === USER_ADMIN
             ? null
@@ -145,6 +149,7 @@ export const UserForm = ({ user }: UserFormProps) => {
         initial_password: initialPassword || null,
         force_change: forceChange,
         is_active: isActive,
+        is_view_only: isViewOnly,
         service_provider_sid:
           scope === USER_ADMIN && currentUser?.scope === USER_ADMIN
             ? null
@@ -172,6 +177,7 @@ export const UserForm = ({ user }: UserFormProps) => {
       setName(user.data.name);
       setForceChange(!!user.data.force_change);
       setIsActive(!!user.data.is_active);
+      setIsViewOnly(!!user.data.is_view_only);
       setEmail(user.data.email);
       setScope(getUserScope(user.data));
       if (user.data.account_sid) {
@@ -253,6 +259,16 @@ export const UserForm = ({ user }: UserFormProps) => {
                 />
                 <div>User is active</div>
               </label>
+              <label htmlFor="is_view_only" className="chk">
+                <input
+                  id="is_view_only"
+                  name="is_view_only"
+                  type="checkbox"
+                  checked={isViewOnly}
+                  onChange={(e) => setIsViewOnly(e.target.checked)}
+                />
+                <div>View-only User</div>
+              </label>
             </fieldset>
           )}
           <fieldset>
@@ -283,6 +299,20 @@ export const UserForm = ({ user }: UserFormProps) => {
               onChange={(e) => setEmail(e.target.value)}
             />
           </fieldset>
+          {!user && (
+            <fieldset>
+              <label htmlFor="is_view_only" className="chk">
+                <input
+                  id="is_view_only"
+                  name="is_view_only"
+                  type="checkbox"
+                  checked={isViewOnly}
+                  onChange={(e) => setIsViewOnly(e.target.checked)}
+                />
+                <div>View-only User</div>
+              </label>
+            </fieldset>
+          )}
           <fieldset>
             <label htmlFor="initial_password">
               Temporary password

src/containers/login/forgot-password.tsx

@@ -8,9 +8,10 @@ import { useNavigate } from "react-router-dom";
 import { MSG_SOMETHING_WRONG } from "src/constants";
 
 import { ROUTE_LOGIN } from "src/router/routes";
-import { toastSuccess } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const ForgotPassword = () => {
+  const { toastSuccess } = useToast();
   const [message, setMessage] = useState("");
   const [email, setEmail] = useState("");
   const navigate = useNavigate();

src/containers/login/login.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { Button, H1 } from "@jambonz/ui-kit";
 import { useLocation, Navigate, Link } from "react-router-dom";
 
-import { toastError, toastSuccess } from "src/store";
 import { getToken, parseJwt, useAuth } from "src/router/auth";
 import {
   SESS_FLASH_MSG,
@@ -26,8 +25,10 @@ import { v4 as uuid } from "uuid";
 import { setLocationBeforeOauth, setOauthState } from "src/store/localStore";
 import { getGithubOauthUrl, getGoogleOauthUrl } from "./utils";
 import { UserData } from "src/store/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const Login = () => {
+  const { toastSuccess, toastError } = useToast();
   const state = uuid();
   setOauthState(state);
   setLocationBeforeOauth("/sign-in");
@@ -99,6 +100,7 @@ export const Login = () => {
           value={password}
           placeholder="Password"
           setValue={setPassword}
+          ignorePasswordManager={false}
         />
         {message && <Message message={message} />}
         <Button type="submit">Log in</Button>

src/containers/login/oauth-callback.tsx

@@ -8,6 +8,7 @@ import {
   BASE_URL,
 } from "src/api/constants";
 import { Spinner } from "src/components";
+import { useToast } from "src/components/toast/toast-provider";
 import { setToken } from "src/router/auth";
 import {
   ROUTE_INTERNAL_ACCOUNTS,
@@ -15,7 +16,6 @@ import {
   ROUTE_REGISTER,
   ROUTE_REGISTER_SUB_DOMAIN,
 } from "src/router/routes";
-import { toastError } from "src/store";
 import {
   getLocationBeforeOauth,
   getOauthState,
@@ -25,6 +25,7 @@ import {
 } from "src/store/localStore";
 
 export const OauthCallback = () => {
+  const { toastError } = useToast();
   const queryParams = new URLSearchParams(location.search);
   const code = queryParams.get("code");
   const newState = queryParams.get("state");

src/containers/login/register-email.tsx

@@ -7,10 +7,11 @@ import { Passwd } from "src/components/forms";
 import { ROUTE_LOGIN, ROUTE_REGISTER_EMAIL_VERIFY } from "src/router/routes";
 import { generateActivationCode } from "./utils";
 import { setToken } from "src/router/auth";
-import { toastError } from "src/store";
 import { setRootDomain } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 export const RegisterEmail = () => {
+  const { toastError } = useToast();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const navigate = useNavigate();

src/containers/login/register-verify-email.tsx

@@ -2,15 +2,16 @@ import { Button, H1, MS } from "@jambonz/ui-kit";
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { putActivationCode } from "src/api";
+import { useToast } from "src/components/toast/toast-provider";
 import { getToken, parseJwt } from "src/router/auth";
 import {
   ROUTE_REGISTER_EMAIL,
   ROUTE_REGISTER_SUB_DOMAIN,
 } from "src/router/routes";
-import { toastError } from "src/store";
 import { UserData } from "src/store/types";
 
 export const EmailVerify = () => {
+  const { toastError } = useToast();
   const [code, setCode] = useState("");
   const userData: UserData = parseJwt(getToken());
   const navigate = useNavigate();

src/containers/login/reset-password.tsx

@@ -3,11 +3,12 @@ import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { postChangepassword, postSignIn } from "src/api";
 import { Message, Passwd } from "src/components/forms";
+import { useToast } from "src/components/toast/toast-provider";
 import { setToken } from "src/router/auth";
 import { ROUTE_LOGIN } from "src/router/routes";
-import { toastError, toastSuccess } from "src/store";
 
 export const ResetPassword = () => {
+  const { toastError, toastSuccess } = useToast();
   const params = useParams();
   const resetId = params.id;
   const [newPassword, setNewPassword] = useState("");

src/main.tsx

@@ -7,17 +7,20 @@ import { AuthProvider } from "./router/auth";
 import { Router } from "./router";
 
 import "./styles/index.scss";
+import { ToastProvider } from "./components/toast/toast-provider";
 
 const root: Element = document.getElementById("root")!;
 
 createRoot(root).render(
   <React.StrictMode>
-    <StateProvider>
-      <BrowserRouter>
-        <AuthProvider>
-          <Router />
-        </AuthProvider>
-      </BrowserRouter>
-    </StateProvider>
+    <ToastProvider>
+      <StateProvider>
+        <BrowserRouter>
+          <AuthProvider>
+            <Router />
+          </AuthProvider>
+        </BrowserRouter>
+      </StateProvider>
+    </ToastProvider>
   </React.StrictMode>,
 );

src/router/auth.tsx

@@ -25,11 +25,12 @@ import {
 import type { UserLogin } from "src/api/types";
 import { ENABLE_HOSTED_SYSTEM, USER_ACCOUNT } from "src/api/constants";
 import type { UserData } from "src/store/types";
-import { toastError } from "src/store";
 import {
+  clearLocalStorage,
   removeLocationBeforeOauth,
   removeOauthState,
 } from "src/store/localStore";
+import { useToast } from "src/components/toast/toast-provider";
 
 interface SignIn {
   (username: string, password: string): Promise<UserLogin>;
@@ -86,7 +87,6 @@ export const parseJwt = (token: string) => {
       })
       .join(""),
   );
-
   return JSON.parse(jsonPayload);
 };
 
@@ -94,6 +94,7 @@ export const parseJwt = (token: string) => {
  * Provider hook that creates auth object and handles state
  */
 export const useProvideAuth = (): AuthStateContext => {
+  const { toastError } = useToast();
   let token = getToken();
   let userData: UserData;
   const navigate = useNavigate();
@@ -107,7 +108,6 @@ export const useProvideAuth = (): AuthStateContext => {
             token = response.json.token;
             setToken(token);
             userData = parseJwt(token);
-
             if (ENABLE_HOSTED_SYSTEM) {
               getMe()
                 .then(({ json }) => {
@@ -165,7 +165,7 @@ export const useProvideAuth = (): AuthStateContext => {
       postLogout()
         .then((response) => {
           if (response.status === StatusCodes.NO_CONTENT) {
-            localStorage.clear();
+            clearLocalStorage();
             sessionStorage.clear();
             sessionStorage.setItem(SESS_FLASH_MSG, MSG_LOGGED_OUT);
             window.location.href = ROUTE_LOGIN;

src/store/index.tsx

@@ -1,6 +1,5 @@
 import React, { useReducer, useContext } from "react";
 
-import { TOAST_TIME } from "src/constants";
 import {
   genericAction,
   userAsyncAction,
@@ -11,8 +10,6 @@ import {
 } from "./actions";
 
 import type {
-  IMessage,
-  Toast,
   State,
   Action,
   MiddleWare,
@@ -44,28 +41,17 @@ const reducer: React.Reducer<State, Action<keyof State>> = (state, action) => {
       return serviceProvidersAction(state, action);
     case "currentServiceProvider":
       return currentServiceProviderAction(state, action);
-
     default:
       throw new Error();
   }
 };
 
-let toastTimeout: number;
-
 /** Async middlewares */
 /** Proxies dispatch to reducer */
 const middleware: MiddleWare = (dispatch) => {
   /** This generic implementation enforces global dispatch type-safety */
   return <Type extends keyof State>(action: Action<Type>) => {
     switch (action.type) {
-      case "toast":
-        if (toastTimeout) {
-          clearTimeout(toastTimeout);
-        }
-        toastTimeout = setTimeout(() => {
-          dispatch({ type: "toast" });
-        }, TOAST_TIME);
-        return dispatch(action);
       case "user":
         return userAsyncAction().then((payload) => {
           dispatch({ ...action, payload });
@@ -107,28 +93,6 @@ export const useDispatch = (): GlobalDispatch => {
   return globalDispatch;
 };
 
-/** Toast dispatch helpers to make component code less cumbersome */
-const toastDispatch = (payload: Toast) => {
-  globalDispatch({
-    type: "toast",
-    payload,
-  });
-};
-
-export const toastError = (msg: IMessage) => {
-  toastDispatch({
-    type: "error",
-    message: msg,
-  });
-};
-
-export const toastSuccess = (msg: IMessage) => {
-  toastDispatch({
-    type: "success",
-    message: msg,
-  });
-};
-
 /** Wrapper hook for state context */
 export const useStateContext = () => {
   const { state } = useContext(StateContext);

src/store/localStore.ts

@@ -123,7 +123,18 @@ export const checkLocation = () => {
 
   if (currentLocation !== storedLocation) {
     localStorage.removeItem(storeQueryFilter);
-    localStorage.removeItem(storeAccountFilter);
+    // Keep storeAccountFilter in different location that user can search for same account
+    // in different location
+    // localStorage.removeItem(storeAccountFilter);
     return;
   }
 };
+
+export const clearLocalStorage = () => {
+  const toKeep = [storeActiveSP, storeAccountFilter];
+  Object.keys(localStorage).forEach((key) => {
+    if (!toKeep.includes(key)) {
+      localStorage.removeItem(key);
+    }
+  });
+};

src/store/types.ts

@@ -26,6 +26,7 @@ export enum Scope {
 
 export interface UserData extends UserJWT {
   access: Scope;
+  read_only_feature: boolean;
 }
 
 export interface State {

src/styles/_forms.scss

@@ -7,12 +7,12 @@ input[type="text"],
 input[type="email"],
 input[type="number"],
 input[type="password"] {
-  @include ui-mixins.m();
   padding: ui-vars.$px01 ui-vars.$px02;
   border-radius: ui-vars.$px01;
   border: 2px solid ui-vars.$grey;
   background-color: ui-vars.$white;
   color: inherit;
+  @include ui-mixins.m();
 
   &:focus {
     border-color: ui-vars.$dark;
@@ -110,11 +110,11 @@ fieldset {
   }
 
   label {
-    @include ui-mixins.m();
-    @include ui-mixins.font-medium();
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    @include ui-mixins.font-medium();
+    @include ui-mixins.m();
 
     span {
       color: ui-vars.$jambonz;
@@ -151,6 +151,14 @@ fieldset {
       margin-top: ui-vars.$px01;
     }
 
+    div + textarea {
+      margin-top: ui-vars.$px02;
+    }
+
+    textarea {
+      border-radius: ui-vars.$px01;
+    }
+
     * + label {
       margin-top: ui-vars.$px02;
     }
@@ -210,7 +218,8 @@ fieldset {
   }
 }
 
-.gateway {
+.gateway,
+.gateway-inbound {
   padding: ui-vars.$px02;
   border-radius: ui-vars.$px01;
   border: 2px solid ui-vars.$grey;
@@ -276,6 +285,18 @@ fieldset {
   }
 }
 
+.gateway-inbound {
+  > div {
+    &:nth-child(1) {
+      grid-template-columns: [col] calc(70% - #{ui-vars.$px02 * 2}) [col] 30%;
+
+      @include mixins.small() {
+        grid-template-columns: [col] 100%;
+      }
+    }
+  }
+}
+
 .lcr {
   @extend .gateway;
 
@@ -329,6 +350,11 @@ fieldset {
       grid-template-columns: [col] 100%;
       margin-top: ui-vars.$px02;
     }
+
+    &:nth-child(5) {
+      grid-template-columns: [col] 100%;
+      margin-top: ui-vars.$px02;
+    }
   }
 
   > button {

src/styles/_grid.scss

@@ -21,10 +21,10 @@
   }
 
   &__row {
-    @include ui-mixins.m();
     display: grid;
     padding: ui-vars.$px03;
     align-items: center;
+    @include ui-mixins.m();
 
     @include mixins.small() {
       padding: ui-vars.$px02;

src/styles/_lists.scss

@@ -30,11 +30,11 @@
   }
 
   &__title {
-    @include ui-mixins.p();
     display: flex;
     align-items: center;
     grid-gap: ui-vars.$px02;
     color: ui-vars.$jambonz;
+    @include ui-mixins.p();
 
     + .item__meta {
       @include mixins.small() {

src/styles/_vars.scss

@@ -12,6 +12,8 @@ $widthnavi: 280px;
 $widthinput: 512px;
 $widthbreak: 800px;
 $widthsmall: 640px;
+$widthtypeaheadselector: 512px;
+$widthtypeaheadinput: 467px;
 
 /** Used by api-keys layout */
 $gridbreak1: 1070px;

src/styles/index.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "./forms";
 // @use "./cards";
 @use "./lists";
@@ -68,7 +69,7 @@ details {
   &.ok {
     color: ui-vars.$teal;
     border: 2px solid ui-vars.$teal;
-    background-color: mix(ui-vars.$white, ui-vars.$teal, 95%);
+    background-color: color.mix(ui-vars.$white, ui-vars.$teal, 95%);
   }
 
   &.not-tested {
@@ -77,8 +78,8 @@ details {
   }
 
   summary {
-    @include ui-mixins.m();
     cursor: pointer;
+    @include ui-mixins.m();
 
     + * {
       margin-top: ui-vars.$px02;
@@ -160,7 +161,6 @@ details {
 
 /** Used for recent-calls */
 .pre-grid {
-  @include mixins.code();
   display: grid;
   grid-template-columns: auto 1fr;
   grid-row-gap: ui-vars.$px01;
@@ -171,6 +171,7 @@ details {
   background-color: ui-vars.$dark;
   border-radius: ui-vars.$px01;
   margin-top: ui-vars.$px02;
+  @include mixins.code();
 }
 
 .pre-grid-white {

src/utils/index.ts

@@ -89,6 +89,22 @@ export const getIpValidationType = (ipv4: string): IpType => {
   return type;
 };
 
+function isValidIPV4(ip: string): boolean {
+  const ipv4Pattern =
+    /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+  return ipv4Pattern.test(ip);
+}
+
+function isValidCIDR(cidr: string): boolean {
+  const cidrPattern =
+    /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))(\/([0-9]|[1-2][0-9]|3[0-2]))$/;
+  return cidrPattern.test(cidr);
+}
+
+export function isvalidIpv4OrCidr(input: string): boolean {
+  return isValidIPV4(input) || isValidCIDR(input);
+}
+
 export const getObscured = (str: string, sub = 4, char = "*") => {
   const len = str.length - sub;
   const obscured = str.substring(0, len).replace(/[a-zA-Z0-9]/g, char);

src/utils/use-redirect.ts

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-
-import { toastError } from "src/store";
+import { useToast } from "src/components/toast/toast-provider";
 
 import type { IMessage } from "src/store/types";
 
@@ -11,6 +10,7 @@ export const useRedirect = <Type>(
   message: IMessage,
 ) => {
   const navigate = useNavigate();
+  const { toastError } = useToast();
 
   useEffect(() => {
     if (collection && !collection.length) {

src/utils/use-scoped-redirect.ts

@@ -7,8 +7,9 @@ import {
   SpeechCredential,
   User,
 } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
-import { toastError, useSelectState } from "src/store";
+import { useSelectState } from "src/store";
 
 import { IMessage, Scope, UserData } from "src/store/types";
 
@@ -21,6 +22,7 @@ export const useScopedRedirect = (
 ) => {
   const navigate = useNavigate();
   const currentServiceProvider = useSelectState("currentServiceProvider");
+  const { toastError } = useToast();
 
   useEffect(() => {
     if (
@@ -47,5 +49,5 @@ export const useScopedRedirect = (
 
       navigate(redirect);
     }
-  }, [user, currentServiceProvider, data]);
+  }, [user, currentServiceProvider, data, toastError]);
 };

src/utils/with-access-control.tsx

@@ -2,11 +2,12 @@ import React, { useEffect } from "react";
 
 import { useNavigate } from "react-router-dom";
 
-import { toastError, useSelectState, useAccessControl } from "src/store";
+import { useSelectState, useAccessControl } from "src/store";
 import { ROUTE_INTERNAL_SETTINGS } from "src/router/routes";
 
 import type { ACL, IMessage } from "src/store/types";
 import type { ServiceProvider } from "src/api/types";
+import { useToast } from "src/components/toast/toast-provider";
 
 type PassthroughProps = {
   [key: string]: unknown;
@@ -22,6 +23,7 @@ export const withAccessControl = (
 ) => {
   return function WithAccessControl(Component: React.ComponentType) {
     return function ComponentWithAccessControl(props: PassthroughProps) {
+      const { toastError } = useToast();
       const navigate = useNavigate();
       const hasPermission = useAccessControl(acl);
       const currentServiceProvider = useSelectState("currentServiceProvider");

src/vendor/index.tsx

@@ -12,16 +12,26 @@ export const VENDOR_MICROSOFT = "microsoft";
 export const VENDOR_WELLSAID = "wellsaid";
 export const VENDOR_NUANCE = "nuance";
 export const VENDOR_DEEPGRAM = "deepgram";
+export const VENDOR_DEEPGRAM_FLUX = "deepgramflux";
 export const VENDOR_IBM = "ibm";
 export const VENDOR_NVIDIA = "nvidia";
 export const VENDOR_SONIOX = "soniox";
+export const VENDOR_SPEECHMATICS = "speechmatics";
 export const VENDOR_CUSTOM = "custom";
 export const VENDOR_COBALT = "cobalt";
 export const VENDOR_ELEVENLABS = "elevenlabs";
 export const VENDOR_ASSEMBLYAI = "assemblyai";
+export const VENDOR_VOXIST = "voxist";
 export const VENDOR_WHISPER = "whisper";
 export const VENDOR_PLAYHT = "playht";
 export const VENDOR_RIMELABS = "rimelabs";
+export const VENDOR_INWORLD = "inworld";
+export const VENDOR_VERBIO = "verbio";
+export const VENDOR_CARTESIA = "cartesia";
+export const VENDOR_OPENAI = "openai";
+export const VENDOR_RESEMBLE = "resemble";
+export const VENDOR_HOUNDIFY = "houndify";
+export const VENDOR_GLADIA = "gladia";
 
 export const vendors: VendorOptions[] = [
   {
@@ -36,6 +46,10 @@ export const vendors: VendorOptions[] = [
     name: "Deepgram",
     value: VENDOR_DEEPGRAM,
   },
+  {
+    name: "Deepgram Flux",
+    value: VENDOR_DEEPGRAM_FLUX,
+  },
   {
     name: "IBM",
     value: VENDOR_IBM,
@@ -60,6 +74,10 @@ export const vendors: VendorOptions[] = [
     name: "Soniox",
     value: VENDOR_SONIOX,
   },
+  {
+    name: "Speechmatics",
+    value: VENDOR_SPEECHMATICS,
+  },
   {
     name: "Custom",
     value: VENDOR_CUSTOM,
@@ -76,6 +94,10 @@ export const vendors: VendorOptions[] = [
     name: "AssemblyAI",
     value: VENDOR_ASSEMBLYAI,
   },
+  {
+    name: "Voxist",
+    value: VENDOR_VOXIST,
+  },
   {
     name: "Whisper",
     value: VENDOR_WHISPER,
@@ -88,6 +110,34 @@ export const vendors: VendorOptions[] = [
     name: "RimeLabs",
     value: VENDOR_RIMELABS,
   },
+  {
+    name: "Inworld",
+    value: VENDOR_INWORLD,
+  },
+  {
+    name: "Verbio",
+    value: VENDOR_VERBIO,
+  },
+  {
+    name: "Cartesia",
+    value: VENDOR_CARTESIA,
+  },
+  {
+    name: "OpenAI",
+    value: VENDOR_OPENAI,
+  },
+  {
+    name: "Resemble",
+    value: VENDOR_RESEMBLE,
+  },
+  {
+    name: "SoundHound",
+    value: VENDOR_HOUNDIFY,
+  },
+  {
+    name: "Gladia",
+    value: VENDOR_GLADIA,
+  },
 ].sort((a, b) => a.name.localeCompare(b.name)) as VendorOptions[];
 
 export const AWS_CREDENTIAL_ACCESS_KEY = "access_key";
@@ -119,17 +169,23 @@ export const useRegionVendors = () => {
       import("./regions/aws-regions"),
       import("./regions/ms-azure-regions"),
       import("./regions/ibm-regions"),
+      import("./regions/speechmatics-regions"),
+      import("./regions/gladia-regions"),
     ]).then(
       ([
         { default: awsRegions },
         { default: msRegions },
         { default: ibmRegions },
+        { default: speechmaticsRegions },
+        { default: gladiaRegions },
       ]) => {
         if (!ignore) {
           setRegions({
             aws: awsRegions,
             microsoft: msRegions,
             ibm: ibmRegions,
+            speechmatics: speechmaticsRegions,
+            gladia: gladiaRegions,
           });
         }
       },

src/vendor/regions/gladia-regions.ts

@@ -0,0 +1,14 @@
+import type { Region } from "../types";
+
+export const regions: Region[] = [
+  {
+    name: "US West",
+    value: "us-west",
+  },
+  {
+    name: "EU West",
+    value: "eu-west",
+  },
+];
+
+export default regions;

src/vendor/regions/speechmatics-regions.ts

@@ -0,0 +1,18 @@
+import type { Region } from "../types";
+
+export const regions: Region[] = [
+  {
+    name: "EU (EU2 - On-demand)",
+    value: "eu2.rt.speechmatics.com",
+  },
+  {
+    name: "EU (EU1 - Enterprise)",
+    value: "neu.rt.speechmatics.com",
+  },
+  {
+    name: "US (US1 - Enterprise)",
+    value: "wus.rt.speechmatics.com",
+  },
+];
+
+export default regions;

src/vendor/types.ts

@@ -5,16 +5,26 @@ export type Vendor =
   | "WellSaid"
   | "Nuance"
   | "Deepgram"
+  | "DeepgramFlux"
   | "IBM"
   | "Nvidia"
   | "Soniox"
+  | "Speechmatics"
   | "Cobalt"
   | "Custom"
   | "ElevenLabs"
   | "assemblyai"
+  | "voxist"
   | "whisper"
   | "playht"
-  | "rimelabs";
+  | "rimelabs"
+  | "inworld"
+  | "verbio"
+  | "openai"
+  | "Cartesia"
+  | "Resemble"
+  | "Houndify"
+  | "gladia";
 
 export interface VendorOptions {
   name: Vendor;
@@ -26,6 +36,11 @@ export interface LabelOptions {
   value: string;
 }
 
+export interface JambonzResourceOptions {
+  name: string;
+  value: string;
+}
+
 export interface Region {
   name: string;
   value: string;
@@ -70,6 +85,8 @@ export interface RegionVendors {
   aws: Region[];
   microsoft: Region[];
   ibm: Region[];
+  speechmatics: Region[];
+  gladia: Region[];
 }
 
 export interface TtsModels {
@@ -87,8 +104,10 @@ export interface RecognizerVendors {
   ibm: Language[];
   nvidia: Language[];
   soniox: Language[];
+  speechmatics: Language[];
   cobalt: Language[];
   assemblyai: Language[];
+  deepgramflux: Language[];
 }
 
 export interface SynthesisVendors {
@@ -102,6 +121,10 @@ export interface SynthesisVendors {
   elevenlabs: VoiceLanguage[];
   whisper: VoiceLanguage[];
   deepgram: VoiceLanguage[];
+  playht: VoiceLanguage[];
+  cartesia: VoiceLanguage[];
+  rimelabs: VoiceLanguage[];
+  inworld: VoiceLanguage[];
 }
 
 export interface MSRawSpeech {

vite.config.ts

@@ -15,6 +15,15 @@ export default defineConfig(() => {
         src: path.resolve(__dirname, "src"),
       },
     },
+
+    // Configure Sass to use the modern API
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler",
+        },
+      },
+    },
   };
 
   return config;