From 8e9cfa4bf92de35c09168044e9f971b774e84182 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Mon, 16 Dec 2024 00:13:20 -0800
Subject: [PATCH 01/19] redesigned apps page

---
 app/Console/Commands/UpdateApp.php          |   2 +
 app/Console/Commands/Updates/Update0916.php |  51 ++
 app/Http/Controllers/AppsController.php     | 355 ++++++++----
 app/Models/DefaultSettings.php              |  18 +-
 app/Models/Domain.php                       |   1 +
 app/helpers.php                             |   2 +-
 config/version.php                          |   2 +-
 resources/js/Pages/RingotelAppSettings.vue  | 565 ++++++++++++++++++++
 resources/views/layouts/apps/list.blade.php |  20 +-
 routes/web.php                              |   3 +-
 10 files changed, 892 insertions(+), 127 deletions(-)
 create mode 100644 app/Console/Commands/Updates/Update0916.php
 create mode 100644 resources/js/Pages/RingotelAppSettings.vue

diff --git a/app/Console/Commands/UpdateApp.php b/app/Console/Commands/UpdateApp.php
index 6a5d9005..074c6b2a 100644
--- a/app/Console/Commands/UpdateApp.php
+++ b/app/Console/Commands/UpdateApp.php
@@ -6,6 +6,7 @@
 use App\Services\GitHubApiService;
 use Symfony\Component\Process\Process;
 use App\Console\Commands\Updates\Update097;
+use App\Console\Commands\Updates\Update0916;
 
 
 class UpdateApp extends Command
@@ -48,6 +49,7 @@ public function handle()
         $updateSteps = [
             '0.9.7' => Update097::class,
             '0.9.11' => Update097::class,
+            '0.9.16' => Update0916::class,
             // Add more versions as needed
         ];
 
diff --git a/app/Console/Commands/Updates/Update0916.php b/app/Console/Commands/Updates/Update0916.php
new file mode 100644
index 00000000..c1ece79c
--- /dev/null
+++ b/app/Console/Commands/Updates/Update0916.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Console\Commands\Updates;
+
+use App\Models\DefaultSettings;
+
+class Update0916
+{
+    /**
+     * Apply the 0.9.16 update steps.
+     *
+     * @return bool
+     */
+    public function apply()
+    {
+        $category = 'mobile_apps';
+        $subcategory = 'organization_region';
+        $newDescription = '1 - US East, 2 - US West, 3 - Europe (Frankfurt), 4 - Asia Pacific (Singapore), 5 - Europe (London), 6 - India, 7 - Australia, 8 - Europe (Dublin), 9 - Canada (Central), 10 - South Africa';
+
+        try {
+            // Attempt to find the record by category and subcategory
+            $defaultSetting = DefaultSettings::where('default_setting_category', $category)
+                ->where('default_setting_subcategory', $subcategory)
+                ->first();
+
+            if ($defaultSetting) {
+                // Update the description if the record exists
+                $defaultSetting->default_setting_description = $newDescription;
+                $defaultSetting->save();
+                echo "Updated description for existing record in category '$category' and subcategory '$subcategory'.\n";
+            } else {
+                // Create a new record if it does not exist
+                DefaultSettings::create([
+                    'default_setting_uuid' => \Illuminate\Support\Str::uuid()->toString(), // Generate a new UUID
+                    'default_setting_category' => $category,
+                    'default_setting_subcategory' => $subcategory,
+                    'default_setting_name' => 'text',
+                    'default_setting_value' => '',
+                    'default_setting_enabled' => 't',
+                    'default_setting_description' => $newDescription,
+                ]);
+                echo "Created new record in category '$category' and subcategory '$subcategory'.\n";
+            }
+
+            return true;
+        } catch (\Exception $e) {
+            echo "Error applying update 0.9.16: " . $e->getMessage() . "\n";
+            return false;
+        }
+    }
+}
diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index f66fa197..7a597f35 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -2,24 +2,37 @@
 
 namespace App\Http\Controllers;
 
+use Inertia\Inertia;
 use App\Models\Domain;
 use App\Models\Extensions;
-use App\Models\MobileAppPasswordResetLinks;
+use Illuminate\Support\Str;
 use Illuminate\Http\Request;
 use App\Models\DomainSettings;
 use App\Models\MobileAppUsers;
 use App\Jobs\SendAppCredentials;
-use App\Services\RingotelApiService;
 use Illuminate\Support\Facades\Log;
+use App\Services\RingotelApiService;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Session;
-use Illuminate\Support\Str;
+use App\Models\MobileAppPasswordResetLinks;
 use SimpleSoftwareIO\QrCode\Facades\QrCode;
 
 class AppsController extends Controller
 {
     protected $ringotelApiService;
 
+    public $model;
+    public $filters = [];
+    public $sortField;
+    public $sortOrder;
+    protected $viewName = 'RingotelAppSettings';
+    protected $searchable = ['domain_name', 'domain_description'];
+
+    public function __construct()
+    {
+        $this->model = new Domain();
+    }
+
     /**
      * Display a listing of the resource.
      *
@@ -27,28 +40,127 @@ class AppsController extends Controller
      */
     public function index()
     {
-        // Check all domains for registration in Ringotel Shell
 
-        $domains = Domain::where('domain_enabled','true')
-            ->orderBy('domain_description')
-            ->get();
+        return Inertia::render(
+            $this->viewName,
+            [
+                'data' => function () {
+                    return $this->getData();
+                },
+
+                'routes' => [
+                    'current_page' => route('apps.index'),
+                    'store' => route('apps.store'),
+                    'item_options' => route('apps.item.options'),
+                ]
+            ]
+        );
+
+    }
 
-        foreach($domains as $domain) {
-            $settings = $domain->settings()
-            ->where('domain_setting_category', 'app shell')
-            ->where('domain_setting_subcategory', 'org_id')
-            ->get();
+    /**
+     *  Get data
+     */
+    public function getData($paginate = 50)
+    {
 
-            if ($settings->count() > 0) {
-                $domain->setAttribute('status', 'true');
-            } else {
-                $domain->setAttribute('status', 'false');
-            }
+        // Check if search parameter is present and not empty
+        if (!empty(request('filterData.search'))) {
+            $this->filters['search'] = request('filterData.search');
+        }
+
+        // Add sorting criteria
+        $this->sortField = request()->get('sortField', 'domain_name'); // Default to 'voicemail_id'
+        $this->sortOrder = request()->get('sortOrder', 'asc'); // Default to descending
 
+        $data = $this->builder($this->filters);
+
+        // Apply pagination if requested
+        if ($paginate) {
+            $data = $data->paginate($paginate);
+        } else {
+            $data = $data->get(); // This will return a collection
+        }
+
+        // Add `ringotel_status` dynamically
+        $data->each(function ($domain) {
+            $domain->ringotel_status = $domain->settings()
+                ->where('domain_setting_category', 'app shell')
+                ->where('domain_setting_subcategory', 'org_id')
+                ->where('domain_setting_enabled', true)
+                ->exists() ? 'true' : 'false';
+        });
+
+        return $data;
+    }
+
+    /**
+     * @param  array  $filters
+     * @return Builder
+     */
+    public function builder(array $filters = [])
+    {
+        $data =  $this->model::query();
+        // Get all domains with 'domain_enabled' set to 'true' and eager load settings
+        $data->where('domain_enabled', 'true')
+            ->with(['settings' => function ($query) {
+                $query->select('domain_uuid', 'domain_setting_uuid', 'domain_setting_category', 'domain_setting_subcategory', 'domain_setting_value')
+                    ->where('domain_setting_category', 'app shell')
+                    ->where('domain_setting_subcategory', 'org_id')
+                    ->where('domain_setting_enabled', true);
+            }]);
+
+        // Add 'status' attribute based on the existence of settings
+        // foreach ($domains as $domain) {
+        //     $domain->status = $domain->settings->isNotEmpty() ? 'true' : 'false';
+        // }
+
+
+        $data->select(
+            'domain_uuid',
+            'domain_name',
+            'domain_description',
+        );
+
+        if (is_array($filters)) {
+            foreach ($filters as $field => $value) {
+                if (method_exists($this, $method = "filter" . ucfirst($field))) {
+                    $this->$method($data, $value);
+                }
+            }
         }
 
-        return view('layouts.apps.list')
-            ->with("domains",$domains);
+        // Apply sorting
+        $data->orderBy($this->sortField, $this->sortOrder);
+
+        return $data;
+    }
+
+    /**
+     * @param $query
+     * @param $value
+     * @return void
+     */
+    protected function filterSearch($query, $value)
+    {
+        $searchable = $this->searchable;
+
+        // Case-insensitive partial string search in the specified fields
+        $query->where(function ($query) use ($value, $searchable) {
+            foreach ($searchable as $field) {
+                if (strpos($field, '.') !== false) {
+                    // Nested field (e.g., 'extension.name_formatted')
+                    [$relation, $nestedField] = explode('.', $field, 2);
+
+                    $query->orWhereHas($relation, function ($query) use ($nestedField, $value) {
+                        $query->where($nestedField, 'ilike', '%' . $value . '%');
+                    });
+                } else {
+                    // Direct field
+                    $query->orWhere($field, 'ilike', '%' . $value . '%');
+                }
+            }
+        });
     }
 
     /**
@@ -56,11 +168,30 @@ public function index()
      *
      * @return \Illuminate\Http\JsonResponse
      */
-    public function createOrganization(Request $request)
+    public function createOrganization(RingotelApiService $ringotelApiService)
     {
-        $request->dont_send_user_credentials = isset($request->dont_send_user_credentials)
-            ? $request->dont_send_user_credentials == 'true' ? 'true' : 'false'
-            : get_domain_setting('dont_send_user_credentials') ?? 'false';
+        $this->ringotelApiService = $ringotelApiService;
+        try {
+            $users = $this->ringotelApiService->getUsersByOrgId($orgId);
+        } catch (\Exception $e) {
+            logger($e->getMessage());
+            return response()->json([
+                'error' => [
+                    'message' => $e->getMessage(),
+                ],
+            ], 400);
+        }
+
+
+        return response()->json([
+            'users' => $users,
+            'status' => 200,
+            'success' => [
+                'message' => 'The request processed successfully'
+            ]
+        ]);
+
+        $request->dont_send_user_credentials = $request->dont_send_user_credentials === 'true' ? 'true' : 'false';
 
         $data = array(
             'method' => 'createOrganization',
@@ -77,25 +208,26 @@ public function createOrganization(Request $request)
         $response = Http::ringotel()
             //->dd()
             ->timeout(5)
-            ->withBody(json_encode($data),'application/json')
+            ->withBody(json_encode($data), 'application/json')
             ->post('/')
             ->throw(function ($response, $e) {
                 return response()->json([
                     'error' => 401,
-                    'message' => 'Unable to create organization']);
-             })
-             ->json();
+                    'message' => 'Unable to create organization'
+                ]);
+            })
+            ->json();
 
         //dd(isset($response['error']));
 
 
         // If successful store Org ID and return success status
-        if (isset($response['result'])){
+        if (isset($response['result'])) {
 
             // Add received OrgID to the request and store it in database
             $request->merge(['org_id' => $response['result']['id']]);
 
-            if (!appsStoreOrganizationDetails($request)){
+            if (!appsStoreOrganizationDetails($request)) {
                 return response()->json([
                     'organization_name' => $request->organization_name,
                     'organization_domain' => $request->organization_domain,
@@ -117,27 +249,29 @@ public function createOrganization(Request $request)
                 'organization_region' => $request->organization_region,
                 'org_id' => $response['result']['id'],
                 'protocol' => ($protocol) ? $protocol : "",
-                'connection_port' => ($port) ? $port : config("ringotel.connection_port"),
-                'outbound_proxy' => ($proxy) ? $proxy : config("ringotel.outbound_proxy"),
+                'connection_port' => ($port) ? $port : "",
+                'outbound_proxy' => ($proxy) ? $proxy : "",
                 'success' => [
                     'message' => 'Organization created successfully',
                 ]
             ]);
-        // Otherwise return failed status
+            // Otherwise return failed status
         } elseif (isset($response['error'])) {
             return response()->json([
                 'error' => 401,
                 'organization_name' => $request->organization_name,
                 'organization_domain' => $request->organization_domain,
                 'organization_region' => $request->organization_region,
-                'message' => $response['error']['message']]);
+                'message' => $response['error']['message']
+            ]);
         } else {
             return response()->json([
                 'error' => 401,
                 'organization_name' => $request->organization_name,
                 'organization_domain' => $request->organization_domain,
                 'organization_region' => $request->organization_region,
-                'message' => 'Unknown error']);
+                'message' => 'Unknown error'
+            ]);
         }
     }
 
@@ -191,10 +325,10 @@ public function destroyOrganization(Request $request, Domain $domain)
             ]);
         }
         //Detele records from database
-        $appOrgID = DomainSettings::where('domain_uuid',$domain->domain_uuid)
-        ->where ('domain_setting_category', 'app shell')
-        ->where ('domain_setting_subcategory', 'org_id')
-        ->first();
+        $appOrgID = DomainSettings::where('domain_uuid', $domain->domain_uuid)
+            ->where('domain_setting_category', 'app shell')
+            ->where('domain_setting_subcategory', 'org_id')
+            ->first();
 
         Log::info($appOrgID);
 
@@ -215,12 +349,12 @@ public function destroyOrganization(Request $request, Domain $domain)
 
         // !!!!! TODO: The code below is unreachable, do we need it ? !!!!!
         // If successful store Org ID and return success status
-        if (isset($response['result'])){
+        if (isset($response['result'])) {
 
             // Add recieved OrgID to the request and store it in database
             $request->merge(['org_id' => $response['result']['id']]);
 
-            if (!appsStoreOrganizationDetails($request)){
+            if (!appsStoreOrganizationDetails($request)) {
                 return response()->json([
                     'organization_name' => $request->organization_name,
                     'organization_domain' => $request->organization_domain,
@@ -237,21 +371,23 @@ public function destroyOrganization(Request $request, Domain $domain)
                 'org_id' => $response['result']['id'],
                 'message' => 'Organization created succesfully',
             ]);
-        // Otherwise return failed status
+            // Otherwise return failed status
         } elseif (isset($response['error'])) {
             return response()->json([
                 'error' => 401,
                 'organization_name' => $request->organization_name,
                 'organization_domain' => $request->organization_domain,
                 'organization_region' => $request->organization_region,
-                'message' => $response['error']['message']]);
+                'message' => $response['error']['message']
+            ]);
         } else {
             return response()->json([
                 'error' => 401,
                 'organization_name' => $request->organization_name,
                 'organization_domain' => $request->organization_domain,
                 'organization_region' => $request->organization_region,
-                'message' => 'Unknown error']);
+                'message' => 'Unknown error'
+            ]);
         }
     }
 
@@ -264,10 +400,7 @@ public function destroyOrganization(Request $request, Domain $domain)
      *
      * @return \Illuminate\Http\Response
      */
-    public function updateOrganization(Request $request)
-    {
-
-    }
+    public function updateOrganization(Request $request) {}
 
 
 
@@ -276,7 +409,7 @@ public function updateOrganization(Request $request)
      *
      * @return \Illuminate\Http\JsonResponse
      */
-    public function createConnection (Request $request)
+    public function createConnection(Request $request)
     {
         // Build data array
         $data = array(
@@ -344,37 +477,37 @@ public function createConnection (Request $request)
 
 
         // Add codecs
-        if (isset($request->connection_codec_u711)){
+        if (isset($request->connection_codec_u711)) {
             $codec = array(
-                    'codec' => 'G.711 Ulaw',
-                    'frame' => 20
-                );
-            $codecs[]=$codec;
+                'codec' => 'G.711 Ulaw',
+                'frame' => 20
+            );
+            $codecs[] = $codec;
         }
 
 
-        if (isset($request->connection_codec_a711)){
+        if (isset($request->connection_codec_a711)) {
             $codec = array(
-                    'codec' => 'G.711 Alaw',
-                    'frame' => 20
-                );
-            $codecs[]=$codec;
+                'codec' => 'G.711 Alaw',
+                'frame' => 20
+            );
+            $codecs[] = $codec;
         }
 
-        if (isset($request->connection_codec_729)){
+        if (isset($request->connection_codec_729)) {
             $codec = array(
-                    'codec' => 'G.729',
-                    'frame' => 20
-                );
-            $codecs[]=$codec;
+                'codec' => 'G.729',
+                'frame' => 20
+            );
+            $codecs[] = $codec;
         }
 
-        if (isset($request->connection_codec_opus)){
+        if (isset($request->connection_codec_opus)) {
             $codec = array(
-                    'codec' => 'OPUS',
-                    'frame' => 20
-                );
-            $codecs[]=$codec;
+                'codec' => 'OPUS',
+                'frame' => 20
+            );
+            $codecs[] = $codec;
         }
 
         $data['params']['provision']['codecs'] = $codecs;
@@ -383,22 +516,23 @@ public function createConnection (Request $request)
         $response = Http::ringotel()
             //->dd()
             ->timeout(5)
-            ->withBody(json_encode($data),'application/json')
+            ->withBody(json_encode($data), 'application/json')
             ->post('/')
             ->throw(function ($response, $e) {
                 return response()->json([
                     'error' => 401,
-                    'message' => 'Unable to create connection']);
-             })
-             ->json();
+                    'message' => 'Unable to create connection'
+                ]);
+            })
+            ->json();
 
 
         // If successful return success status
-        if (isset($response['result'])){
+        if (isset($response['result'])) {
             // Add recieved OrgID to the request and store it in database
             $request->merge(['conn_id' => $response['result']['id']]);
 
-            if (!appsStoreConnectionDetails($request)){
+            if (!appsStoreConnectionDetails($request)) {
                 return response()->json([
                     'connection_name' => $request->connection_name,
                     'connection_domain' => $request->connection_domain,
@@ -415,7 +549,7 @@ public function createConnection (Request $request)
                 'conn_id' => $response['result']['id'],
                 'message' => 'Connection created succesfully',
             ]);
-        // Otherwise return failed status
+            // Otherwise return failed status
         } elseif (isset($response['error'])) {
             return response()->json([
                 'error' => 401,
@@ -423,7 +557,8 @@ public function createConnection (Request $request)
                 'connection_domain' => $request->connection_domain,
                 'org_id' => $request->org_id,
                 'conn_id' => $response['result']['id'],
-                'message' => $response['error']['message']]);
+                'message' => $response['error']['message']
+            ]);
         } else {
             return response()->json([
                 'error' => 401,
@@ -431,7 +566,8 @@ public function createConnection (Request $request)
                 'connection_domain' => $request->connection_domain,
                 'org_id' => $request->org_id,
                 'conn_id' => $response['result']['id'],
-                'message' => 'Unknown error']);
+                'message' => 'Unknown error'
+            ]);
         }
     }
 
@@ -441,10 +577,7 @@ public function createConnection (Request $request)
      *
      * @return \Illuminate\Http\Response
      */
-    public function updateConnection(Request $request)
-    {
-
-    }
+    public function updateConnection(Request $request) {}
 
 
     /**
@@ -493,8 +626,6 @@ public function getUsersByOrgId(RingotelApiService $ringotelApiService, $orgId)
         $this->ringotelApiService = $ringotelApiService;
         try {
             $users = $this->ringotelApiService->getUsersByOrgId($orgId);
-
-            logger($users);
         } catch (\Exception $e) {
             logger($e->getMessage());
             return response()->json([
@@ -525,8 +656,8 @@ public function syncOrganizations(Request $request)
 
         $app_array = $request->get('app_array');
 
-        foreach ($app_array as $id=>$domain_uuid) {
-             // Store new record
+        foreach ($app_array as $id => $domain_uuid) {
+            // Store new record
             $domainSettings = DomainSettings::create([
                 'domain_uuid' => $domain_uuid,
                 'domain_setting_category' => 'app shell',
@@ -537,7 +668,7 @@ public function syncOrganizations(Request $request)
             ]);
 
             $saved = $domainSettings->save();
-            if (!$saved){
+            if (!$saved) {
                 return response()->json([
                     'status' => 401,
                     'error' => [
@@ -553,7 +684,6 @@ public function syncOrganizations(Request $request)
                 'message' => 'All organizations were successfully synced'
             ]
         ]);
-
     }
 
     /**
@@ -584,11 +714,11 @@ public function syncUsers(Request $request, Domain $domain)
         }
 
         // If successful continue
-        if (isset($response['result'])){
+        if (isset($response['result'])) {
             $connections = $response['result'];
             $app_domain = $response['result'][0]['domain'];
 
-        // Otherwise return failed status
+            // Otherwise return failed status
         } elseif (isset($response['error'])) {
             return response()->json([
                 'status' => 401,
@@ -605,15 +735,15 @@ public function syncUsers(Request $request, Domain $domain)
             ]);
         }
 
-        foreach ($connections as $connection){
+        foreach ($connections as $connection) {
             //Get all users for this connection
             $response = appsGetUsers($org_id, $connection['id']);
 
             // If successful continue
-            if (isset($response['result'])){
+            if (isset($response['result'])) {
                 $users = $response['result'];
 
-            // Otherwise return failed status
+                // Otherwise return failed status
             } elseif (isset($response['error'])) {
                 return response()->json([
                     'status' => 401,
@@ -630,10 +760,10 @@ public function syncUsers(Request $request, Domain $domain)
                 ]);
             }
 
-            foreach ($users as $user){
+            foreach ($users as $user) {
                 // Get each user's extension
                 $extension = Extensions::where('extension', $user['extension'])
-                    ->where ('domain_uuid', $domain->domain_uuid)
+                    ->where('domain_uuid', $domain->domain_uuid)
                     ->first();
                 if ($extension) {
                     // Save returned user info in database
@@ -648,7 +778,6 @@ public function syncUsers(Request $request, Domain $domain)
                     $appUser->save();
                 }
             }
-
         }
 
         return response()->json([
@@ -657,7 +786,6 @@ public function syncUsers(Request $request, Domain $domain)
                 'message' => 'Apps have been synced successfully'
             ]
         ]);
-
     }
 
     /**
@@ -682,7 +810,7 @@ public function mobileAppUserSettings(Request $request, Extensions $extension)
         $org_id = appsGetOrganizationDetails($extension->domain_uuid);
 
         // If Organization isn't set up return
-        if(!isset($org_id)) {
+        if (!isset($org_id)) {
             return response()->json([
                 'status' => 401,
                 'error' => [
@@ -695,11 +823,11 @@ public function mobileAppUserSettings(Request $request, Extensions $extension)
         $response = appsGetConnections($org_id);
 
         // If successful continue
-        if (isset($response['result'])){
+        if (isset($response['result'])) {
             $connections = $response['result'];
             $app_domain = $response['result'][0]['domain'];
 
-        // Otherwise return failed status
+            // Otherwise return failed status
         } elseif (isset($response['error'])) {
             return response()->json([
                 'status' => 401,
@@ -778,7 +906,7 @@ public function createUser(Request $request)
 
         // If success and user is activated send user email with credentials
         if ($response['result']['status'] == 1) {
-            if($hidePassInEmail == 'true' && $request->activate == 'on') {
+            if ($hidePassInEmail == 'true' && $request->activate == 'on') {
                 // Include get-password link and remove password value
                 $passwordToken = Str::random(40);
                 MobileAppPasswordResetLinks::where('extension_uuid', $extension->extension_uuid)->delete();
@@ -791,7 +919,7 @@ public function createUser(Request $request)
                 $includePasswordUrl = $passwordUrlShow == 'true' ? route('appsGetPasswordByToken', $passwordToken) : null;
                 $response['result']['password_url'] = $includePasswordUrl;
             }
-            if(isset($extension->voicemail->voicemail_mail_to)) {
+            if (isset($extension->voicemail->voicemail_mail_to)) {
                 SendAppCredentials::dispatch($response['result'])->onQueue('emails');
             }
         }
@@ -811,11 +939,11 @@ public function createUser(Request $request)
         // Log::info($response);
 
         $qrcode = "";
-        if($hidePassInEmail == 'false') {
-            if ($request->activate == 'on'){
+        if ($hidePassInEmail == 'false') {
+            if ($request->activate == 'on') {
                 // Generate QR code
                 $qrcode = QrCode::format('png')->generate('{"domain":"' . $response['result']['domain'] .
-                    '","username":"' .$response['result']['username'] . '","password":"'.  $response['result']['password'] . '"}');
+                    '","username":"' . $response['result']['username'] . '","password":"' .  $response['result']['password'] . '"}');
             }
         } else {
             $response['result']['password'] = null;
@@ -823,7 +951,7 @@ public function createUser(Request $request)
 
         return response()->json([
             'user' => $response['result'],
-            'qrcode' => ($qrcode!= "") ? base64_encode($qrcode) : null,
+            'qrcode' => ($qrcode != "") ? base64_encode($qrcode) : null,
             'status' => 'success',
             'message' => 'The user has been successfully created'
         ]);
@@ -910,7 +1038,7 @@ public function resetPassword(Request $request, Extensions $extension)
         }
 
         // If success and user is activated send user email with credentials
-        if($hidePassInEmail == 'true') {
+        if ($hidePassInEmail == 'true') {
             // Include get-password link and remove password value
             $passwordToken = Str::random(40);
             MobileAppPasswordResetLinks::where('extension_uuid', $extension->extension_uuid)->delete();
@@ -927,17 +1055,17 @@ public function resetPassword(Request $request, Extensions $extension)
         }
 
         $qrcode = "";
-        if($hidePassInEmail == 'false') {
+        if ($hidePassInEmail == 'false') {
             // Generate QR code
             $qrcode = QrCode::format('png')->generate('{"domain":"' . $response['result']['domain'] .
-                '","username":"' .$response['result']['username'] . '","password":"'.  $response['result']['password'] . '"}');
+                '","username":"' . $response['result']['username'] . '","password":"' .  $response['result']['password'] . '"}');
         } else {
             $response['result']['password'] = null;
         }
 
         return response()->json([
             'user' => $response['result'],
-            'qrcode' => ($qrcode!= "") ? base64_encode($qrcode) : null,
+            'qrcode' => ($qrcode != "") ? base64_encode($qrcode) : null,
             'status' => 200,
             'success' => [
                 'message' => 'The mobile app password was successfully reset'
@@ -970,7 +1098,7 @@ public function setStatus(Request $request, Extensions $extension)
 
         $appUser = $extension->mobile_app;
 
-        if ($mobile_app['status']==1) {
+        if ($mobile_app['status'] == 1) {
             // Send request to update user settings
             $response = appsUpdateUser($mobile_app);
 
@@ -997,8 +1125,7 @@ public function setStatus(Request $request, Extensions $extension)
                 $appUser->status = $mobile_app['status'];
                 $appUser->save();
             }
-
-        } else if ($mobile_app['status']==-1) {
+        } else if ($mobile_app['status'] == -1) {
 
             // Send request to delete user first and then recreate it
             $response = appsDeleteUser($mobile_app['org_id'], $mobile_app['user_id']);
@@ -1078,7 +1205,6 @@ public function setStatus(Request $request, Extensions $extension)
             $appUser->user_id = $response['result']['id'];
             $appUser->status = $response['result']['status'];
             $appUser->save();
-
         }
 
 
@@ -1149,7 +1275,8 @@ public function destroy($id)
         //
     }
 
-    public function emailUser (){
+    public function emailUser()
+    {
 
         //Mail::to("info@nemerald.com")->send(new AppCredentialsGenerated());
         SendAppCredentials::dispatch()->onQueue('emails');
diff --git a/app/Models/DefaultSettings.php b/app/Models/DefaultSettings.php
index aaa8320b..dd3d20d3 100644
--- a/app/Models/DefaultSettings.php
+++ b/app/Models/DefaultSettings.php
@@ -8,7 +8,7 @@
 class DefaultSettings extends Model
 {
     use HasFactory, \App\Models\Traits\TraitUuid;
-    
+
     protected $table = "v_default_settings";
 
     public $timestamps = false;
@@ -17,5 +17,19 @@ class DefaultSettings extends Model
     public $incrementing = false;
     protected $keyType = 'string';
 
-
+    // Add fields to allow mass assignment
+    protected $fillable = [
+        'default_setting_uuid',
+        'default_setting_category',
+        'default_setting_subcategory',
+        'default_setting_name',
+        'default_setting_value',
+        'default_setting_order',
+        'default_setting_enabled',
+        'default_setting_description',
+        'insert_date',
+        'insert_user',
+        'update_date',
+        'update_user',
+    ];
 }
diff --git a/app/Models/Domain.php b/app/Models/Domain.php
index 88b86007..984da6f3 100644
--- a/app/Models/Domain.php
+++ b/app/Models/Domain.php
@@ -30,6 +30,7 @@ class Domain extends Model
         'domain_description'
     ];
 
+
     /**
      * Get the settings for the domain.
      */
diff --git a/app/helpers.php b/app/helpers.php
index 870d8238..5724370b 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -1210,7 +1210,7 @@ function get_local_time_zone($domain_uuid)
     function get_domain_setting($setting_name, $domain_uuid = null)
     {
         if (!$domain_uuid) {
-            $domain_uuid = Session::get('domain_uuid');
+            $domain_uuid = session('domain_uuid');
         }
 
         $setting = DomainSettings::where('domain_uuid', $domain_uuid)
diff --git a/config/version.php b/config/version.php
index 1c45cc67..03e4d2e3 100644
--- a/config/version.php
+++ b/config/version.php
@@ -2,6 +2,6 @@
 
 return [
 
-    'release' => '0.9.15',
+    'release' => '0.9.16',
     
 ];
\ No newline at end of file
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
new file mode 100644
index 00000000..0dc5f6f7
--- /dev/null
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -0,0 +1,565 @@
+<template>
+    <MainLayout />
+
+    <div class="m-3">
+        <DataTable @search-action="handleSearchButtonClick" @reset-filters="handleFiltersReset">
+            <template #title>Ringotel App Settings</template>
+
+            <template #filters>
+                <div class="relative min-w-64 focus-within:z-10 mb-2 sm:mr-4">
+                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                        <MagnifyingGlassIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </div>
+                    <input type="text" v-model="filterData.search" name="mobile-search-candidate"
+                        id="mobile-search-candidate"
+                        class="block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:hidden"
+                        placeholder="Search" />
+                    <input type="text" v-model="filterData.search" name="desktop-search-candidate"
+                        id="desktop-search-candidate"
+                        class="hidden w-full rounded-md border-0 py-1.5 pl-10 text-sm leading-6 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:block"
+                        placeholder="Search" />
+                </div>
+            </template>
+
+            <template #action>
+                <button v-if="page.props.auth.can.voicemail_create" type="button" @click.prevent="handleCreateButtonClick()"
+                    class="rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                    Create
+                </button>
+
+
+            </template>
+
+            <template #navigation>
+                <Paginator :previous="data.prev_page_url" :next="data.next_page_url" :from="data.from" :to="data.to"
+                    :total="data.total" :currentPage="data.current_page" :lastPage="data.last_page" :links="data.links"
+                    @pagination-change-page="renderRequestedPage" />
+            </template>
+            <template #table-header>
+
+                <TableColumnHeader
+                    class="flex whitespace-nowrap px-4 py-1.5 text-left text-sm font-semibold text-gray-900 items-center justify-start">
+                    <input type="checkbox" v-model="selectPageItems" @change="handleSelectPageItems"
+                        class="h-4 w-4 rounded border-gray-300 text-indigo-600">
+                    <BulkActionButton :actions="bulkActions" @bulk-action="handleBulkActionRequest"
+                        :has-selected-items="selectedItems.length > 0" />
+                    <span class="pl-4">Tenant</span>
+                </TableColumnHeader>
+
+                <TableColumnHeader header="Tenant Domain"
+                    class="px-2 py-3.5 text-left text-sm font-semibold text-gray-900" />
+                <TableColumnHeader header="Status" class="px-2 py-3.5 text-left text-sm font-semibold text-gray-900" />
+                <TableColumnHeader header="" class="px-2 py-3.5 text-right text-sm font-semibold text-gray-900" />
+            </template>
+
+            <template v-if="selectPageItems" v-slot:current-selection>
+                <td colspan="6">
+                    <div class="text-sm text-center m-2">
+                        <span class="font-semibold ">{{ selectedItems.length }} </span> items are selected.
+                        <button v-if="!selectAll && selectedItems.length != data.total"
+                            class="text-blue-500 rounded py-2 px-2 hover:bg-blue-200  hover:text-blue-500 focus:outline-none focus:ring-1 focus:bg-blue-200 focus:ring-blue-300 transition duration-500 ease-in-out"
+                            @click="handleSelectAll">
+                            Select all {{ data.total }} items
+                        </button>
+                        <button v-if="selectAll"
+                            class="text-blue-500 rounded py-2 px-2 hover:bg-blue-200  hover:text-blue-500 focus:outline-none focus:ring-1 focus:bg-blue-200 focus:ring-blue-300 transition duration-500 ease-in-out"
+                            @click="handleClearSelection">
+                            Clear selection
+                        </button>
+                    </div>
+                </td>
+            </template>
+
+            <template #table-body>
+                <tr v-for="row in data.data" :key="row.domain_uuid">
+                    <TableField class="whitespace-nowrap px-4 py-2 text-sm text-gray-500" :text="row.voicemail_id">
+                        <div class="flex items-center">
+                            <input v-if="row.domain_uuid" v-model="selectedItems" type="checkbox" name="action_box[]"
+                                :value="row.domain_uuid" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
+                            <div class="ml-9"
+                                :class="{ 'cursor-pointer hover:text-gray-900': page.props.auth.can.voicemail_update, }"
+                                @click="handleEditRequest(row.domain_uuid)">
+                                <span v-if="row.domain_description" class="flex items-center">
+                                    {{ row.domain_description }}
+                                </span>
+                                <span v-else class="flex items-center">
+                                    {{ row.domain_name }}
+                                </span>
+
+                            </div>
+                        </div>
+                    </TableField>
+
+                    <TableField class="whitespace-nowrap px-2 py-2 text-sm text-gray-500" :text="row.domain_name" />
+
+                    <TableField class="whitespace-nowrap px-2 py-2 text-sm text-gray-500" :text="row.ringotel_status">
+                        <Badge v-if="row.ringotel_status == 'true'" text="Enabled" backgroundColor="bg-green-50"
+                            textColor="text-green-700" ringColor="ring-green-600/20" />
+                        <Badge v-else text="Disabled" backgroundColor="bg-rose-50" textColor="text-rose-700"
+                            ringColor="ring-rose-600/20" />
+
+                    </TableField>
+
+
+                    <TableField class="whitespace-nowrap px-2 py-1 text-sm text-gray-500">
+                        <template #action-buttons>
+                            <div class="flex items-center whitespace-nowrap justify-end">
+                                <ejs-tooltip v-if="page.props.auth.can.voicemail_update" :content="'Edit'"
+                                    position='TopCenter' target="#destination_tooltip_target">
+                                    <div id="destination_tooltip_target">
+                                        <PencilSquareIcon @click="handleEditRequest(row.voicemail_uuid)"
+                                            class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 active:bg-gray-300 active:duration-150 cursor-pointer" />
+
+                                    </div>
+                                </ejs-tooltip>
+
+                                <ejs-tooltip :content="'Check messages'" position='TopCenter'
+                                    target="#restart_tooltip_target">
+                                    <div id="restart_tooltip_target">
+                                        <EnvelopeIcon @click="navigateToMessages(row.messages_route)"
+                                            class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 active:bg-gray-300 active:duration-150 cursor-pointer" />
+                                    </div>
+                                </ejs-tooltip>
+
+                                <ejs-tooltip v-if="page.props.auth.can.voicemail_destroy" :content="'Delete'"
+                                    position='TopCenter' target="#delete_tooltip_target">
+                                    <div id="delete_tooltip_target">
+                                        <TrashIcon @click="handleSingleItemDeleteRequest(row.destroy_route)"
+                                            class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 active:bg-gray-300 active:duration-150 cursor-pointer" />
+                                    </div>
+                                </ejs-tooltip>
+                            </div>
+                        </template>
+                    </TableField>
+                </tr>
+            </template>
+            <template #empty>
+                <!-- Conditional rendering for 'no records' message -->
+                <div v-if="data.data.length === 0" class="text-center my-5 ">
+                    <MagnifyingGlassIcon class="mx-auto h-12 w-12 text-gray-400" />
+                    <h3 class="mt-2 text-sm font-semibold text-gray-900">No results found</h3>
+                    <p class="mt-1 text-sm text-gray-500">
+                        Adjust your search and try again.
+                    </p>
+                </div>
+            </template>
+
+            <template #loading>
+                <Loading :show="loading" />
+            </template>
+
+            <template #footer>
+                <Paginator :previous="data.prev_page_url" :next="data.next_page_url" :from="data.from" :to="data.to"
+                    :total="data.total" :currentPage="data.current_page" :lastPage="data.last_page" :links="data.links"
+                    @pagination-change-page="renderRequestedPage" />
+            </template>
+        </DataTable>
+        <div class="px-4 sm:px-6 lg:px-8"></div>
+    </div>
+
+    <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="createModalTrigger" :header="'Create New Voicemail Extension'"
+        :loading="loadingModal" @close="handleModalClose">
+        <template #modal-body>
+            <CreateVoicemailForm :options="itemOptions" :errors="formErrors" :is-submitting="createFormSubmiting"
+                @submit="handleCreateRequest" @cancel="handleModalClose" />
+        </template>
+    </AddEditItemModal>
+
+    <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="editModalTrigger" :header="'Edit Voicemail Settings'"
+        :loading="loadingModal" @close="handleModalClose">
+        <template #modal-body>
+            <UpdateVoicemailForm :options="itemOptions" :errors="formErrors" :is-submitting="updateFormSubmiting"
+                @submit="handleUpdateRequest" @cancel="handleModalClose" @error="handleErrorResponse"
+                @success="showNotification('success', { request: [$event] })" />
+        </template>
+    </AddEditItemModal>
+
+    <AddEditItemModal :show="bulkUpdateModalTrigger" :header="'Bulk Edit'" :loading="loadingModal"
+        @close="handleModalClose">
+        <template #modal-body>
+            <BulkUpdateDeviceForm :items="selectedItems" :options="itemOptions" :errors="formErrors"
+                :is-submitting="bulkUpdateFormSubmiting" @submit="handleBulkUpdateRequest" @cancel="handleModalClose"
+                @domain-selected="getItemOptions" />
+        </template>
+    </AddEditItemModal>
+
+    <DeleteConfirmationModal :show="confirmationModalTrigger" @close="confirmationModalTrigger = false"
+        @confirm="confirmDeleteAction" />
+
+    <Notification :show="notificationShow" :type="notificationType" :messages="notificationMessages"
+        @update:show="hideNotification" />
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { usePage } from '@inertiajs/vue3'
+import axios from 'axios';
+import { router } from "@inertiajs/vue3";
+import DataTable from "./components/general/DataTable.vue";
+import TableColumnHeader from "./components/general/TableColumnHeader.vue";
+import TableField from "./components/general/TableField.vue";
+import Paginator from "./components/general/Paginator.vue";
+import AddEditItemModal from "./components/modal/AddEditItemModal.vue";
+import DeleteConfirmationModal from "./components/modal/DeleteConfirmationModal.vue";
+import Loading from "./components/general/Loading.vue";
+import { registerLicense } from '@syncfusion/ej2-base';
+import { MagnifyingGlassIcon, TrashIcon, PencilSquareIcon } from "@heroicons/vue/24/solid";
+import { TooltipComponent as EjsTooltip } from "@syncfusion/ej2-vue-popups";
+import BulkUpdateDeviceForm from "./components/forms/BulkUpdateDeviceForm.vue";
+import BulkActionButton from "./components/general/BulkActionButton.vue";
+import MainLayout from "../Layouts/MainLayout.vue";
+import CreateVoicemailForm from "./components/forms/CreateVoicemailForm.vue";
+import UpdateVoicemailForm from "./components/forms/UpdateVoicemailForm.vue";
+import Notification from "./components/notifications/Notification.vue";
+import Badge from "@generalComponents/Badge.vue";
+import { UserGroupIcon, UserIcon, EnvelopeIcon } from "@heroicons/vue/24/outline";
+
+
+
+const page = usePage()
+const loading = ref(false)
+const loadingModal = ref(false)
+const selectAll = ref(false);
+const selectedItems = ref([]);
+const selectPageItems = ref(false);
+const createModalTrigger = ref(false);
+const editModalTrigger = ref(false);
+const bulkUpdateModalTrigger = ref(false);
+const confirmationModalTrigger = ref(false);
+const confirmationModalDestroyPath = ref(null);
+const createFormSubmiting = ref(null);
+const updateFormSubmiting = ref(null);
+const confirmDeleteAction = ref(null);
+const bulkUpdateFormSubmiting = ref(null);
+const formErrors = ref(null);
+const notificationType = ref(null);
+const notificationMessages = ref(null);
+const notificationShow = ref(null);
+
+const props = defineProps({
+    data: Object,
+    routes: Object,
+    itemData: Object,
+});
+
+
+const filterData = ref({
+    search: null,
+    showGlobal: props.showGlobal,
+});
+
+const itemOptions = ref({})
+
+// Computed property for bulk actions based on permissions
+const bulkActions = computed(() => {
+    const actions = [
+        // {
+        //     id: 'bulk_update',
+        //     label: 'Edit',
+        //     icon: 'PencilSquareIcon'
+        // }
+    ];
+
+    // Conditionally add the delete action if permission is granted
+    if (page.props.auth.can.device_destroy) {
+        actions.push({
+            id: 'bulk_delete',
+            label: 'Delete',
+            icon: 'TrashIcon'
+        });
+    }
+
+    return actions;
+});
+
+onMounted(() => {
+});
+
+const handleEditRequest = (itemUuid) => {
+    editModalTrigger.value = true
+    formErrors.value = null;
+    loadingModal.value = true
+    getItemOptions(itemUuid);
+}
+
+const handleCreateRequest = (form) => {
+    createFormSubmiting.value = true;
+    formErrors.value = null;
+
+    axios.post(props.routes.store, form)
+        .then((response) => {
+            createFormSubmiting.value = false;
+            showNotification('success', response.data.messages);
+            handleSearchButtonClick();
+            handleModalClose();
+            handleClearSelection();
+        }).catch((error) => {
+            createFormSubmiting.value = false;
+            handleClearSelection();
+            handleFormErrorResponse(error);
+        });
+
+};
+
+const handleUpdateRequest = (form) => {
+    updateFormSubmiting.value = true;
+    formErrors.value = null;
+
+    axios.put(form.update_route, form)
+        .then((response) => {
+            updateFormSubmiting.value = false;
+            showNotification('success', response.data.messages);
+            handleSearchButtonClick();
+            handleModalClose();
+            handleClearSelection();
+        }).catch((error) => {
+            updateFormSubmiting.value = false;
+            handleClearSelection();
+            handleFormErrorResponse(error);
+        });
+
+};
+
+const handleSingleItemDeleteRequest = (url) => {
+    confirmationModalTrigger.value = true;
+    confirmDeleteAction.value = () => executeSingleDelete(url);
+}
+
+const executeSingleDelete = (url) => {
+    router.delete(url, {
+        preserveScroll: true,
+        preserveState: true,
+        onSuccess: (page) => {
+            if (page.props.flash.error) {
+                showNotification('error', page.props.flash.error);
+            }
+            if (page.props.flash.message) {
+                showNotification('success', page.props.flash.message);
+            }
+            confirmationModalTrigger.value = false;
+            confirmationModalDestroyPath.value = null;
+        },
+        onFinish: () => {
+            confirmationModalTrigger.value = false;
+            confirmationModalDestroyPath.value = null;
+        },
+        onError: (errors) => {
+            console.log(errors);
+        },
+    });
+}
+
+const handleBulkActionRequest = (action) => {
+    if (action === 'bulk_delete') {
+        confirmationModalTrigger.value = true;
+        confirmDeleteAction.value = () => executeBulkDelete();
+    }
+    if (action === 'bulk_update') {
+        formErrors.value = [];
+        getItemOptions();
+        loadingModal.value = true
+        bulkUpdateModalTrigger.value = true;
+    }
+
+}
+
+
+
+const executeBulkDelete = () => {
+    axios.post(`${props.routes.bulk_delete}`, { items: selectedItems.value })
+        .then((response) => {
+            handleModalClose();
+            showNotification('success', response.data.messages);
+            handleSearchButtonClick();
+        })
+        .catch((error) => {
+            handleClearSelection();
+            handleModalClose();
+            handleErrorResponse(error);
+        });
+}
+
+const handleBulkUpdateRequest = (form) => {
+    bulkUpdateFormSubmiting.value = true
+    axios.post(`${props.routes.bulk_update}`, form)
+        .then((response) => {
+            bulkUpdateFormSubmiting.value = false;
+            handleModalClose();
+            showNotification('success', response.data.messages);
+            handleSearchButtonClick();
+        })
+        .catch((error) => {
+            bulkUpdateFormSubmiting.value = false;
+            handleFormErrorResponse(error);
+        });
+}
+
+const handleCreateButtonClick = () => {
+    createModalTrigger.value = true
+    formErrors.value = null;
+    loadingModal.value = true
+    getItemOptions();
+}
+
+const handleSelectAll = () => {
+    axios.post(props.routes.select_all, filterData._rawValue)
+        .then((response) => {
+            selectedItems.value = response.data.items;
+            selectAll.value = true;
+            showNotification('success', response.data.messages);
+
+        }).catch((error) => {
+            handleClearSelection();
+            handleErrorResponse(error);
+        });
+
+};
+
+
+
+const handleSearchButtonClick = () => {
+    loading.value = true;
+    router.visit(props.routes.current_page, {
+        data: {
+            filterData: filterData._rawValue,
+        },
+        preserveScroll: true,
+        preserveState: true,
+        only: [
+            "data",
+        ],
+        onSuccess: (page) => {
+            loading.value = false;
+            handleClearSelection();
+        }
+    });
+};
+
+const handleFiltersReset = () => {
+    filterData.value.search = null;
+    // After resetting the filters, call handleSearchButtonClick to perform the search with the updated filters
+    handleSearchButtonClick();
+}
+
+
+const renderRequestedPage = (url) => {
+    loading.value = true;
+    router.visit(url, {
+        data: {
+            filterData: filterData._rawValue,
+        },
+        preserveScroll: true,
+        preserveState: true,
+        only: ["data"],
+        onSuccess: (page) => {
+            loading.value = false;
+        }
+    });
+};
+
+
+const getItemOptions = (itemUuid = null) => {
+    const payload = itemUuid ? { item_uuid: itemUuid } : {}; // Conditionally add itemUuid to payload
+
+    axios.post(props.routes.item_options, payload)
+        .then((response) => {
+            loadingModal.value = false;
+            itemOptions.value = response.data;
+            // console.log(itemOptions.value);
+
+        }).catch((error) => {
+            handleModalClose();
+            handleErrorResponse(error);
+        });
+}
+
+const handleFormErrorResponse = (error) => {
+    if (error.request?.status == 419) {
+        showNotification('error', { request: ["Session expired. Reload the page"] });
+    } else if (error.response) {
+        // The request was made and the server responded with a status code
+        // that falls out of the range of 2xx
+        // console.log(error.response.data);
+        showNotification('error', error.response.data.errors || { request: [error.message] });
+        formErrors.value = error.response.data.errors;
+    } else if (error.request) {
+        // The request was made but no response was received
+        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+        // http.ClientRequest in node.js
+        showNotification('error', { request: [error.request] });
+        console.log(error.request);
+    } else {
+        // Something happened in setting up the request that triggered an Error
+        showNotification('error', { request: [error.message] });
+        console.log(error.message);
+    }
+
+}
+
+const handleErrorResponse = (error) => {
+    if (error.response) {
+        // The request was made and the server responded with a status code
+        // that falls out of the range of 2xx
+        // console.log(error.response.data);
+        showNotification('error', error.response.data.errors || { request: [error.message] });
+    } else if (error.request) {
+        // The request was made but no response was received
+        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+        // http.ClientRequest in node.js
+        showNotification('error', { request: [error.request] });
+        console.log(error.request);
+    } else {
+        // Something happened in setting up the request that triggered an Error
+        showNotification('error', { request: [error.message] });
+        console.log(error.message);
+    }
+}
+
+const handleSelectPageItems = () => {
+    if (selectPageItems.value) {
+        selectedItems.value = props.data.data.map(item => item.voicemail_uuid);
+    } else {
+        selectedItems.value = [];
+    }
+};
+
+
+
+const handleClearSelection = () => {
+    selectedItems.value = [],
+        selectPageItems.value = false;
+    selectAll.value = false;
+}
+
+const handleModalClose = () => {
+    createModalTrigger.value = false;
+    editModalTrigger.value = false;
+    confirmationModalTrigger.value = false;
+    bulkUpdateModalTrigger.value = false;
+}
+
+const hideNotification = () => {
+    notificationShow.value = false;
+    notificationType.value = null;
+    notificationMessages.value = null;
+}
+
+const showNotification = (type, messages = null) => {
+    notificationType.value = type;
+    notificationMessages.value = messages;
+    notificationShow.value = true;
+}
+
+const navigateToMessages = (messagesRoute) => {
+    // Use Inertia's router to visit the messages page
+    router.visit(messagesRoute);
+};
+
+registerLicense('Ngo9BigBOggjHTQxAR8/V1NAaF5cWWdCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWX5eeHVSQ2hYUkB3WEI=');
+
+</script>
+
+<style>
+@import "@syncfusion/ej2-base/styles/tailwind.css";
+@import "@syncfusion/ej2-vue-popups/styles/tailwind.css";
+</style>
diff --git a/resources/views/layouts/apps/list.blade.php b/resources/views/layouts/apps/list.blade.php
index 4e0ecf77..4b50edcd 100644
--- a/resources/views/layouts/apps/list.blade.php
+++ b/resources/views/layouts/apps/list.blade.php
@@ -204,13 +204,17 @@ class="action-icon">
                                     <div class="col-5">
                                         <div class="mb-3">
                                             <label for="organization_region" class="form-label">Region</label>
-                                            <select class="form-select mb-3" id="organization_region"
-                                                name="organization_region">
-                                                <option value="1">US East</option>
-                                                <option value="2" selected>US West</option>
-                                                <option value="3">Europe (Frankfurt)</option>
-                                                <option value="4">Asia Pacific (Singapore)</option>
-                                                <option value="5">Europe (London)</option>
+                                            <select class="form-select mb-3" id="organization_region" name="organization_region">
+                                                <option value="1" {{ $default_region == '1' ? 'selected' : '' }}>US East</option>
+                                                <option value="2" {{ $default_region == '2' ? 'selected' : '' }}>US West</option>
+                                                <option value="3" {{ $default_region == '3' ? 'selected' : '' }}>Europe (Frankfurt)</option>
+                                                <option value="4" {{ $default_region == '4' ? 'selected' : '' }}>Asia Pacific (Singapore)</option>
+                                                <option value="5" {{ $default_region == '5' ? 'selected' : '' }}>Europe (London)</option>
+                                                <option value="6" {{ $default_region == '6' ? 'selected' : '' }}>India</option>
+                                                <option value="7" {{ $default_region == '7' ? 'selected' : '' }}>Australia</option>
+                                                <option value="8" {{ $default_region == '8' ? 'selected' : '' }}>Europe (Dublin)</option>
+                                                <option value="9" {{ $default_region == '9' ? 'selected' : '' }}>Canada (Central)</option>
+                                                <option value="10" {{ $default_region == '10' ? 'selected' : '' }}>South Africa</option>
                                             </select>
 
                                         </div>
@@ -227,7 +231,7 @@ class="action-icon">
                                                 <input type="checkbox" class="form-check-input" id="dont_send_user_credentials" name="dont_send_user_credentials" value="true" />
                                                 <label class="form-check-label" for="dont_send_user_credentials">Don't send user credentials in a plain text</label>
                                             </div>
-                                            <span class="help-block"><small>If this option is enabled, users within this organization will need to follow a one-time link to retrieve their app password.</small></span>
+                                            <span class="help-block"><small>If this option is enabled, users in this organization must use a one-time link to access their app password.</small></span>
                                         </div>
                                     </div>
                                 </div>
diff --git a/routes/web.php b/routes/web.php
index bb98c538..581524fd 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -216,7 +216,8 @@
     Route::get('/voicemails/{voicemail}/greetings/{filename}/delete', [VoicemailController::class, 'deleteVoicemailGreeting'])->name('deleteVoicemailGreeting');
 
     //Apps
-    Route::get('/apps', [AppsController::class, 'index'])->name('appsStatus');
+    Route::resource('apps', AppsController::class);
+    Route::post('apps/item-options', [AppsController::class, 'getItemOptions'])->name('apps.item.options');
     Route::post('/apps/organization/create', [AppsController::class, 'createOrganization'])->name('appsCreateOrganization');
     Route::delete('/apps/organization/{domain}', [AppsController::class, 'destroyOrganization'])->name('appsDestroyOrganization');
     Route::get('/apps/organization/', [AppsController::class, 'getOrganizations'])->name('appsGetOrganizations');

From 4c74e60aa3156569ddfa4331970567dc3ef4e216 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Tue, 17 Dec 2024 00:06:32 -0800
Subject: [PATCH 02/19] added activation modal

---
 app/Http/Controllers/AppsController.php       | 117 ++++++++-
 app/Http/Controllers/VoicemailController.php  |   2 +-
 resources/js/Pages/RingotelAppSettings.vue    |  87 ++-----
 .../forms/CreateRingotelOrgForm.vue           | 235 ++++++++++++++++++
 .../js/Pages/components/icons/SyncAltIcon.vue |  12 +
 5 files changed, 389 insertions(+), 64 deletions(-)
 create mode 100644 resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
 create mode 100644 resources/js/Pages/components/icons/SyncAltIcon.vue

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index 7a597f35..d35da8f1 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -55,7 +55,6 @@ public function index()
                 ]
             ]
         );
-
     }
 
     /**
@@ -163,6 +162,122 @@ protected function filterSearch($query, $value)
         });
     }
 
+    public function getItemOptions()
+    {
+        try {
+
+            $domain_uuid = request('domain_uuid') ?? session('domain_uuid');
+            $item_uuid = request('item_uuid'); // Retrieve item_uuid from the request
+
+            // Base navigation array without Greetings
+            $navigation = [
+                [
+                    'name' => 'Organization',
+                    'icon' => 'BuildingOfficeIcon',
+                    'slug' => 'organization',
+                ],
+                [
+                    'name' => 'Connections',
+                    'icon' => 'SyncAltIcon',
+                    'slug' => 'connections',
+                ],
+            ];
+
+
+            $routes = [];
+
+            $regions = [
+                ['value' => '1', 'name' => 'US East'],
+                ['value' => '2', 'name' => 'US West'],
+                ['value' => '3', 'name' => 'Europe (Frankfurt)'],
+                ['value' => '4', 'name' => 'Asia Pacific (Singapore)'],
+                ['value' => '5', 'name' => 'Europe (London)'],
+                ['value' => '6', 'name' => 'India'],
+                ['value' => '7', 'name' => 'Australia'],
+                ['value' => '8', 'name' => 'Europe (Dublin)'],
+                ['value' => '9', 'name' => 'Canada (Central)'],
+                ['value' => '10', 'name' => 'South Africa'],
+            ];            
+
+            // Check if item_uuid exists to find an existing model
+            if ($item_uuid) {
+                // Find existing model by item_uuid
+                $model = $this->model
+                    ->select(
+                        'domain_uuid',
+                        'domain_name',
+                        'domain_description',
+                    )
+                    ->with(['settings' => function ($query) {
+                        $query->select('domain_uuid', 'domain_setting_uuid', 'domain_setting_category', 'domain_setting_subcategory', 'domain_setting_value')
+                            ->where('domain_setting_category', 'app shell')
+                            ->where('domain_setting_subcategory', 'org_id')
+                            ->where('domain_setting_enabled', true);
+                    }])->where($this->model->getKeyName(), $item_uuid)->first();
+
+
+                $model->ringotel_status = $model->settings()
+                    ->where('domain_setting_category', 'app shell')
+                    ->where('domain_setting_subcategory', 'org_id')
+                    ->where('domain_setting_enabled', true)
+                    ->exists() ? 'true' : 'false';
+                // logger($model);
+
+                // If model doesn't exist throw an error
+                if (!$model) {
+                    throw new \Exception("Failed to fetch item details. Item not found");
+                }
+
+
+                $routes = array_merge($routes, [
+
+                ]);
+            } else {
+                // Create a new voicemail if item_uuid is not provided
+                $voicemail = $this->model;
+                $voicemail->voicemail_id = $voicemail->generateUniqueSequenceNumber();
+                $voicemail->voicemail_password = $voicemail->voicemail_id;
+                $voicemail->voicemail_file = get_domain_setting('voicemail_file');
+                $voicemail->voicemail_local_after_email = get_domain_setting('keep_local');
+                $voicemail->voicemail_transcription_enabled = get_domain_setting('transcription_enabled_default');
+                $voicemail->voicemail_tutorial = 'false';
+                $voicemail->voicemail_enabled = 'true';
+                $voicemail->voicemail_recording_instructions = 'true';
+            }
+
+            $permissions = $this->getUserPermissions();
+
+
+            // Construct the itemOptions object
+            $itemOptions = [
+                'navigation' => $navigation,
+                'model' => $model,
+                'regions' => $regions,
+                'permissions' => $permissions,
+                'routes' => $routes,
+                // Define options for other fields as needed
+            ];
+
+            return $itemOptions;
+        } catch (\Exception $e) {
+            // Log the error message
+            logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
+            // report($e);
+
+            // Handle any other exception that may occur
+            return response()->json([
+                'success' => false,
+                'errors' => ['server' => ['Failed to fetch item details']]
+            ], 500);  // 500 Internal Server Error for any other errors
+        }
+    }
+
+    public function getUserPermissions()
+    {
+        $permissions = [];
+        return $permissions;
+    }
+
     /**
      * Submit request to create a new organization to Ringotel
      *
diff --git a/app/Http/Controllers/VoicemailController.php b/app/Http/Controllers/VoicemailController.php
index c01766f9..009d4226 100644
--- a/app/Http/Controllers/VoicemailController.php
+++ b/app/Http/Controllers/VoicemailController.php
@@ -534,7 +534,7 @@ public function getItemOptions()
 
             $routes = [];
 
-            // Check if item_uuid exists to find an existing voicemail
+            // Check if item_uuid exists to find an existing model
             if ($item_uuid) {
                 // Find existing voicemail by item_uuid
                 $voicemail = Voicemails::with([
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index 0dc5f6f7..a47bda76 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -72,13 +72,11 @@
 
             <template #table-body>
                 <tr v-for="row in data.data" :key="row.domain_uuid">
-                    <TableField class="whitespace-nowrap px-4 py-2 text-sm text-gray-500" :text="row.voicemail_id">
+                    <TableField class="whitespace-nowrap px-4 py-2 text-sm text-gray-500">
                         <div class="flex items-center">
                             <input v-if="row.domain_uuid" v-model="selectedItems" type="checkbox" name="action_box[]"
                                 :value="row.domain_uuid" class="h-4 w-4 rounded border-gray-300 text-indigo-600">
-                            <div class="ml-9"
-                                :class="{ 'cursor-pointer hover:text-gray-900': page.props.auth.can.voicemail_update, }"
-                                @click="handleEditRequest(row.domain_uuid)">
+                            <div class="ml-9">
                                 <span v-if="row.domain_description" class="flex items-center">
                                     {{ row.domain_description }}
                                 </span>
@@ -93,9 +91,9 @@
                     <TableField class="whitespace-nowrap px-2 py-2 text-sm text-gray-500" :text="row.domain_name" />
 
                     <TableField class="whitespace-nowrap px-2 py-2 text-sm text-gray-500" :text="row.ringotel_status">
-                        <Badge v-if="row.ringotel_status == 'true'" text="Enabled" backgroundColor="bg-green-50"
+                        <Badge v-if="row.ringotel_status == 'true'" text="Activated" backgroundColor="bg-green-50"
                             textColor="text-green-700" ringColor="ring-green-600/20" />
-                        <Badge v-else text="Disabled" backgroundColor="bg-rose-50" textColor="text-rose-700"
+                        <Badge v-else text="Inactive" backgroundColor="bg-rose-50" textColor="text-rose-700"
                             ringColor="ring-rose-600/20" />
 
                     </TableField>
@@ -104,7 +102,7 @@
                     <TableField class="whitespace-nowrap px-2 py-1 text-sm text-gray-500">
                         <template #action-buttons>
                             <div class="flex items-center whitespace-nowrap justify-end">
-                                <ejs-tooltip v-if="page.props.auth.can.voicemail_update" :content="'Edit'"
+                                <ejs-tooltip v-if="row.ringotel_status == 'true'" :content="'Edit'"
                                     position='TopCenter' target="#destination_tooltip_target">
                                     <div id="destination_tooltip_target">
                                         <PencilSquareIcon @click="handleEditRequest(row.voicemail_uuid)"
@@ -113,18 +111,18 @@
                                     </div>
                                 </ejs-tooltip>
 
-                                <ejs-tooltip :content="'Check messages'" position='TopCenter'
+                                <ejs-tooltip v-if="row.ringotel_status == 'false'" :content="'Activate'" position='TopCenter'
                                     target="#restart_tooltip_target">
                                     <div id="restart_tooltip_target">
-                                        <EnvelopeIcon @click="navigateToMessages(row.messages_route)"
+                                        <PowerIcon @click="handleActivateButtonClick(row.domain_uuid)"
                                             class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 active:bg-gray-300 active:duration-150 cursor-pointer" />
                                     </div>
                                 </ejs-tooltip>
 
-                                <ejs-tooltip v-if="page.props.auth.can.voicemail_destroy" :content="'Delete'"
+                                <ejs-tooltip v-if="row.ringotel_status == 'true'"  :content="'Delete'"
                                     position='TopCenter' target="#delete_tooltip_target">
                                     <div id="delete_tooltip_target">
-                                        <TrashIcon @click="handleSingleItemDeleteRequest(row.destroy_route)"
+                                        <LinkOffIcon @click="handleDeactivateRequest(row.destroy_route)"
                                             class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 active:bg-gray-300 active:duration-150 cursor-pointer" />
                                     </div>
                                 </ejs-tooltip>
@@ -157,22 +155,22 @@
         <div class="px-4 sm:px-6 lg:px-8"></div>
     </div>
 
-    <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="createModalTrigger" :header="'Create New Voicemail Extension'"
+    <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="showActivateModal" :header="'Activate Ringotel Organization'"
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
-            <CreateVoicemailForm :options="itemOptions" :errors="formErrors" :is-submitting="createFormSubmiting"
+            <CreateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="createFormSubmiting"
                 @submit="handleCreateRequest" @cancel="handleModalClose" />
         </template>
     </AddEditItemModal>
 
-    <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="editModalTrigger" :header="'Edit Voicemail Settings'"
+    <!-- <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="editModalTrigger" :header="'Edit Voicemail Settings'"
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
             <UpdateVoicemailForm :options="itemOptions" :errors="formErrors" :is-submitting="updateFormSubmiting"
                 @submit="handleUpdateRequest" @cancel="handleModalClose" @error="handleErrorResponse"
                 @success="showNotification('success', { request: [$event] })" />
         </template>
-    </AddEditItemModal>
+    </AddEditItemModal> -->
 
     <AddEditItemModal :show="bulkUpdateModalTrigger" :header="'Bulk Edit'" :loading="loadingModal"
         @close="handleModalClose">
@@ -208,11 +206,12 @@ import { TooltipComponent as EjsTooltip } from "@syncfusion/ej2-vue-popups";
 import BulkUpdateDeviceForm from "./components/forms/BulkUpdateDeviceForm.vue";
 import BulkActionButton from "./components/general/BulkActionButton.vue";
 import MainLayout from "../Layouts/MainLayout.vue";
-import CreateVoicemailForm from "./components/forms/CreateVoicemailForm.vue";
+import CreateRingotelOrgForm from "./components/forms/CreateRingotelOrgForm.vue";
 import UpdateVoicemailForm from "./components/forms/UpdateVoicemailForm.vue";
 import Notification from "./components/notifications/Notification.vue";
 import Badge from "@generalComponents/Badge.vue";
-import { UserGroupIcon, UserIcon, EnvelopeIcon } from "@heroicons/vue/24/outline";
+import LinkOffIcon from "@icons/LinkOffIcon.vue";
+import { PowerIcon } from "@heroicons/vue/24/outline";
 
 
 
@@ -223,7 +222,7 @@ const selectAll = ref(false);
 const selectedItems = ref([]);
 const selectPageItems = ref(false);
 const createModalTrigger = ref(false);
-const editModalTrigger = ref(false);
+const showActivateModal = ref(false);
 const bulkUpdateModalTrigger = ref(false);
 const confirmationModalTrigger = ref(false);
 const confirmationModalDestroyPath = ref(null);
@@ -260,21 +259,19 @@ const bulkActions = computed(() => {
         // }
     ];
 
-    // Conditionally add the delete action if permission is granted
-    if (page.props.auth.can.device_destroy) {
-        actions.push({
-            id: 'bulk_delete',
-            label: 'Delete',
-            icon: 'TrashIcon'
-        });
-    }
-
     return actions;
 });
 
 onMounted(() => {
 });
 
+const handleActivateButtonClick = (itemUuid) => {
+    showActivateModal.value = true
+    formErrors.value = null;
+    loadingModal.value = true
+    getItemOptions(itemUuid);
+}
+
 const handleEditRequest = (itemUuid) => {
     editModalTrigger.value = true
     formErrors.value = null;
@@ -364,36 +361,6 @@ const handleBulkActionRequest = (action) => {
 }
 
 
-
-const executeBulkDelete = () => {
-    axios.post(`${props.routes.bulk_delete}`, { items: selectedItems.value })
-        .then((response) => {
-            handleModalClose();
-            showNotification('success', response.data.messages);
-            handleSearchButtonClick();
-        })
-        .catch((error) => {
-            handleClearSelection();
-            handleModalClose();
-            handleErrorResponse(error);
-        });
-}
-
-const handleBulkUpdateRequest = (form) => {
-    bulkUpdateFormSubmiting.value = true
-    axios.post(`${props.routes.bulk_update}`, form)
-        .then((response) => {
-            bulkUpdateFormSubmiting.value = false;
-            handleModalClose();
-            showNotification('success', response.data.messages);
-            handleSearchButtonClick();
-        })
-        .catch((error) => {
-            bulkUpdateFormSubmiting.value = false;
-            handleFormErrorResponse(error);
-        });
-}
-
 const handleCreateButtonClick = () => {
     createModalTrigger.value = true
     formErrors.value = null;
@@ -533,7 +500,7 @@ const handleClearSelection = () => {
 
 const handleModalClose = () => {
     createModalTrigger.value = false;
-    editModalTrigger.value = false;
+    showActivateModal.value = false;
     confirmationModalTrigger.value = false;
     bulkUpdateModalTrigger.value = false;
 }
@@ -550,10 +517,6 @@ const showNotification = (type, messages = null) => {
     notificationShow.value = true;
 }
 
-const navigateToMessages = (messagesRoute) => {
-    // Use Inertia's router to visit the messages page
-    router.visit(messagesRoute);
-};
 
 registerLicense('Ngo9BigBOggjHTQxAR8/V1NAaF5cWWdCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWX5eeHVSQ2hYUkB3WEI=');
 
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
new file mode 100644
index 00000000..c1cac3f8
--- /dev/null
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -0,0 +1,235 @@
+<template>
+    <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
+        <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
+            <nav class="space-y-1">
+                <a v-for="item in options.navigation" :key="item.name" href="#"
+                    :class="[activeTab === item.slug ? 'bg-gray-200 text-indigo-700 hover:bg-gray-100 hover:text-indigo-700' : 'text-gray-900 hover:bg-gray-200 hover:text-gray-900', 'group flex items-center rounded-md px-3 py-2 text-sm font-medium']"
+                    @click.prevent="setActiveTab(item.slug)" :aria-current="item.current ? 'page' : undefined">
+                    <component :is="iconComponents[item.icon]"
+                        :class="[item.current ? 'text-indigo-500 group-hover:text-indigo-500' : 'text-gray-400 group-hover:text-gray-500', '-ml-1 mr-3 h-6 w-6 flex-shrink-0']"
+                        aria-hidden="true" />
+                    <span class="truncate">{{ item.name }}</span>
+                    <ExclamationCircleIcon v-if="((errors?.voicemail_id || errors?.voicemail_password) && item.slug === 'settings') ||
+                        (errors?.voicemail_alternate_greet_id && item.slug === 'advanced')" class="ml-2 h-5 w-5 text-red-500"
+                        aria-hidden="true" />
+
+                </a>
+            </nav>
+        </aside>
+
+        <form @submit.prevent="submitForm" class="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
+            <div v-if="activeTab === 'organization'">
+                <div class="shadow sm:rounded-md">
+                    <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-base font-semibold leading-6 text-gray-900">Organization Details</h3>
+
+                            <Toggle label="Status" v-model="form.voicemail_enabled" />
+
+                            <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                        </div>
+
+                        <div class="grid grid-cols-6 gap-6">
+                            <div class="col-span-6 sm:col-span-3">
+                                <LabelInputRequired target="organization_name" label="Organization Name" class="truncate" />
+                                <InputField v-model="form.organization_name" type="text" name="organization_name" id="organization_name"
+                                    class="mt-2" :error="!!errors?.organization_name" />
+                                <div v-if="errors?.organization_name" class="mt-2 text-xs text-red-600">
+                                    {{ errors.organization_name[0] }}
+                                </div>
+                            </div>
+
+                            <div class="col-span-6 sm:col-span-3">
+                                <LabelInputRequired target="organization_domain" label="Unique Organization Domain" class="truncate" />
+                                <InputField v-model="form.organization_domain" type="text" name="organization_domain"
+                                    id="organization_domain" class="mt-2" :error="!!errors?.organization_domain" />
+                                <div v-if="errors?.organization_domain" class="mt-2 text-xs text-red-600">
+                                    {{ errors.organization_domain[0] }}
+                                </div>
+                            </div>
+
+                            <div 
+                                class="col-span-6 sm:col-span-3">
+                                <LabelInputOptional label="Region" class="truncate mb-1" />
+
+                                <ComboBox :options="options.regions" :search="true" 
+                                    :placeholder="'Select region'"
+                                    @update:model-value="handleUpdateCopyToField" />
+
+                            </div>
+
+                            <div class="divide-y divide-gray-200 col-span-6">
+
+                                <Toggle 
+                                    label="Secure User Credentials"
+                                    description="When enabled, users will receive a one-time link to access their app password instead of plain text."
+                                    v-model="form.voicemail_transcription_enabled" customClass="py-4" />
+
+                            </div>
+
+
+
+                        </div>
+
+                    </div>
+                    <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
+
+                        <button type="submit"
+                            class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
+                            ref="saveButtonRef" :disabled="isSubmitting">
+                            <Spinner :show="isSubmitting" />
+                            Save
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+
+            <div v-if="activeTab === 'advanced'" action="#" method="POST">
+                <div class="shadow sm:rounded-md">
+                    <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
+                        <div>
+                            <h3 class="text-base font-semibold leading-6 text-gray-900">Advanced</h3>
+                            <p class="mt-1 text-sm text-gray-500">Set advanced settings for this voicemail
+                            </p>
+                        </div>
+
+                        <div class="divide-y divide-gray-200 col-span-6">
+
+                            <Toggle label="Play Voicemail Tutorial"
+                                description="Provide user with a guided tutorial when accessing voicemail for the first time."
+                                v-model="form.voicemail_tutorial" customClass="py-4" />
+
+                            <Toggle v-if="options.permissions.manage_voicemail_recording_instructions"
+                                label="Play Recording Instructions" description='Play a prompt instructing callers to "Record your message after the tone. Stop
+                                        speaking to end the recording."'
+                                v-model="form.voicemail_play_recording_instructions" customClass="py-4" />
+
+                        </div>
+
+                        <div class="grid grid-cols-6 gap-6">
+                            <div class="col-span-3 sm:col-span-2">
+                                <div class="flex items-center gap-1">
+                                    <LabelInputOptional target="voicemail_alternate_greet_id" label="Announce Voicemail
+                                        Extension as" />
+
+                                    <Popover>
+                                        <template v-slot:popover-button>
+                                            <InformationCircleIcon class="h-5 w-5 text-blue-500" />
+                                        </template>
+                                        <template v-slot:popover-panel>
+                                            <div>The parameter allows you to override the voicemail extension number
+                                                spoken
+                                                by the system in the voicemail greeting. This controls system greetings
+                                                that
+                                                read back an extension number, not user recorded greetings.</div>
+                                        </template>
+                                    </Popover>
+                                </div>
+
+                                <InputField v-model="form.voicemail_alternate_greet_id" type="text"
+                                    name="voicemail_alternate_greet_id" :error="!!errors?.voicemail_alternate_greet_id"
+                                    id="voicemail_alternate_greet_id" class="mt-2" />
+
+                                <div v-if="errors?.voicemail_alternate_greet_id" class="mt-2 text-xs text-red-600">
+                                    {{ errors.voicemail_alternate_greet_id[0] }}
+                                </div>
+
+                            </div>
+
+                        </div>
+
+
+                    </div>
+                    <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
+                        <button type="submit"
+                            class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import { usePage } from '@inertiajs/vue3';
+
+
+import ComboBox from "../general/ComboBox.vue";
+import InputField from "../general/InputField.vue";
+import InputFieldWithIcon from "@generalComponents/InputFieldWithIcon.vue";
+import Popover from "@generalComponents/Popover.vue";
+import Textarea from "@generalComponents/Textarea.vue";
+import SyncAltIcon from "@icons/SyncAltIcon.vue";
+import Toggle from "@generalComponents/Toggle.vue";
+import LabelInputOptional from "../general/LabelInputOptional.vue";
+import LabelInputRequired from "../general/LabelInputRequired.vue";
+import Spinner from "@generalComponents/Spinner.vue";
+import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
+import { BuildingOfficeIcon } from '@heroicons/vue/24/outline';
+
+
+const props = defineProps({
+    options: Object,
+    isSubmitting: Boolean,
+    errors: Object,
+});
+
+
+// Initialize activeTab with the currently active tab from props
+const activeTab = ref(props.options.navigation.find(item => item.slug)?.slug || props.options.navigation[0].slug);
+
+const setActiveTab = (tabSlug) => {
+    activeTab.value = tabSlug;
+};
+
+const showPassword = ref(false);
+
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value;
+  const passwordInput = document.getElementById("voicemail_password");
+  if (showPassword.value) {
+    passwordInput.style.webkitTextSecurity = "none"; // Show text
+  } else {
+    passwordInput.style.webkitTextSecurity = "disc"; // Mask text
+  }
+};
+
+// Map icon names to their respective components
+const iconComponents = {
+    'SyncAltIcon': SyncAltIcon,
+    'BuildingOfficeIcon': BuildingOfficeIcon,
+};
+
+
+const page = usePage();
+
+const form = reactive({
+    voicemail_enabled: true,
+    organization_name: props.options.model.domain_description,
+    // voicemail_id: props.options.voicemail.voicemail_id,
+    // voicemail_password: props.options.voicemail.voicemail_password,
+    // voicemail_mail_to: null,
+    // voicemail_description: null,
+    // voicemail_transcription_enabled: props.options.voicemail.voicemail_transcription_enabled === "true",
+    // voicemail_email_attachment: props.options.voicemail.voicemail_file === "attach",
+    // voicemail_delete: props.options.voicemail.voicemail_local_after_email === "false",
+    // voicemail_tutorial: props.options.voicemail.voicemail_tutorial === "true",
+    // voicemail_play_recording_instructions: props.options.voicemail.voicemail_recording_instructions === "true",
+    // voicemail_copies: null,
+    // voicemail_alternate_greet_id: null,
+    // voicemail_enabled: props.options.voicemail.voicemail_enabled === "true",
+    _token: page.props.csrf_token,
+})
+
+const emits = defineEmits(['submit', 'cancel']);
+
+const submitForm = () => {
+    emits('submit', form); // Emit the event with the form data
+}
+
+
+</script>
diff --git a/resources/js/Pages/components/icons/SyncAltIcon.vue b/resources/js/Pages/components/icons/SyncAltIcon.vue
new file mode 100644
index 00000000..41565557
--- /dev/null
+++ b/resources/js/Pages/components/icons/SyncAltIcon.vue
@@ -0,0 +1,12 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor"
+        stroke="currentColor">
+        <path d="M280-120 80-320l200-200 57 56-104 104h607v80H233l104 104-57 56Zm400-320-57-56 104-104H120v-80h607L623-784l57-56 200 200-200 200Z"/>
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'SyncAltIcon',
+};
+</script>
\ No newline at end of file

From 318838711635fb5aceb30e3e5dfafa4569cada14 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Tue, 17 Dec 2024 20:21:32 -0800
Subject: [PATCH 03/19] finished creating organization

---
 app/Console/Commands/Updates/Update0916.php   |  78 ++++---
 app/Http/Controllers/AppsController.php       | 153 ++++++--------
 .../StoreRingotelActivationRequest.php        |  90 ++++++++
 app/Services/RingotelApiService.php           |  60 ++++--
 resources/js/Pages/RingotelAppSettings.vue    |  22 +-
 .../forms/CreateRingotelOrgForm.vue           | 197 ++++++++++--------
 routes/web.php                                |   2 +-
 7 files changed, 380 insertions(+), 222 deletions(-)
 create mode 100644 app/Http/Requests/StoreRingotelActivationRequest.php

diff --git a/app/Console/Commands/Updates/Update0916.php b/app/Console/Commands/Updates/Update0916.php
index c1ece79c..089392f9 100644
--- a/app/Console/Commands/Updates/Update0916.php
+++ b/app/Console/Commands/Updates/Update0916.php
@@ -3,6 +3,7 @@
 namespace App\Console\Commands\Updates;
 
 use App\Models\DefaultSettings;
+use Illuminate\Support\Str;
 
 class Update0916
 {
@@ -13,33 +14,26 @@ class Update0916
      */
     public function apply()
     {
-        $category = 'mobile_apps';
-        $subcategory = 'organization_region';
-        $newDescription = '1 - US East, 2 - US West, 3 - Europe (Frankfurt), 4 - Asia Pacific (Singapore), 5 - Europe (London), 6 - India, 7 - Australia, 8 - Europe (Dublin), 9 - Canada (Central), 10 - South Africa';
+        $updates = [
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'organization_region',
+                'newDescription' => '1 - US East, 2 - US West, 3 - Europe (Frankfurt), 4 - Asia Pacific (Singapore), 5 - Europe (London), 6 - India, 7 - Australia, 8 - Europe (Dublin), 9 - Canada (Central), 10 - South Africa',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'package',
+                'newDescription' => '1 - Essentials, 2 - Pro',
+            ],
+        ];
 
         try {
-            // Attempt to find the record by category and subcategory
-            $defaultSetting = DefaultSettings::where('default_setting_category', $category)
-                ->where('default_setting_subcategory', $subcategory)
-                ->first();
-
-            if ($defaultSetting) {
-                // Update the description if the record exists
-                $defaultSetting->default_setting_description = $newDescription;
-                $defaultSetting->save();
-                echo "Updated description for existing record in category '$category' and subcategory '$subcategory'.\n";
-            } else {
-                // Create a new record if it does not exist
-                DefaultSettings::create([
-                    'default_setting_uuid' => \Illuminate\Support\Str::uuid()->toString(), // Generate a new UUID
-                    'default_setting_category' => $category,
-                    'default_setting_subcategory' => $subcategory,
-                    'default_setting_name' => 'text',
-                    'default_setting_value' => '',
-                    'default_setting_enabled' => 't',
-                    'default_setting_description' => $newDescription,
-                ]);
-                echo "Created new record in category '$category' and subcategory '$subcategory'.\n";
+            foreach ($updates as $update) {
+                $this->updateOrCreateRecord(
+                    $update['category'],
+                    $update['subcategory'],
+                    $update['newDescription']
+                );
             }
 
             return true;
@@ -48,4 +42,38 @@ public function apply()
             return false;
         }
     }
+
+    /**
+     * Update or create a record in the DefaultSettings table.
+     *
+     * @param string $category
+     * @param string $subcategory
+     * @param string $newDescription
+     * @return void
+     */
+    private function updateOrCreateRecord($category, $subcategory, $newDescription)
+    {
+        $defaultSetting = DefaultSettings::where('default_setting_category', $category)
+            ->where('default_setting_subcategory', $subcategory)
+            ->first();
+
+        if ($defaultSetting) {
+            // Update the description if the record exists
+            $defaultSetting->default_setting_description = $newDescription;
+            $defaultSetting->save();
+            echo "Updated description for existing record in category '$category' and subcategory '$subcategory'.\n";
+        } else {
+            // Create a new record if it does not exist
+            DefaultSettings::create([
+                'default_setting_uuid' => Str::uuid()->toString(), // Generate a new UUID
+                'default_setting_category' => $category,
+                'default_setting_subcategory' => $subcategory,
+                'default_setting_name' => 'text',
+                'default_setting_value' => '',
+                'default_setting_enabled' => 't',
+                'default_setting_description' => $newDescription,
+            ]);
+            echo "Created new record in category '$category' and subcategory '$subcategory'.\n";
+        }
+    }
 }
diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index d35da8f1..a323a6af 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -16,6 +16,7 @@
 use Illuminate\Support\Facades\Session;
 use App\Models\MobileAppPasswordResetLinks;
 use SimpleSoftwareIO\QrCode\Facades\QrCode;
+use App\Http\Requests\StoreRingotelActivationRequest;
 
 class AppsController extends Controller
 {
@@ -50,7 +51,7 @@ public function index()
 
                 'routes' => [
                     'current_page' => route('apps.index'),
-                    'store' => route('apps.store'),
+                    'create_organization' => route('apps.organization.create'),
                     'item_options' => route('apps.item.options'),
                 ]
             ]
@@ -109,12 +110,6 @@ public function builder(array $filters = [])
                     ->where('domain_setting_enabled', true);
             }]);
 
-        // Add 'status' attribute based on the existence of settings
-        // foreach ($domains as $domain) {
-        //     $domain->status = $domain->settings->isNotEmpty() ? 'true' : 'false';
-        // }
-
-
         $data->select(
             'domain_uuid',
             'domain_name',
@@ -197,7 +192,12 @@ public function getItemOptions()
                 ['value' => '8', 'name' => 'Europe (Dublin)'],
                 ['value' => '9', 'name' => 'Canada (Central)'],
                 ['value' => '10', 'name' => 'South Africa'],
-            ];            
+            ];
+
+            $packages = [
+                ['value' => '1', 'name' => 'Essentials Package'],
+                ['value' => '2', 'name' => 'Pro Package'],
+            ];
 
             // Check if item_uuid exists to find an existing model
             if ($item_uuid) {
@@ -229,32 +229,29 @@ public function getItemOptions()
                 }
 
 
-                $routes = array_merge($routes, [
-
-                ]);
-            } else {
-                // Create a new voicemail if item_uuid is not provided
-                $voicemail = $this->model;
-                $voicemail->voicemail_id = $voicemail->generateUniqueSequenceNumber();
-                $voicemail->voicemail_password = $voicemail->voicemail_id;
-                $voicemail->voicemail_file = get_domain_setting('voicemail_file');
-                $voicemail->voicemail_local_after_email = get_domain_setting('keep_local');
-                $voicemail->voicemail_transcription_enabled = get_domain_setting('transcription_enabled_default');
-                $voicemail->voicemail_tutorial = 'false';
-                $voicemail->voicemail_enabled = 'true';
-                $voicemail->voicemail_recording_instructions = 'true';
+                $routes = array_merge($routes, []);
             }
 
             $permissions = $this->getUserPermissions();
 
+            $suggested_ringotel_domain = strtolower(str_replace(' ', '', $model->domain_description));
+            $region = get_domain_setting('organization_region');
+            $package = get_domain_setting('package');
+            $dont_send_user_credentials = get_domain_setting('dont_send_user_credentials', $model->domain_uuid);
+
 
             // Construct the itemOptions object
             $itemOptions = [
                 'navigation' => $navigation,
                 'model' => $model,
                 'regions' => $regions,
+                'packages' => $packages,
                 'permissions' => $permissions,
                 'routes' => $routes,
+                'suggested_ringotel_domain' => $suggested_ringotel_domain,
+                'default_region' => $region,
+                'default_package' => $package,
+                'dont_send_user_credentials' => $dont_send_user_credentials,
                 // Define options for other fields as needed
             ];
 
@@ -279,59 +276,63 @@ public function getUserPermissions()
     }
 
     /**
-     * Submit request to create a new organization to Ringotel
+     * Submit API request to Ringotel to create a new organization 
      *
      * @return \Illuminate\Http\JsonResponse
      */
-    public function createOrganization(RingotelApiService $ringotelApiService)
+    public function createOrganization(StoreRingotelActivationRequest $request, RingotelApiService $ringotelApiService)
     {
         $this->ringotelApiService = $ringotelApiService;
+
+        $inputs = $request->validated();
+        logger($inputs);
+
         try {
-            $users = $this->ringotelApiService->getUsersByOrgId($orgId);
-        } catch (\Exception $e) {
-            logger($e->getMessage());
-            return response()->json([
-                'error' => [
-                    'message' => $e->getMessage(),
-                ],
-            ], 400);
-        }
+            // Send API request to create organization 
+            $organization = $this->ringotelApiService->createOrganization($inputs);
 
 
-        return response()->json([
-            'users' => $users,
-            'status' => 200,
-            'success' => [
-                'message' => 'The request processed successfully'
-            ]
-        ]);
+            // Check for existing records with a different value
+            $existingSetting = DomainSettings::where('domain_uuid', $inputs['domain_uuid'])
+                ->where('domain_setting_category', 'app shell')
+                ->where('domain_setting_subcategory', 'org_id')
+                ->first();
 
-        $request->dont_send_user_credentials = $request->dont_send_user_credentials === 'true' ? 'true' : 'false';
+            if ($existingSetting) {
+                if ($existingSetting->domain_setting_value !== $organization->org_id) {
+                    // Delete the existing record if the value is different
+                    $existingSetting->delete();
+                }
+            }
 
-        $data = array(
-            'method' => 'createOrganization',
-            'params' => array(
-                'name' => $request->organization_name,
-                'region' => $request->organization_region,
-                'domain' => $request->organization_domain,
-                'params' => array(
-                    'hidePassInEmail' => $request->dont_send_user_credentials == 'true'
-                )
-            )
-        );
+            logger($organization);
 
-        $response = Http::ringotel()
-            //->dd()
-            ->timeout(5)
-            ->withBody(json_encode($data), 'application/json')
-            ->post('/')
-            ->throw(function ($response, $e) {
-                return response()->json([
-                    'error' => 401,
-                    'message' => 'Unable to create organization'
-                ]);
-            })
-            ->json();
+            // Save the new record
+            $domainSetting = DomainSettings::create([
+                'domain_uuid' => $inputs['domain_uuid'],
+                'domain_setting_category' => 'app shell',
+                'domain_setting_subcategory' => 'org_id',
+                'domain_setting_name' => 'text',
+                'domain_setting_value' => $organization['id'],
+                'domain_setting_enabled' => true,
+            ]);
+
+            // Return a JSON response indicating success
+            return response()->json([
+                'messages' => ['success' => ['Organization succesfully activated']]
+            ], 201);
+
+        } catch (\Exception $e) {
+            logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
+            // Handle any other exception that may occur
+            return response()->json([
+                'success' => false,
+                'errors' => ['server' => ['Unable to activate organization. Check logs for more details']]
+            ], 500);  // 500 Internal Server Error for any other errors
+        }
+
+        logger($organization);
+        return;
 
         //dd(isset($response['error']));
 
@@ -339,19 +340,6 @@ public function createOrganization(RingotelApiService $ringotelApiService)
         // If successful store Org ID and return success status
         if (isset($response['result'])) {
 
-            // Add received OrgID to the request and store it in database
-            $request->merge(['org_id' => $response['result']['id']]);
-
-            if (!appsStoreOrganizationDetails($request)) {
-                return response()->json([
-                    'organization_name' => $request->organization_name,
-                    'organization_domain' => $request->organization_domain,
-                    'organization_region' => $request->organization_region,
-                    'org_id' => $response['result']['id'],
-                    'message' => 'Organization was created successfully, but unable to store Org ID in database',
-                ]);
-            }
-
             // Get connection port from database or env file
             $protocol = get_domain_setting('mobile_app_conn_protocol', $request->organization_uuid);
             $port = get_domain_setting('line_sip_port', $request->organization_uuid);
@@ -1334,16 +1322,7 @@ public function setStatus(Request $request, Extensions $extension)
     }
 
 
-    /**
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
-    public function store(Request $request)
-    {
-        //
-    }
+
 
     /**
      * Display the specified resource.
diff --git a/app/Http/Requests/StoreRingotelActivationRequest.php b/app/Http/Requests/StoreRingotelActivationRequest.php
new file mode 100644
index 00000000..d6fe6b45
--- /dev/null
+++ b/app/Http/Requests/StoreRingotelActivationRequest.php
@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Http\Requests;
+
+use App\Rules\UniqueExtension;
+use Illuminate\Support\Facades\Auth;
+use App\Rules\ValidVoicemailPassword;
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreRingotelActivationRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize(): bool
+    {
+        return Auth::check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'organization_name' => 'required|string|max:100',
+            'organization_domain' => 'required|string|max:40',
+            'region' => 'required',
+            'package' => 'required',
+            'dont_send_user_credentials' => 'required',
+            'domain_uuid' => 'present',
+        ];
+    }
+
+
+    public function prepareForValidation(): void
+    {
+
+        // Check if 'region' is missing or empty and set it to null
+        if (!$this->has('region') || $this->input('region') === 'NULL') {
+            $this->merge(['region' => null]);
+        }
+
+        // Check if 'package' is missing or empty and set it to null
+        if (!$this->has('package') || $this->input('package') === 'NULL') {
+            $this->merge(['package' => null]);
+        }
+
+    }
+
+    /**
+     * Sanitize the input field to prevent XSS and remove unwanted characters.
+     *
+     * @param string $input
+     * @return string
+     */
+    protected function sanitizeInput(string $input): string
+    {
+        // Trim whitespace
+        $input = trim($input);
+
+        // Strip HTML tags
+        $input = strip_tags($input);
+
+        // Escape special characters
+        $input = htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
+
+        // Remove any non-ASCII characters if necessary (optional)
+        $input = preg_replace('/[^\x20-\x7E]/', '', $input);
+
+        return $input;
+    }
+
+    /**
+     * Get custom attributes for validator errors.
+     *
+     * @return array
+     */
+    public function attributes(): array
+    {
+        return [
+            'voicemail_id' => 'voicemail extension',
+            'voicemail_password' => 'voicemail password',
+            'greeting_id' => 'extension number',
+            'voicemail_mail_to' => 'email address',
+            'voicemail_enabled' => 'enabled',
+            'voicemail_description' => 'description',
+            'voicemail_alternate_greet_id' => 'value',
+        ];
+    }
+}
diff --git a/app/Services/RingotelApiService.php b/app/Services/RingotelApiService.php
index 3480f3de..b75ee51f 100644
--- a/app/Services/RingotelApiService.php
+++ b/app/Services/RingotelApiService.php
@@ -9,12 +9,49 @@
 class RingotelApiService
 {
     // protected $apiUrl;
+    protected $timeout = 30;
 
     public function __construct()
     {
         // $this->apiUrl = config('services.third_party_api.url');
     }
 
+    public function createOrganization($params)
+    {
+        // Prepare the payload
+        $data = [
+            'method' => 'createOrganization',
+            'params' => [
+                'name' => $params['organization_name'],
+                'region' => $params['region'],
+                'domain' => $params['organization_domain'],
+                'packageid' => (int) $params['package'],
+                'params' => [
+                    'hidePassInEmail' => $params['dont_send_user_credentials'],
+                ],
+            ],
+        ];
+
+        $response = Http::ringotel()
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function () {
+                throw new \Exception("Unable to activate organization");
+            })
+            ->json();
+
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        if (!isset($response['result'])) {
+            throw new \Exception("An unknown error has occurred");
+        }
+
+        return $response['result'];
+    }
+
     public function getOrganizations()
     {
         $data = array(
@@ -22,7 +59,7 @@ public function getOrganizations()
         );
 
         $response = Http::ringotel()
-            ->timeout(5)
+            ->timeout($this->timeout)
             ->withBody(json_encode($data), 'application/json')
             ->post('/')
             ->throw(function () {
@@ -51,7 +88,7 @@ public function getUsersByOrgId($orgId)
         ];
 
         $response = Http::ringotel()
-            ->timeout(5)
+            ->timeout($this->timeout)
             ->withBody(json_encode($data), 'application/json')
             ->post('/')
             ->throw(function ($response, $e) use ($orgId) {
@@ -74,15 +111,15 @@ public function matchLocalDomains($organizations)
     {
 
         $orgs = DB::table('v_domain_settings')
-        -> join('v_domains', 'v_domains.domain_uuid', '=', 'v_domain_settings.domain_uuid')
-        -> where('domain_setting_category', 'app shell')
-        -> where ('domain_setting_subcategory', 'org_id')
-        -> get([
-            'v_domain_settings.domain_uuid',
-            'domain_setting_value AS org_id',
-            'domain_name',
-            'domain_description',
-        ]);
+            ->join('v_domains', 'v_domains.domain_uuid', '=', 'v_domain_settings.domain_uuid')
+            ->where('domain_setting_category', 'app shell')
+            ->where('domain_setting_subcategory', 'org_id')
+            ->get([
+                'v_domain_settings.domain_uuid',
+                'domain_setting_value AS org_id',
+                'domain_name',
+                'domain_description',
+            ]);
 
         $orgArray = $organizations->map(function ($organization) use ($orgs) {
             foreach ($orgs as $org) {
@@ -97,5 +134,4 @@ public function matchLocalDomains($organizations)
 
         return $orgArray;
     }
-
 }
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index a47bda76..d6e9d5d4 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -158,7 +158,7 @@
     <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="showActivateModal" :header="'Activate Ringotel Organization'"
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
-            <CreateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="createFormSubmiting"
+            <CreateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="activateFormSubmiting" :activeTab="activationActiveTab"
                 @submit="handleCreateRequest" @cancel="handleModalClose" />
         </template>
     </AddEditItemModal>
@@ -226,7 +226,8 @@ const showActivateModal = ref(false);
 const bulkUpdateModalTrigger = ref(false);
 const confirmationModalTrigger = ref(false);
 const confirmationModalDestroyPath = ref(null);
-const createFormSubmiting = ref(null);
+const activateFormSubmiting = ref(null);
+const activationActiveTab = ref('organization');
 const updateFormSubmiting = ref(null);
 const confirmDeleteAction = ref(null);
 const bulkUpdateFormSubmiting = ref(null);
@@ -280,18 +281,19 @@ const handleEditRequest = (itemUuid) => {
 }
 
 const handleCreateRequest = (form) => {
-    createFormSubmiting.value = true;
+    activateFormSubmiting.value = true;
     formErrors.value = null;
 
-    axios.post(props.routes.store, form)
+    axios.post(props.routes.create_organization, form)
         .then((response) => {
-            createFormSubmiting.value = false;
+            activateFormSubmiting.value = false;
             showNotification('success', response.data.messages);
-            handleSearchButtonClick();
-            handleModalClose();
-            handleClearSelection();
+            activationActiveTab.value = 'connections';
+            // handleSearchButtonClick();
+            // handleModalClose();
+            // handleClearSelection();
         }).catch((error) => {
-            createFormSubmiting.value = false;
+            activateFormSubmiting.value = false;
             handleClearSelection();
             handleFormErrorResponse(error);
         });
@@ -432,7 +434,7 @@ const getItemOptions = (itemUuid = null) => {
         .then((response) => {
             loadingModal.value = false;
             itemOptions.value = response.data;
-            // console.log(itemOptions.value);
+            console.log(itemOptions.value);
 
         }).catch((error) => {
             handleModalClose();
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index c1cac3f8..fc6de7e4 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -9,9 +9,9 @@
                         :class="[item.current ? 'text-indigo-500 group-hover:text-indigo-500' : 'text-gray-400 group-hover:text-gray-500', '-ml-1 mr-3 h-6 w-6 flex-shrink-0']"
                         aria-hidden="true" />
                     <span class="truncate">{{ item.name }}</span>
-                    <ExclamationCircleIcon v-if="((errors?.voicemail_id || errors?.voicemail_password) && item.slug === 'settings') ||
-                        (errors?.voicemail_alternate_greet_id && item.slug === 'advanced')" class="ml-2 h-5 w-5 text-red-500"
-                        aria-hidden="true" />
+                    <ExclamationCircleIcon v-if="((errors?.organization_name || errors?.organization_domain || errors?.region || errors?.package) && item.slug === 'organization') ||
+                        (errors?.voicemail_alternate_greet_id && item.slug === 'advanced')"
+                        class="ml-2 h-5 w-5 text-red-500" aria-hidden="true" />
 
                 </a>
             </nav>
@@ -24,7 +24,7 @@
                         <div class="flex justify-between items-center">
                             <h3 class="text-base font-semibold leading-6 text-gray-900">Organization Details</h3>
 
-                            <Toggle label="Status" v-model="form.voicemail_enabled" />
+                            <!-- <Toggle label="Status" v-model="" /> -->
 
                             <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
                         </div>
@@ -32,15 +32,16 @@
                         <div class="grid grid-cols-6 gap-6">
                             <div class="col-span-6 sm:col-span-3">
                                 <LabelInputRequired target="organization_name" label="Organization Name" class="truncate" />
-                                <InputField v-model="form.organization_name" type="text" name="organization_name" id="organization_name"
-                                    class="mt-2" :error="!!errors?.organization_name" />
+                                <InputField v-model="form.organization_name" type="text" name="organization_name"
+                                    id="organization_name" class="mt-2" :error="!!errors?.organization_name" />
                                 <div v-if="errors?.organization_name" class="mt-2 text-xs text-red-600">
                                     {{ errors.organization_name[0] }}
                                 </div>
                             </div>
 
                             <div class="col-span-6 sm:col-span-3">
-                                <LabelInputRequired target="organization_domain" label="Unique Organization Domain" class="truncate" />
+                                <LabelInputRequired target="organization_domain" label="Unique Organization Domain"
+                                    class="truncate" />
                                 <InputField v-model="form.organization_domain" type="text" name="organization_domain"
                                     id="organization_domain" class="mt-2" :error="!!errors?.organization_domain" />
                                 <div v-if="errors?.organization_domain" class="mt-2 text-xs text-red-600">
@@ -48,22 +49,36 @@
                                 </div>
                             </div>
 
-                            <div 
-                                class="col-span-6 sm:col-span-3">
-                                <LabelInputOptional label="Region" class="truncate mb-1" />
+                            <div class="col-span-6 sm:col-span-3">
+                                <LabelInputRequired label="Region" class="truncate mb-1" />
 
-                                <ComboBox :options="options.regions" :search="true" 
-                                    :placeholder="'Select region'"
-                                    @update:model-value="handleUpdateCopyToField" />
+                                <ComboBox :options="options.regions" :search="true" :placeholder="'Select region'" :error="errors?.region && errors.region.length > 0"
+                                    :selectedItem="form.region" @update:model-value="handleUpdateRegionField" />
+                                <div v-if="errors?.region" class="mt-2 text-xs text-red-600">
+                                    {{ errors.region[0] }}
+                                </div>
+                                <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region closest to your users
+                                    location. You won't be able to change it later.</p>
+
+                            </div>
+
+                            <div class="col-span-6 sm:col-span-3">
+                                <LabelInputRequired label="Package" class="truncate mb-1" />
+
+                                <ComboBox :options="options.packages" :search="true" :placeholder="'Select package'" :error="errors?.package && errors.package.length > 0"
+                                    :selectedItem="form.package" @update:model-value="handleUpdatePackageField" />
+                                <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
+                                    {{ errors.package[0] }}
+                                </div>
+                                <p class="mt-3 text-sm leading-6 text-gray-600">The selected package defines the available features.</p>
 
                             </div>
 
                             <div class="divide-y divide-gray-200 col-span-6">
 
-                                <Toggle 
-                                    label="Secure User Credentials"
+                                <Toggle label="Secure User Credentials"
                                     description="When enabled, users will receive a one-time link to access their app password instead of plain text."
-                                    v-model="form.voicemail_transcription_enabled" customClass="py-4" />
+                                    v-model="form.dont_send_user_credentials" customClass="py-4" />
 
                             </div>
 
@@ -78,81 +93,80 @@
                             class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
                             ref="saveButtonRef" :disabled="isSubmitting">
                             <Spinner :show="isSubmitting" />
-                            Save
+                            Next
                         </button>
                     </div>
                 </div>
             </div>
+        </form>
 
+        <div v-if="activeTab === 'advanced'" action="#" method="POST">
+            <div class="shadow sm:rounded-md">
+                <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
+                    <div>
+                        <h3 class="text-base font-semibold leading-6 text-gray-900">Advanced</h3>
+                        <p class="mt-1 text-sm text-gray-500">Set advanced settings for this voicemail
+                        </p>
+                    </div>
 
-            <div v-if="activeTab === 'advanced'" action="#" method="POST">
-                <div class="shadow sm:rounded-md">
-                    <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
-                        <div>
-                            <h3 class="text-base font-semibold leading-6 text-gray-900">Advanced</h3>
-                            <p class="mt-1 text-sm text-gray-500">Set advanced settings for this voicemail
-                            </p>
-                        </div>
-
-                        <div class="divide-y divide-gray-200 col-span-6">
+                    <div class="divide-y divide-gray-200 col-span-6">
 
-                            <Toggle label="Play Voicemail Tutorial"
-                                description="Provide user with a guided tutorial when accessing voicemail for the first time."
-                                v-model="form.voicemail_tutorial" customClass="py-4" />
+                        <Toggle label="Play Voicemail Tutorial"
+                            description="Provide user with a guided tutorial when accessing voicemail for the first time."
+                            v-model="form.voicemail_tutorial" customClass="py-4" />
 
-                            <Toggle v-if="options.permissions.manage_voicemail_recording_instructions"
-                                label="Play Recording Instructions" description='Play a prompt instructing callers to "Record your message after the tone. Stop
+                        <Toggle v-if="options.permissions.manage_voicemail_recording_instructions"
+                            label="Play Recording Instructions" description='Play a prompt instructing callers to "Record your message after the tone. Stop
                                         speaking to end the recording."'
-                                v-model="form.voicemail_play_recording_instructions" customClass="py-4" />
+                            v-model="form.voicemail_play_recording_instructions" customClass="py-4" />
 
-                        </div>
+                    </div>
 
-                        <div class="grid grid-cols-6 gap-6">
-                            <div class="col-span-3 sm:col-span-2">
-                                <div class="flex items-center gap-1">
-                                    <LabelInputOptional target="voicemail_alternate_greet_id" label="Announce Voicemail
+                    <div class="grid grid-cols-6 gap-6">
+                        <div class="col-span-3 sm:col-span-2">
+                            <div class="flex items-center gap-1">
+                                <LabelInputOptional target="voicemail_alternate_greet_id" label="Announce Voicemail
                                         Extension as" />
 
-                                    <Popover>
-                                        <template v-slot:popover-button>
-                                            <InformationCircleIcon class="h-5 w-5 text-blue-500" />
-                                        </template>
-                                        <template v-slot:popover-panel>
-                                            <div>The parameter allows you to override the voicemail extension number
-                                                spoken
-                                                by the system in the voicemail greeting. This controls system greetings
-                                                that
-                                                read back an extension number, not user recorded greetings.</div>
-                                        </template>
-                                    </Popover>
-                                </div>
+                                <Popover>
+                                    <template v-slot:popover-button>
+                                        <InformationCircleIcon class="h-5 w-5 text-blue-500" />
+                                    </template>
+                                    <template v-slot:popover-panel>
+                                        <div>The parameter allows you to override the voicemail extension number
+                                            spoken
+                                            by the system in the voicemail greeting. This controls system greetings
+                                            that
+                                            read back an extension number, not user recorded greetings.</div>
+                                    </template>
+                                </Popover>
+                            </div>
 
-                                <InputField v-model="form.voicemail_alternate_greet_id" type="text"
-                                    name="voicemail_alternate_greet_id" :error="!!errors?.voicemail_alternate_greet_id"
-                                    id="voicemail_alternate_greet_id" class="mt-2" />
-
-                                <div v-if="errors?.voicemail_alternate_greet_id" class="mt-2 text-xs text-red-600">
-                                    {{ errors.voicemail_alternate_greet_id[0] }}
-                                </div>
+                            <InputField v-model="form.voicemail_alternate_greet_id" type="text"
+                                name="voicemail_alternate_greet_id" :error="!!errors?.voicemail_alternate_greet_id"
+                                id="voicemail_alternate_greet_id" class="mt-2" />
 
+                            <div v-if="errors?.voicemail_alternate_greet_id" class="mt-2 text-xs text-red-600">
+                                {{ errors.voicemail_alternate_greet_id[0] }}
                             </div>
 
                         </div>
 
-
-                    </div>
-                    <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
-                        <button type="submit"
-                            class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
                     </div>
+
+
+                </div>
+                <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
+                    <button type="submit"
+                        class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
                 </div>
             </div>
-        </form>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { usePage } from '@inertiajs/vue3';
 
 
@@ -175,27 +189,36 @@ import { BuildingOfficeIcon } from '@heroicons/vue/24/outline';
 const props = defineProps({
     options: Object,
     isSubmitting: Boolean,
+    activeTab: String,
     errors: Object,
 });
 
 
 // Initialize activeTab with the currently active tab from props
-const activeTab = ref(props.options.navigation.find(item => item.slug)?.slug || props.options.navigation[0].slug);
+const activeTab = ref(props.activeTab || props.options.navigation[0].slug);
+
+// Watch for changes in the activeTab prop and update the local activeTab
+watch(
+    () => props.activeTab,
+    (newValue) => {
+        activeTab.value = newValue || props.options.navigation[0].slug;
+    }
+);
 
 const setActiveTab = (tabSlug) => {
-    activeTab.value = tabSlug;
+    // activeTab.value = tabSlug;
 };
 
 const showPassword = ref(false);
 
 const togglePasswordVisibility = () => {
-  showPassword.value = !showPassword.value;
-  const passwordInput = document.getElementById("voicemail_password");
-  if (showPassword.value) {
-    passwordInput.style.webkitTextSecurity = "none"; // Show text
-  } else {
-    passwordInput.style.webkitTextSecurity = "disc"; // Mask text
-  }
+    showPassword.value = !showPassword.value;
+    const passwordInput = document.getElementById("voicemail_password");
+    if (showPassword.value) {
+        passwordInput.style.webkitTextSecurity = "none"; // Show text
+    } else {
+        passwordInput.style.webkitTextSecurity = "disc"; // Mask text
+    }
 };
 
 // Map icon names to their respective components
@@ -208,20 +231,12 @@ const iconComponents = {
 const page = usePage();
 
 const form = reactive({
-    voicemail_enabled: true,
     organization_name: props.options.model.domain_description,
-    // voicemail_id: props.options.voicemail.voicemail_id,
-    // voicemail_password: props.options.voicemail.voicemail_password,
-    // voicemail_mail_to: null,
-    // voicemail_description: null,
-    // voicemail_transcription_enabled: props.options.voicemail.voicemail_transcription_enabled === "true",
-    // voicemail_email_attachment: props.options.voicemail.voicemail_file === "attach",
-    // voicemail_delete: props.options.voicemail.voicemail_local_after_email === "false",
-    // voicemail_tutorial: props.options.voicemail.voicemail_tutorial === "true",
-    // voicemail_play_recording_instructions: props.options.voicemail.voicemail_recording_instructions === "true",
-    // voicemail_copies: null,
-    // voicemail_alternate_greet_id: null,
-    // voicemail_enabled: props.options.voicemail.voicemail_enabled === "true",
+    organization_domain: props.options.suggested_ringotel_domain,
+    region: props.options.default_region,
+    package: props.options.default_package,
+    dont_send_user_credentials: props.options.dont_send_user_credentials === "true",
+    domain_uuid: props.options.model.domain_uuid,
     _token: page.props.csrf_token,
 })
 
@@ -231,5 +246,13 @@ const submitForm = () => {
     emits('submit', form); // Emit the event with the form data
 }
 
+const handleUpdateRegionField = (selected) => {
+    form.region = selected.value;
+}
+
+const handleUpdatePackageField = (selected) => {
+    form.package = selected.value;
+}
+
 
 </script>
diff --git a/routes/web.php b/routes/web.php
index 581524fd..9b7513fc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -218,7 +218,7 @@
     //Apps
     Route::resource('apps', AppsController::class);
     Route::post('apps/item-options', [AppsController::class, 'getItemOptions'])->name('apps.item.options');
-    Route::post('/apps/organization/create', [AppsController::class, 'createOrganization'])->name('appsCreateOrganization');
+    Route::post('/apps/organization/create', [AppsController::class, 'createOrganization'])->name('apps.organization.create');
     Route::delete('/apps/organization/{domain}', [AppsController::class, 'destroyOrganization'])->name('appsDestroyOrganization');
     Route::get('/apps/organization/', [AppsController::class, 'getOrganizations'])->name('appsGetOrganizations');
     Route::post('/apps/organization/sync', [AppsController::class, 'syncOrganizations'])->name('appsSyncOrganizations');

From e2ef75cea6b9d2cc0218bfe758937bc312849feb Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Tue, 17 Dec 2024 23:45:07 -0800
Subject: [PATCH 04/19] added connection settings modal

---
 app/Http/Controllers/AppsController.php       |  27 +-
 .../StoreRingotelActivationRequest.php        |   6 +
 app/helpers.php                               |  70 ++---
 resources/js/Pages/RingotelAppSettings.vue    |   5 +-
 .../forms/CreateRingotelOrgForm.vue           | 220 +++++++---------
 .../general/RingotelConnections.vue           | 246 ++++++++++++++++++
 .../modal/RingotelConnectionModal.vue         | 224 ++++++++++++++++
 7 files changed, 629 insertions(+), 169 deletions(-)
 create mode 100644 resources/js/Pages/components/general/RingotelConnections.vue
 create mode 100644 resources/js/Pages/components/modal/RingotelConnectionModal.vue

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index a323a6af..cf0a258e 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -235,10 +235,15 @@ public function getItemOptions()
             $permissions = $this->getUserPermissions();
 
             $suggested_ringotel_domain = strtolower(str_replace(' ', '', $model->domain_description));
-            $region = get_domain_setting('organization_region');
-            $package = get_domain_setting('package');
+            $region = get_domain_setting('organization_region', $model->domain_uuid);
+            $package = get_domain_setting('package', $model->domain_uuid);
             $dont_send_user_credentials = get_domain_setting('dont_send_user_credentials', $model->domain_uuid);
+            $org_id = get_domain_setting('org_id', $model->domain_uuid);
 
+            logger($org_id);
+            if (!$org_id) {
+                $connections = [];
+            }
 
             // Construct the itemOptions object
             $itemOptions = [
@@ -252,6 +257,7 @@ public function getItemOptions()
                 'default_region' => $region,
                 'default_package' => $package,
                 'dont_send_user_credentials' => $dont_send_user_credentials,
+                'connections' => $connections,
                 // Define options for other fields as needed
             ];
 
@@ -285,7 +291,6 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
         $this->ringotelApiService = $ringotelApiService;
 
         $inputs = $request->validated();
-        logger($inputs);
 
         try {
             // Send API request to create organization 
@@ -305,8 +310,6 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
                 }
             }
 
-            logger($organization);
-
             // Save the new record
             $domainSetting = DomainSettings::create([
                 'domain_uuid' => $inputs['domain_uuid'],
@@ -317,11 +320,20 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
                 'domain_setting_enabled' => true,
             ]);
 
+            $domainSetting = DomainSettings::create([
+                'domain_uuid' => $inputs['domain_uuid'],
+                'domain_setting_category' => 'mobile_apps',
+                'domain_setting_subcategory' => 'dont_send_user_credentials',
+                'domain_setting_name' => 'boolean',
+                'domain_setting_value' => $inputs['dont_send_user_credentials'],
+                'domain_setting_enabled' => true,
+                'domain_setting_description' => "Don't include user credentials in the welcome email"
+            ]);
+
             // Return a JSON response indicating success
             return response()->json([
                 'messages' => ['success' => ['Organization succesfully activated']]
             ], 201);
-
         } catch (\Exception $e) {
             logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
             // Handle any other exception that may occur
@@ -331,9 +343,6 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
             ], 500);  // 500 Internal Server Error for any other errors
         }
 
-        logger($organization);
-        return;
-
         //dd(isset($response['error']));
 
 
diff --git a/app/Http/Requests/StoreRingotelActivationRequest.php b/app/Http/Requests/StoreRingotelActivationRequest.php
index d6fe6b45..59b2b2b7 100644
--- a/app/Http/Requests/StoreRingotelActivationRequest.php
+++ b/app/Http/Requests/StoreRingotelActivationRequest.php
@@ -45,6 +45,12 @@ public function prepareForValidation(): void
             $this->merge(['package' => null]);
         }
 
+        if ($this->has('dont_send_user_credentials')) {
+            $this->merge([
+                'dont_send_user_credentials' => $this->dont_send_user_credentials ? 'true' : 'false',
+            ]);
+        }
+
     }
 
     /**
diff --git a/app/helpers.php b/app/helpers.php
index 5724370b..26e41e0d 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -108,41 +108,41 @@ function getFusionPBXPreviousURL($previous_url)
     }
 }
 
-if (!function_exists('appsStoreOrganizationDetails')) {
-    function appsStoreOrganizationDetails(Request $request)
-    {
-        // Delete any existing records
-        DB::table('v_domain_settings')
-            ->where('domain_uuid', '=', $request->organization_uuid)
-            ->delete();
-
-        // Store new records
-        $domainSetting1 = DomainSettings::create([
-            'domain_uuid' => $request->organization_uuid,
-            'domain_setting_category' => 'app shell',
-            'domain_setting_subcategory' => 'org_id',
-            'domain_setting_name' => 'text',
-            'domain_setting_value' => $request->org_id,
-            'domain_setting_enabled' => true,
-        ]);
-
-        $domainSetting2 = DomainSettings::create([
-            'domain_uuid' => $request->organization_uuid,
-            'domain_setting_category' => 'mobile_apps',
-            'domain_setting_subcategory' => 'dont_send_user_credentials',
-            'domain_setting_name' => 'boolean',
-            'domain_setting_value' => $request->dont_send_user_credentials,
-            'domain_setting_enabled' => true,
-            'domain_setting_description' => "Don't include user credentials in the welcome email"
-        ]);
-
-        if ($domainSetting1->save() && $domainSetting2->save()/* && $domainSetting3->save()*/) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-}
+// if (!function_exists('appsStoreOrganizationDetails')) {
+//     function appsStoreOrganizationDetails(Request $request)
+//     {
+//         // Delete any existing records
+//         DB::table('v_domain_settings')
+//             ->where('domain_uuid', '=', $request->organization_uuid)
+//             ->delete();
+
+//         // Store new records
+//         $domainSetting1 = DomainSettings::create([
+//             'domain_uuid' => $request->organization_uuid,
+//             'domain_setting_category' => 'app shell',
+//             'domain_setting_subcategory' => 'org_id',
+//             'domain_setting_name' => 'text',
+//             'domain_setting_value' => $request->org_id,
+//             'domain_setting_enabled' => true,
+//         ]);
+
+//         $domainSetting2 = DomainSettings::create([
+//             'domain_uuid' => $request->organization_uuid,
+//             'domain_setting_category' => 'mobile_apps',
+//             'domain_setting_subcategory' => 'dont_send_user_credentials',
+//             'domain_setting_name' => 'boolean',
+//             'domain_setting_value' => $request->dont_send_user_credentials,
+//             'domain_setting_enabled' => true,
+//             'domain_setting_description' => "Don't include user credentials in the welcome email"
+//         ]);
+
+//         if ($domainSetting1->save() && $domainSetting2->save()/* && $domainSetting3->save()*/) {
+//             return true;
+//         } else {
+//             return false;
+//         }
+//     }
+// }
 
 if (!function_exists('appsGetOrganizationDetails')) {
     function appsGetOrganizationDetails($domain_uuid)
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index d6e9d5d4..44890cb6 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -186,6 +186,9 @@
 
     <Notification :show="notificationShow" :type="notificationType" :messages="notificationMessages"
         @update:show="hideNotification" />
+    
+        <!-- <RingotelConnectionModal :greeting="selectedGreeting" :show="true" :loading="isGreetingUpdating"
+    @confirm="handleGreetingUpdate" @close="showConnectionModal = false" /> -->
 </template>
 
 <script setup>
@@ -213,7 +216,7 @@ import Badge from "@generalComponents/Badge.vue";
 import LinkOffIcon from "@icons/LinkOffIcon.vue";
 import { PowerIcon } from "@heroicons/vue/24/outline";
 
-
+import RingotelConnectionModal from "./components/modal/RingotelConnectionModal.vue";
 
 const page = usePage()
 const loading = ref(false)
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index fc6de7e4..e4c137a3 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -17,154 +17,129 @@
             </nav>
         </aside>
 
-        <form @submit.prevent="submitForm" class="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
-            <div v-if="activeTab === 'organization'">
-                <div class="shadow sm:rounded-md">
-                    <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
-                        <div class="flex justify-between items-center">
-                            <h3 class="text-base font-semibold leading-6 text-gray-900">Organization Details</h3>
+        <div class="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
+            <form @submit.prevent="submitForm">
+                <div v-if="activeTab === 'organization'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Organization Details</h3>
 
-                            <!-- <Toggle label="Status" v-model="" /> -->
+                                <!-- <Toggle label="Status" v-model="" /> -->
 
-                            <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
-                        </div>
+                                <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                            </div>
 
-                        <div class="grid grid-cols-6 gap-6">
-                            <div class="col-span-6 sm:col-span-3">
-                                <LabelInputRequired target="organization_name" label="Organization Name" class="truncate" />
-                                <InputField v-model="form.organization_name" type="text" name="organization_name"
-                                    id="organization_name" class="mt-2" :error="!!errors?.organization_name" />
-                                <div v-if="errors?.organization_name" class="mt-2 text-xs text-red-600">
-                                    {{ errors.organization_name[0] }}
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="organization_name" label="Organization Name"
+                                        class="truncate" />
+                                    <InputField v-model="form.organization_name" type="text" name="organization_name"
+                                        id="organization_name" class="mt-2" :error="!!errors?.organization_name" />
+                                    <div v-if="errors?.organization_name" class="mt-2 text-xs text-red-600">
+                                        {{ errors.organization_name[0] }}
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div class="col-span-6 sm:col-span-3">
-                                <LabelInputRequired target="organization_domain" label="Unique Organization Domain"
-                                    class="truncate" />
-                                <InputField v-model="form.organization_domain" type="text" name="organization_domain"
-                                    id="organization_domain" class="mt-2" :error="!!errors?.organization_domain" />
-                                <div v-if="errors?.organization_domain" class="mt-2 text-xs text-red-600">
-                                    {{ errors.organization_domain[0] }}
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="organization_domain" label="Unique Organization Domain"
+                                        class="truncate" />
+                                    <InputField v-model="form.organization_domain" type="text" name="organization_domain"
+                                        id="organization_domain" class="mt-2" :error="!!errors?.organization_domain" />
+                                    <div v-if="errors?.organization_domain" class="mt-2 text-xs text-red-600">
+                                        {{ errors.organization_domain[0] }}
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div class="col-span-6 sm:col-span-3">
-                                <LabelInputRequired label="Region" class="truncate mb-1" />
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired label="Region" class="truncate mb-1" />
+
+                                    <ComboBox :options="options.regions" :search="true" :placeholder="'Select region'"
+                                        :error="errors?.region && errors.region.length > 0" :selectedItem="form.region"
+                                        @update:model-value="handleUpdateRegionField" />
+                                    <div v-if="errors?.region" class="mt-2 text-xs text-red-600">
+                                        {{ errors.region[0] }}
+                                    </div>
+                                    <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region closest to your users
+                                        location. You won't be able to change it later.</p>
 
-                                <ComboBox :options="options.regions" :search="true" :placeholder="'Select region'" :error="errors?.region && errors.region.length > 0"
-                                    :selectedItem="form.region" @update:model-value="handleUpdateRegionField" />
-                                <div v-if="errors?.region" class="mt-2 text-xs text-red-600">
-                                    {{ errors.region[0] }}
                                 </div>
-                                <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region closest to your users
-                                    location. You won't be able to change it later.</p>
 
-                            </div>
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired label="Package" class="truncate mb-1" />
 
-                            <div class="col-span-6 sm:col-span-3">
-                                <LabelInputRequired label="Package" class="truncate mb-1" />
+                                    <ComboBox :options="options.packages" :search="true" :placeholder="'Select package'"
+                                        :error="errors?.package && errors.package.length > 0" :selectedItem="form.package"
+                                        @update:model-value="handleUpdatePackageField" />
+                                    <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
+                                        {{ errors.package[0] }}
+                                    </div>
+                                    <p class="mt-3 text-sm leading-6 text-gray-600">The selected package defines the
+                                        available features.</p>
 
-                                <ComboBox :options="options.packages" :search="true" :placeholder="'Select package'" :error="errors?.package && errors.package.length > 0"
-                                    :selectedItem="form.package" @update:model-value="handleUpdatePackageField" />
-                                <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
-                                    {{ errors.package[0] }}
                                 </div>
-                                <p class="mt-3 text-sm leading-6 text-gray-600">The selected package defines the available features.</p>
 
-                            </div>
+                                <div class="divide-y divide-gray-200 col-span-6">
 
-                            <div class="divide-y divide-gray-200 col-span-6">
+                                    <Toggle label="Secure User Credentials"
+                                        description="When enabled, users will receive a one-time link to access their app password instead of plain text."
+                                        v-model="form.dont_send_user_credentials" customClass="py-4" />
 
-                                <Toggle label="Secure User Credentials"
-                                    description="When enabled, users will receive a one-time link to access their app password instead of plain text."
-                                    v-model="form.dont_send_user_credentials" customClass="py-4" />
+                                </div>
 
-                            </div>
 
 
+                            </div>
 
                         </div>
-
-                    </div>
-                    <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
-
-                        <button type="submit"
-                            class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
-                            ref="saveButtonRef" :disabled="isSubmitting">
-                            <Spinner :show="isSubmitting" />
-                            Next
-                        </button>
+                        <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
+
+                            <button type="submit"
+                                class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
+                                ref="saveButtonRef" :disabled="isSubmitting">
+                                <Spinner :show="isSubmitting" />
+                                Next
+                            </button>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </form>
-
-        <div v-if="activeTab === 'advanced'" action="#" method="POST">
-            <div class="shadow sm:rounded-md">
-                <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
-                    <div>
-                        <h3 class="text-base font-semibold leading-6 text-gray-900">Advanced</h3>
-                        <p class="mt-1 text-sm text-gray-500">Set advanced settings for this voicemail
-                        </p>
-                    </div>
-
-                    <div class="divide-y divide-gray-200 col-span-6">
-
-                        <Toggle label="Play Voicemail Tutorial"
-                            description="Provide user with a guided tutorial when accessing voicemail for the first time."
-                            v-model="form.voicemail_tutorial" customClass="py-4" />
-
-                        <Toggle v-if="options.permissions.manage_voicemail_recording_instructions"
-                            label="Play Recording Instructions" description='Play a prompt instructing callers to "Record your message after the tone. Stop
-                                        speaking to end the recording."'
-                            v-model="form.voicemail_play_recording_instructions" customClass="py-4" />
-
-                    </div>
+            </form>
 
-                    <div class="grid grid-cols-6 gap-6">
-                        <div class="col-span-3 sm:col-span-2">
-                            <div class="flex items-center gap-1">
-                                <LabelInputOptional target="voicemail_alternate_greet_id" label="Announce Voicemail
-                                        Extension as" />
-
-                                <Popover>
-                                    <template v-slot:popover-button>
-                                        <InformationCircleIcon class="h-5 w-5 text-blue-500" />
-                                    </template>
-                                    <template v-slot:popover-panel>
-                                        <div>The parameter allows you to override the voicemail extension number
-                                            spoken
-                                            by the system in the voicemail greeting. This controls system greetings
-                                            that
-                                            read back an extension number, not user recorded greetings.</div>
-                                    </template>
-                                </Popover>
+            <div v-if="activeTab === 'connections'" action="#" method="POST">
+                <div class="shadow sm:rounded-md">
+                    <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                        <!-- <div>
+                            <h3 class="text-base font-semibold leading-6 text-gray-900">Keys</h3>
+                            <p class="mt-1 text-sm text-gray-500">Ensure calls are routed to the right team every time.
+                                Select a routing option below to fit your business needs.</p>
+                        </div> -->
+
+                        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                            <div class="sm:col-span-full space-y-3">
+                                <!-- <LabelInputOptional :target="'destination_actions'" :label="'Send calls to'" /> -->
+                                <RingotelConnections v-model="props.options.connections"
+                                    :routingTypes="options.routing_types" :optionsUrl="options.routes.get_routing_options"
+                                    @add-connection="handleAddConnection" />
                             </div>
 
-                            <InputField v-model="form.voicemail_alternate_greet_id" type="text"
-                                name="voicemail_alternate_greet_id" :error="!!errors?.voicemail_alternate_greet_id"
-                                id="voicemail_alternate_greet_id" class="mt-2" />
-
-                            <div v-if="errors?.voicemail_alternate_greet_id" class="mt-2 text-xs text-red-600">
-                                {{ errors.voicemail_alternate_greet_id[0] }}
-                            </div>
 
                         </div>
-
                     </div>
-
-
-                </div>
-                <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
-                    <button type="submit"
-                        class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
                 </div>
             </div>
         </div>
+
+
+
     </div>
+
+    <!-- <RingotelConnectionModal :greeting="selectedGreeting" :show="showConnectionModal" :loading="isGreetingUpdating"
+    @confirm="handleGreetingUpdate" @close="showConnectionModal = false" /> -->
+
+
 </template>
 
+
 <script setup>
 import { reactive, ref, watch } from "vue";
 import { usePage } from '@inertiajs/vue3';
@@ -184,7 +159,8 @@ import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui
 import { InformationCircleIcon } from "@heroicons/vue/24/outline";
 import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
 import { BuildingOfficeIcon } from '@heroicons/vue/24/outline';
-
+import RingotelConnections from "../general/RingotelConnections.vue";
+import RingotelConnectionModal from "../modal/RingotelConnectionModal.vue";
 
 const props = defineProps({
     options: Object,
@@ -209,17 +185,8 @@ const setActiveTab = (tabSlug) => {
     // activeTab.value = tabSlug;
 };
 
-const showPassword = ref(false);
+const showConnectionModal = ref(false);
 
-const togglePasswordVisibility = () => {
-    showPassword.value = !showPassword.value;
-    const passwordInput = document.getElementById("voicemail_password");
-    if (showPassword.value) {
-        passwordInput.style.webkitTextSecurity = "none"; // Show text
-    } else {
-        passwordInput.style.webkitTextSecurity = "disc"; // Mask text
-    }
-};
 
 // Map icon names to their respective components
 const iconComponents = {
@@ -254,5 +221,10 @@ const handleUpdatePackageField = (selected) => {
     form.package = selected.value;
 }
 
+const handleAddConnection = (selected) => {
+    console.log('add connection');
+    showConnectionModal.value = true;
+}
+
 
 </script>
diff --git a/resources/js/Pages/components/general/RingotelConnections.vue b/resources/js/Pages/components/general/RingotelConnections.vue
new file mode 100644
index 00000000..b4dc6567
--- /dev/null
+++ b/resources/js/Pages/components/general/RingotelConnections.vue
@@ -0,0 +1,246 @@
+<template>
+    <div class="grid grid-cols-12 gap-6">
+
+        <div class="col-span-12">
+
+            <div class="overflow-visible">
+                <div class="inline-block min-w-full py-2 align-middle">
+                    <table class="min-w-full divide-y divide-gray-300">
+                        <thead>
+                            <tr>
+                                <th scope="col"
+                                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">
+                                    Name</th>
+                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                    Domain/Port
+                                </th>
+                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                                    <span class="sr-only">Edit</span>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-200">
+                            <!-- Check if connections array is empty -->
+                            <tr v-if="connections.length === 0">
+                                <td colspan="6" class="py-4 text-center text-sm italic text-gray-500">
+                                    No connections available.
+                                </td>
+                            </tr>
+                            <tr v-for="(option, index) in connections" :key="index">
+                                <td class=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
+                                    {{ connections[index].ivr_menu_option_digits }}</td>
+                                <td class="px-3 py-4 text-sm text-gray-500">{{ connections[index].key_type_display }}</td>
+                                <td class="px-3 py-4 text-sm text-gray-500">{{ connections[index].key_name }}</td>
+                                <td class="relative py-2 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                                    <Menu as="div" class="relative inline-block text-left">
+                                        <div>
+                                            <MenuButton
+                                                class="flex items-center rounded-full bg-gray-100 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
+                                                <span class="sr-only">Open options</span>
+                                                <EllipsisVerticalIcon
+                                                    class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 active:bg-gray-300 active:duration-150 cursor-pointer"
+                                                    aria-hidden="true" />
+                                            </MenuButton>
+                                        </div>
+
+                                        <transition enter-active-class="transition ease-out duration-100"
+                                            enter-from-class="transform opacity-0 scale-95"
+                                            enter-to-class="transform opacity-100 scale-100"
+                                            leave-active-class="transition ease-in duration-75"
+                                            leave-from-class="transform opacity-100 scale-100"
+                                            leave-to-class="transform opacity-0 scale-95">
+                                            <MenuItems
+                                                class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                                                <div class="py-1">
+                                                    <MenuItem v-slot="{ active }">
+                                                    <a href="#" @click.prevent="handleEdit(index)"
+                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Edit</a>
+                                                    </MenuItem>
+                                                    <MenuItem v-slot="{ active }">
+                                                    <a href="#" @click.prevent="handleDelete(index)"
+                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Delete</a>
+                                                    </MenuItem>
+
+                                                </div>
+                                            </MenuItems>
+                                        </transition>
+                                    </Menu>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div
+            class="col-span-full flex justify-center bg-gray-100 px-4 py-4 text-center text-sm font-medium text-indigo-500 hover:text-indigo-700 sm:rounded-b-lg">
+            <button href="#" @click.prevent="handleAddConnection" class="flex items-center gap-2">
+                <PlusIcon class="h-6 w-6 text-black-500 hover:text-black-900 active:h-8 active:w-8 " />
+                <span>
+                    Add new connection
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { PlusIcon } from "@heroicons/vue/24/solid";
+import Toggle from "@generalComponents/Toggle.vue";
+
+import ComboBox from "../general/ComboBox.vue";
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline';
+import InputField from "../general/InputField.vue";
+
+
+const props = defineProps({
+    modelValue: [Object, null],
+    routingTypes: [Object, null],
+    optionsUrl: String,
+});
+
+
+const emit = defineEmits(['update:model-value', 'add-connection', 'edit', 'delete'])
+
+// Create a local reactive copy of the modelValue
+const connections = ref([...props.modelValue]);
+
+
+console.log(connections.value);
+
+const loading = ref(false)
+
+// Watch for changes to the modelValue from the parent and update local state
+watch(() => props.modelValue, (newVal) => {
+    connections.value = [...newVal];
+});
+
+const handleAddConnection = () => emit('add-connection');
+
+const handleEdit = (index) => {
+    emit('edit', index); // Emit the edit event with the index
+};
+
+const handleDelete = (index) => {
+    emit('delete', index); // Emit the delete event with the index
+};
+
+// Initialize connections and fetch typeOptions
+// if (props.selectedItems) {
+//     props.selectedItems.forEach((item, index) => {
+//         connections.value.push({
+//             type: item.type || null,
+//             typeOptions: [],  // Initially empty
+//             option: item.option || null,
+//             extension: item.extension || null,
+//         });
+
+//         // If type is available, fetch the options for that type
+//         if (item.type) {
+//             fetchTypeOptionsForItem(item.type, index);
+//         }
+//     });
+// }
+
+
+// Fetch new options for the selected type using Axios
+function fetchRoutingTypeOptions(newValue, index) {
+
+    connections.value[index].type = newValue.value;
+
+    // Reset the selected option when type changes
+    connections.value[index].option = null;
+
+    axios.post(props.optionsUrl, { 'category': newValue.value })
+        .then((response) => {
+            // console.log(response.data);
+            connections.value[index].typeOptions = response.data.options;
+        }).catch((error) => {
+            connections.value[index].typeOptions = null;
+        });
+}
+
+function fetchTypeOptionsForItem(type, index) {
+    axios.post(props.optionsUrl, { 'category': type })
+        .then((response) => {
+            connections.value[index].typeOptions = response.data.options;
+
+            // Automatically set the selected option if the option exists in the fetched options
+            const selectedOption = connections.value[index].option;
+            if (selectedOption) {
+                const match = response.data.options.find(option => option.value === selectedOption);
+                if (match) {
+                    connections.value[index].option = match.value;
+                } else {
+                    connections.value[index].option = null; // Reset if no match found
+                }
+            }
+        }).catch(() => {
+            connections.value[index].typeOptions = null;
+            connections.value[index].option = null;  // Reset option in case of an error
+        });
+}
+
+// Emit updates to the parent whenever routingOptions changes
+const updateParent = () => {
+    emit('update:modelValue', routingOptions.value);
+};
+
+// Function to modify routing options
+const addRoutingOption = () => {
+    routingOptions.value.push({ type: null, typeOptions: [], option: null });
+    updateParent(); // Notify the parent about the changes
+};
+
+const removeRoutingOption = (index) => {
+    routingOptions.value.splice(index, 1);
+    updateParent();
+};
+
+const updateRoutingOption = (value, index) => {
+    routingOptions.value[index] = value;
+    updateParent();
+};
+
+
+// // Update connections and emit updated model value
+// function updateconnections(newValue, index) {
+//     connections.value[index].option = newValue.value;
+//     connections.value[index].extension = newValue.extension;
+
+//     // Prepare the updated options
+//     const updatedOptions = connections.value.map(({ type, option, extension }) => {
+//         return { type, option, extension };
+//     });
+
+//     emit('update:model-value', updatedOptions);
+// }
+
+
+// // Add a new routing option
+// const addRoutingOption = () => {
+//     connections.value.push({
+//         type: null,
+//         typeOptions: [],
+//         option: null,
+//     });
+// };
+
+// const removeRoutingOption = (index) => {
+//     // console.log(connections.value);
+//     connections.value.splice(index, 1);
+
+//     // Reassign the array to force Vue to track reactivity properly
+//     connections.value = [...connections.value];
+
+//     const updatedOptions = connections.value.map(({ type, option }) => {
+//         return { type, option };
+//     });
+//     // console.log(updatedOptions);
+//     emit('update:model-value', updatedOptions);
+// }
+
+</script>
diff --git a/resources/js/Pages/components/modal/RingotelConnectionModal.vue b/resources/js/Pages/components/modal/RingotelConnectionModal.vue
new file mode 100644
index 00000000..a910f9bc
--- /dev/null
+++ b/resources/js/Pages/components/modal/RingotelConnectionModal.vue
@@ -0,0 +1,224 @@
+<template>
+    <TransitionRoot as="div" :show="show">
+        <Dialog as="div" class="relative z-10">
+            <TransitionChild as="div" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
+                leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+            </TransitionChild>
+            <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                    <TransitionChild as="div" enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+
+                        <DialogPanel
+                            class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl  sm:p-6">
+                            <div>
+
+                                <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
+
+                                    <div class="space-y-6 sm:px-6 lg:col-span-12 lg:px-0">
+
+
+                                                <div class="flex justify-between items-center">
+                                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Connection
+                                                        Details</h3>
+
+                                                    <!-- <Toggle label="Status" v-model="" /> -->
+
+                                                    <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                                                </div>
+                                                <div class="col-span-6 sm:col-span-6">
+                                                        <LabelInputRequired target="connection_name"
+                                                            label="Connection Name" class="truncate" />
+                                                        <InputField v-model="form.connection_name" type="text"
+                                                            name="connection_name" id="connection_name" class="mt-2"
+                                                            :error="!!errors?.connection_name" />
+                                                        <div v-if="errors?.connection_name"
+                                                            class="mt-2 text-xs text-red-600">
+                                                            {{ errors.connection_name[0] }}
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-span-6 sm:col-span-3">
+                                                        <LabelInputRequired target="connection_name"
+                                                            label="Connection Name" class="truncate" />
+                                                        <InputField v-model="form.connection_name" type="text"
+                                                            name="connection_name" id="connection_name" class="mt-2"
+                                                            :error="!!errors?.connection_name" />
+                                                        <div v-if="errors?.connection_name"
+                                                            class="mt-2 text-xs text-red-600">
+                                                            {{ errors.connection_name[0] }}
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-span-6 sm:col-span-3">
+                                                        <LabelInputRequired target="connection_name"
+                                                            label="Connection Name" class="truncate" />
+                                                        <InputField v-model="form.connection_name" type="text"
+                                                            name="connection_name" id="connection_name" class="mt-2"
+                                                            :error="!!errors?.connection_name" />
+                                                        <div v-if="errors?.connection_name"
+                                                            class="mt-2 text-xs text-red-600">
+                                                            {{ errors.connection_name[0] }}
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-span-6 sm:col-span-3">
+                                                        <LabelInputRequired target="connection_name"
+                                                            label="Connection Name" class="truncate" />
+                                                        <InputField v-model="form.connection_name" type="text"
+                                                            name="connection_name" id="connection_name" class="mt-2"
+                                                            :error="!!errors?.connection_name" />
+                                                        <div v-if="errors?.connection_name"
+                                                            class="mt-2 text-xs text-red-600">
+                                                            {{ errors.connection_name[0] }}
+                                                        </div>
+                                                    </div>
+                                                    
+
+                                                <div class="grid grid-cols-6 gap-6">
+                                                    <div class="col-span-6 sm:col-span-3">
+                                                        <LabelInputRequired target="connection_name"
+                                                            label="Connection Name" class="truncate" />
+                                                        <InputField v-model="form.connection_name" type="text"
+                                                            name="connection_name" id="connection_name" class="mt-2"
+                                                            :error="!!errors?.connection_name" />
+                                                        <div v-if="errors?.connection_name"
+                                                            class="mt-2 text-xs text-red-600">
+                                                            {{ errors.connection_name[0] }}
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="col-span-6 sm:col-span-3">
+                                                        <LabelInputRequired target="organization_domain"
+                                                            label="Unique Organization Domain" class="truncate" />
+                                                        <InputField v-model="form.organization_domain" type="text"
+                                                            name="organization_domain" id="organization_domain" class="mt-2"
+                                                            :error="!!errors?.organization_domain" />
+                                                        <div v-if="errors?.organization_domain"
+                                                            class="mt-2 text-xs text-red-600">
+                                                            {{ errors.organization_domain[0] }}
+                                                        </div>
+                                                    </div>
+
+                                                    <!-- <div class="col-span-6 sm:col-span-3">
+                                                        <LabelInputRequired label="Region" class="truncate mb-1" />
+
+                                                        <ComboBox :options="options.regions" :search="true"
+                                                            :placeholder="'Select region'"
+                                                            :error="errors?.region && errors.region.length > 0"
+                                                            :selectedItem="form.region"
+                                                            @update:model-value="handleUpdateRegionField" />
+                                                        <div v-if="errors?.region" class="mt-2 text-xs text-red-600">
+                                                            {{ errors.region[0] }}
+                                                        </div>
+                                                        <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region
+                                                            closest to your users
+                                                            location. You won't be able to change it later.</p>
+
+                                                    </div> -->
+
+                                                    <!-- <div class="col-span-6 sm:col-span-3">
+                                                        <LabelInputRequired label="Package" class="truncate mb-1" />
+
+                                                        <ComboBox :options="options.packages" :search="true"
+                                                            :placeholder="'Select package'"
+                                                            :error="errors?.package && errors.package.length > 0"
+                                                            :selectedItem="form.package"
+                                                            @update:model-value="handleUpdatePackageField" />
+                                                        <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
+                                                            {{ errors.package[0] }}
+                                                        </div>
+                                                        <p class="mt-3 text-sm leading-6 text-gray-600">The selected package
+                                                            defines the
+                                                            available features.</p>
+
+                                                    </div> -->
+
+                                                    <!-- <div class="divide-y divide-gray-200 col-span-6">
+
+                                                        <Toggle label="Secure User Credentials"
+                                                            description="When enabled, users will receive a one-time link to access their app password instead of plain text."
+                                                            v-model="form.dont_send_user_credentials" customClass="py-4" />
+
+                                                    </div> -->
+
+
+
+                                                </div>
+
+                                            
+
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                                <button type="button"
+                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
+                                    @click="updateGreeting">
+                                    Save
+                                    <Spinner class="ml-2" :color="'text-gray-700'" :show="loading" />
+                                </button>
+                                <button type="button"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
+                                    @click="emit('close')">Cancel</button>
+                            </div>
+                        </DialogPanel>
+
+
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { usePage } from '@inertiajs/vue3';
+
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
+import Spinner from "@generalComponents/Spinner.vue";
+import LabelInputOptional from "../general/LabelInputOptional.vue";
+import InputField from "../general/InputField.vue";
+import ComboBox from "../general/ComboBox.vue";
+import LabelInputRequired from "../general/LabelInputRequired.vue";
+
+const page = usePage();
+
+const emit = defineEmits(['close', 'confirm'])
+
+const props = defineProps({
+    show: Boolean,
+    greeting: Object,
+    loading: {
+        type: Boolean,
+        default: false, // Default value for loading
+    },
+});
+
+const errors = ref(null);
+
+
+watch(() => props.greeting, (newGreeting) => {
+    greeting_name.value = newGreeting?.name || '';
+});
+
+const form = reactive({
+    connection_name: null,
+    organization_domain: null,
+    region: null,
+    package: null,
+    // dont_send_user_credentials: props.options.dont_send_user_credentials === "true",
+    domain_uuid: null,
+    _token: page.props.csrf_token,
+})
+
+const updateGreeting = () => {
+    emit('confirm', { ...props.greeting, name: greeting_name.value });
+    emit('close');
+};
+
+</script>
\ No newline at end of file

From 176df5dc6bb9336050264fc03a0270e48e5ac48c Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Wed, 18 Dec 2024 21:53:51 -0800
Subject: [PATCH 05/19] From server

---
 resources/js/Pages/RingotelAppSettings.vue    |   4 +-
 .../forms/CreateRingotelConnectionForm.vue    | 313 ++++++++++++++++++
 .../forms/CreateRingotelOrgForm.vue           |  42 ++-
 .../modal/RingotelConnectionModal.vue         | 224 -------------
 4 files changed, 351 insertions(+), 232 deletions(-)
 create mode 100644 resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
 delete mode 100644 resources/js/Pages/components/modal/RingotelConnectionModal.vue

diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index 44890cb6..a0d5b330 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -187,8 +187,7 @@
     <Notification :show="notificationShow" :type="notificationType" :messages="notificationMessages"
         @update:show="hideNotification" />
     
-        <!-- <RingotelConnectionModal :greeting="selectedGreeting" :show="true" :loading="isGreetingUpdating"
-    @confirm="handleGreetingUpdate" @close="showConnectionModal = false" /> -->
+        
 </template>
 
 <script setup>
@@ -216,7 +215,6 @@ import Badge from "@generalComponents/Badge.vue";
 import LinkOffIcon from "@icons/LinkOffIcon.vue";
 import { PowerIcon } from "@heroicons/vue/24/outline";
 
-import RingotelConnectionModal from "./components/modal/RingotelConnectionModal.vue";
 
 const page = usePage()
 const loading = ref(false)
diff --git a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
new file mode 100644
index 00000000..0f5e9ce9
--- /dev/null
+++ b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
@@ -0,0 +1,313 @@
+<template>
+    <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
+        <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
+            <nav class="space-y-1">
+                <a v-for="item in options.navigation" :key="item.name" href="#"
+                    :class="[activeTab === item.slug ? 'bg-gray-200 text-indigo-700 hover:bg-gray-100 hover:text-indigo-700' : 'text-gray-900 hover:bg-gray-200 hover:text-gray-900', 'group flex items-center rounded-md px-3 py-2 text-sm font-medium']"
+                    @click.prevent="setActiveTab(item.slug)" :aria-current="item.current ? 'page' : undefined">
+                    <component :is="iconComponents[item.icon]"
+                        :class="[item.current ? 'text-indigo-500 group-hover:text-indigo-500' : 'text-gray-400 group-hover:text-gray-500', '-ml-1 mr-3 h-6 w-6 flex-shrink-0']"
+                        aria-hidden="true" />
+                    <span class="truncate">{{ item.name }}</span>
+                    <ExclamationCircleIcon
+                        v-if="((errors?.device_address || errors?.device_template) && item.slug === 'settings')"
+                        class="ml-2 h-5 w-5 text-red-500" aria-hidden="true" />
+
+                </a>
+            </nav>
+        </aside>
+
+        <form @submit.prevent="submitForm" class="sm:px-6 lg:col-span-9 lg:px-0">
+            <div v-if="activeTab === 'settings'">
+                <div class="bg-gray-100 px-4 py-6 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                    <div class="sm:col-span-12">
+                        <div class="rounded-md bg-blue-50 p-4">
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <InformationCircleIcon class="h-5 w-5 text-blue-400" aria-hidden="true" />
+                                </div>
+                                <div class="ml-3">
+                                    <p class="text-sm text-blue-700">Select a new option to apply to all items, use the
+                                        clear
+                                        button to unset current settings, or leave unchanged to keep existing values </p>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <div class="sm:col-span-12">
+                        <LabelInputRequired :target="'template'" :label="'Device Template'" />
+                        <div class="mt-2">
+                            <ComboBox :options="options.templates" :selectedItem="form.device_template" :search="true"
+                                :showUndo="form.device_template === 'NULL'"
+                                :placeholder="placeholderText('device_template')" @update:model-value="handleTemplateUpdate"
+                                :error="errors?.device_template && errors.device_template.length > 0" />
+                        </div>
+                        <!-- <p class="mt-3 text-sm leading-6 text-gray-600">Select a new common template for all selected devices</p> -->
+                        <div v-if="errors?.device_template" class="mt-2 text-sm text-red-600">
+                            {{ errors.device_template[0] }}
+                        </div>
+                    </div>
+
+                    <div class="sm:col-span-12">
+                        <LabelInputOptional :target="'profile'" :label="'Device Profile'" />
+                        <div class="mt-2">
+                            <ComboBox :options="options.profiles" :selectedItem="form.device_profile_uuid" :search="true"
+                                :showClear="true" :showUndo="form.device_profile_uuid === 'NULL'"
+                                :placeholder="placeholderText('device_profile_uuid')"
+                                @update:model-value="handleProfileUpdate" />
+                        </div>
+                        <!-- <p class="mt-3 text-sm leading-6 text-gray-600">Assign the extension to which the messages should be
+                    forwarded.</p> -->
+                    </div>
+
+                    <div v-if="page.props.auth.can.domain_select && page.props.auth.can.device_edit_domain"
+                        class="sm:col-span-12">
+                        <LabelInputRequired :target="'domain'" :label="'Owned By (Company Name)'" />
+                        <div class="mt-2">
+                            <ComboBox :options="options.domains" :selectedItem="form.domain_uuid" :search="true"
+                                :showUndo="form.domain_uuid === 'NULL'" :placeholder="placeholderText('domain_uuid')"
+                                @update:model-value="handleDomainUpdate"
+                                :error="errors?.domain_uuid && errors.domain_uuid.length > 0" />
+                        </div>
+                        <div v-if="errors?.domain_uuid" class="mt-2 text-sm text-red-600">
+                            {{ errors.domain_uuid[0] }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div v-if="activeTab === 'lines'">
+                <div class="shadow sm:rounded-md">
+                    <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                        <div>
+                            <h3 class="text-base font-semibold leading-6 text-gray-900">Line Keys</h3>
+                            <div class="rounded-md bg-yellow-50 p-4">
+                                <div class="flex">
+                                    <div class="flex-shrink-0">
+                                        <ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" aria-hidden="true" />
+                                    </div>
+                                    <div class="ml-3">
+                                        <h3 class="text-sm font-medium text-yellow-800">Attention needed</h3>
+                                        <div class="mt-2 text-sm text-yellow-700">
+                                            <p>If you make any changes here, all existing line keys will be replaced with
+                                                your new selection.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-12 gap-6">
+
+                            <template v-for="(row, index) in form.lines" :key="row.device_line_uuid">
+                                <div class="pt-2 text-sm font-medium leading-6 text-gray-900">
+                                    {{ index + 1 }}
+                                </div>
+
+                                <div class="col-span-3 text-sm font-medium leading-6 text-gray-900">
+                                    <ComboBox :options="options.line_key_types" :selectedItem="row.line_type_id"
+                                        :search="true" :placeholder="'Choose key type'"
+                                        @update:model-value="(value) => handleKeyTypeUpdate(value, index)" />
+                                </div>
+
+                                <div class="col-span-4 text-sm font-medium leading-6 text-gray-900">
+                                    <ComboBox :options="options.extensions" :selectedItem="row.user_id" :search="true"
+                                        :placeholder="'Choose extension'"
+                                        @update:model-value="(value) => handleExtensionUpdate(value, index)" />
+                                </div>
+
+                                <div class="col-span-3 text-sm font-medium leading-6 text-gray-900">
+                                    <InputField v-model="row.display_name" type="text" name="ip_address"
+                                        placeholder="Enter display name"
+                                        :error="errors?.display_name && errors.display_name.length > 0" />
+                                </div>
+
+                                <div class="text-sm font-medium leading-6 text-gray-900">
+                                    <!-- <EllipsisVerticalIcon @click="handleEditRequest(row.device_uuid)"
+                                        class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 active:bg-gray-300 active:duration-150 cursor-pointer" /> -->
+
+                                    <Menu as="div" class="relative inline-block text-left">
+                                        <div>
+                                            <MenuButton
+                                                class="flex items-center rounded-full bg-gray-100 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
+                                                <span class="sr-only">Open options</span>
+                                                <EllipsisVerticalIcon class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 active:bg-gray-300 active:duration-150 cursor-pointer" aria-hidden="true" />
+                                            </MenuButton>
+                                        </div>
+
+                                        <transition enter-active-class="transition ease-out duration-100"
+                                            enter-from-class="transform opacity-0 scale-95"
+                                            enter-to-class="transform opacity-100 scale-100"
+                                            leave-active-class="transition ease-in duration-75"
+                                            leave-from-class="transform opacity-100 scale-100"
+                                            leave-to-class="transform opacity-0 scale-95">
+                                            <MenuItems
+                                                class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                                                <div class="py-1">
+                                                    <MenuItem v-slot="{ active }">
+                                                    <a href="#" @click.prevent="deleteLineKey(index)"
+                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Delete</a>
+                                                    </MenuItem>
+                                                   
+                                                </div>
+                                            </MenuItems>
+                                        </transition>
+                                    </Menu>
+
+                                </div>
+                            </template>
+
+                        </div>
+
+                        <div
+                            class="flex justify-center bg-gray-100 px-4 py-4 text-center text-sm font-medium text-indigo-500 hover:text-indigo-700 sm:rounded-b-lg">
+                            <button href="#" @click.prevent="addNewLineKey" class="flex items-center gap-2">
+                                <PlusIcon class="h-6 w-6 text-black-500 hover:text-black-900 active:h-8 active:w-8 " />
+                                <span>
+                                    Add new line key
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+
+
+                </div>
+            </div>
+
+            <div class="bg-gray-100 px-4 py-3 text-right sm:px-6">
+                <button type="submit"
+                    class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
+                    ref="saveButtonRef" :disabled="isSubmitting">
+                    <Spinner :show="isSubmitting" />
+                    Save
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import { usePage } from '@inertiajs/vue3';
+
+
+import ComboBox from "../general/ComboBox.vue";
+import InputField from "../general/InputField.vue";
+import LabelInputOptional from "../general/LabelInputOptional.vue";
+import LabelInputRequired from "../general/LabelInputRequired.vue";
+import Spinner from "../general/Spinner.vue";
+import { InformationCircleIcon } from '@heroicons/vue/20/solid'
+import { Cog6ToothIcon, AdjustmentsHorizontalIcon, EllipsisVerticalIcon } from '@heroicons/vue/24/outline';
+import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
+import { PlusIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/solid";
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+
+
+const props = defineProps({
+    // items: Object,
+    options: Object,
+    isSubmitting: Boolean,
+    errors: Object,
+});
+
+const page = usePage();
+
+const form = reactive({
+    // items: props.items,
+    device_template: null,
+    device_profile_uuid: null,
+    extension: null,
+    domain_uuid: null,
+    lines: [],
+    _token: page.props.csrf_token,
+})
+
+const emits = defineEmits(['submit', 'cancel', 'domain-selected']);
+
+
+// Initialize activeTab with the currently active tab from props
+const activeTab = ref(props.options.navigation.find(item => item.slug)?.slug || props.options.navigation[0].slug);
+
+
+const submitForm = () => {
+    // console.log(form);
+    emits('submit', form); // Emit the event with the form data
+}
+
+const handleTemplateUpdate = (newSelectedItem) => {
+    form.device_template = newSelectedItem.value;
+}
+
+const handleProfileUpdate = (newSelectedItem) => {
+    form.device_profile_uuid = newSelectedItem.value
+}
+
+const handleExtensionUpdate = (newSelectedItem, index) => {
+    form.lines[index].user_id = newSelectedItem.value;
+    form.lines[index].display_name = newSelectedItem.value;
+}
+
+const handleDomainUpdate = (newSelectedItem) => {
+    form.domain_uuid = newSelectedItem.value;
+    form.device_profile_uuid = "NULL";
+    form.extension = "NULL";
+    if (newSelectedItem.value !== "NULL") {
+        emits('domain-selected', newSelectedItem.value); // Emit 'domain-selected' event when the domain is updated
+    }
+}
+
+// Function to determine placeholder based on the current value
+function placeholderText(fieldName) {
+    const fieldValue = form[fieldName];
+    if (fieldValue === null) {
+        return "Keep existing setting";
+    } else if (fieldValue === "NULL") {
+        return "Current settings will be cleared";
+    } else {
+        return fieldValue; // Use the actual value as the placeholder
+    }
+}
+
+const handleKeyTypeUpdate = (newSelectedItem, index) => {
+    const newValue = newSelectedItem.value === 'sharedline' ? 'true' : null;
+
+    // Only update if the value is different
+    if (form.lines[index].shared_line !== newValue) {
+        form.lines[index].shared_line = newValue;
+    }
+};
+
+
+const addNewLineKey = () => {
+    // console.log(props.options);
+    // Define the new line key object with default values
+    const newLineKey = {
+        line_number: form.lines.length + 1, // Increment line number based on the array length
+        user_id: null,                      // Set initial user_id to null or any default value
+        display_name: '',                   // Set initial display_name to an empty string
+        shared_line: null,                  // Set initial shared_line to null or any default value
+        device_line_uuid: null
+    };
+
+    // Push the new line key to the form.lines array
+    form.lines.push(newLineKey);
+};
+
+const iconComponents = {
+    'Cog6ToothIcon': Cog6ToothIcon,
+    'AdjustmentsHorizontalIcon': AdjustmentsHorizontalIcon,
+};
+
+const setActiveTab = (tabSlug) => {
+    activeTab.value = tabSlug;
+};
+
+const deleteLineKey = (index) => {
+    form.lines.splice(index, 1);  // Remove the line key at the specified index
+};
+
+
+</script>
\ No newline at end of file
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index e4c137a3..f1fdc31b 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -133,9 +133,13 @@
 
     </div>
 
-    <!-- <RingotelConnectionModal :greeting="selectedGreeting" :show="showConnectionModal" :loading="isGreetingUpdating"
-    @confirm="handleGreetingUpdate" @close="showConnectionModal = false" /> -->
-
+    <AddEditItemModal :customClass="'sm:max-w-2xl'" :show="showConnectionModal" :header="'Create Connection'" :loading="loadingModal"
+        @close="handleModalClose">
+        <template #modal-body>
+            <CreateRingotelConnectionForm :options="options" :errors="formErrors"
+                :is-submitting="ringotelConnectionFormSubmiting" @submit="handleCreateConnectionRequest" @cancel="handleModalClose"/>
+        </template>
+    </AddEditItemModal>
 
 </template>
 
@@ -160,7 +164,12 @@ import { InformationCircleIcon } from "@heroicons/vue/24/outline";
 import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
 import { BuildingOfficeIcon } from '@heroicons/vue/24/outline';
 import RingotelConnections from "../general/RingotelConnections.vue";
-import RingotelConnectionModal from "../modal/RingotelConnectionModal.vue";
+import AddEditItemModal from "../modal/AddEditItemModal.vue";
+import CreateRingotelConnectionForm from "../forms/CreateRingotelConnectionForm.vue";
+
+const ringotelConnectionFormSubmiting = ref(null);
+const loadingModal = ref(false);
+const formErrors = ref(null);
 
 const props = defineProps({
     options: Object,
@@ -169,7 +178,6 @@ const props = defineProps({
     errors: Object,
 });
 
-
 // Initialize activeTab with the currently active tab from props
 const activeTab = ref(props.activeTab || props.options.navigation[0].slug);
 
@@ -226,5 +234,29 @@ const handleAddConnection = (selected) => {
     showConnectionModal.value = true;
 }
 
+const handleCreateConnectionRequest = (form) => {
+    ringotelConnectionFormSubmiting.value = true;
+    formErrors.value = null;
+
+    // axios.post(props.routes.create_organization, form)
+    //     .then((response) => {
+    //         ringotelConnectionFormSubmiting.value = false;
+    //         showNotification('success', response.data.messages);
+    //         activationActiveTab.value = 'connections';
+    //         // handleSearchButtonClick();
+    //         // handleModalClose();
+    //         // handleClearSelection();
+    //     }).catch((error) => {
+    //         ringotelConnectionFormSubmiting.value = false;
+    //         handleClearSelection();
+    //         handleFormErrorResponse(error);
+    //     });
+
+};
+
+const handleModalClose = () => {
+    showConnectionModal.value = false;
+}
+
 
 </script>
diff --git a/resources/js/Pages/components/modal/RingotelConnectionModal.vue b/resources/js/Pages/components/modal/RingotelConnectionModal.vue
deleted file mode 100644
index a910f9bc..00000000
--- a/resources/js/Pages/components/modal/RingotelConnectionModal.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-    <TransitionRoot as="div" :show="show">
-        <Dialog as="div" class="relative z-10">
-            <TransitionChild as="div" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
-                leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-            </TransitionChild>
-            <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                    <TransitionChild as="div" enter="ease-out duration-300"
-                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
-                        leave-from="opacity-100 translate-y-0 sm:scale-100"
-                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-
-                        <DialogPanel
-                            class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl  sm:p-6">
-                            <div>
-
-                                <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
-
-                                    <div class="space-y-6 sm:px-6 lg:col-span-12 lg:px-0">
-
-
-                                                <div class="flex justify-between items-center">
-                                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Connection
-                                                        Details</h3>
-
-                                                    <!-- <Toggle label="Status" v-model="" /> -->
-
-                                                    <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
-                                                </div>
-                                                <div class="col-span-6 sm:col-span-6">
-                                                        <LabelInputRequired target="connection_name"
-                                                            label="Connection Name" class="truncate" />
-                                                        <InputField v-model="form.connection_name" type="text"
-                                                            name="connection_name" id="connection_name" class="mt-2"
-                                                            :error="!!errors?.connection_name" />
-                                                        <div v-if="errors?.connection_name"
-                                                            class="mt-2 text-xs text-red-600">
-                                                            {{ errors.connection_name[0] }}
-                                                        </div>
-                                                    </div>
-                                                    <div class="col-span-6 sm:col-span-3">
-                                                        <LabelInputRequired target="connection_name"
-                                                            label="Connection Name" class="truncate" />
-                                                        <InputField v-model="form.connection_name" type="text"
-                                                            name="connection_name" id="connection_name" class="mt-2"
-                                                            :error="!!errors?.connection_name" />
-                                                        <div v-if="errors?.connection_name"
-                                                            class="mt-2 text-xs text-red-600">
-                                                            {{ errors.connection_name[0] }}
-                                                        </div>
-                                                    </div>
-                                                    <div class="col-span-6 sm:col-span-3">
-                                                        <LabelInputRequired target="connection_name"
-                                                            label="Connection Name" class="truncate" />
-                                                        <InputField v-model="form.connection_name" type="text"
-                                                            name="connection_name" id="connection_name" class="mt-2"
-                                                            :error="!!errors?.connection_name" />
-                                                        <div v-if="errors?.connection_name"
-                                                            class="mt-2 text-xs text-red-600">
-                                                            {{ errors.connection_name[0] }}
-                                                        </div>
-                                                    </div>
-                                                    <div class="col-span-6 sm:col-span-3">
-                                                        <LabelInputRequired target="connection_name"
-                                                            label="Connection Name" class="truncate" />
-                                                        <InputField v-model="form.connection_name" type="text"
-                                                            name="connection_name" id="connection_name" class="mt-2"
-                                                            :error="!!errors?.connection_name" />
-                                                        <div v-if="errors?.connection_name"
-                                                            class="mt-2 text-xs text-red-600">
-                                                            {{ errors.connection_name[0] }}
-                                                        </div>
-                                                    </div>
-                                                    
-
-                                                <div class="grid grid-cols-6 gap-6">
-                                                    <div class="col-span-6 sm:col-span-3">
-                                                        <LabelInputRequired target="connection_name"
-                                                            label="Connection Name" class="truncate" />
-                                                        <InputField v-model="form.connection_name" type="text"
-                                                            name="connection_name" id="connection_name" class="mt-2"
-                                                            :error="!!errors?.connection_name" />
-                                                        <div v-if="errors?.connection_name"
-                                                            class="mt-2 text-xs text-red-600">
-                                                            {{ errors.connection_name[0] }}
-                                                        </div>
-                                                    </div>
-
-                                                    <div class="col-span-6 sm:col-span-3">
-                                                        <LabelInputRequired target="organization_domain"
-                                                            label="Unique Organization Domain" class="truncate" />
-                                                        <InputField v-model="form.organization_domain" type="text"
-                                                            name="organization_domain" id="organization_domain" class="mt-2"
-                                                            :error="!!errors?.organization_domain" />
-                                                        <div v-if="errors?.organization_domain"
-                                                            class="mt-2 text-xs text-red-600">
-                                                            {{ errors.organization_domain[0] }}
-                                                        </div>
-                                                    </div>
-
-                                                    <!-- <div class="col-span-6 sm:col-span-3">
-                                                        <LabelInputRequired label="Region" class="truncate mb-1" />
-
-                                                        <ComboBox :options="options.regions" :search="true"
-                                                            :placeholder="'Select region'"
-                                                            :error="errors?.region && errors.region.length > 0"
-                                                            :selectedItem="form.region"
-                                                            @update:model-value="handleUpdateRegionField" />
-                                                        <div v-if="errors?.region" class="mt-2 text-xs text-red-600">
-                                                            {{ errors.region[0] }}
-                                                        </div>
-                                                        <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region
-                                                            closest to your users
-                                                            location. You won't be able to change it later.</p>
-
-                                                    </div> -->
-
-                                                    <!-- <div class="col-span-6 sm:col-span-3">
-                                                        <LabelInputRequired label="Package" class="truncate mb-1" />
-
-                                                        <ComboBox :options="options.packages" :search="true"
-                                                            :placeholder="'Select package'"
-                                                            :error="errors?.package && errors.package.length > 0"
-                                                            :selectedItem="form.package"
-                                                            @update:model-value="handleUpdatePackageField" />
-                                                        <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
-                                                            {{ errors.package[0] }}
-                                                        </div>
-                                                        <p class="mt-3 text-sm leading-6 text-gray-600">The selected package
-                                                            defines the
-                                                            available features.</p>
-
-                                                    </div> -->
-
-                                                    <!-- <div class="divide-y divide-gray-200 col-span-6">
-
-                                                        <Toggle label="Secure User Credentials"
-                                                            description="When enabled, users will receive a one-time link to access their app password instead of plain text."
-                                                            v-model="form.dont_send_user_credentials" customClass="py-4" />
-
-                                                    </div> -->
-
-
-
-                                                </div>
-
-                                            
-
-                                    </div>
-                                </div>
-
-                            </div>
-                            <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                                <button type="button"
-                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
-                                    @click="updateGreeting">
-                                    Save
-                                    <Spinner class="ml-2" :color="'text-gray-700'" :show="loading" />
-                                </button>
-                                <button type="button"
-                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
-                                    @click="emit('close')">Cancel</button>
-                            </div>
-                        </DialogPanel>
-
-
-                    </TransitionChild>
-                </div>
-            </div>
-        </Dialog>
-    </TransitionRoot>
-</template>
-
-<script setup>
-import { reactive, ref, watch } from "vue";
-import { usePage } from '@inertiajs/vue3';
-
-import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
-import Spinner from "@generalComponents/Spinner.vue";
-import LabelInputOptional from "../general/LabelInputOptional.vue";
-import InputField from "../general/InputField.vue";
-import ComboBox from "../general/ComboBox.vue";
-import LabelInputRequired from "../general/LabelInputRequired.vue";
-
-const page = usePage();
-
-const emit = defineEmits(['close', 'confirm'])
-
-const props = defineProps({
-    show: Boolean,
-    greeting: Object,
-    loading: {
-        type: Boolean,
-        default: false, // Default value for loading
-    },
-});
-
-const errors = ref(null);
-
-
-watch(() => props.greeting, (newGreeting) => {
-    greeting_name.value = newGreeting?.name || '';
-});
-
-const form = reactive({
-    connection_name: null,
-    organization_domain: null,
-    region: null,
-    package: null,
-    // dont_send_user_credentials: props.options.dont_send_user_credentials === "true",
-    domain_uuid: null,
-    _token: page.props.csrf_token,
-})
-
-const updateGreeting = () => {
-    emit('confirm', { ...props.greeting, name: greeting_name.value });
-    emit('close');
-};
-
-</script>
\ No newline at end of file

From 1fd18175c50488e5619a5cdff48162af8d3f6eb6 Mon Sep 17 00:00:00 2001
From: Alexander S <alexander@sharapov.biz>
Date: Thu, 19 Dec 2024 12:28:32 +0600
Subject: [PATCH 06/19] Fix wrong domain name on GetPassword UI

---
 app/Http/Controllers/AppsController.php       | 11 +++---
 .../Controllers/AppsCredentialsController.php |  4 +-
 ..._mobile_app_password_reset_links_table.php | 37 +++++++++++++++++++
 3 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 database/migrations/2024_12_19_324567_add_domain_to_mobile_app_password_reset_links_table.php

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index cf0a258e..86cd1524 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -282,7 +282,7 @@ public function getUserPermissions()
     }
 
     /**
-     * Submit API request to Ringotel to create a new organization 
+     * Submit API request to Ringotel to create a new organization
      *
      * @return \Illuminate\Http\JsonResponse
      */
@@ -293,7 +293,7 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
         $inputs = $request->validated();
 
         try {
-            // Send API request to create organization 
+            // Send API request to create organization
             $organization = $this->ringotelApiService->createOrganization($inputs);
 
 
@@ -332,7 +332,7 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
 
             // Return a JSON response indicating success
             return response()->json([
-                'messages' => ['success' => ['Organization succesfully activated']]
+                'messages' => ['success' => ['Organization successfully activated']]
             ], 201);
         } catch (\Exception $e) {
             logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
@@ -650,7 +650,7 @@ public function createConnection(Request $request)
                     'connection_domain' => $request->connection_domain,
                     'org_id' => $request->org_id,
                     'conn_id' => $response['result']['id'],
-                    'message' => 'Connection was created succesfully, but unable to store Conn ID in database',
+                    'message' => 'Connection was created successfully, but unable to store Conn ID in database',
                 ]);
             }
 
@@ -659,7 +659,7 @@ public function createConnection(Request $request)
                 'connection_domain' => $request->connection_domain,
                 'org_id' => $request->org_id,
                 'conn_id' => $response['result']['id'],
-                'message' => 'Connection created succesfully',
+                'message' => 'Connection created successfully',
             ]);
             // Otherwise return failed status
         } elseif (isset($response['error'])) {
@@ -1025,6 +1025,7 @@ public function createUser(Request $request)
                 $appCredentials = new MobileAppPasswordResetLinks();
                 $appCredentials->token = $passwordToken;
                 $appCredentials->extension_uuid = $extension->extension_uuid;
+                $appCredentials->domain = $response['result']['domain'];
                 $appCredentials->save();
 
                 $passwordUrlShow = userCheckPermission('mobile_apps_password_url_show') ?? 'false';
diff --git a/app/Http/Controllers/AppsCredentialsController.php b/app/Http/Controllers/AppsCredentialsController.php
index 926c7445..f3da493e 100644
--- a/app/Http/Controllers/AppsCredentialsController.php
+++ b/app/Http/Controllers/AppsCredentialsController.php
@@ -26,12 +26,12 @@ public function getPasswordByToken(Request $request): \Inertia\Response
         }
 
         $extension = $appCredentials->extension()->first();
-        $extensionDomain = $extension->domain()->first();
+        //$extensionDomain = $extension->domain()->first();
 
         return Inertia::render('Auth/MobileAppGetPassword',
             [
                 'display_name' => $extension->effective_caller_id_name,
-                'domain' => $extensionDomain->domain_name,
+                'domain' => $appCredentials->domain,
                 'username' => $extension->extension,
                 'extension' => $extension->extension,
                 'routes' => [
diff --git a/database/migrations/2024_12_19_324567_add_domain_to_mobile_app_password_reset_links_table.php b/database/migrations/2024_12_19_324567_add_domain_to_mobile_app_password_reset_links_table.php
new file mode 100644
index 00000000..c84092ba
--- /dev/null
+++ b/database/migrations/2024_12_19_324567_add_domain_to_mobile_app_password_reset_links_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddDomainToMobileAppPasswordResetLinksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!Schema::hasColumn('mobile_app_password_reset_links', 'domain')) {
+            Schema::table('mobile_app_password_reset_links', function (Blueprint $table) {
+                $table->string('domain')->nullable()->after('token');
+            });
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        if (Schema::hasColumn('mobile_app_password_reset_links', 'domain')) {
+            Schema::table('mobile_app_password_reset_links', function (Blueprint $table) {
+                $table->dropColumn('domain');
+            });
+        }
+    }
+}
+

From 2dd548961f2451a553bd18ba23de3a28aba4700f Mon Sep 17 00:00:00 2001
From: Alexander S <alexander@sharapov.biz>
Date: Thu, 19 Dec 2024 12:35:10 +0600
Subject: [PATCH 07/19] Remove commented-out code in AppsCredentialsController

---
 app/Http/Controllers/AppsCredentialsController.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/Http/Controllers/AppsCredentialsController.php b/app/Http/Controllers/AppsCredentialsController.php
index f3da493e..72e3de54 100644
--- a/app/Http/Controllers/AppsCredentialsController.php
+++ b/app/Http/Controllers/AppsCredentialsController.php
@@ -26,7 +26,6 @@ public function getPasswordByToken(Request $request): \Inertia\Response
         }
 
         $extension = $appCredentials->extension()->first();
-        //$extensionDomain = $extension->domain()->first();
 
         return Inertia::render('Auth/MobileAppGetPassword',
             [

From 81bcfdaad7580e29d5849ce1a9a2415caefd91b8 Mon Sep 17 00:00:00 2001
From: Alexander S <alexander@sharapov.biz>
Date: Thu, 19 Dec 2024 12:44:02 +0600
Subject: [PATCH 08/19] Add domain field to app credentials saving logic on
 reset password

---
 app/Http/Controllers/AppsController.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index 86cd1524..1b6a751d 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -1158,6 +1158,7 @@ public function resetPassword(Request $request, Extensions $extension)
             $appCredentials = new MobileAppPasswordResetLinks();
             $appCredentials->token = $passwordToken;
             $appCredentials->extension_uuid = $extension->extension_uuid;
+            $appCredentials->domain = $response['result']['domain'];
             $appCredentials->save();
             $passwordUrlShow = userCheckPermission('mobile_apps_password_url_show') ?? 'false';
             $includePasswordUrl = $passwordUrlShow == 'true' ? route('appsGetPasswordByToken', $passwordToken) : null;

From 70fa6b96f6a01f792698c2cc13873f1413b14a63 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Wed, 18 Dec 2024 23:45:04 -0800
Subject: [PATCH 09/19] added connection modal

---
 app/Http/Controllers/AppsController.php       |  36 +++-
 resources/js/Pages/RingotelAppSettings.vue    |   1 +
 .../forms/CreateRingotelConnectionForm.vue    | 202 +++++-------------
 .../forms/CreateRingotelOrgForm.vue           |   3 +-
 4 files changed, 83 insertions(+), 159 deletions(-)

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index 86cd1524..f005adf2 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -160,8 +160,6 @@ protected function filterSearch($query, $value)
     public function getItemOptions()
     {
         try {
-
-            $domain_uuid = request('domain_uuid') ?? session('domain_uuid');
             $item_uuid = request('item_uuid'); // Retrieve item_uuid from the request
 
             // Base navigation array without Greetings
@@ -199,6 +197,13 @@ public function getItemOptions()
                 ['value' => '2', 'name' => 'Pro Package'],
             ];
 
+            $protocols = [
+                ['value' => 'sip', 'name' => 'UDP'],
+                ['value' => 'sip-tcp', 'name' => 'TCP'],
+                ['value' => 'sips', 'name' => 'TLS'],
+                ['value' => 'DNS-NAPTR', 'name' => 'DNS-NAPTR'],
+            ];
+
             // Check if item_uuid exists to find an existing model
             if ($item_uuid) {
                 // Find existing model by item_uuid
@@ -239,6 +244,9 @@ public function getItemOptions()
             $package = get_domain_setting('package', $model->domain_uuid);
             $dont_send_user_credentials = get_domain_setting('dont_send_user_credentials', $model->domain_uuid);
             $org_id = get_domain_setting('org_id', $model->domain_uuid);
+            $protocol = get_domain_setting('mobile_app_conn_protocol', $model->domain_uuid);
+            $port = get_domain_setting('line_sip_port', $model->domain_uuid);
+            $proxy = get_domain_setting('mobile_app_proxy', $model->domain_uuid);
 
             logger($org_id);
             if (!$org_id) {
@@ -251,6 +259,7 @@ public function getItemOptions()
                 'model' => $model,
                 'regions' => $regions,
                 'packages' => $packages,
+                'protocols' => $protocols,
                 'permissions' => $permissions,
                 'routes' => $routes,
                 'suggested_ringotel_domain' => $suggested_ringotel_domain,
@@ -258,6 +267,9 @@ public function getItemOptions()
                 'default_package' => $package,
                 'dont_send_user_credentials' => $dont_send_user_credentials,
                 'connections' => $connections,
+                'default_protocol' => $protocol,
+                'default_port' => $port,
+                'default_proxy' => $proxy,
                 // Define options for other fields as needed
             ];
 
@@ -296,18 +308,15 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
             // Send API request to create organization
             $organization = $this->ringotelApiService->createOrganization($inputs);
 
-
-            // Check for existing records with a different value
+            // Check for existing records
             $existingSetting = DomainSettings::where('domain_uuid', $inputs['domain_uuid'])
                 ->where('domain_setting_category', 'app shell')
                 ->where('domain_setting_subcategory', 'org_id')
                 ->first();
 
             if ($existingSetting) {
-                if ($existingSetting->domain_setting_value !== $organization->org_id) {
-                    // Delete the existing record if the value is different
-                    $existingSetting->delete();
-                }
+                // Delete the existing record 
+                $existingSetting->delete();
             }
 
             // Save the new record
@@ -320,6 +329,16 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
                 'domain_setting_enabled' => true,
             ]);
 
+            // Check for existing records
+            $existingSetting = DomainSettings::where('domain_uuid', $inputs['domain_uuid'])
+                ->where('domain_setting_category', 'mobile_apps')
+                ->where('domain_setting_subcategory', 'dont_send_user_credentials')
+                ->first();
+
+            if ($existingSetting) {
+                $existingSetting->delete();
+            }
+
             $domainSetting = DomainSettings::create([
                 'domain_uuid' => $inputs['domain_uuid'],
                 'domain_setting_category' => 'mobile_apps',
@@ -332,6 +351,7 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
 
             // Return a JSON response indicating success
             return response()->json([
+                'org_id' => $organization['id'],
                 'messages' => ['success' => ['Organization successfully activated']]
             ], 201);
         } catch (\Exception $e) {
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index a0d5b330..edc97e21 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -289,6 +289,7 @@ const handleCreateRequest = (form) => {
         .then((response) => {
             activateFormSubmiting.value = false;
             showNotification('success', response.data.messages);
+            itemOptions.value.orgId = response.data.org_id;
             activationActiveTab.value = 'connections';
             // handleSearchButtonClick();
             // handleModalClose();
diff --git a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
index 0f5e9ce9..7b3daeeb 100644
--- a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
-        <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
+        <!-- <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
             <nav class="space-y-1">
                 <a v-for="item in options.navigation" :key="item.name" href="#"
                     :class="[activeTab === item.slug ? 'bg-gray-200 text-indigo-700 hover:bg-gray-100 hover:text-indigo-700' : 'text-gray-900 hover:bg-gray-200 hover:text-gray-900', 'group flex items-center rounded-md px-3 py-2 text-sm font-medium']"
@@ -15,167 +15,69 @@
 
                 </a>
             </nav>
-        </aside>
-
-        <form @submit.prevent="submitForm" class="sm:px-6 lg:col-span-9 lg:px-0">
-            <div v-if="activeTab === 'settings'">
-                <div class="bg-gray-100 px-4 py-6 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
-                    <div class="sm:col-span-12">
-                        <div class="rounded-md bg-blue-50 p-4">
-                            <div class="flex">
-                                <div class="flex-shrink-0">
-                                    <InformationCircleIcon class="h-5 w-5 text-blue-400" aria-hidden="true" />
+        </aside> -->
+
+        <form @submit.prevent="submitForm" class="sm:px-6 lg:col-span-12 lg:px-0">
+                    
+
+                    <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="connection_name" label="Connection Name"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.connection_name" type="text" name="connection_name"
+                                        id="connection_name" class="mt-1" :error="!!errors?.organization_name" />
+                                    <div v-if="errors?.connection_name" class="mt-2 text-xs text-red-600">
+                                        {{ errors.connection_name[0] }}
+                                    </div>
                                 </div>
-                                <div class="ml-3">
-                                    <p class="text-sm text-blue-700">Select a new option to apply to all items, use the
-                                        clear
-                                        button to unset current settings, or leave unchanged to keep existing values </p>
 
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    <div class="sm:col-span-12">
-                        <LabelInputRequired :target="'template'" :label="'Device Template'" />
-                        <div class="mt-2">
-                            <ComboBox :options="options.templates" :selectedItem="form.device_template" :search="true"
-                                :showUndo="form.device_template === 'NULL'"
-                                :placeholder="placeholderText('device_template')" @update:model-value="handleTemplateUpdate"
-                                :error="errors?.device_template && errors.device_template.length > 0" />
-                        </div>
-                        <!-- <p class="mt-3 text-sm leading-6 text-gray-600">Select a new common template for all selected devices</p> -->
-                        <div v-if="errors?.device_template" class="mt-2 text-sm text-red-600">
-                            {{ errors.device_template[0] }}
-                        </div>
-                    </div>
-
-                    <div class="sm:col-span-12">
-                        <LabelInputOptional :target="'profile'" :label="'Device Profile'" />
-                        <div class="mt-2">
-                            <ComboBox :options="options.profiles" :selectedItem="form.device_profile_uuid" :search="true"
-                                :showClear="true" :showUndo="form.device_profile_uuid === 'NULL'"
-                                :placeholder="placeholderText('device_profile_uuid')"
-                                @update:model-value="handleProfileUpdate" />
-                        </div>
-                        <!-- <p class="mt-3 text-sm leading-6 text-gray-600">Assign the extension to which the messages should be
-                    forwarded.</p> -->
-                    </div>
-
-                    <div v-if="page.props.auth.can.domain_select && page.props.auth.can.device_edit_domain"
-                        class="sm:col-span-12">
-                        <LabelInputRequired :target="'domain'" :label="'Owned By (Company Name)'" />
-                        <div class="mt-2">
-                            <ComboBox :options="options.domains" :selectedItem="form.domain_uuid" :search="true"
-                                :showUndo="form.domain_uuid === 'NULL'" :placeholder="placeholderText('domain_uuid')"
-                                @update:model-value="handleDomainUpdate"
-                                :error="errors?.domain_uuid && errors.domain_uuid.length > 0" />
-                        </div>
-                        <div v-if="errors?.domain_uuid" class="mt-2 text-sm text-red-600">
-                            {{ errors.domain_uuid[0] }}
-                        </div>
-                    </div>
-                </div>
-            </div>
 
-            <div v-if="activeTab === 'lines'">
-                <div class="shadow sm:rounded-md">
-                    <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
-                        <div>
-                            <h3 class="text-base font-semibold leading-6 text-gray-900">Line Keys</h3>
-                            <div class="rounded-md bg-yellow-50 p-4">
-                                <div class="flex">
-                                    <div class="flex-shrink-0">
-                                        <ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" aria-hidden="true" />
-                                    </div>
-                                    <div class="ml-3">
-                                        <h3 class="text-sm font-medium text-yellow-800">Attention needed</h3>
-                                        <div class="mt-2 text-sm text-yellow-700">
-                                            <p>If you make any changes here, all existing line keys will be replaced with
-                                                your new selection.</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
 
-                        <div class="grid grid-cols-12 gap-6">
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired label="Protocol" class="truncate mb-1" />
+                                    <ComboBox :options="options.protocols" :search="true" :placeholder="'Select protocol'"
+                                        :error="errors?.protocol && errors.protocol.length > 0" :selectedItem="options.default_protocol"
+                                        @update:model-value="handleUpdateProtocolField" />
+                                    <div v-if="errors?.protocol" class="mt-2 text-xs text-red-600">
+                                        {{ errors.protocol[0] }}
+                                    </div>
 
-                            <template v-for="(row, index) in form.lines" :key="row.device_line_uuid">
-                                <div class="pt-2 text-sm font-medium leading-6 text-gray-900">
-                                    {{ index + 1 }}
                                 </div>
 
-                                <div class="col-span-3 text-sm font-medium leading-6 text-gray-900">
-                                    <ComboBox :options="options.line_key_types" :selectedItem="row.line_type_id"
-                                        :search="true" :placeholder="'Choose key type'"
-                                        @update:model-value="(value) => handleKeyTypeUpdate(value, index)" />
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="domain" label="Domain or IP Address"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.domain" type="text" name="domain"
+                                        id="domain" class="mt-1" :error="!!errors?.domain" />
+                                    <div v-if="errors?.domain" class="mt-2 text-xs text-red-600">
+                                        {{ errors.domain[0] }}
+                                    </div>
                                 </div>
 
-                                <div class="col-span-4 text-sm font-medium leading-6 text-gray-900">
-                                    <ComboBox :options="options.extensions" :selectedItem="row.user_id" :search="true"
-                                        :placeholder="'Choose extension'"
-                                        @update:model-value="(value) => handleExtensionUpdate(value, index)" />
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="domain" label="Port"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.port" type="text" name="port"
+                                        id="port" class="mt-1" :error="!!errors?.port" />
+                                    <div v-if="errors?.port" class="mt-2 text-xs text-red-600">
+                                        {{ errors.port[0] }}
+                                    </div>
                                 </div>
 
-                                <div class="col-span-3 text-sm font-medium leading-6 text-gray-900">
-                                    <InputField v-model="row.display_name" type="text" name="ip_address"
-                                        placeholder="Enter display name"
-                                        :error="errors?.display_name && errors.display_name.length > 0" />
-                                </div>
 
-                                <div class="text-sm font-medium leading-6 text-gray-900">
-                                    <!-- <EllipsisVerticalIcon @click="handleEditRequest(row.device_uuid)"
-                                        class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 active:bg-gray-300 active:duration-150 cursor-pointer" /> -->
-
-                                    <Menu as="div" class="relative inline-block text-left">
-                                        <div>
-                                            <MenuButton
-                                                class="flex items-center rounded-full bg-gray-100 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
-                                                <span class="sr-only">Open options</span>
-                                                <EllipsisVerticalIcon class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 active:bg-gray-300 active:duration-150 cursor-pointer" aria-hidden="true" />
-                                            </MenuButton>
-                                        </div>
-
-                                        <transition enter-active-class="transition ease-out duration-100"
-                                            enter-from-class="transform opacity-0 scale-95"
-                                            enter-to-class="transform opacity-100 scale-100"
-                                            leave-active-class="transition ease-in duration-75"
-                                            leave-from-class="transform opacity-100 scale-100"
-                                            leave-to-class="transform opacity-0 scale-95">
-                                            <MenuItems
-                                                class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                                                <div class="py-1">
-                                                    <MenuItem v-slot="{ active }">
-                                                    <a href="#" @click.prevent="deleteLineKey(index)"
-                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Delete</a>
-                                                    </MenuItem>
-                                                   
-                                                </div>
-                                            </MenuItems>
-                                        </transition>
-                                    </Menu>
+
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Secure User Credentials"
+                                        description="When enabled, users will receive a one-time link to access their app password instead of plain text."
+                                        v-model="form.dont_send_user_credentials" customClass="py-4" />
 
                                 </div>
-                            </template>
 
-                        </div>
 
-                        <div
-                            class="flex justify-center bg-gray-100 px-4 py-4 text-center text-sm font-medium text-indigo-500 hover:text-indigo-700 sm:rounded-b-lg">
-                            <button href="#" @click.prevent="addNewLineKey" class="flex items-center gap-2">
-                                <PlusIcon class="h-6 w-6 text-black-500 hover:text-black-900 active:h-8 active:w-8 " />
-                                <span>
-                                    Add new line key
-                                </span>
-                            </button>
-                        </div>
-                    </div>
 
+                            </div>
 
-                </div>
-            </div>
 
             <div class="bg-gray-100 px-4 py-3 text-right sm:px-6">
                 <button type="submit"
@@ -217,9 +119,11 @@ const page = usePage();
 
 const form = reactive({
     // items: props.items,
-    device_template: null,
-    device_profile_uuid: null,
-    extension: null,
+    org_id: props.options.orgId,
+    connection_name: null,
+    protocol: null,
+    domain: props.options.model.domain_name,
+    port: props.options.default_port,
     domain_uuid: null,
     lines: [],
     _token: page.props.csrf_token,
@@ -241,8 +145,8 @@ const handleTemplateUpdate = (newSelectedItem) => {
     form.device_template = newSelectedItem.value;
 }
 
-const handleProfileUpdate = (newSelectedItem) => {
-    form.device_profile_uuid = newSelectedItem.value
+const handleUpdateProtocolField = (selected) => {
+    form.protocol = selected.value;
 }
 
 const handleExtensionUpdate = (newSelectedItem, index) => {
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index f1fdc31b..9ca64f96 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -133,7 +133,7 @@
 
     </div>
 
-    <AddEditItemModal :customClass="'sm:max-w-2xl'" :show="showConnectionModal" :header="'Create Connection'" :loading="loadingModal"
+    <AddEditItemModal :customClass="'sm:max-w-2xl'" :show="showConnectionModal" :header="'Create a Connection'" :loading="loadingModal"
         @close="handleModalClose">
         <template #modal-body>
             <CreateRingotelConnectionForm :options="options" :errors="formErrors"
@@ -230,7 +230,6 @@ const handleUpdatePackageField = (selected) => {
 }
 
 const handleAddConnection = (selected) => {
-    console.log('add connection');
     showConnectionModal.value = true;
 }
 

From 7523963659704ef9e92af0a4d036c3bc98fedd08 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Thu, 19 Dec 2024 23:16:01 -0800
Subject: [PATCH 10/19] added new settings for mobile apps

---
 app/Console/Commands/Updates/Update0916.php   | 145 +++++++++++++++--
 app/Http/Controllers/AppsController.php       |  49 +-----
 .../seeders/RecommendedSettingsSeeder.php     | 146 +++++++++++++++++-
 .../forms/CreateRingotelConnectionForm.vue    |  19 ++-
 .../forms/CreateRingotelOrgForm.vue           |  26 ++--
 routes/web.php                                |   2 +-
 6 files changed, 308 insertions(+), 79 deletions(-)

diff --git a/app/Console/Commands/Updates/Update0916.php b/app/Console/Commands/Updates/Update0916.php
index 089392f9..e79d827e 100644
--- a/app/Console/Commands/Updates/Update0916.php
+++ b/app/Console/Commands/Updates/Update0916.php
@@ -18,12 +18,135 @@ public function apply()
             [
                 'category' => 'mobile_apps',
                 'subcategory' => 'organization_region',
-                'newDescription' => '1 - US East, 2 - US West, 3 - Europe (Frankfurt), 4 - Asia Pacific (Singapore), 5 - Europe (London), 6 - India, 7 - Australia, 8 - Europe (Dublin), 9 - Canada (Central), 10 - South Africa',
+                'type' => 'text',
+                'value' => '',
+                'description' => '1 - US East, 2 - US West, 3 - Europe (Frankfurt), 4 - Asia Pacific (Singapore), 5 - Europe (London), 6 - India, 7 - Australia, 8 - Europe (Dublin), 9 - Canada (Central), 10 - South Africa',
             ],
             [
                 'category' => 'mobile_apps',
                 'subcategory' => 'package',
-                'newDescription' => '1 - Essentials, 2 - Pro',
+                'type' => 'text',
+                'value' => '',
+                'description' => '1 - Essentials, 2 - Pro',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'connection_port',
+                'type' => 'text',
+                'value' => '',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'dont_verify_server_certificate',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'disable_srtp',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'multitenant_mode',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'allow_call_recording',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => 'Allow users to record calls.',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'max_registrations',
+                'type' => 'text',
+                'value' => '3',
+                'description' => 'Max. number of parallel registrations per softphone user.',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'registration_ttl',
+                'type' => 'text',
+                'value' => '3600',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'voicemail_extension',
+                'type' => 'text',
+                'value' => '*97',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'pbx_features',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'dnd_on_code',
+                'type' => 'text',
+                'value' => '*78',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'dnd_off_code',
+                'type' => 'text',
+                'value' => '*79',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'cf_on_code',
+                'type' => 'text',
+                'value' => '*72',
+                'description' => 'The feature code used to activate CF',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'cf_off_code',
+                'type' => 'text',
+                'value' => '*73',
+                'description' => 'The feature code used to deactivate CF',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'g711u_enabled',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => 'Enable G711 Ulaw codec',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'g711a_enabled',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => 'Enable G711 Alaw codec',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'g729_enabled',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => 'Enable G729 codec',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'opus_enabled',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => 'Enable OPUS codec',
             ],
         ];
 
@@ -32,7 +155,9 @@ public function apply()
                 $this->updateOrCreateRecord(
                     $update['category'],
                     $update['subcategory'],
-                    $update['newDescription']
+                    $update['type'],
+                    $update['value'],
+                    $update['description']
                 );
             }
 
@@ -48,10 +173,10 @@ public function apply()
      *
      * @param string $category
      * @param string $subcategory
-     * @param string $newDescription
+     * @param string $description
      * @return void
      */
-    private function updateOrCreateRecord($category, $subcategory, $newDescription)
+    private function updateOrCreateRecord($category, $subcategory, $type, $value, $description)
     {
         $defaultSetting = DefaultSettings::where('default_setting_category', $category)
             ->where('default_setting_subcategory', $subcategory)
@@ -59,19 +184,19 @@ private function updateOrCreateRecord($category, $subcategory, $newDescription)
 
         if ($defaultSetting) {
             // Update the description if the record exists
-            $defaultSetting->default_setting_description = $newDescription;
+            $defaultSetting->default_setting_description = $description;
             $defaultSetting->save();
-            echo "Updated description for existing record in category '$category' and subcategory '$subcategory'.\n";
+            echo "Updated existing record in category '$category' and subcategory '$subcategory'.\n";
         } else {
             // Create a new record if it does not exist
             DefaultSettings::create([
                 'default_setting_uuid' => Str::uuid()->toString(), // Generate a new UUID
                 'default_setting_category' => $category,
                 'default_setting_subcategory' => $subcategory,
-                'default_setting_name' => 'text',
-                'default_setting_value' => '',
+                'default_setting_name' => $type,
+                'default_setting_value' => $value,
                 'default_setting_enabled' => 't',
-                'default_setting_description' => $newDescription,
+                'default_setting_description' => $description,
             ]);
             echo "Created new record in category '$category' and subcategory '$subcategory'.\n";
         }
diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index 1c7ec908..fe507ce7 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -52,6 +52,7 @@ public function index()
                 'routes' => [
                     'current_page' => route('apps.index'),
                     'create_organization' => route('apps.organization.create'),
+                    'create_connection' => route('apps.connection.create'),
                     'item_options' => route('apps.item.options'),
                 ]
             ]
@@ -363,48 +364,6 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
             ], 500);  // 500 Internal Server Error for any other errors
         }
 
-        //dd(isset($response['error']));
-
-
-        // If successful store Org ID and return success status
-        if (isset($response['result'])) {
-
-            // Get connection port from database or env file
-            $protocol = get_domain_setting('mobile_app_conn_protocol', $request->organization_uuid);
-            $port = get_domain_setting('line_sip_port', $request->organization_uuid);
-            $proxy = get_domain_setting('mobile_app_proxy', $request->organization_uuid);
-
-            return response()->json([
-                'status' => 200,
-                'organization_name' => $request->organization_name,
-                'organization_domain' => $request->organization_domain,
-                'organization_region' => $request->organization_region,
-                'org_id' => $response['result']['id'],
-                'protocol' => ($protocol) ? $protocol : "",
-                'connection_port' => ($port) ? $port : "",
-                'outbound_proxy' => ($proxy) ? $proxy : "",
-                'success' => [
-                    'message' => 'Organization created successfully',
-                ]
-            ]);
-            // Otherwise return failed status
-        } elseif (isset($response['error'])) {
-            return response()->json([
-                'error' => 401,
-                'organization_name' => $request->organization_name,
-                'organization_domain' => $request->organization_domain,
-                'organization_region' => $request->organization_region,
-                'message' => $response['error']['message']
-            ]);
-        } else {
-            return response()->json([
-                'error' => 401,
-                'organization_name' => $request->organization_name,
-                'organization_domain' => $request->organization_domain,
-                'organization_region' => $request->organization_region,
-                'message' => 'Unknown error'
-            ]);
-        }
     }
 
     /**
@@ -524,9 +483,6 @@ public function destroyOrganization(Request $request, Domain $domain)
     }
 
 
-
-
-
     /**
      * Submit request to update organization to Ringotel
      *
@@ -535,9 +491,8 @@ public function destroyOrganization(Request $request, Domain $domain)
     public function updateOrganization(Request $request) {}
 
 
-
     /**
-     * Submit request to create connection to Ringotel
+     * Submit API request to Ringotel to create a new connection
      *
      * @return \Illuminate\Http\JsonResponse
      */
diff --git a/database/seeders/RecommendedSettingsSeeder.php b/database/seeders/RecommendedSettingsSeeder.php
index 16100f73..0eb5925b 100644
--- a/database/seeders/RecommendedSettingsSeeder.php
+++ b/database/seeders/RecommendedSettingsSeeder.php
@@ -132,7 +132,151 @@ private function createDefaultSettings()
                 'default_setting_name'          => 'text',
                 'default_setting_value'         => '',
                 'default_setting_enabled'       => true,
-                'default_setting_description'   => "1 - US East, 2 - US West, 3 - Europe (Frankfurt), 4 - Asia Pacific (Singapore), 5 - Europe (London)",
+                'default_setting_description'   => "1 - US East, 2 - US West, 3 - Europe (Frankfurt), 4 - Asia Pacific (Singapore), 5 - Europe (London), 6 - India, 7 - Australia, 8 - Europe (Dublin), 9 - Canada (Central), 10 - South Africa",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'package',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '1',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "1 - Essentials, 2 - Pro",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'connection_port',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'dont_verify_server_certificate',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'disable_srtp',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'multitenant_mode',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'allow_call_recording',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'max_registrations',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '3',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Max. number of parallel registrations per softphone user.",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'registration_ttl',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '3600',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'voicemail_extension',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '*97',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'pbx_features',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'dnd_on_code',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '*78',
+                'default_setting_enabled'       => false,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'dnd_off_code',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '*79',
+                'default_setting_enabled'       => false,
+                'default_setting_description'   => "",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'cf_on_code',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '*72',
+                'default_setting_enabled'       => false,
+                'default_setting_description'   => "The feature code used to activate CF",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'cf_off_code',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '*73',
+                'default_setting_enabled'       => false,
+                'default_setting_description'   => "The feature code used to deactivate CF",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'g711u_enabled',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Enable G711 Ulaw codec",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'g711a_enabled',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Enable G711 Alaw codec",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'g729_enabled',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Enable G729 codec",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'opus_enabled',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Enable OPUS codec",
             ],
             [
                 'default_setting_category'      => 'theme',
diff --git a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
index 7b3daeeb..63be6c75 100644
--- a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
@@ -25,7 +25,7 @@
                                     <LabelInputRequired target="connection_name" label="Connection Name"
                                         class="truncate mb-1" />
                                     <InputField v-model="form.connection_name" type="text" name="connection_name"
-                                        id="connection_name" class="mt-1" :error="!!errors?.organization_name" />
+                                        id="connection_name" class="mt-1" :error="!!errors?.organization_name" :placeholder="'Enter connection name'"/>
                                     <div v-if="errors?.connection_name" class="mt-2 text-xs text-red-600">
                                         {{ errors.connection_name[0] }}
                                     </div>
@@ -66,27 +66,34 @@
 
 
 
-                                <div class="divide-y divide-gray-200 col-span-6">
+                                <!-- <div class="divide-y divide-gray-200 col-span-6">
 
                                     <Toggle label="Secure User Credentials"
                                         description="When enabled, users will receive a one-time link to access their app password instead of plain text."
                                         v-model="form.dont_send_user_credentials" customClass="py-4" />
 
-                                </div>
+                                </div> -->
 
 
 
                             </div>
 
 
-            <div class="bg-gray-100 px-4 py-3 text-right sm:px-6">
+            <!-- <div class="px-4 py-3 text-right sm:px-6">
                 <button type="submit"
                     class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
                     ref="saveButtonRef" :disabled="isSubmitting">
                     <Spinner :show="isSubmitting" />
                     Save
                 </button>
-            </div>
+            </div> -->
+            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                <button type="sumbit" :disabled="isSubmitting" class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto" @click="open = false">
+                    <Spinner :show="isSubmitting" />
+                    Save
+                </button>
+                <button type="button" @click="emits('cancel')" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
+              </div>
         </form>
     </div>
 </template>
@@ -124,8 +131,6 @@ const form = reactive({
     protocol: null,
     domain: props.options.model.domain_name,
     port: props.options.default_port,
-    domain_uuid: null,
-    lines: [],
     _token: page.props.csrf_token,
 })
 
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index 9ca64f96..aeb00252 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -237,19 +237,19 @@ const handleCreateConnectionRequest = (form) => {
     ringotelConnectionFormSubmiting.value = true;
     formErrors.value = null;
 
-    // axios.post(props.routes.create_organization, form)
-    //     .then((response) => {
-    //         ringotelConnectionFormSubmiting.value = false;
-    //         showNotification('success', response.data.messages);
-    //         activationActiveTab.value = 'connections';
-    //         // handleSearchButtonClick();
-    //         // handleModalClose();
-    //         // handleClearSelection();
-    //     }).catch((error) => {
-    //         ringotelConnectionFormSubmiting.value = false;
-    //         handleClearSelection();
-    //         handleFormErrorResponse(error);
-    //     });
+    axios.post(props.routes.create_connection, form)
+        .then((response) => {
+            ringotelConnectionFormSubmiting.value = false;
+            showNotification('success', response.data.messages);
+            
+            // handleSearchButtonClick();
+            // handleModalClose();
+            // handleClearSelection();
+        }).catch((error) => {
+            ringotelConnectionFormSubmiting.value = false;
+            handleClearSelection();
+            handleFormErrorResponse(error);
+        });
 
 };
 
diff --git a/routes/web.php b/routes/web.php
index 9b7513fc..4bb7f301 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -224,7 +224,7 @@
     Route::post('/apps/organization/sync', [AppsController::class, 'syncOrganizations'])->name('appsSyncOrganizations');
     Route::post('/apps/users/{extension}', [AppsController::class, 'mobileAppUserSettings'])->name('mobileAppUserSettings');
     //Route::get('/apps/organization/update', [AppsController::class, 'updateOrganization']) ->name('appsUpdateOrganization');
-    Route::post('/apps/connection/create', [AppsController::class, 'createConnection'])->name('appsCreateConnection');
+    Route::post('/apps/connection/create', [AppsController::class, 'createConnection'])->name('apps.connection.create');
     Route::get('/apps/connection/update', [AppsController::class, 'updateConnection'])->name('appsUpdateConnection');
     Route::post('/apps/user/create', [AppsController::class, 'createUser'])->name('appsCreateUser');
     Route::post('/apps/{domain}/user/sync', [AppsController::class, 'syncUsers'])->name('appsSyncUsers');

From 943b2d3800d4278d73b061608078f98bf9938945 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Fri, 20 Dec 2024 17:58:40 -0800
Subject: [PATCH 11/19] added new fields

---
 app/Http/Controllers/AppsController.php       |  65 ++++++----
 .../forms/CreateRingotelConnectionForm.vue    | 111 ++++++++++++------
 .../forms/CreateRingotelOrgForm.vue           |  10 +-
 3 files changed, 123 insertions(+), 63 deletions(-)

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index fe507ce7..c5e1d070 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -9,6 +9,7 @@
 use Illuminate\Http\Request;
 use App\Models\DomainSettings;
 use App\Models\MobileAppUsers;
+use App\Models\DefaultSettings;
 use App\Jobs\SendAppCredentials;
 use Illuminate\Support\Facades\Log;
 use App\Services\RingotelApiService;
@@ -163,7 +164,6 @@ public function getItemOptions()
         try {
             $item_uuid = request('item_uuid'); // Retrieve item_uuid from the request
 
-            // Base navigation array without Greetings
             $navigation = [
                 [
                     'name' => 'Organization',
@@ -177,6 +177,14 @@ public function getItemOptions()
                 ],
             ];
 
+            $conn_navigation = [
+                [
+                    'name' => 'Settings',
+                    'icon' => 'Cog6ToothIcon',
+                    'slug' => 'settings',
+                ],
+            ];
+
 
             $routes = [];
 
@@ -240,37 +248,34 @@ public function getItemOptions()
 
             $permissions = $this->getUserPermissions();
 
-            $suggested_ringotel_domain = strtolower(str_replace(' ', '', $model->domain_description));
-            $region = get_domain_setting('organization_region', $model->domain_uuid);
-            $package = get_domain_setting('package', $model->domain_uuid);
-            $dont_send_user_credentials = get_domain_setting('dont_send_user_credentials', $model->domain_uuid);
-            $org_id = get_domain_setting('org_id', $model->domain_uuid);
-            $protocol = get_domain_setting('mobile_app_conn_protocol', $model->domain_uuid);
-            $port = get_domain_setting('line_sip_port', $model->domain_uuid);
-            $proxy = get_domain_setting('mobile_app_proxy', $model->domain_uuid);
-
-            logger($org_id);
-            if (!$org_id) {
+            // Get all app settings from Default Settings and overrride with settings saved in Domain Settings
+            $appSettings = $this->getAppSettings($model->domain_uuid);
+            $appSettings['suggested_ringotel_domain'] = strtolower(str_replace(' ', '', $model->domain_description));
+            $appSettings['suggested_connection_name'] = 'Primary SIP Profile';
+
+            // Check if `connection_port` is empty and fall back to `line_sip_port`
+            if (empty($appSettings['connection_port'])) {
+                $appSettings['connection_port'] = get_domain_setting('line_sip_port', $model->domain_uuid)  ?? null;
+            }
+
+            // logger($appSettings['org_id']);
+            if (!isset($appSettings['org_id'])) {
                 $connections = [];
             }
 
             // Construct the itemOptions object
             $itemOptions = [
                 'navigation' => $navigation,
+                'conn_navigation' => $conn_navigation,
                 'model' => $model,
                 'regions' => $regions,
                 'packages' => $packages,
                 'protocols' => $protocols,
                 'permissions' => $permissions,
                 'routes' => $routes,
-                'suggested_ringotel_domain' => $suggested_ringotel_domain,
-                'default_region' => $region,
-                'default_package' => $package,
-                'dont_send_user_credentials' => $dont_send_user_credentials,
+                'settings' => $appSettings,
                 'connections' => $connections,
-                'default_protocol' => $protocol,
-                'default_port' => $port,
-                'default_proxy' => $proxy,
+
                 // Define options for other fields as needed
             ];
 
@@ -288,6 +293,27 @@ public function getItemOptions()
         }
     }
 
+    function getAppSettings($domain_uuid)
+    {
+        // Fetch all domain settings for the given domain_uuid
+        $domainSettings = DomainSettings::where('domain_uuid', $domain_uuid)
+            ->where('domain_setting_category', 'mobile_apps')
+            ->where('domain_setting_enabled', true)
+            ->pluck('domain_setting_value', 'domain_setting_subcategory');
+
+
+        // Fetch all default settings
+        $defaultSettings = DefaultSettings::where('default_setting_enabled', true)
+            ->where('default_setting_category', 'mobile_apps')
+            ->pluck('default_setting_value', 'default_setting_subcategory');
+
+        // Merge settings, prioritizing domain-level settings
+        $allSettings = $defaultSettings->merge($domainSettings);
+
+        return $allSettings;
+    }
+
+
     public function getUserPermissions()
     {
         $permissions = [];
@@ -363,7 +389,6 @@ public function createOrganization(StoreRingotelActivationRequest $request, Ring
                 'errors' => ['server' => ['Unable to activate organization. Check logs for more details']]
             ], 500);  // 500 Internal Server Error for any other errors
         }
-
     }
 
     /**
diff --git a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
index 63be6c75..c609afdd 100644
--- a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
-        <!-- <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
+        <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
             <nav class="space-y-1">
-                <a v-for="item in options.navigation" :key="item.name" href="#"
+                <a v-for="item in options.conn_navigation" :key="item.name" href="#"
                     :class="[activeTab === item.slug ? 'bg-gray-200 text-indigo-700 hover:bg-gray-100 hover:text-indigo-700' : 'text-gray-900 hover:bg-gray-200 hover:text-gray-900', 'group flex items-center rounded-md px-3 py-2 text-sm font-medium']"
                     @click.prevent="setActiveTab(item.slug)" :aria-current="item.current ? 'page' : undefined">
                     <component :is="iconComponents[item.icon]"
@@ -15,17 +15,28 @@
 
                 </a>
             </nav>
-        </aside> -->
+        </aside>
 
-        <form @submit.prevent="submitForm" class="sm:px-6 lg:col-span-12 lg:px-0">
-                    
+        <div class="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
+            <form @submit.prevent="submitForm">
+                <div v-if="activeTab === 'settings'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Connection Details</h3>
 
-                    <div class="grid grid-cols-6 gap-6">
+                                <!-- <Toggle label="Status" v-model="" /> -->
+
+                                <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                            </div>
+
+                            <div class="grid grid-cols-6 gap-6">
                                 <div class="col-span-6 sm:col-span-3">
                                     <LabelInputRequired target="connection_name" label="Connection Name"
                                         class="truncate mb-1" />
                                     <InputField v-model="form.connection_name" type="text" name="connection_name"
-                                        id="connection_name" class="mt-1" :error="!!errors?.organization_name" :placeholder="'Enter connection name'"/>
+                                        id="connection_name" class="mt-1" :error="!!errors?.organization_name"
+                                        :placeholder="'Enter connection name'" />
                                     <div v-if="errors?.connection_name" class="mt-2 text-xs text-red-600">
                                         {{ errors.connection_name[0] }}
                                     </div>
@@ -36,7 +47,8 @@
                                 <div class="col-span-6 sm:col-span-3">
                                     <LabelInputRequired label="Protocol" class="truncate mb-1" />
                                     <ComboBox :options="options.protocols" :search="true" :placeholder="'Select protocol'"
-                                        :error="errors?.protocol && errors.protocol.length > 0" :selectedItem="options.default_protocol"
+                                        :error="errors?.protocol && errors.protocol.length > 0"
+                                        :selectedItem="options.settings.mobile_app_conn_protocol"
                                         @update:model-value="handleUpdateProtocolField" />
                                     <div v-if="errors?.protocol" class="mt-2 text-xs text-red-600">
                                         {{ errors.protocol[0] }}
@@ -48,53 +60,72 @@
                                     <LabelInputRequired target="domain" label="Domain or IP Address"
                                         class="truncate mb-1" />
                                     <InputField v-model="form.domain" type="text" name="domain"
-                                        id="domain" class="mt-1" :error="!!errors?.domain" />
+                                        :placeholder="'Enter domain or IP'" id="domain" class="mt-1"
+                                        :error="!!errors?.domain" />
                                     <div v-if="errors?.domain" class="mt-2 text-xs text-red-600">
                                         {{ errors.domain[0] }}
                                     </div>
                                 </div>
 
                                 <div class="col-span-6 sm:col-span-3">
-                                    <LabelInputRequired target="domain" label="Port"
-                                        class="truncate mb-1" />
-                                    <InputField v-model="form.port" type="text" name="port"
+                                    <LabelInputRequired target="domain" label="Port" class="truncate mb-1" />
+                                    <InputField v-model="form.port" type="text" name="port" :placeholder="'Enter port'"
                                         id="port" class="mt-1" :error="!!errors?.port" />
                                     <div v-if="errors?.port" class="mt-2 text-xs text-red-600">
                                         {{ errors.port[0] }}
                                     </div>
                                 </div>
 
+                                <div class="divide-y divide-gray-200 col-span-6 ">
 
+                                    <Toggle label="Do not verify server certificate" description=""
+                                        v-model="form.dont_send_user_credentials" customClass="py-4" />
 
-                                <!-- <div class="divide-y divide-gray-200 col-span-6">
+                                    <Toggle label="Disable SRTP" description=""
+                                        v-model="form.disable_srtp" customClass="py-4" />
 
-                                    <Toggle label="Secure User Credentials"
-                                        description="When enabled, users will receive a one-time link to access their app password instead of plain text."
-                                        v-model="form.dont_send_user_credentials" customClass="py-4" />
+                                </div>
+                            </div>
 
-                                </div> -->
 
+                            <div class="w-full border-t border-gray-300" />
 
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Outbound Proxy Settings</h3>
+                            </div>
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6">
+                                    <LabelInputRequired target="proxy" label="Address"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.proxy" type="text" name="proxy"
+                                        id="proxy" class="mt-1" :error="!!errors?.organization_name"
+                                        :placeholder="'Enter proxy address'" />
+                                    <div v-if="errors?.proxy" class="mt-2 text-xs text-red-600">
+                                        {{ errors.proxy[0] }}
+                                    </div>
+                                </div>
 
                             </div>
 
 
-            <!-- <div class="px-4 py-3 text-right sm:px-6">
-                <button type="submit"
-                    class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
-                    ref="saveButtonRef" :disabled="isSubmitting">
-                    <Spinner :show="isSubmitting" />
-                    Save
-                </button>
-            </div> -->
-            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                <button type="sumbit" :disabled="isSubmitting" class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto" @click="open = false">
-                    <Spinner :show="isSubmitting" />
-                    Save
-                </button>
-                <button type="button" @click="emits('cancel')" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
-              </div>
-        </form>
+
+                            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                <button type="sumbit" :disabled="isSubmitting"
+                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
+                                    @click="open = false">
+                                    <Spinner :show="isSubmitting" />
+                                    Save
+                                </button>
+                                <button type="button" @click="emits('cancel')"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
     </div>
 </template>
 
@@ -113,6 +144,7 @@ import { Cog6ToothIcon, AdjustmentsHorizontalIcon, EllipsisVerticalIcon } from '
 import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
 import { PlusIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/solid";
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import Toggle from "@generalComponents/Toggle.vue";
 
 
 const props = defineProps({
@@ -126,11 +158,14 @@ const page = usePage();
 
 const form = reactive({
     // items: props.items,
-    org_id: props.options.orgId,
-    connection_name: null,
-    protocol: null,
+    org_id: props.options.settings.orgId,
+    connection_name: props.options.settings.suggested_connection_name,
+    protocol: props.options.settings.mobile_app_conn_protocol,
     domain: props.options.model.domain_name,
-    port: props.options.default_port,
+    port: props.options.settings.connection_port,
+    dont_verify_server_certificate: props.options.settings.dont_verify_server_certificate === "true",
+    disable_srtp: props.options.settings.disable_srtp === "true", 
+    proxy: props.options.settings.mobile_app_proxy,
     _token: page.props.csrf_token,
 })
 
@@ -138,7 +173,7 @@ const emits = defineEmits(['submit', 'cancel', 'domain-selected']);
 
 
 // Initialize activeTab with the currently active tab from props
-const activeTab = ref(props.options.navigation.find(item => item.slug)?.slug || props.options.navigation[0].slug);
+const activeTab = ref(props.options.conn_navigation.find(item => item.slug)?.slug || props.options.conn_navigation[0].slug);
 
 
 const submitForm = () => {
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index aeb00252..69f8f14e 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -133,7 +133,7 @@
 
     </div>
 
-    <AddEditItemModal :customClass="'sm:max-w-2xl'" :show="showConnectionModal" :header="'Create a Connection'" :loading="loadingModal"
+    <AddEditItemModal :customClass="'sm:max-w-3xl'" :show="showConnectionModal" :header="'Create a Connection'" :loading="loadingModal"
         @close="handleModalClose">
         <template #modal-body>
             <CreateRingotelConnectionForm :options="options" :errors="formErrors"
@@ -207,10 +207,10 @@ const page = usePage();
 
 const form = reactive({
     organization_name: props.options.model.domain_description,
-    organization_domain: props.options.suggested_ringotel_domain,
-    region: props.options.default_region,
-    package: props.options.default_package,
-    dont_send_user_credentials: props.options.dont_send_user_credentials === "true",
+    organization_domain: props.options.settings.suggested_ringotel_domain,
+    region: props.options.settings.organization_region,
+    package: props.options.settings.package,
+    dont_send_user_credentials: props.options.settings.dont_send_user_credentials === "true",
     domain_uuid: props.options.model.domain_uuid,
     _token: page.props.csrf_token,
 })

From 945045c7be0f01f01d540d1deb4e10ff86499823 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Sat, 21 Dec 2024 00:24:57 -0800
Subject: [PATCH 12/19] added additional fields

---
 app/Http/Controllers/AppsController.php       |   9 +-
 .../StoreRingotelConnectionRequest.php        | 102 ++++++++
 resources/js/Pages/RingotelAppSettings.vue    |   2 +-
 .../forms/CreateRingotelConnectionForm.vue    | 220 ++++++++++++------
 .../forms/CreateRingotelOrgForm.vue           |  11 +-
 5 files changed, 266 insertions(+), 78 deletions(-)
 create mode 100644 app/Http/Requests/StoreRingotelConnectionRequest.php

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index c5e1d070..febb4ec3 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -18,6 +18,7 @@
 use App\Models\MobileAppPasswordResetLinks;
 use SimpleSoftwareIO\QrCode\Facades\QrCode;
 use App\Http\Requests\StoreRingotelActivationRequest;
+use App\Http\Requests\StoreRingotelConnectionRequest;
 
 class AppsController extends Controller
 {
@@ -186,7 +187,9 @@ public function getItemOptions()
             ];
 
 
-            $routes = [];
+            $routes = [
+                'create_connection' => route('apps.connection.create'),
+            ];
 
             $regions = [
                 ['value' => '1', 'name' => 'US East'],
@@ -521,8 +524,10 @@ public function updateOrganization(Request $request) {}
      *
      * @return \Illuminate\Http\JsonResponse
      */
-    public function createConnection(Request $request)
+    public function createConnection(StoreRingotelConnectionRequest $request, RingotelApiService $ringotelApiService)
     {
+
+        return;
         // Build data array
         $data = array(
             'method' => 'createBranch',
diff --git a/app/Http/Requests/StoreRingotelConnectionRequest.php b/app/Http/Requests/StoreRingotelConnectionRequest.php
new file mode 100644
index 00000000..38950ae6
--- /dev/null
+++ b/app/Http/Requests/StoreRingotelConnectionRequest.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreRingotelConnectionRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize(): bool
+    {
+        return Auth::check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'connection_name' => 'required|string|max:100',
+            'protocol' => 'required|string',
+            'domain' => 'required|string',
+            'port' => 'nullable|numeric',
+            'dont_verify_server_certificate' => 'present',
+            'disable_srtp' => 'present',
+            'proxy' => 'nullable|string',
+            'g711u_enabled' => 'present',
+            'g711a_enabled' => 'present',
+            'g729_enabled' => 'present',
+            'opus_enabled' => 'present',
+            'registration_ttl' => 'required|numeric',
+            'max_registrations' => 'required|numeric',
+        ];
+    }
+
+
+    public function prepareForValidation(): void
+    {
+        logger($this);
+
+        // Check if 'region' is missing or empty and set it to null
+        if (!$this->has('region') || $this->input('region') === 'NULL') {
+            $this->merge(['region' => null]);
+        }
+
+        // Check if 'package' is missing or empty and set it to null
+        if (!$this->has('package') || $this->input('package') === 'NULL') {
+            $this->merge(['package' => null]);
+        }
+
+        if ($this->has('dont_send_user_credentials')) {
+            $this->merge([
+                'dont_send_user_credentials' => $this->dont_send_user_credentials ? 'true' : 'false',
+            ]);
+        }
+
+    }
+
+    /**
+     * Sanitize the input field to prevent XSS and remove unwanted characters.
+     *
+     * @param string $input
+     * @return string
+     */
+    protected function sanitizeInput(string $input): string
+    {
+        // Trim whitespace
+        $input = trim($input);
+
+        // Strip HTML tags
+        $input = strip_tags($input);
+
+        // Escape special characters
+        $input = htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
+
+        // Remove any non-ASCII characters if necessary (optional)
+        $input = preg_replace('/[^\x20-\x7E]/', '', $input);
+
+        return $input;
+    }
+
+    /**
+     * Get custom attributes for validator errors.
+     *
+     * @return array
+     */
+    public function attributes(): array
+    {
+        return [
+            'voicemail_id' => 'voicemail extension',
+            'voicemail_password' => 'voicemail password',
+            'greeting_id' => 'extension number',
+            'voicemail_mail_to' => 'email address',
+            'voicemail_enabled' => 'enabled',
+            'voicemail_description' => 'description',
+            'voicemail_alternate_greet_id' => 'value',
+        ];
+    }
+}
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index edc97e21..53c61286 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -159,7 +159,7 @@
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
             <CreateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="activateFormSubmiting" :activeTab="activationActiveTab"
-                @submit="handleCreateRequest" @cancel="handleModalClose" />
+                @submit="handleCreateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse"/>
         </template>
     </AddEditItemModal>
 
diff --git a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
index c609afdd..e9f6f3c5 100644
--- a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
@@ -10,7 +10,7 @@
                         aria-hidden="true" />
                     <span class="truncate">{{ item.name }}</span>
                     <ExclamationCircleIcon
-                        v-if="((errors?.device_address || errors?.device_template) && item.slug === 'settings')"
+                        v-if="((errors?.connection_name || errors?.device_template) && item.slug === 'settings')"
                         class="ml-2 h-5 w-5 text-red-500" aria-hidden="true" />
 
                 </a>
@@ -35,7 +35,7 @@
                                     <LabelInputRequired target="connection_name" label="Connection Name"
                                         class="truncate mb-1" />
                                     <InputField v-model="form.connection_name" type="text" name="connection_name"
-                                        id="connection_name" class="mt-1" :error="!!errors?.organization_name"
+                                        id="connection_name" class="mt-1" :error="!!errors?.connection_name"
                                         :placeholder="'Enter connection name'" />
                                     <div v-if="errors?.connection_name" class="mt-2 text-xs text-red-600">
                                         {{ errors.connection_name[0] }}
@@ -68,7 +68,7 @@
                                 </div>
 
                                 <div class="col-span-6 sm:col-span-3">
-                                    <LabelInputRequired target="domain" label="Port" class="truncate mb-1" />
+                                    <LabelInputOptional target="domain" label="Port" class="truncate mb-1" />
                                     <InputField v-model="form.port" type="text" name="port" :placeholder="'Enter port'"
                                         id="port" class="mt-1" :error="!!errors?.port" />
                                     <div v-if="errors?.port" class="mt-2 text-xs text-red-600">
@@ -79,10 +79,10 @@
                                 <div class="divide-y divide-gray-200 col-span-6 ">
 
                                     <Toggle label="Do not verify server certificate" description=""
-                                        v-model="form.dont_send_user_credentials" customClass="py-4" />
+                                        v-model="form.dont_verify_server_certificate" customClass="py-4" />
 
-                                    <Toggle label="Disable SRTP" description=""
-                                        v-model="form.disable_srtp" customClass="py-4" />
+                                    <Toggle label="Disable SRTP" description="" v-model="form.disable_srtp"
+                                        customClass="py-4" />
 
                                 </div>
                             </div>
@@ -97,11 +97,9 @@
 
                             <div class="grid grid-cols-6 gap-6">
                                 <div class="col-span-6">
-                                    <LabelInputRequired target="proxy" label="Address"
-                                        class="truncate mb-1" />
-                                    <InputField v-model="form.proxy" type="text" name="proxy"
-                                        id="proxy" class="mt-1" :error="!!errors?.organization_name"
-                                        :placeholder="'Enter proxy address'" />
+                                    <LabelInputOptional target="proxy" label="Address" class="truncate mb-1" />
+                                    <InputField v-model="form.proxy" type="text" name="proxy" id="proxy" class="mt-1"
+                                        :error="!!errors?.proxy" :placeholder="'Enter proxy address'" />
                                     <div v-if="errors?.proxy" class="mt-2 text-xs text-red-600">
                                         {{ errors.proxy[0] }}
                                     </div>
@@ -109,6 +107,139 @@
 
                             </div>
 
+                            <div class="w-full border-t border-gray-300" />
+
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Audio Codecs</h3>
+                            </div>
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6">
+                                    <fieldset>
+                                        <div class="space-y-5">
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.g711u_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="comments" class="font-medium text-gray-900">G.711
+                                                        Ulaw</label>
+
+                                                </div>
+                                            </div>
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.g711a_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="candidates" class="font-medium text-gray-900">G.711
+                                                        Alaw</label>
+
+                                                </div>
+                                            </div>
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.g729_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="offers" class="font-medium text-gray-900">G.729</label>
+
+                                                </div>
+                                            </div>
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.opus_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="offers" class="font-medium text-gray-900">Opus</label>
+
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </fieldset>
+
+                                </div>
+
+                            </div>
+
+                            <div class="w-full border-t border-gray-300" />
+
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Miscellaneous</h3>
+                            </div>
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputOptional target="registration_ttl" label="Registration TTL" class="truncate mb-1" />
+                                    <InputField v-model="form.registration_ttl" type="text" name="registration_ttl" id="registration_ttl" class="mt-1"
+                                        :error="!!errors?.registration_ttl" :placeholder="''" />
+                                    <div v-if="errors?.registration_ttl" class="mt-2 text-xs text-red-600">
+                                        {{ errors.registration_ttl[0] }}
+                                    </div>
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputOptional target="max_registrations" label="Max. registrations per user" class="truncate mb-1" />
+                                    <InputField v-model="form.max_registrations" type="text" name="max_registrations" id="max_registrations" class="mt-1"
+                                        :error="!!errors?.max_registrations" :placeholder="''" />
+                                    <div v-if="errors?.max_registrations" class="mt-2 text-xs text-red-600">
+                                        {{ errors.max_registrations[0] }}
+                                    </div>
+                                </div>
+
+                            </div>
+
+
 
 
                             <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
@@ -164,12 +295,18 @@ const form = reactive({
     domain: props.options.model.domain_name,
     port: props.options.settings.connection_port,
     dont_verify_server_certificate: props.options.settings.dont_verify_server_certificate === "true",
-    disable_srtp: props.options.settings.disable_srtp === "true", 
+    disable_srtp: props.options.settings.disable_srtp === "true",
     proxy: props.options.settings.mobile_app_proxy,
+    g711u_enabled: props.options.settings.g711u_enabled === "true",
+    g711a_enabled: props.options.settings.g711a_enabled === "true",
+    g729_enabled: props.options.settings.g729_enabled === "true",
+    opus_enabled: props.options.settings.opus_enabled === "true",
+    registration_ttl: props.options.settings.registration_ttl,
+    max_registrations: props.options.settings.max_registrations,
     _token: page.props.csrf_token,
 })
 
-const emits = defineEmits(['submit', 'cancel', 'domain-selected']);
+const emits = defineEmits(['submit', 'cancel']);
 
 
 // Initialize activeTab with the currently active tab from props
@@ -181,64 +318,10 @@ const submitForm = () => {
     emits('submit', form); // Emit the event with the form data
 }
 
-const handleTemplateUpdate = (newSelectedItem) => {
-    form.device_template = newSelectedItem.value;
-}
-
 const handleUpdateProtocolField = (selected) => {
     form.protocol = selected.value;
 }
 
-const handleExtensionUpdate = (newSelectedItem, index) => {
-    form.lines[index].user_id = newSelectedItem.value;
-    form.lines[index].display_name = newSelectedItem.value;
-}
-
-const handleDomainUpdate = (newSelectedItem) => {
-    form.domain_uuid = newSelectedItem.value;
-    form.device_profile_uuid = "NULL";
-    form.extension = "NULL";
-    if (newSelectedItem.value !== "NULL") {
-        emits('domain-selected', newSelectedItem.value); // Emit 'domain-selected' event when the domain is updated
-    }
-}
-
-// Function to determine placeholder based on the current value
-function placeholderText(fieldName) {
-    const fieldValue = form[fieldName];
-    if (fieldValue === null) {
-        return "Keep existing setting";
-    } else if (fieldValue === "NULL") {
-        return "Current settings will be cleared";
-    } else {
-        return fieldValue; // Use the actual value as the placeholder
-    }
-}
-
-const handleKeyTypeUpdate = (newSelectedItem, index) => {
-    const newValue = newSelectedItem.value === 'sharedline' ? 'true' : null;
-
-    // Only update if the value is different
-    if (form.lines[index].shared_line !== newValue) {
-        form.lines[index].shared_line = newValue;
-    }
-};
-
-
-const addNewLineKey = () => {
-    // console.log(props.options);
-    // Define the new line key object with default values
-    const newLineKey = {
-        line_number: form.lines.length + 1, // Increment line number based on the array length
-        user_id: null,                      // Set initial user_id to null or any default value
-        display_name: '',                   // Set initial display_name to an empty string
-        shared_line: null,                  // Set initial shared_line to null or any default value
-        device_line_uuid: null
-    };
-
-    // Push the new line key to the form.lines array
-    form.lines.push(newLineKey);
-};
 
 const iconComponents = {
     'Cog6ToothIcon': Cog6ToothIcon,
@@ -249,9 +332,6 @@ const setActiveTab = (tabSlug) => {
     activeTab.value = tabSlug;
 };
 
-const deleteLineKey = (index) => {
-    form.lines.splice(index, 1);  // Remove the line key at the specified index
-};
 
 
 </script>
\ No newline at end of file
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index 69f8f14e..4f7232bb 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -136,7 +136,7 @@
     <AddEditItemModal :customClass="'sm:max-w-3xl'" :show="showConnectionModal" :header="'Create a Connection'" :loading="loadingModal"
         @close="handleModalClose">
         <template #modal-body>
-            <CreateRingotelConnectionForm :options="options" :errors="formErrors"
+            <CreateRingotelConnectionForm :options="options" :errors="errors"
                 :is-submitting="ringotelConnectionFormSubmiting" @submit="handleCreateConnectionRequest" @cancel="handleModalClose"/>
         </template>
     </AddEditItemModal>
@@ -215,7 +215,7 @@ const form = reactive({
     _token: page.props.csrf_token,
 })
 
-const emits = defineEmits(['submit', 'cancel']);
+const emits = defineEmits(['submit', 'cancel', 'error']);
 
 const submitForm = () => {
     emits('submit', form); // Emit the event with the form data
@@ -237,7 +237,7 @@ const handleCreateConnectionRequest = (form) => {
     ringotelConnectionFormSubmiting.value = true;
     formErrors.value = null;
 
-    axios.post(props.routes.create_connection, form)
+    axios.post(props.options.routes.create_connection, form)
         .then((response) => {
             ringotelConnectionFormSubmiting.value = false;
             showNotification('success', response.data.messages);
@@ -247,8 +247,9 @@ const handleCreateConnectionRequest = (form) => {
             // handleClearSelection();
         }).catch((error) => {
             ringotelConnectionFormSubmiting.value = false;
-            handleClearSelection();
-            handleFormErrorResponse(error);
+            // handleClearSelection();
+            // handleFormErrorResponse(error);
+            emits('error', error); // Emit the event with error
         });
 
 };

From 463b3b14784ee994c071ff04cff3cc7d7dc0e784 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Sun, 22 Dec 2024 23:49:09 -0800
Subject: [PATCH 13/19] added more settings

---
 app/Console/Commands/Updates/Update0916.php   |  70 ++++++++++
 app/Http/Controllers/AppsController.php       | 118 ++++------------
 .../StoreRingotelConnectionRequest.php        |  27 ++--
 ...p => StoreRingotelOrganizationRequest.php} |   4 +-
 app/Services/RingotelApiService.php           | 128 ++++++++++++++++++
 .../seeders/RecommendedSettingsSeeder.php     |  24 ++++
 resources/js/Pages/RingotelAppSettings.vue    |   8 +-
 .../forms/CreateRingotelConnectionForm.vue    |  85 ++++++++++--
 .../forms/CreateRingotelOrgForm.vue           |   8 +-
 9 files changed, 353 insertions(+), 119 deletions(-)
 rename app/Http/Requests/{StoreRingotelActivationRequest.php => StoreRingotelOrganizationRequest.php} (95%)

diff --git a/app/Console/Commands/Updates/Update0916.php b/app/Console/Commands/Updates/Update0916.php
index e79d827e..2b9406a6 100644
--- a/app/Console/Commands/Updates/Update0916.php
+++ b/app/Console/Commands/Updates/Update0916.php
@@ -15,6 +15,34 @@ class Update0916
     public function apply()
     {
         $updates = [
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'windows_link',
+                'type' => 'text',
+                'value' => '',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'apple_store_link',
+                'type' => 'text',
+                'value' => '',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'google_play_link',
+                'type' => 'text',
+                'value' => '',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'mac_link',
+                'type' => 'text',
+                'value' => '',
+                'description' => '',
+            ],
             [
                 'category' => 'mobile_apps',
                 'subcategory' => 'organization_region',
@@ -36,6 +64,27 @@ public function apply()
                 'value' => '',
                 'description' => '',
             ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'mobile_app_conn_protocol',
+                'type' => 'text',
+                'value' => 'sip',
+                'description' => 'sip or tcp or sips',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'mobile_app_proxy',
+                'type' => 'text',
+                'value' => '',
+                'description' => '',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'dont_send_user_credentials',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => "Don't include user credentials in the welcome email",
+            ],
             [
                 'category' => 'mobile_apps',
                 'subcategory' => 'dont_verify_server_certificate',
@@ -148,6 +197,27 @@ public function apply()
                 'value' => 'false',
                 'description' => 'Enable OPUS codec',
             ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'show_call_settings',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => 'Allow users to configure call settings from within the app, such as call forwarding, voicemail, call waiting.',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'app_opus_codec',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => 'Enable the OPUS audio codec between the softphone apps and a softphone server',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'one_push',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => "Don't send a second push notification in the case of the user's mobile app was not waked up by the first one.",
+            ],
         ];
 
         try {
diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index febb4ec3..bbd01921 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -17,7 +17,7 @@
 use Illuminate\Support\Facades\Session;
 use App\Models\MobileAppPasswordResetLinks;
 use SimpleSoftwareIO\QrCode\Facades\QrCode;
-use App\Http\Requests\StoreRingotelActivationRequest;
+use App\Http\Requests\StoreRingotelOrganizationRequest;
 use App\Http\Requests\StoreRingotelConnectionRequest;
 
 class AppsController extends Controller
@@ -184,6 +184,11 @@ public function getItemOptions()
                     'icon' => 'Cog6ToothIcon',
                     'slug' => 'settings',
                 ],
+                [
+                    'name' => 'Features',
+                    'icon' => 'AdjustmentsHorizontalIcon',
+                    'slug' => 'features',
+                ],
             ];
 
 
@@ -328,7 +333,7 @@ public function getUserPermissions()
      *
      * @return \Illuminate\Http\JsonResponse
      */
-    public function createOrganization(StoreRingotelActivationRequest $request, RingotelApiService $ringotelApiService)
+    public function createOrganization(StoreRingotelOrganizationRequest $request, RingotelApiService $ringotelApiService)
     {
         $this->ringotelApiService = $ringotelApiService;
 
@@ -527,107 +532,42 @@ public function updateOrganization(Request $request) {}
     public function createConnection(StoreRingotelConnectionRequest $request, RingotelApiService $ringotelApiService)
     {
 
-        return;
-        // Build data array
-        $data = array(
-            'method' => 'createBranch',
-            'params' => array(
-                "orgid" => $request->org_id,
-                'name' => $request->connection_name,
-                'address' => $request->connection_domain . ":" . $request->connection_port,
-                'provision' => array(
-                    'protocol' => $request->connection_protocol,
-                    'noverify' => true,
-                    'multitenant' => true,
-                    'nosrtp' => true,
-                    'norec' => true,
-                    'internal' => false,
-                    'sms' => false,
-                    'maxregs' => 4,
-                    'private' => false,
-                    'dtmfmode' => 'rfc2833',
-                    'regexpires' => $request->connection_ttl,
-                    'proxy' => array(
-                        'paddr' => $request->connection_proxy_address,
-                        'pauth' => '',
-                        'ppass' => '',
-                    ),
-                    'httpsproxy' => array(
-                        'address' => '',
-                    ),
-                    'certificate' => '',
-                    'tones' => array(
-                        'Ringback2' => 'Ringback 1',
-                        'Progress' => 'Progress 1',
-                        'Ringback' => 'United States',
-                    ),
-                    'features' => 'pbx',
-                    "speeddial" => array(
-                        [
-                            'number' => '*97',
-                            'title' => 'Voicemail'
-                        ]
-                    ),
-                    'vmail' => [
-                        'ext' => '*97',
-                        'name' => 'Voicemail',
-                        'mess' => 'You have a new message',
-                        'off' => '',
-                        'on' => ''
-                    ],
-                    'dnd' => [
-                        'off' => '*79',
-                        'on' => '*78'
-                    ],
-                    'forwarding' => [
-                        'cfuon' => '',
-                        'cfboff' => '',
-                        'cfon' => '*72',
-                        'cfbon' => '',
-                        'cfuoff' => '',
-                        'cfoff' => '*73'
-                    ],
+        $this->ringotelApiService = $ringotelApiService;
 
-                )
-            )
-        );
+        $inputs = $request->validated();
 
+        logger($inputs);
 
-        // Add codecs
-        if (isset($request->connection_codec_u711)) {
-            $codec = array(
-                'codec' => 'G.711 Ulaw',
-                'frame' => 20
-            );
-            $codecs[] = $codec;
+        try {
+            // Send API request to create organization
+            $organization = $this->ringotelApiService->createConnection($inputs);
+
+            // Return a JSON response indicating success
+            return response()->json([
+                'org_id' => $organization['id'],
+                'messages' => ['success' => ['Organization successfully activated']]
+            ], 201);
+        } catch (\Exception $e) {
+            logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
+            // Handle any other exception that may occur
+            return response()->json([
+                'success' => false,
+                'errors' => ['server' => ['Unable to add connection. Check logs for more details']]
+            ], 500);  // 500 Internal Server Error for any other errors
         }
 
 
-        if (isset($request->connection_codec_a711)) {
+        // Add codecs
+        if (isset($request->connection_codec_u711)) {
             $codec = array(
-                'codec' => 'G.711 Alaw',
+                'codec' => 'G.711 Ulaw',
                 'frame' => 20
             );
             $codecs[] = $codec;
         }
 
-        if (isset($request->connection_codec_729)) {
-            $codec = array(
-                'codec' => 'G.729',
-                'frame' => 20
-            );
-            $codecs[] = $codec;
-        }
 
-        if (isset($request->connection_codec_opus)) {
-            $codec = array(
-                'codec' => 'OPUS',
-                'frame' => 20
-            );
-            $codecs[] = $codec;
-        }
 
-        $data['params']['provision']['codecs'] = $codecs;
 
         // Send request to create Connecion to Ringotel
         $response = Http::ringotel()
diff --git a/app/Http/Requests/StoreRingotelConnectionRequest.php b/app/Http/Requests/StoreRingotelConnectionRequest.php
index 38950ae6..b5a8f24f 100644
--- a/app/Http/Requests/StoreRingotelConnectionRequest.php
+++ b/app/Http/Requests/StoreRingotelConnectionRequest.php
@@ -20,12 +20,14 @@ public function authorize(): bool
     public function rules(): array
     {
         return [
+            'org_id' => 'present',
             'connection_name' => 'required|string|max:100',
             'protocol' => 'required|string',
             'domain' => 'required|string',
             'port' => 'nullable|numeric',
             'dont_verify_server_certificate' => 'present',
             'disable_srtp' => 'present',
+            'multitenant' => 'present',
             'proxy' => 'nullable|string',
             'g711u_enabled' => 'present',
             'g711a_enabled' => 'present',
@@ -33,29 +35,26 @@ public function rules(): array
             'opus_enabled' => 'present',
             'registration_ttl' => 'required|numeric',
             'max_registrations' => 'required|numeric',
+            'app_opus_codec' => 'present',
+            'one_push' => 'present',
+            'show_call_settings' => 'present',
+            'allow_call_recording' => 'present',
         ];
     }
 
 
     public function prepareForValidation(): void
     {
-        logger($this);
-
         // Check if 'region' is missing or empty and set it to null
-        if (!$this->has('region') || $this->input('region') === 'NULL') {
-            $this->merge(['region' => null]);
-        }
-
-        // Check if 'package' is missing or empty and set it to null
-        if (!$this->has('package') || $this->input('package') === 'NULL') {
-            $this->merge(['package' => null]);
+        if (!$this->has('protocol') || $this->input('protocol') === 'NULL') {
+            $this->merge(['protocol' => null]);
         }
 
-        if ($this->has('dont_send_user_credentials')) {
-            $this->merge([
-                'dont_send_user_credentials' => $this->dont_send_user_credentials ? 'true' : 'false',
-            ]);
-        }
+        // if ($this->has('dont_send_user_credentials')) {
+        //     $this->merge([
+        //         'dont_send_user_credentials' => $this->dont_send_user_credentials ? 'true' : 'false',
+        //     ]);
+        // }
 
     }
 
diff --git a/app/Http/Requests/StoreRingotelActivationRequest.php b/app/Http/Requests/StoreRingotelOrganizationRequest.php
similarity index 95%
rename from app/Http/Requests/StoreRingotelActivationRequest.php
rename to app/Http/Requests/StoreRingotelOrganizationRequest.php
index 59b2b2b7..68729daa 100644
--- a/app/Http/Requests/StoreRingotelActivationRequest.php
+++ b/app/Http/Requests/StoreRingotelOrganizationRequest.php
@@ -2,12 +2,10 @@
 
 namespace App\Http\Requests;
 
-use App\Rules\UniqueExtension;
 use Illuminate\Support\Facades\Auth;
-use App\Rules\ValidVoicemailPassword;
 use Illuminate\Foundation\Http\FormRequest;
 
-class StoreRingotelActivationRequest extends FormRequest
+class StoreRingotelOrganizationRequest extends FormRequest
 {
     /**
      * Determine if the user is authorized to make this request.
diff --git a/app/Services/RingotelApiService.php b/app/Services/RingotelApiService.php
index b75ee51f..10ba245c 100644
--- a/app/Services/RingotelApiService.php
+++ b/app/Services/RingotelApiService.php
@@ -80,6 +80,134 @@ public function getOrganizations()
         });
     }
 
+    public function createConnection($params)
+    {
+
+        // Build codecs array based on enabled flags
+        $codecs = [];
+
+        if ($params['g711u_enabled']) {
+            $codecs[] = [
+                'codec' => 'G.711 Ulaw',
+                'frame' => 20,
+            ];
+        }
+
+        if ($params['g711a_enabled']) {
+            $codecs[] = [
+                'codec' => 'G.711 Alaw',
+                'frame' => 20,
+            ];
+        }
+
+        if ($params['g729_enabled']) {
+            $codecs[] = [
+                'codec' => 'G.729',
+                'frame' => 20,
+            ];
+        }
+
+        if ($params['opus_enabled']) {
+            $codecs[] = [
+                'codec' => 'OPUS',
+                'frame' => 20,
+            ];
+        }
+
+        // Build data array
+        $data = array(
+            'method' => 'createBranch',
+            'params' => array(
+                "orgid" => $params['org_id'],
+                'name' => $params['connection_name'],
+                'address' => $params['domain'] . ":" . $params['port'],
+                'provision' => array(
+                    'protocol' => $params['protocol'],
+                    'noverify' => $params['dont_verify_server_certificate'],
+                    'nosrtp' => $params['disable_srtp'],
+                    'multitenant' => $params['multitenant'],
+                    'norec' => !$params['allow_call_recording'],
+                    // 'internal' => false,
+                    // 'sms' => false,
+                    'maxregs' => (int) $params['max_registrations'],
+                    // 'private' => false,
+                    'dtmfmode' => 'rfc2833',
+                    'regexpires' => (int) $params['registration_ttl'],
+                    'proxy' => array(
+                        'paddr' => $params['proxy'],
+                        'pauth' => '',
+                        'ppass' => '',
+                    ),
+                    'httpsproxy' => array(
+                        'address' => '',
+                    ),
+                    'certificate' => '',
+                    'tones' => array(
+                        'Ringback2' => 'Ringback 1',
+                        'Progress' => 'Progress 1',
+                        'Ringback' => 'United States',
+                    ),
+                    '1push' => $params['one_push'],
+                    'noptions' => !$params['show_call_settings'],
+                    'features' => 'pbx',
+                    // "speeddial" => array(
+                    //     [
+                    //         'number' => '*97',
+                    //         'title' => 'Voicemail'
+                    //     ]
+                    // ),
+                    // 'vmail' => [
+                    //     'ext' => '*97',
+                    //     'name' => 'Voicemail',
+                    //     'mess' => 'You have a new message',
+                    //     'off' => '',
+                    //     'on' => ''
+                    // ],
+                    // 'dnd' => [
+                    //     'off' => '*79',
+                    //     'on' => '*78'
+                    // ],
+                    // 'forwarding' => [
+                    //     'cfuon' => '',
+                    //     'cfboff' => '',
+                    //     'cfon' => '*72',
+                    //     'cfbon' => '',
+                    //     'cfuoff' => '',
+                    //     'cfoff' => '*73'
+                    // ],
+
+                    'codecs' => $codecs,
+                    'app' => array(
+                        'g711' => !$params['app_opus_codec'],
+
+                    ),
+
+                )
+            )
+        );
+
+        // logger($data);
+
+        $response = Http::ringotel()
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function () {
+                throw new \Exception("Unable to activate organization");
+            })
+            ->json();
+
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        if (!isset($response['result'])) {
+            throw new \Exception("An unknown error has occurred");
+        }
+
+        return $response['result'];
+    }
+
     public function getUsersByOrgId($orgId)
     {
         $data = [
diff --git a/database/seeders/RecommendedSettingsSeeder.php b/database/seeders/RecommendedSettingsSeeder.php
index 0eb5925b..5ca158c2 100644
--- a/database/seeders/RecommendedSettingsSeeder.php
+++ b/database/seeders/RecommendedSettingsSeeder.php
@@ -278,6 +278,30 @@ private function createDefaultSettings()
                 'default_setting_enabled'       => true,
                 'default_setting_description'   => "Enable OPUS codec",
             ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'show_call_settings',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Allow users to configure call settings from within the app, such as call forwarding, voicemail, call waiting.",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'app_opus_codec',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Enable the OPUS audio codec between the softphone apps and a softphone server.",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'one_push',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Don't send a second push notification in the case of the user's mobile app was not waked up by the first one.",
+            ],
             [
                 'default_setting_category'      => 'theme',
                 'default_setting_subcategory'   => 'favicon',
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index 53c61286..783b1c06 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -159,7 +159,8 @@
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
             <CreateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="activateFormSubmiting" :activeTab="activationActiveTab"
-                @submit="handleCreateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse"/>
+                @submit="handleCreateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse" 
+                @success="showNotification('success', { request: [$event] })" @clear-errors="handleClearErrors"/>
         </template>
     </AddEditItemModal>
 
@@ -444,6 +445,11 @@ const getItemOptions = (itemUuid = null) => {
         });
 }
 
+const handleClearErrors = () => {
+    formErrors.value = null;
+}
+
+
 const handleFormErrorResponse = (error) => {
     if (error.request?.status == 419) {
         showNotification('error', { request: ["Session expired. Reload the page"] });
diff --git a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
index e9f6f3c5..0a285004 100644
--- a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
@@ -10,7 +10,7 @@
                         aria-hidden="true" />
                     <span class="truncate">{{ item.name }}</span>
                     <ExclamationCircleIcon
-                        v-if="((errors?.connection_name || errors?.device_template) && item.slug === 'settings')"
+                        v-if="((errors?.connection_name || errors?.domain || errors?.registration_ttl || errors?.max_registrations) && item.slug === 'settings')"
                         class="ml-2 h-5 w-5 text-red-500" aria-hidden="true" />
 
                 </a>
@@ -220,24 +220,88 @@
 
                             <div class="grid grid-cols-6 gap-6">
                                 <div class="col-span-6 sm:col-span-3">
-                                    <LabelInputOptional target="registration_ttl" label="Registration TTL" class="truncate mb-1" />
-                                    <InputField v-model="form.registration_ttl" type="text" name="registration_ttl" id="registration_ttl" class="mt-1"
-                                        :error="!!errors?.registration_ttl" :placeholder="''" />
+                                    <LabelInputRequired target="registration_ttl" label="Registration TTL"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.registration_ttl" type="text" name="registration_ttl"
+                                        id="registration_ttl" class="mt-1" :error="!!errors?.registration_ttl"
+                                        :placeholder="''" />
                                     <div v-if="errors?.registration_ttl" class="mt-2 text-xs text-red-600">
                                         {{ errors.registration_ttl[0] }}
                                     </div>
                                 </div>
 
                                 <div class="col-span-6 sm:col-span-3">
-                                    <LabelInputOptional target="max_registrations" label="Max. registrations per user" class="truncate mb-1" />
-                                    <InputField v-model="form.max_registrations" type="text" name="max_registrations" id="max_registrations" class="mt-1"
-                                        :error="!!errors?.max_registrations" :placeholder="''" />
+                                    <LabelInputRequired target="max_registrations" label="Max. registrations per user"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.max_registrations" type="text" name="max_registrations"
+                                        id="max_registrations" class="mt-1" :error="!!errors?.max_registrations"
+                                        :placeholder="''" />
                                     <div v-if="errors?.max_registrations" class="mt-2 text-xs text-red-600">
                                         {{ errors.max_registrations[0] }}
                                     </div>
                                 </div>
 
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Use OPUS audio codec"
+                                        description="Enabling the OPUS audio codec between the softphone apps and a softphone server improves call quality on low bandwidth/congested networks, but may cause small audio delays."
+                                        v-model="form.app_opus_codec" customClass="py-4" />
+                                    <Toggle label="Send one push notification"
+                                        description="This option can be useful for Queues or Ring groups with sequential ring strategy. It doesn't try to send second push notification in the case of the user's mobile app was not waked up by the first one."
+                                        v-model="form.one_push" customClass="py-4" />
+
+                                </div>
+
+                                
+
+                            </div>
+
+
+
+
+                            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                <button type="sumbit" :disabled="isSubmitting"
+                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
+                                    @click="open = false">
+                                    <Spinner :show="isSubmitting" />
+                                    Save
+                                </button>
+                                <button type="button" @click="emits('cancel')"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="activeTab === 'features'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Features</h3>
+
+                                <!-- <Toggle label="Status" v-model="" /> -->
+
+                                <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                            </div>
+
+                         
+
+                            <div class="grid grid-cols-6 gap-6">
+
+
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Show call settings"
+                                        description="Allow users to configure call settings from within the app, such as call forwarding, voicemail, call waiting."
+                                        v-model="form.show_call_settings" customClass="py-4" />
+                                    <Toggle label="Allow call recording"
+                                        description="Allow users to record calls. IMPORTANT: You are responsible for your compliance with call recording laws. We do not indemnify against legal claims that may arise from the use of this feature."
+                                        v-model="form.allow_call_recording" customClass="py-4" />
+
+                                </div>
+
                             </div>
+    
 
 
 
@@ -289,7 +353,7 @@ const page = usePage();
 
 const form = reactive({
     // items: props.items,
-    org_id: props.options.settings.orgId,
+    org_id: props.options.orgId,
     connection_name: props.options.settings.suggested_connection_name,
     protocol: props.options.settings.mobile_app_conn_protocol,
     domain: props.options.model.domain_name,
@@ -297,12 +361,17 @@ const form = reactive({
     dont_verify_server_certificate: props.options.settings.dont_verify_server_certificate === "true",
     disable_srtp: props.options.settings.disable_srtp === "true",
     proxy: props.options.settings.mobile_app_proxy,
+    multitenant: props.options.settings.multitenant_mode === "true",
     g711u_enabled: props.options.settings.g711u_enabled === "true",
     g711a_enabled: props.options.settings.g711a_enabled === "true",
     g729_enabled: props.options.settings.g729_enabled === "true",
     opus_enabled: props.options.settings.opus_enabled === "true",
     registration_ttl: props.options.settings.registration_ttl,
     max_registrations: props.options.settings.max_registrations,
+    app_opus_codec: props.options.settings.app_opus_codec === "true",
+    one_push: props.options.settings.one_push === "true",
+    show_call_settings: props.options.settings.show_call_settings === "true",
+    allow_call_recording: props.options.settings.allow_call_recording === "true",
     _token: page.props.csrf_token,
 })
 
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index 4f7232bb..cfbe2b4c 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -169,7 +169,6 @@ import CreateRingotelConnectionForm from "../forms/CreateRingotelConnectionForm.
 
 const ringotelConnectionFormSubmiting = ref(null);
 const loadingModal = ref(false);
-const formErrors = ref(null);
 
 const props = defineProps({
     options: Object,
@@ -215,7 +214,7 @@ const form = reactive({
     _token: page.props.csrf_token,
 })
 
-const emits = defineEmits(['submit', 'cancel', 'error']);
+const emits = defineEmits(['submit', 'cancel', 'error', 'success', 'clear-errors']);
 
 const submitForm = () => {
     emits('submit', form); // Emit the event with the form data
@@ -230,17 +229,18 @@ const handleUpdatePackageField = (selected) => {
 }
 
 const handleAddConnection = (selected) => {
+    emits('clear-errors');
     showConnectionModal.value = true;
 }
 
 const handleCreateConnectionRequest = (form) => {
     ringotelConnectionFormSubmiting.value = true;
-    formErrors.value = null;
+    emits('clear-errors');
 
     axios.post(props.options.routes.create_connection, form)
         .then((response) => {
             ringotelConnectionFormSubmiting.value = false;
-            showNotification('success', response.data.messages);
+            emits('success', response.data.messages);
             
             // handleSearchButtonClick();
             // handleModalClose();

From 68efdb4205d87d10c06fb17989e1341654475de4 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Tue, 24 Dec 2024 23:21:37 -0800
Subject: [PATCH 14/19] From server

---
 app/Console/Commands/Updates/Update0916.php   |  42 ++++
 app/Http/Controllers/AppsController.php       | 111 ++++-------
 .../StoreRingotelConnectionRequest.php        |  12 ++
 app/Services/RingotelApiService.php           |  59 +++---
 app/helpers.php                               |  83 --------
 .../seeders/RecommendedSettingsSeeder.php     |  49 +++++
 resources/js/Pages/RingotelAppSettings.vue    |   2 +-
 .../forms/CreateRingotelConnectionForm.vue    | 180 +++++++++++++++++-
 .../forms/CreateRingotelOrgForm.vue           |   2 +
 .../components/icons/SettingsApplications.vue |  12 ++
 10 files changed, 366 insertions(+), 186 deletions(-)
 create mode 100644 resources/js/Pages/components/icons/SettingsApplications.vue

diff --git a/app/Console/Commands/Updates/Update0916.php b/app/Console/Commands/Updates/Update0916.php
index 2b9406a6..3f9c776a 100644
--- a/app/Console/Commands/Updates/Update0916.php
+++ b/app/Console/Commands/Updates/Update0916.php
@@ -204,6 +204,34 @@ public function apply()
                 'value' => 'true',
                 'description' => 'Allow users to configure call settings from within the app, such as call forwarding, voicemail, call waiting.',
             ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'allow_state_change',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => 'Allow users to change their state from the app, such as Online/DND/At the desk.',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'allow_video_calls',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => 'Allow users to make 1-on-1 video calls.',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'allow_internal_chat',
+                'type' => 'boolean',
+                'value' => 'true',
+                'description' => 'Allow users to use internal chat feature and create new chats.',
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'disable_iphone_recents',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => "If enabled, this option disables call history syncing in iPhone Recents and hides the 'Show calls in iPhone Recents' option from the app's settings.",
+            ],
             [
                 'category' => 'mobile_apps',
                 'subcategory' => 'app_opus_codec',
@@ -218,6 +246,20 @@ public function apply()
                 'value' => 'false',
                 'description' => "Don't send a second push notification in the case of the user's mobile app was not waked up by the first one.",
             ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'call_delay',
+                'type' => 'text',
+                'value' => '10',
+                'description' => "Call Delay for 'At the Desk' Status (Seconds)",
+            ],
+            [
+                'category' => 'mobile_apps',
+                'subcategory' => 'desktop_app_delay',
+                'type' => 'boolean',
+                'value' => 'false',
+                'description' => "Delay incoming calls to the desktop app",
+            ],
         ];
 
         try {
diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index bbd01921..3857056c 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -189,6 +189,41 @@ public function getItemOptions()
                     'icon' => 'AdjustmentsHorizontalIcon',
                     'slug' => 'features',
                 ],
+                [
+                    'name' => 'PBX Features',
+                    'icon' => 'SettingsApplications',
+                    'slug' => 'pbx_features',
+                ],
+                // [
+                //     'name' => 'SMS Settings',
+                //     'icon' => 'AdjustmentsHorizontalIcon',
+                //     'slug' => 'sms_settings',
+                // ],
+                // [
+                //     'name' => 'Screen Pop-ups',
+                //     'icon' => 'AdjustmentsHorizontalIcon',
+                //     'slug' => 'screen_popups',
+                // ],
+                // [
+                //     'name' => 'Visual Call Park',
+                //     'icon' => 'AdjustmentsHorizontalIcon',
+                //     'slug' => 'screen_popups',
+                // ],
+                // [
+                //     'name' => 'Speed Dial',
+                //     'icon' => 'AdjustmentsHorizontalIcon',
+                //     'slug' => 'speed_dial',
+                // ],
+                // [
+                //     'name' => 'BLFs',
+                //     'icon' => 'AdjustmentsHorizontalIcon',
+                //     'slug' => 'blfs',
+                // ],
+                // [
+                //     'name' => 'Web Pages',
+                //     'icon' => 'AdjustmentsHorizontalIcon',
+                //     'slug' => 'web_pages',
+                // ],
             ];
 
 
@@ -540,12 +575,12 @@ public function createConnection(StoreRingotelConnectionRequest $request, Ringot
 
         try {
             // Send API request to create organization
-            $organization = $this->ringotelApiService->createConnection($inputs);
+            $connection = $this->ringotelApiService->createConnection($inputs);
 
             // Return a JSON response indicating success
             return response()->json([
-                'org_id' => $organization['id'],
-                'messages' => ['success' => ['Organization successfully activated']]
+                'conn_id' => $connection['id'],
+                'messages' => ['success' => ['Connection created successfully']]
             ], 201);
         } catch (\Exception $e) {
             logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
@@ -556,76 +591,6 @@ public function createConnection(StoreRingotelConnectionRequest $request, Ringot
             ], 500);  // 500 Internal Server Error for any other errors
         }
 
-
-        // Add codecs
-        if (isset($request->connection_codec_u711)) {
-            $codec = array(
-                'codec' => 'G.711 Ulaw',
-                'frame' => 20
-            );
-            $codecs[] = $codec;
-        }
-
-
-
-
-        // Send request to create Connecion to Ringotel
-        $response = Http::ringotel()
-            //->dd()
-            ->timeout(5)
-            ->withBody(json_encode($data), 'application/json')
-            ->post('/')
-            ->throw(function ($response, $e) {
-                return response()->json([
-                    'error' => 401,
-                    'message' => 'Unable to create connection'
-                ]);
-            })
-            ->json();
-
-
-        // If successful return success status
-        if (isset($response['result'])) {
-            // Add recieved OrgID to the request and store it in database
-            $request->merge(['conn_id' => $response['result']['id']]);
-
-            if (!appsStoreConnectionDetails($request)) {
-                return response()->json([
-                    'connection_name' => $request->connection_name,
-                    'connection_domain' => $request->connection_domain,
-                    'org_id' => $request->org_id,
-                    'conn_id' => $response['result']['id'],
-                    'message' => 'Connection was created successfully, but unable to store Conn ID in database',
-                ]);
-            }
-
-            return response()->json([
-                'connection_name' => $request->connection_name,
-                'connection_domain' => $request->connection_domain,
-                'org_id' => $request->org_id,
-                'conn_id' => $response['result']['id'],
-                'message' => 'Connection created successfully',
-            ]);
-            // Otherwise return failed status
-        } elseif (isset($response['error'])) {
-            return response()->json([
-                'error' => 401,
-                'connection_name' => $request->connection_name,
-                'connection_domain' => $request->connection_domain,
-                'org_id' => $request->org_id,
-                'conn_id' => $response['result']['id'],
-                'message' => $response['error']['message']
-            ]);
-        } else {
-            return response()->json([
-                'error' => 401,
-                'connection_name' => $request->connection_name,
-                'connection_domain' => $request->connection_domain,
-                'org_id' => $request->org_id,
-                'conn_id' => $response['result']['id'],
-                'message' => 'Unknown error'
-            ]);
-        }
     }
 
 
diff --git a/app/Http/Requests/StoreRingotelConnectionRequest.php b/app/Http/Requests/StoreRingotelConnectionRequest.php
index b5a8f24f..74f78204 100644
--- a/app/Http/Requests/StoreRingotelConnectionRequest.php
+++ b/app/Http/Requests/StoreRingotelConnectionRequest.php
@@ -39,6 +39,18 @@ public function rules(): array
             'one_push' => 'present',
             'show_call_settings' => 'present',
             'allow_call_recording' => 'present',
+            'allow_state_change' => 'present',
+            'allow_video_calls' => 'present',
+            'allow_internal_chat' => 'present',
+            'disable_iphone_recents' => 'present',
+            'call_delay' => 'required|numeric',
+            'desktop_app_delay' => 'present',
+            'pbx_features' => 'present',
+            'voicemail_extension' => 'nullable|string',
+            'dnd_on_code' => 'nullable|string',
+            'dnd_off_code' => 'nullable|string',
+            'cf_on_code' => 'nullable|string',
+            'cf_off_code' => 'nullable|string',
         ];
     }
 
diff --git a/app/Services/RingotelApiService.php b/app/Services/RingotelApiService.php
index 10ba245c..c61ec468 100644
--- a/app/Services/RingotelApiService.php
+++ b/app/Services/RingotelApiService.php
@@ -149,32 +149,39 @@ public function createConnection($params)
                     ),
                     '1push' => $params['one_push'],
                     'noptions' => !$params['show_call_settings'],
-                    'features' => 'pbx',
-                    // "speeddial" => array(
-                    //     [
-                    //         'number' => '*97',
-                    //         'title' => 'Voicemail'
-                    //     ]
-                    // ),
-                    // 'vmail' => [
-                    //     'ext' => '*97',
-                    //     'name' => 'Voicemail',
-                    //     'mess' => 'You have a new message',
-                    //     'off' => '',
-                    //     'on' => ''
-                    // ],
-                    // 'dnd' => [
-                    //     'off' => '*79',
-                    //     'on' => '*78'
-                    // ],
-                    // 'forwarding' => [
-                    //     'cfuon' => '',
-                    //     'cfboff' => '',
-                    //     'cfon' => '*72',
-                    //     'cfbon' => '',
-                    //     'cfuoff' => '',
-                    //     'cfoff' => '*73'
-                    // ],
+                    'norecents' => $params['disable_iphone_recents'],
+                    'novideo' => !$params['allow_video_calls'],
+                    'nostates' => !$params['allow_state_change'],
+                    'nochats' => !$params['allow_internal_chat'],
+                    'calldelay' => $params['call_delay'],
+                    'pcdelay' => $params['desktop_app_delay'],
+                    'features' => $params['pbx_features'] ? 'pbx' : '',
+                    "speeddial" => array(
+                        [
+                            'number' => $params['voicemail_extension'],
+                            'title' => 'Voicemail'
+                        ]
+                    ),
+                    'vmail' => [
+                        'ext' => $params['voicemail_extension'],
+                        'name' => 'Voicemail',
+                        'mess' => 'You have a new message',
+                        'off' => '',
+                        'on' => '',
+                        'spref' => ''
+                    ],
+                    'dnd' => [
+                        'off' => $params['dnd_on_code'],
+                        'on' => $params['dnd_off_code']
+                    ],
+                    'forwarding' => [
+                        'cfuon' => '',
+                        'cfboff' => '',
+                        'cfon' => $params['cf_on_code'],
+                        'cfbon' => '',
+                        'cfuoff' => '',
+                        'cfoff' => $params['cf_off_code']
+                    ],
 
                     'codecs' => $codecs,
                     'app' => array(
diff --git a/app/helpers.php b/app/helpers.php
index 26e41e0d..aef2fd81 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -108,41 +108,6 @@ function getFusionPBXPreviousURL($previous_url)
     }
 }
 
-// if (!function_exists('appsStoreOrganizationDetails')) {
-//     function appsStoreOrganizationDetails(Request $request)
-//     {
-//         // Delete any existing records
-//         DB::table('v_domain_settings')
-//             ->where('domain_uuid', '=', $request->organization_uuid)
-//             ->delete();
-
-//         // Store new records
-//         $domainSetting1 = DomainSettings::create([
-//             'domain_uuid' => $request->organization_uuid,
-//             'domain_setting_category' => 'app shell',
-//             'domain_setting_subcategory' => 'org_id',
-//             'domain_setting_name' => 'text',
-//             'domain_setting_value' => $request->org_id,
-//             'domain_setting_enabled' => true,
-//         ]);
-
-//         $domainSetting2 = DomainSettings::create([
-//             'domain_uuid' => $request->organization_uuid,
-//             'domain_setting_category' => 'mobile_apps',
-//             'domain_setting_subcategory' => 'dont_send_user_credentials',
-//             'domain_setting_name' => 'boolean',
-//             'domain_setting_value' => $request->dont_send_user_credentials,
-//             'domain_setting_enabled' => true,
-//             'domain_setting_description' => "Don't include user credentials in the welcome email"
-//         ]);
-
-//         if ($domainSetting1->save() && $domainSetting2->save()/* && $domainSetting3->save()*/) {
-//             return true;
-//         } else {
-//             return false;
-//         }
-//     }
-// }
 
 if (!function_exists('appsGetOrganizationDetails')) {
     function appsGetOrganizationDetails($domain_uuid)
@@ -190,54 +155,6 @@ function appsGetOrganization($org_id)
 }
 
 
-if (!function_exists('appsStoreConnectionDetails')) {
-    function appsStoreConnectionDetails(Request $request)
-    {
-
-        // Store new records
-        $domainSettingsModel = DomainSettings::create([
-            'domain_uuid' => $request->connection_organization_uuid,
-            'domain_setting_category' => 'app shell',
-            'domain_setting_subcategory' => 'conn_id',
-            'domain_setting_name' => 'array',
-            'domain_setting_value' => $request->conn_id,
-            'domain_setting_enabled' => true,
-        ]);
-        $saved = $domainSettingsModel->save();
-        if ($saved) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-}
-
-// Moved to Service container
-// if (!function_exists('appsGetOrganizations')) {
-//     function appsGetOrganizations()
-//     {
-//         $data = array(
-//             'method' => 'getOrganizations',
-//         );
-
-//         $response = Http::ringotel()
-//             //->dd()
-//             ->timeout(5)
-//             ->withBody(json_encode($data), 'application/json')
-//             ->post('/')
-//             ->throw(function ($response, $e) {
-//                 return response()->json([
-//                     'status' => 401,
-//                     'error' => [
-//                         'message' => "Unable to retrieve organizations",
-//                     ],
-//                 ])->getData(true);
-//             })
-//             ->json();
-//         return $response;
-//     }
-// }
-
 // Get a list of connections that belong to requested organization via Ringotel API call
 if (!function_exists('appsGetConnections')) {
     function appsGetConnections($org_id)
diff --git a/database/seeders/RecommendedSettingsSeeder.php b/database/seeders/RecommendedSettingsSeeder.php
index 5ca158c2..99c4f687 100644
--- a/database/seeders/RecommendedSettingsSeeder.php
+++ b/database/seeders/RecommendedSettingsSeeder.php
@@ -286,6 +286,39 @@ private function createDefaultSettings()
                 'default_setting_enabled'       => true,
                 'default_setting_description'   => "Allow users to configure call settings from within the app, such as call forwarding, voicemail, call waiting.",
             ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'allow_state_change',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Allow users to change their state from the app, such as Online/DND/At the desk.",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'allow_video_calls',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Allow users to make 1-on-1 video calls.",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'allow_internal_chat',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Allow users to use internal chat feature and create new chats.",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'disable_iphone_recents',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'true',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "If enabled, this option disables call history syncing in iPhone Recents and hides the 'Show calls in iPhone Recents' option from the app's settings.",
+            ],
+
             [
                 'default_setting_category'      => 'mobile_apps',
                 'default_setting_subcategory'   => 'app_opus_codec',
@@ -302,6 +335,22 @@ private function createDefaultSettings()
                 'default_setting_enabled'       => true,
                 'default_setting_description'   => "Don't send a second push notification in the case of the user's mobile app was not waked up by the first one.",
             ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'call_delay',
+                'default_setting_name'          => 'text',
+                'default_setting_value'         => '10',
+                'default_setting_enabled'       => false,
+                'default_setting_description'   => "Delay incoming calls to the desktop app",
+            ],
+            [
+                'default_setting_category'      => 'mobile_apps',
+                'default_setting_subcategory'   => 'desktop_app_delay',
+                'default_setting_name'          => 'boolean',
+                'default_setting_value'         => 'false',
+                'default_setting_enabled'       => true,
+                'default_setting_description'   => "Delay incoming calls to the desktop app",
+            ],
             [
                 'default_setting_category'      => 'theme',
                 'default_setting_subcategory'   => 'favicon',
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index 783b1c06..4c73ffae 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -160,7 +160,7 @@
         <template #modal-body>
             <CreateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="activateFormSubmiting" :activeTab="activationActiveTab"
                 @submit="handleCreateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse" 
-                @success="showNotification('success', { request: [$event] })" @clear-errors="handleClearErrors"/>
+                @success="showNotification('success', $event )" @clear-errors="handleClearErrors"/>
         </template>
     </AddEditItemModal>
 
diff --git a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
index 0a285004..052c6045 100644
--- a/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelConnectionForm.vue
@@ -252,7 +252,7 @@
 
                                 </div>
 
-                                
+
 
                             </div>
 
@@ -284,7 +284,7 @@
                                 <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
                             </div>
 
-                         
+
 
                             <div class="grid grid-cols-6 gap-6">
 
@@ -294,14 +294,57 @@
                                     <Toggle label="Show call settings"
                                         description="Allow users to configure call settings from within the app, such as call forwarding, voicemail, call waiting."
                                         v-model="form.show_call_settings" customClass="py-4" />
+
                                     <Toggle label="Allow call recording"
                                         description="Allow users to record calls. IMPORTANT: You are responsible for your compliance with call recording laws. We do not indemnify against legal claims that may arise from the use of this feature."
                                         v-model="form.allow_call_recording" customClass="py-4" />
 
+                                    <Toggle label="Allow state change"
+                                        description="Allow users to change their state from the app, such as Online/DND/At the desk."
+                                        v-model="form.allow_state_change" customClass="py-4" />
+
+                                    <Toggle label="Allow video calls" description="Allow users to make 1-on-1 video calls."
+                                        v-model="form.allow_video_calls" customClass="py-4" />
+
+                                    <Toggle label="Allow internal chat"
+                                        description="Allow users to use internal chat feature and create new chats."
+                                        v-model="form.allow_internal_chat" customClass="py-4" />
+
+                                    <Toggle label="Disable call history syncing in iPhone Recents "
+                                        description="If enabled, this option disables call history syncing in iPhone Recents and hides the 'Show calls in iPhone Recents' option from the app's settings."
+                                        v-model="form.disable_iphone_recents" customClass="py-4" />
+
                                 </div>
 
                             </div>
-    
+
+                            <div class="grid grid-cols-6 gap-6">
+
+                                <div class="col-span-5">
+                                    <div class="flex items-center">
+                                        <LabelInputRequired target="call_delay"
+                                            label="Call Delay for 'At the Desk' Status (Seconds)"
+                                            class="mb-1 mr-1 flex-initial w-72" />
+                                        <InputField v-model="form.call_delay" type="text" name="call_delay" id="call_delay"
+                                            class="flex-none w-14" :error="!!errors?.call_delay" :placeholder="''" />
+                                    </div>
+
+                                    <div v-if="errors?.call_delay" class="mt-2 text-xs text-red-600">
+                                        {{ errors.call_delay[0] }}
+                                    </div>
+
+                                </div>
+
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Delay incoming calls to the desktop app" description=""
+                                        v-model="form.desktop_app_delay" customClass="py-4" />
+
+
+                                </div>
+
+                            </div>
+
 
 
 
@@ -319,6 +362,123 @@
                         </div>
                     </div>
                 </div>
+
+                <div v-if="activeTab === 'pbx_features'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                            <div>
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">PBX Features</h3>
+                                <p class="mt-1 text-sm text-gray-500">Provide feature codes configured on your PBX to handle
+                                    them on your server.</p>
+                            </div>
+
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Enable PBX features"
+                                        description="Handle features on the PBX. NOTE: Please ensure you provide shortcodes for the PBX features."
+                                        v-model="form.pbx_features" customClass="py-4" />
+
+                                </div>
+                            </div>
+
+                            <div v-if="form.pbx_features">
+                                <div>
+                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Voicemail</h3>
+                                </div>
+
+                                <div class="grid grid-cols-6 gap-6 mt-1">
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="voicemail_extension" label="Voicemail code"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.voicemail_extension" type="text"
+                                            name="voicemail_extension" id="voicemail_extension" class="mt-1"
+                                            :error="!!errors?.voicemail_extension" :placeholder="''" />
+                                        <div v-if="errors?.voicemail_extension" class="mt-2 text-xs text-red-600">
+                                            {{ errors.voicemail_extension[0] }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            <div v-if="form.pbx_features">
+                                <div>
+                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Do Not Disturb</h3>
+                                </div>
+
+                                <div class="grid grid-cols-6 gap-6 mt-1">
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="dnd_on_code" label="Activate DND"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.dnd_on_code" type="text"
+                                            name="dnd_on_code" id="dnd_on_code" class="mt-1"
+                                            :error="!!errors?.dnd_on_code" :placeholder="''" />
+                                        <div v-if="errors?.dnd_on_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.dnd_on_code[0] }}
+                                        </div>
+                                    </div>
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="dnd_off_code" label="Deactivate DND"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.dnd_off_code" type="text"
+                                            name="dnd_off_code" id="dnd_off_code" class="mt-1"
+                                            :error="!!errors?.dnd_off_code" :placeholder="''" />
+                                        <div v-if="errors?.dnd_off_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.dnd_off_code[0] }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            <div v-if="form.pbx_features">
+                                <div>
+                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Call Forwarding</h3>
+                                </div>
+
+                                <div class="grid grid-cols-6 gap-6 mt-1">
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="cf_on_code" label="Activate Call Forwarding"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.cf_on_code" type="text"
+                                            name="cf_on_code" id="cf_on_code" class="mt-1"
+                                            :error="!!errors?.cf_on_code" :placeholder="''" />
+                                        <div v-if="errors?.cf_on_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.cf_on_code[0] }}
+                                        </div>
+                                    </div>
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="cf_off_code" label="Deactivate Call Forwarding"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.cf_off_code" type="text"
+                                            name="cf_off_code" id="cf_off_code" class="mt-1"
+                                            :error="!!errors?.cf_off_code" :placeholder="''" />
+                                        <div v-if="errors?.cf_off_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.cf_off_code[0] }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+
+                            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                <button type="sumbit" :disabled="isSubmitting"
+                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
+                                    @click="open = false">
+                                    <Spinner :show="isSubmitting" />
+                                    Save
+                                </button>
+                                <button type="button" @click="emits('cancel')"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
             </form>
         </div>
     </div>
@@ -340,6 +500,7 @@ import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
 import { PlusIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/solid";
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import Toggle from "@generalComponents/Toggle.vue";
+import SettingsApplications from "@icons/SettingsApplications.vue"
 
 
 const props = defineProps({
@@ -372,6 +533,18 @@ const form = reactive({
     one_push: props.options.settings.one_push === "true",
     show_call_settings: props.options.settings.show_call_settings === "true",
     allow_call_recording: props.options.settings.allow_call_recording === "true",
+    allow_state_change: props.options.settings.allow_state_change === "true",
+    allow_video_calls: props.options.settings.allow_video_calls === "true",
+    allow_internal_chat: props.options.settings.allow_internal_chat === "true",
+    disable_iphone_recents: props.options.settings.disable_iphone_recents === "true",
+    call_delay: props.options.settings.call_delay,
+    desktop_app_delay: props.options.settings.desktop_app_delay === "true",
+    pbx_features: props.options.settings.pbx_features === "true",
+    voicemail_extension: props.options.settings.voicemail_extension,
+    dnd_on_code: props.options.settings.dnd_on_code,
+    dnd_off_code: props.options.settings.dnd_off_code,
+    cf_on_code: props.options.settings.cf_on_code,
+    cf_off_code: props.options.settings.cf_off_code,
     _token: page.props.csrf_token,
 })
 
@@ -394,6 +567,7 @@ const handleUpdateProtocolField = (selected) => {
 
 const iconComponents = {
     'Cog6ToothIcon': Cog6ToothIcon,
+    'SettingsApplications': SettingsApplications,
     'AdjustmentsHorizontalIcon': AdjustmentsHorizontalIcon,
 };
 
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index cfbe2b4c..50f206a9 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -241,6 +241,8 @@ const handleCreateConnectionRequest = (form) => {
         .then((response) => {
             ringotelConnectionFormSubmiting.value = false;
             emits('success', response.data.messages);
+
+            console.log(response.data);
             
             // handleSearchButtonClick();
             // handleModalClose();
diff --git a/resources/js/Pages/components/icons/SettingsApplications.vue b/resources/js/Pages/components/icons/SettingsApplications.vue
new file mode 100644
index 00000000..8e596146
--- /dev/null
+++ b/resources/js/Pages/components/icons/SettingsApplications.vue
@@ -0,0 +1,12 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor"
+        stroke="currentColor">
+        <path d="M440-280h80l12-60q12-5 22.5-10.5T576-364l58 18 40-68-46-40q2-14 2-26t-2-26l46-40-40-68-58 18q-11-8-21.5-13.5T532-620l-12-60h-80l-12 60q-12 5-22.5 10.5T384-596l-58-18-40 68 46 40q-2 14-2 26t2 26l-46 40 40 68 58-18q11 8 21.5 13.5T428-340l12 60Zm40-120q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/>
+        </svg>
+</template>
+
+<script>
+export default {
+    name: 'SettingsApplications',
+};
+</script>
\ No newline at end of file

From 43ec1583e08820b992d49fc1e5ef5bd7d711cc92 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Thu, 26 Dec 2024 12:10:55 -0800
Subject: [PATCH 15/19] finished connection creating

---
 app/Http/Controllers/AppsController.php       | 38 +++++++++++-
 app/Services/RingotelApiService.php           | 33 ++++++++++
 .../forms/CreateRingotelOrgForm.vue           | 61 +++++++++++++++----
 .../general/RingotelConnections.vue           | 25 ++++----
 routes/web.php                                |  1 +
 5 files changed, 131 insertions(+), 27 deletions(-)

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index 3857056c..f42fb9a0 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -54,7 +54,8 @@ public function index()
                 'routes' => [
                     'current_page' => route('apps.index'),
                     'create_organization' => route('apps.organization.create'),
-                    'create_connection' => route('apps.connection.create'),
+                    // 'create_connection' => route('apps.connection.create'),
+                    // 'delete_connection' => route('apps.connection.destroy'),
                     'item_options' => route('apps.item.options'),
                 ]
             ]
@@ -229,6 +230,7 @@ public function getItemOptions()
 
             $routes = [
                 'create_connection' => route('apps.connection.create'),
+                'delete_connection' => route('apps.connection.destroy'),
             ];
 
             $regions = [
@@ -571,15 +573,16 @@ public function createConnection(StoreRingotelConnectionRequest $request, Ringot
 
         $inputs = $request->validated();
 
-        logger($inputs);
-
         try {
             // Send API request to create organization
             $connection = $this->ringotelApiService->createConnection($inputs);
 
             // Return a JSON response indicating success
             return response()->json([
+                'org_id' => $inputs['org_id'],
                 'conn_id' => $connection['id'],
+                'connection_name' => $inputs['connection_name'],
+                'domain' => $inputs['domain'] . ":" . $inputs['port'],
                 'messages' => ['success' => ['Connection created successfully']]
             ], 201);
         } catch (\Exception $e) {
@@ -594,6 +597,35 @@ public function createConnection(StoreRingotelConnectionRequest $request, Ringot
     }
 
 
+    /**
+     * Submit API request to Ringotel to delete specified connection
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function destroyConnection(RingotelApiService $ringotelApiService)
+    {
+
+        $this->ringotelApiService = $ringotelApiService;
+
+        try {
+            // Send API request to create organization
+            $connection = $this->ringotelApiService->deleteConnection(request()->all());
+
+            // Return a JSON response indicating success
+            return response()->json([
+                'messages' => ['success' => ['Connection deleted successfully']]
+            ], 201);
+        } catch (\Exception $e) {
+            logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
+            // Handle any other exception that may occur
+            return response()->json([
+                'success' => false,
+                'errors' => ['server' => ['Unable to delete connection. Check logs for more details']]
+            ], 500);  // 500 Internal Server Error for any other errors
+        }
+
+    }
+
     /**
      * Submit request to update connection to Ringotel
      *
diff --git a/app/Services/RingotelApiService.php b/app/Services/RingotelApiService.php
index c61ec468..6045dd7d 100644
--- a/app/Services/RingotelApiService.php
+++ b/app/Services/RingotelApiService.php
@@ -215,6 +215,39 @@ public function createConnection($params)
         return $response['result'];
     }
 
+    public function deleteConnection($params)
+    {
+
+        $data = array(
+            'method' => 'deleteBranch',
+            'params' => array(
+                'id' => $params['conn_id'],
+                'orgid' => $params['org_id'],
+            )
+        );
+
+        // logger($data);
+
+        $response = Http::ringotel()
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function () {
+                throw new \Exception("Unable to delete connection");
+            })
+            ->json();
+
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        if (!isset($response['result'])) {
+            throw new \Exception("An unknown error has occurred");
+        }
+
+        return $response['result'];
+    }
+
     public function getUsersByOrgId($orgId)
     {
         $data = [
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index 50f206a9..35c73ed0 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -117,13 +117,14 @@
                         <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                             <div class="sm:col-span-full space-y-3">
                                 <!-- <LabelInputOptional :target="'destination_actions'" :label="'Send calls to'" /> -->
-                                <RingotelConnections v-model="props.options.connections"
-                                    :routingTypes="options.routing_types" :optionsUrl="options.routes.get_routing_options"
-                                    @add-connection="handleAddConnection" />
+                                <RingotelConnections v-model="connections" :routingTypes="options.routing_types"
+                                    :optionsUrl="options.routes.get_routing_options" @add-connection="handleAddConnection"
+                                    @delete-connection="handleDeleteConnectionRequest" />
                             </div>
 
-
                         </div>
+
+
                     </div>
                 </div>
             </div>
@@ -133,14 +134,14 @@
 
     </div>
 
-    <AddEditItemModal :customClass="'sm:max-w-3xl'" :show="showConnectionModal" :header="'Create a Connection'" :loading="loadingModal"
-        @close="handleModalClose">
+    <AddEditItemModal :customClass="'sm:max-w-3xl'" :show="showConnectionModal" :header="'Create a Connection'"
+        :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
             <CreateRingotelConnectionForm :options="options" :errors="errors"
-                :is-submitting="ringotelConnectionFormSubmiting" @submit="handleCreateConnectionRequest" @cancel="handleModalClose"/>
+                :is-submitting="ringotelConnectionFormSubmiting" @submit="handleCreateConnectionRequest"
+                @cancel="handleModalClose" />
         </template>
     </AddEditItemModal>
-
 </template>
 
 
@@ -201,6 +202,16 @@ const iconComponents = {
     'BuildingOfficeIcon': BuildingOfficeIcon,
 };
 
+const connections = ref([...props.options.connections]);
+
+// Watch for changes in props.options.connections and update the local variable
+watch(
+    () => props.options.connections,
+    (newConnections) => {
+        connections.value = [...newConnections];
+    }
+);
+
 
 const page = usePage();
 
@@ -242,10 +253,15 @@ const handleCreateConnectionRequest = (form) => {
             ringotelConnectionFormSubmiting.value = false;
             emits('success', response.data.messages);
 
-            console.log(response.data);
-            
-            // handleSearchButtonClick();
-            // handleModalClose();
+            // Add the new connection to the connections array
+            connections.value.push({
+                org_id: response.data.org_id,
+                conn_id: response.data.conn_id,
+                connection_name: response.data.connection_name,
+                domain: response.data.domain
+            });
+
+            handleModalClose();
             // handleClearSelection();
         }).catch((error) => {
             ringotelConnectionFormSubmiting.value = false;
@@ -256,6 +272,27 @@ const handleCreateConnectionRequest = (form) => {
 
 };
 
+const handleDeleteConnectionRequest = (connection) => {
+    console.log(connection);
+    // ringotelConnectionFormSubmiting.value = true;
+    // emits('clear-errors');
+
+    axios.post(props.options.routes.delete_connection, connection)
+        .then((response) => {
+            ringotelConnectionFormSubmiting.value = false;
+            emits('success', response.data.messages);
+
+            const updatedConnections = connections.value.filter(
+                (conn) => conn.conn_id !== connection.conn_id
+            );
+            connections.value = updatedConnections;
+
+        }).catch((error) => {
+            emits('error', error); // Emit the event with error
+        });
+
+};
+
 const handleModalClose = () => {
     showConnectionModal.value = false;
 }
diff --git a/resources/js/Pages/components/general/RingotelConnections.vue b/resources/js/Pages/components/general/RingotelConnections.vue
index b4dc6567..623b25f6 100644
--- a/resources/js/Pages/components/general/RingotelConnections.vue
+++ b/resources/js/Pages/components/general/RingotelConnections.vue
@@ -28,9 +28,8 @@
                             </tr>
                             <tr v-for="(option, index) in connections" :key="index">
                                 <td class=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
-                                    {{ connections[index].ivr_menu_option_digits }}</td>
-                                <td class="px-3 py-4 text-sm text-gray-500">{{ connections[index].key_type_display }}</td>
-                                <td class="px-3 py-4 text-sm text-gray-500">{{ connections[index].key_name }}</td>
+                                    {{ option.connection_name }}</td>
+                                <td class="px-3 py-4 text-sm text-gray-500">{{ option.domain }}</td>
                                 <td class="relative py-2 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
                                     <Menu as="div" class="relative inline-block text-left">
                                         <div>
@@ -57,7 +56,7 @@
                                                         :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Edit</a>
                                                     </MenuItem>
                                                     <MenuItem v-slot="{ active }">
-                                                    <a href="#" @click.prevent="handleDelete(index)"
+                                                    <a href="#" @click.prevent="handleDelete(option)"
                                                         :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Delete</a>
                                                     </MenuItem>
 
@@ -103,20 +102,22 @@ const props = defineProps({
 });
 
 
-const emit = defineEmits(['update:model-value', 'add-connection', 'edit', 'delete'])
+const emit = defineEmits(['update:model-value', 'add-connection', 'edit', 'delete-connection'])
 
 // Create a local reactive copy of the modelValue
 const connections = ref([...props.modelValue]);
 
 
-console.log(connections.value);
-
 const loading = ref(false)
 
 // Watch for changes to the modelValue from the parent and update local state
-watch(() => props.modelValue, (newVal) => {
-    connections.value = [...newVal];
-});
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        connections.value = newVal; // Directly bind to the new value
+    },
+    { deep: true } // Ensure it watches for nested changes
+);
 
 const handleAddConnection = () => emit('add-connection');
 
@@ -124,8 +125,8 @@ const handleEdit = (index) => {
     emit('edit', index); // Emit the edit event with the index
 };
 
-const handleDelete = (index) => {
-    emit('delete', index); // Emit the delete event with the index
+const handleDelete = (connection) => {
+    emit('delete-connection', connection); // Emit the delete event
 };
 
 // Initialize connections and fetch typeOptions
diff --git a/routes/web.php b/routes/web.php
index 4bb7f301..9ea44900 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -225,6 +225,7 @@
     Route::post('/apps/users/{extension}', [AppsController::class, 'mobileAppUserSettings'])->name('mobileAppUserSettings');
     //Route::get('/apps/organization/update', [AppsController::class, 'updateOrganization']) ->name('appsUpdateOrganization');
     Route::post('/apps/connection/create', [AppsController::class, 'createConnection'])->name('apps.connection.create');
+    Route::post('/apps/connection/delete', [AppsController::class, 'destroyConnection'])->name('apps.connection.destroy');
     Route::get('/apps/connection/update', [AppsController::class, 'updateConnection'])->name('appsUpdateConnection');
     Route::post('/apps/user/create', [AppsController::class, 'createUser'])->name('appsCreateUser');
     Route::post('/apps/{domain}/user/sync', [AppsController::class, 'syncUsers'])->name('appsSyncUsers');

From f450feb2d3bc161c2979750de661b4c46da9535d Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Thu, 26 Dec 2024 16:55:23 -0800
Subject: [PATCH 16/19] added edit form

---
 app/DTO/RingotelConnectionDTO.php             |  31 ++
 app/DTO/RingotelOrganizationDTO.php           |   5 +
 app/Http/Controllers/AppsController.php       |  26 +-
 app/Services/RingotelApiService.php           |  63 ++++
 app/helpers.php                               |  59 ++--
 resources/js/Pages/RingotelAppSettings.vue    |  43 +--
 .../forms/CreateRingotelOrgForm.vue           |  25 +-
 .../forms/UpdateRingotelOrgForm.vue           | 318 ++++++++++++++++++
 .../general/RingotelConnections.vue           |  11 +-
 routes/web.php                                |   2 +-
 10 files changed, 517 insertions(+), 66 deletions(-)
 create mode 100644 app/DTO/RingotelConnectionDTO.php
 create mode 100644 resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue

diff --git a/app/DTO/RingotelConnectionDTO.php b/app/DTO/RingotelConnectionDTO.php
new file mode 100644
index 00000000..8b9174a7
--- /dev/null
+++ b/app/DTO/RingotelConnectionDTO.php
@@ -0,0 +1,31 @@
+<?php
+namespace App\DTO;
+
+class RingotelConnectionDTO
+{
+    public $accountId;
+    public $address;
+    public $created;
+    public $domain;
+    public $name;
+    public $id;
+    public $status;
+    public $provision;
+
+    public function __construct(array $data)
+    {
+        $this->accountId = $data['accountid'];
+        $this->address = $data['address'];
+        $this->created = $data['created'];
+        $this->domain = $data['domain'];
+        $this->name = $data['name'];
+        $this->id = $data['id'];
+        $this->status = $data['status'];
+        $this->provision = $data['provision'] ?? [];
+    }
+
+    public static function fromArray(array $data)
+    {
+        return new self($data);
+    }
+}
diff --git a/app/DTO/RingotelOrganizationDTO.php b/app/DTO/RingotelOrganizationDTO.php
index 66876a34..1cc2ebe8 100644
--- a/app/DTO/RingotelOrganizationDTO.php
+++ b/app/DTO/RingotelOrganizationDTO.php
@@ -30,4 +30,9 @@ public static function fromArray(array $data)
     {
         return new self($data);
     }
+
+    public function __toString()
+    {
+        return json_encode(get_object_vars($this));
+    }
 }
diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index f42fb9a0..911731c6 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -161,7 +161,7 @@ protected function filterSearch($query, $value)
         });
     }
 
-    public function getItemOptions()
+    public function getItemOptions(RingotelApiService $ringotelApiService)
     {
         try {
             $item_uuid = request('item_uuid'); // Retrieve item_uuid from the request
@@ -274,6 +274,11 @@ public function getItemOptions()
                             ->where('domain_setting_enabled', true);
                     }])->where($this->model->getKeyName(), $item_uuid)->first();
 
+                    if ($model) {
+                        // Transform settings into org_id
+                        $model->org_id = $model->settings->first()->domain_setting_value ?? null;
+                        unset($model->settings); // Remove settings relationship if not needed
+                    }
 
                 $model->ringotel_status = $model->settings()
                     ->where('domain_setting_category', 'app shell')
@@ -287,32 +292,35 @@ public function getItemOptions()
                     throw new \Exception("Failed to fetch item details. Item not found");
                 }
 
-
                 $routes = array_merge($routes, []);
             }
 
             $permissions = $this->getUserPermissions();
 
             // Get all app settings from Default Settings and overrride with settings saved in Domain Settings
-            $appSettings = $this->getAppSettings($model->domain_uuid);
-            $appSettings['suggested_ringotel_domain'] = strtolower(str_replace(' ', '', $model->domain_description));
+            $appSettings = $this->getAppSettings($model->domain_uuid ?? null);
+            $appSettings['suggested_ringotel_domain'] = strtolower(str_replace(' ', '', $model->domain_description ?? ''));
             $appSettings['suggested_connection_name'] = 'Primary SIP Profile';
 
             // Check if `connection_port` is empty and fall back to `line_sip_port`
             if (empty($appSettings['connection_port'])) {
-                $appSettings['connection_port'] = get_domain_setting('line_sip_port', $model->domain_uuid)  ?? null;
+                $appSettings['connection_port'] = get_domain_setting('line_sip_port', $model->domain_uuid ?? null)  ?? null;
             }
 
-            // logger($appSettings['org_id']);
-            if (!isset($appSettings['org_id'])) {
+            if (!$model->org_id) {
                 $connections = [];
+            }  else {
+                $this->ringotelApiService = $ringotelApiService;
+                $organization = $this->ringotelApiService->getOrganization($model->org_id);
+                $connections = $this->ringotelApiService->getConnections($model->org_id);
             }
 
             // Construct the itemOptions object
             $itemOptions = [
                 'navigation' => $navigation,
                 'conn_navigation' => $conn_navigation,
-                'model' => $model,
+                'model' => $model ?? null,
+                'organization' => $organization ?? null,
                 'regions' => $regions,
                 'packages' => $packages,
                 'protocols' => $protocols,
@@ -593,7 +601,6 @@ public function createConnection(StoreRingotelConnectionRequest $request, Ringot
                 'errors' => ['server' => ['Unable to add connection. Check logs for more details']]
             ], 500);  // 500 Internal Server Error for any other errors
         }
-
     }
 
 
@@ -623,7 +630,6 @@ public function destroyConnection(RingotelApiService $ringotelApiService)
                 'errors' => ['server' => ['Unable to delete connection. Check logs for more details']]
             ], 500);  // 500 Internal Server Error for any other errors
         }
-
     }
 
     /**
diff --git a/app/Services/RingotelApiService.php b/app/Services/RingotelApiService.php
index 6045dd7d..14125628 100644
--- a/app/Services/RingotelApiService.php
+++ b/app/Services/RingotelApiService.php
@@ -2,6 +2,7 @@
 
 namespace App\Services;
 
+use App\DTO\RingotelConnectionDTO;
 use Illuminate\Support\Facades\DB;
 use App\DTO\RingotelOrganizationDTO;
 use Illuminate\Support\Facades\Http;
@@ -52,6 +53,37 @@ public function createOrganization($params)
         return $response['result'];
     }
 
+    public function getOrganization($org_id)
+    {
+        // Prepare the payload
+        $data = array(
+            'method' => 'getOrganization',
+            'params' => array(
+                'id' => $org_id,
+            )
+        );
+
+        $response = Http::ringotel()
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function () {
+                throw new \Exception("Unable to fetch organization");
+            })
+            ->json();
+
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        if (!isset($response['result'])) {
+            throw new \Exception("An unknown error has occurred");
+        }
+
+        // Transform the result into OrganizationDTO
+        return RingotelOrganizationDTO::fromArray($response['result']);
+    }
+
     public function getOrganizations()
     {
         $data = array(
@@ -248,6 +280,37 @@ public function deleteConnection($params)
         return $response['result'];
     }
 
+    public function getConnections($org_id)
+    {
+        $data = array(
+            'method' => 'getBranches',
+            'params' => array(
+                'orgid' => $org_id,
+            )
+        );
+
+        $response = Http::ringotel()
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function () {
+                throw new \Exception("Unable to retrieve connections");
+            })
+            ->json();
+
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        if (!isset($response['result'])) {
+            throw new \Exception("An unknown error has occurred");
+        }
+
+        return collect($response['result'])->map(function ($item) {
+            return RingotelConnectionDTO::fromArray($item);
+        });
+    }
+
     public function getUsersByOrgId($orgId)
     {
         $data = [
diff --git a/app/helpers.php b/app/helpers.php
index aef2fd81..b6746136 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -156,6 +156,7 @@ function appsGetOrganization($org_id)
 
 
 // Get a list of connections that belong to requested organization via Ringotel API call
+// THERE IS a NEW VERSION OF THIS FUNCTION
 if (!function_exists('appsGetConnections')) {
     function appsGetConnections($org_id)
     {
@@ -185,35 +186,35 @@ function appsGetConnections($org_id)
 }
 
 // Delete connection that belong to requested organization via Ringotel API call
-if (!function_exists('appsDeleteConnection')) {
-    function appsDeleteConnection($org_id, $conn_id)
-    {
-        $data = array(
-            'method' => 'deleteBranch',
-            'params' => array(
-                'id' => $conn_id,
-                'orgid' => $org_id,
-            )
-        );
-
-        $response = Http::ringotel()
-            //->dd()
-            ->timeout(30)
-            ->withBody(json_encode($data), 'application/json')
-            ->post('/')
-            ->throw(function ($response, $e) {
-                return response()->json([
-                    'status' => 401,
-                    'error' => [
-                        'message' => "Unable to delete connection",
-                    ],
-                ])->getData(true);
-            })
-            ->json();
-
-        return $response;
-    }
-}
+// if (!function_exists('appsDeleteConnection')) {
+//     function appsDeleteConnection($org_id, $conn_id)
+//     {
+//         $data = array(
+//             'method' => 'deleteBranch',
+//             'params' => array(
+//                 'id' => $conn_id,
+//                 'orgid' => $org_id,
+//             )
+//         );
+
+//         $response = Http::ringotel()
+//             //->dd()
+//             ->timeout(30)
+//             ->withBody(json_encode($data), 'application/json')
+//             ->post('/')
+//             ->throw(function ($response, $e) {
+//                 return response()->json([
+//                     'status' => 401,
+//                     'error' => [
+//                         'message' => "Unable to delete connection",
+//                     ],
+//                 ])->getData(true);
+//             })
+//             ->json();
+
+//         return $response;
+//     }
+// }
 
 // Get a list of all user for this organization and connection
 if (!function_exists('appsGetUsers')) {
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index 4c73ffae..a7bb2377 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -22,10 +22,10 @@
             </template>
 
             <template #action>
-                <button v-if="page.props.auth.can.voicemail_create" type="button" @click.prevent="handleCreateButtonClick()"
+                <!-- <button v-if="page.props.auth.can.voicemail_create" type="button" @click.prevent="handleCreateButtonClick()"
                     class="rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                     Create
-                </button>
+                </button> -->
 
 
             </template>
@@ -105,7 +105,7 @@
                                 <ejs-tooltip v-if="row.ringotel_status == 'true'" :content="'Edit'"
                                     position='TopCenter' target="#destination_tooltip_target">
                                     <div id="destination_tooltip_target">
-                                        <PencilSquareIcon @click="handleEditRequest(row.voicemail_uuid)"
+                                        <PencilSquareIcon @click="handleEditButtonClick(row.domain_uuid)"
                                             class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 active:bg-gray-300 active:duration-150 cursor-pointer" />
 
                                     </div>
@@ -159,19 +159,19 @@
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
             <CreateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="activateFormSubmiting" :activeTab="activationActiveTab"
-                @submit="handleCreateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse" 
+                @submit="handleCreateRequest" @cancel="handleActivationFinish" @error="handleFormErrorResponse" 
                 @success="showNotification('success', $event )" @clear-errors="handleClearErrors"/>
         </template>
     </AddEditItemModal>
 
-    <!-- <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="editModalTrigger" :header="'Edit Voicemail Settings'"
+    <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="showEditModal" :header="'Edit Ringotel Organization'"
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
-            <UpdateVoicemailForm :options="itemOptions" :errors="formErrors" :is-submitting="updateFormSubmiting"
-                @submit="handleUpdateRequest" @cancel="handleModalClose" @error="handleErrorResponse"
-                @success="showNotification('success', { request: [$event] })" />
+            <UpdateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="activateFormSubmiting" :activeTab="activationActiveTab"
+                @submit="handleCreateRequest" @cancel="handleActivationFinish" @error="handleFormErrorResponse" 
+                @success="showNotification('success', $event )" @clear-errors="handleClearErrors"/>
         </template>
-    </AddEditItemModal> -->
+    </AddEditItemModal>
 
     <AddEditItemModal :show="bulkUpdateModalTrigger" :header="'Bulk Edit'" :loading="loadingModal"
         @close="handleModalClose">
@@ -210,7 +210,7 @@ import BulkUpdateDeviceForm from "./components/forms/BulkUpdateDeviceForm.vue";
 import BulkActionButton from "./components/general/BulkActionButton.vue";
 import MainLayout from "../Layouts/MainLayout.vue";
 import CreateRingotelOrgForm from "./components/forms/CreateRingotelOrgForm.vue";
-import UpdateVoicemailForm from "./components/forms/UpdateVoicemailForm.vue";
+import UpdateRingotelOrgForm from "./components/forms/UpdateRingotelOrgForm.vue";
 import Notification from "./components/notifications/Notification.vue";
 import Badge from "@generalComponents/Badge.vue";
 import LinkOffIcon from "@icons/LinkOffIcon.vue";
@@ -223,8 +223,8 @@ const loadingModal = ref(false)
 const selectAll = ref(false);
 const selectedItems = ref([]);
 const selectPageItems = ref(false);
-const createModalTrigger = ref(false);
 const showActivateModal = ref(false);
+const showEditModal = ref(false);
 const bulkUpdateModalTrigger = ref(false);
 const confirmationModalTrigger = ref(false);
 const confirmationModalDestroyPath = ref(null);
@@ -275,8 +275,8 @@ const handleActivateButtonClick = (itemUuid) => {
     getItemOptions(itemUuid);
 }
 
-const handleEditRequest = (itemUuid) => {
-    editModalTrigger.value = true
+const handleEditButtonClick = (itemUuid) => {
+    showEditModal.value = true
     formErrors.value = null;
     loadingModal.value = true
     getItemOptions(itemUuid);
@@ -366,11 +366,16 @@ const handleBulkActionRequest = (action) => {
 }
 
 
-const handleCreateButtonClick = () => {
-    createModalTrigger.value = true
-    formErrors.value = null;
-    loadingModal.value = true
-    getItemOptions();
+// const handleCreateButtonClick = () => {
+//     createModalTrigger.value = true
+//     formErrors.value = null;
+//     loadingModal.value = true
+//     getItemOptions();
+// }
+
+const handleActivationFinish = () => {
+    handleModalClose();
+    handleSearchButtonClick();
 }
 
 const handleSelectAll = () => {
@@ -509,8 +514,8 @@ const handleClearSelection = () => {
 }
 
 const handleModalClose = () => {
-    createModalTrigger.value = false;
     showActivateModal.value = false;
+    showEditModal.value = false,
     confirmationModalTrigger.value = false;
     bulkUpdateModalTrigger.value = false;
 }
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index 35c73ed0..f5236117 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -119,11 +119,22 @@
                                 <!-- <LabelInputOptional :target="'destination_actions'" :label="'Send calls to'" /> -->
                                 <RingotelConnections v-model="connections" :routingTypes="options.routing_types"
                                     :optionsUrl="options.routes.get_routing_options" @add-connection="handleAddConnection"
-                                    @delete-connection="handleDeleteConnectionRequest" />
+                                    @delete-connection="handleDeleteConnectionRequest"
+                                    :isDeleting="showConnectionDeletingStatus" />
                             </div>
 
                         </div>
 
+                        <div class="bg-gray-100 px-4 py-3 text-right sm:px-6">
+
+                            <button @click.prevent="handleFinishButtonClick()"
+                                class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2 
+                                disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-indigo-300 disabled:text-indigo-500"
+                                :disabled="connections.length == 0">
+                                Finish
+                            </button>
+                        </div>
+
 
                     </div>
                 </div>
@@ -194,6 +205,7 @@ const setActiveTab = (tabSlug) => {
 };
 
 const showConnectionModal = ref(false);
+const showConnectionDeletingStatus = ref(false);
 
 
 // Map icon names to their respective components
@@ -231,6 +243,10 @@ const submitForm = () => {
     emits('submit', form); // Emit the event with the form data
 }
 
+const handleFinishButtonClick = () => {
+    emits('cancel'); 
+}
+
 const handleUpdateRegionField = (selected) => {
     form.region = selected.value;
 }
@@ -273,21 +289,22 @@ const handleCreateConnectionRequest = (form) => {
 };
 
 const handleDeleteConnectionRequest = (connection) => {
-    console.log(connection);
-    // ringotelConnectionFormSubmiting.value = true;
+    showConnectionDeletingStatus.value = true;
     // emits('clear-errors');
 
     axios.post(props.options.routes.delete_connection, connection)
         .then((response) => {
-            ringotelConnectionFormSubmiting.value = false;
+            showConnectionDeletingStatus.value = false;
             emits('success', response.data.messages);
 
             const updatedConnections = connections.value.filter(
                 (conn) => conn.conn_id !== connection.conn_id
             );
             connections.value = updatedConnections;
+            console.log(connections.value);
 
         }).catch((error) => {
+            showConnectionDeletingStatus.value = false;
             emits('error', error); // Emit the event with error
         });
 
diff --git a/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue b/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
new file mode 100644
index 00000000..e22f92f8
--- /dev/null
+++ b/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
@@ -0,0 +1,318 @@
+<template>
+    <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
+        <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
+            <nav class="space-y-1">
+                <a v-for="item in options.navigation" :key="item.name" href="#"
+                    :class="[activeTab === item.slug ? 'bg-gray-200 text-indigo-700 hover:bg-gray-100 hover:text-indigo-700' : 'text-gray-900 hover:bg-gray-200 hover:text-gray-900', 'group flex items-center rounded-md px-3 py-2 text-sm font-medium']"
+                    @click.prevent="setActiveTab(item.slug)" :aria-current="item.current ? 'page' : undefined">
+                    <component :is="iconComponents[item.icon]"
+                        :class="[item.current ? 'text-indigo-500 group-hover:text-indigo-500' : 'text-gray-400 group-hover:text-gray-500', '-ml-1 mr-3 h-6 w-6 flex-shrink-0']"
+                        aria-hidden="true" />
+                    <span class="truncate">{{ item.name }}</span>
+                    <ExclamationCircleIcon v-if="((errors?.organization_name || errors?.organization_domain || errors?.region || errors?.package) && item.slug === 'organization') ||
+                        (errors?.voicemail_alternate_greet_id && item.slug === 'advanced')"
+                        class="ml-2 h-5 w-5 text-red-500" aria-hidden="true" />
+
+                </a>
+            </nav>
+        </aside>
+
+        <div class="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
+            <form @submit.prevent="submitForm">
+                <div v-if="activeTab === 'organization'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-50 px-4 py-6 sm:p-6">
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Organization Details</h3>
+
+                                <!-- <Toggle label="Status" v-model="" /> -->
+
+                                <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                            </div>
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="organization_name" label="Organization Name"
+                                        class="truncate" />
+                                    <InputField v-model="form.organization_name" type="text" name="organization_name"
+                                        id="organization_name" class="mt-2" :error="!!errors?.organization_name" />
+                                    <div v-if="errors?.organization_name" class="mt-2 text-xs text-red-600">
+                                        {{ errors.organization_name[0] }}
+                                    </div>
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="organization_domain" label="Unique Organization Domain"
+                                        class="truncate" />
+                                    <InputField v-model="form.organization_domain" type="text" name="organization_domain"
+                                        id="organization_domain" class="mt-2" :error="!!errors?.organization_domain" />
+                                    <div v-if="errors?.organization_domain" class="mt-2 text-xs text-red-600">
+                                        {{ errors.organization_domain[0] }}
+                                    </div>
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired label="Region" class="truncate mb-1" />
+
+                                    <ComboBox :options="options.regions" :search="true" :placeholder="'Select region'"
+                                        :error="errors?.region && errors.region.length > 0" :selectedItem="form.region"
+                                        @update:model-value="handleUpdateRegionField" />
+                                    <div v-if="errors?.region" class="mt-2 text-xs text-red-600">
+                                        {{ errors.region[0] }}
+                                    </div>
+                                    <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region closest to your users
+                                        location. You won't be able to change it later.</p>
+
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired label="Package" class="truncate mb-1" />
+
+                                    <ComboBox :options="options.packages" :search="true" :placeholder="'Select package'"
+                                        :error="errors?.package && errors.package.length > 0" :selectedItem="form.package"
+                                        @update:model-value="handleUpdatePackageField" />
+                                    <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
+                                        {{ errors.package[0] }}
+                                    </div>
+                                    <p class="mt-3 text-sm leading-6 text-gray-600">The selected package defines the
+                                        available features.</p>
+
+                                </div>
+
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Secure User Credentials"
+                                        description="When enabled, users will receive a one-time link to access their app password instead of plain text."
+                                        v-model="form.dont_send_user_credentials" customClass="py-4" />
+
+                                </div>
+
+
+
+                            </div>
+
+                        </div>
+                        <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
+
+                            <button type="submit"
+                                class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
+                                ref="saveButtonRef" :disabled="isSubmitting">
+                                <Spinner :show="isSubmitting" />
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+
+            <div v-if="activeTab === 'connections'" action="#" method="POST">
+                <div class="shadow sm:rounded-md">
+                    <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                        <!-- <div>
+                            <h3 class="text-base font-semibold leading-6 text-gray-900">Keys</h3>
+                            <p class="mt-1 text-sm text-gray-500">Ensure calls are routed to the right team every time.
+                                Select a routing option below to fit your business needs.</p>
+                        </div> -->
+
+                        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                            <div class="sm:col-span-full space-y-3">
+                                <!-- <LabelInputOptional :target="'destination_actions'" :label="'Send calls to'" /> -->
+                                <RingotelConnections v-model="connections" :routingTypes="options.routing_types"
+                                    :optionsUrl="options.routes.get_routing_options" @add-connection="handleAddConnection"
+                                    @delete-connection="handleDeleteConnectionRequest"
+                                    :isDeleting="showConnectionDeletingStatus" />
+                            </div>
+
+                        </div>
+
+                        <div class="bg-gray-100 px-4 py-3 text-right sm:px-6">
+
+                            <button @click.prevent="handleFinishButtonClick()"
+                                class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2 
+                                disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-indigo-300 disabled:text-indigo-500"
+                                :disabled="connections.length == 0">
+                                Finish
+                            </button>
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+    </div>
+
+    <AddEditItemModal :customClass="'sm:max-w-3xl'" :show="showConnectionModal" :header="'Create a Connection'"
+        :loading="loadingModal" @close="handleModalClose">
+        <template #modal-body>
+            <CreateRingotelConnectionForm :options="options" :errors="errors"
+                :is-submitting="ringotelConnectionFormSubmiting" @submit="handleCreateConnectionRequest"
+                @cancel="handleModalClose" />
+        </template>
+    </AddEditItemModal>
+</template>
+
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { usePage } from '@inertiajs/vue3';
+
+
+import ComboBox from "../general/ComboBox.vue";
+import InputField from "../general/InputField.vue";
+import InputFieldWithIcon from "@generalComponents/InputFieldWithIcon.vue";
+import Popover from "@generalComponents/Popover.vue";
+import Textarea from "@generalComponents/Textarea.vue";
+import SyncAltIcon from "@icons/SyncAltIcon.vue";
+import Toggle from "@generalComponents/Toggle.vue";
+import LabelInputOptional from "../general/LabelInputOptional.vue";
+import LabelInputRequired from "../general/LabelInputRequired.vue";
+import Spinner from "@generalComponents/Spinner.vue";
+import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
+import { BuildingOfficeIcon } from '@heroicons/vue/24/outline';
+import RingotelConnections from "../general/RingotelConnections.vue";
+import AddEditItemModal from "../modal/AddEditItemModal.vue";
+import CreateRingotelConnectionForm from "../forms/CreateRingotelConnectionForm.vue";
+
+const ringotelConnectionFormSubmiting = ref(null);
+const loadingModal = ref(false);
+
+const props = defineProps({
+    options: Object,
+    isSubmitting: Boolean,
+    activeTab: String,
+    errors: Object,
+});
+
+// Initialize activeTab with the currently active tab from props
+const activeTab = ref(props.activeTab || props.options.navigation[0].slug);
+
+// Watch for changes in the activeTab prop and update the local activeTab
+watch(
+    () => props.activeTab,
+    (newValue) => {
+        activeTab.value = newValue || props.options.navigation[0].slug;
+    }
+);
+
+const setActiveTab = (tabSlug) => {
+    // activeTab.value = tabSlug;
+};
+
+const showConnectionModal = ref(false);
+const showConnectionDeletingStatus = ref(false);
+
+
+// Map icon names to their respective components
+const iconComponents = {
+    'SyncAltIcon': SyncAltIcon,
+    'BuildingOfficeIcon': BuildingOfficeIcon,
+};
+
+const connections = ref([...props.options.connections]);
+
+// Watch for changes in props.options.connections and update the local variable
+watch(
+    () => props.options.connections,
+    (newConnections) => {
+        connections.value = [...newConnections];
+    }
+);
+
+
+const page = usePage();
+
+const form = reactive({
+    organization_name: props.options.organization.name,
+    organization_domain: props.options.organization.domain,
+    region: props.options.organization.region,
+    package: String(props.options.organization.packageid),
+    dont_send_user_credentials: props.options.organization.params.hidePassInEmail === "true",
+    domain_uuid: props.options.model.domain_uuid,
+    _token: page.props.csrf_token,
+})
+
+const emits = defineEmits(['submit', 'cancel', 'error', 'success', 'clear-errors']);
+
+const submitForm = () => {
+    emits('submit', form); // Emit the event with the form data
+}
+
+const handleFinishButtonClick = () => {
+    emits('cancel'); 
+}
+
+const handleUpdateRegionField = (selected) => {
+    form.region = selected.value;
+}
+
+const handleUpdatePackageField = (selected) => {
+    form.package = selected.value;
+}
+
+const handleAddConnection = (selected) => {
+    emits('clear-errors');
+    showConnectionModal.value = true;
+}
+
+const handleCreateConnectionRequest = (form) => {
+    ringotelConnectionFormSubmiting.value = true;
+    emits('clear-errors');
+
+    axios.post(props.options.routes.create_connection, form)
+        .then((response) => {
+            ringotelConnectionFormSubmiting.value = false;
+            emits('success', response.data.messages);
+
+            // Add the new connection to the connections array
+            connections.value.push({
+                org_id: response.data.org_id,
+                conn_id: response.data.conn_id,
+                connection_name: response.data.connection_name,
+                domain: response.data.domain
+            });
+
+            handleModalClose();
+            // handleClearSelection();
+        }).catch((error) => {
+            ringotelConnectionFormSubmiting.value = false;
+            // handleClearSelection();
+            // handleFormErrorResponse(error);
+            emits('error', error); // Emit the event with error
+        });
+
+};
+
+const handleDeleteConnectionRequest = (connection) => {
+    showConnectionDeletingStatus.value = true;
+    // emits('clear-errors');
+
+    axios.post(props.options.routes.delete_connection, connection)
+        .then((response) => {
+            showConnectionDeletingStatus.value = false;
+            emits('success', response.data.messages);
+
+            const updatedConnections = connections.value.filter(
+                (conn) => conn.conn_id !== connection.conn_id
+            );
+            connections.value = updatedConnections;
+            console.log(connections.value);
+
+        }).catch((error) => {
+            showConnectionDeletingStatus.value = false;
+            emits('error', error); // Emit the event with error
+        });
+
+};
+
+const handleModalClose = () => {
+    showConnectionModal.value = false;
+}
+
+
+</script>
diff --git a/resources/js/Pages/components/general/RingotelConnections.vue b/resources/js/Pages/components/general/RingotelConnections.vue
index 623b25f6..0325da1f 100644
--- a/resources/js/Pages/components/general/RingotelConnections.vue
+++ b/resources/js/Pages/components/general/RingotelConnections.vue
@@ -51,13 +51,16 @@
                                             <MenuItems
                                                 class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                                 <div class="py-1">
-                                                    <MenuItem v-slot="{ active }">
+                                                    <!-- <MenuItem v-slot="{ active }">
                                                     <a href="#" @click.prevent="handleEdit(index)"
                                                         :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Edit</a>
-                                                    </MenuItem>
+                                                    </MenuItem> -->
                                                     <MenuItem v-slot="{ active }">
                                                     <a href="#" @click.prevent="handleDelete(option)"
-                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Delete</a>
+                                                        :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm']">
+                                                        Delete
+                                                        <Spinner class="ml-1" :show="isDeleting" />
+                                                    </a>
                                                     </MenuItem>
 
                                                 </div>
@@ -93,12 +96,14 @@ import ComboBox from "../general/ComboBox.vue";
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline';
 import InputField from "../general/InputField.vue";
+import Spinner from "../general/Spinner.vue";
 
 
 const props = defineProps({
     modelValue: [Object, null],
     routingTypes: [Object, null],
     optionsUrl: String,
+    isDeleting: Boolean,
 });
 
 
diff --git a/routes/web.php b/routes/web.php
index 9ea44900..390591f2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -220,7 +220,7 @@
     Route::post('apps/item-options', [AppsController::class, 'getItemOptions'])->name('apps.item.options');
     Route::post('/apps/organization/create', [AppsController::class, 'createOrganization'])->name('apps.organization.create');
     Route::delete('/apps/organization/{domain}', [AppsController::class, 'destroyOrganization'])->name('appsDestroyOrganization');
-    Route::get('/apps/organization/', [AppsController::class, 'getOrganizations'])->name('appsGetOrganizations');
+    // Route::get('/apps/organization/', [AppsController::class, 'getOrganizations'])->name('appsGetOrganizations');
     Route::post('/apps/organization/sync', [AppsController::class, 'syncOrganizations'])->name('appsSyncOrganizations');
     Route::post('/apps/users/{extension}', [AppsController::class, 'mobileAppUserSettings'])->name('mobileAppUserSettings');
     //Route::get('/apps/organization/update', [AppsController::class, 'updateOrganization']) ->name('appsUpdateOrganization');

From 736f87303251a1d76521196be360384689fee892 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Fri, 27 Dec 2024 14:39:21 -0800
Subject: [PATCH 17/19] added connection update form

---
 app/Http/Controllers/AppsController.php       |  77 ++-
 .../UpdateRingotelConnectionRequest.php       | 114 ++++
 .../UpdateRingotelOrganizationRequest.php     |  88 +++
 app/Services/RingotelApiService.php           | 175 +++++-
 resources/js/Pages/RingotelAppSettings.vue    |   8 +-
 .../forms/CreateRingotelOrgForm.vue           |  62 +-
 .../forms/UpdateRingotelConnectionForm.vue    | 581 ++++++++++++++++++
 .../forms/UpdateRingotelOrgForm.vue           |  88 ++-
 .../general/RingotelConnections.vue           |  12 +-
 routes/web.php                                |   2 +
 10 files changed, 1162 insertions(+), 45 deletions(-)
 create mode 100644 app/Http/Requests/UpdateRingotelConnectionRequest.php
 create mode 100644 app/Http/Requests/UpdateRingotelOrganizationRequest.php
 create mode 100644 resources/js/Pages/components/forms/UpdateRingotelConnectionForm.vue

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index 911731c6..61409b8e 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -13,12 +13,13 @@
 use App\Jobs\SendAppCredentials;
 use Illuminate\Support\Facades\Log;
 use App\Services\RingotelApiService;
-use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Session;
 use App\Models\MobileAppPasswordResetLinks;
 use SimpleSoftwareIO\QrCode\Facades\QrCode;
-use App\Http\Requests\StoreRingotelOrganizationRequest;
 use App\Http\Requests\StoreRingotelConnectionRequest;
+use App\Http\Requests\UpdateRingotelConnectionRequest;
+use App\Http\Requests\StoreRingotelOrganizationRequest;
+use App\Http\Requests\UpdateRingotelOrganizationRequest;
 
 class AppsController extends Controller
 {
@@ -54,8 +55,7 @@ public function index()
                 'routes' => [
                     'current_page' => route('apps.index'),
                     'create_organization' => route('apps.organization.create'),
-                    // 'create_connection' => route('apps.connection.create'),
-                    // 'delete_connection' => route('apps.connection.destroy'),
+                    'update_organization' => route('apps.organization.update'),
                     'item_options' => route('apps.item.options'),
                 ]
             ]
@@ -230,6 +230,7 @@ public function getItemOptions(RingotelApiService $ringotelApiService)
 
             $routes = [
                 'create_connection' => route('apps.connection.create'),
+                'update_connection' => route('apps.connection.update'),
                 'delete_connection' => route('apps.connection.destroy'),
             ];
 
@@ -321,6 +322,7 @@ public function getItemOptions(RingotelApiService $ringotelApiService)
                 'conn_navigation' => $conn_navigation,
                 'model' => $model ?? null,
                 'organization' => $organization ?? null,
+                'orgId' => $organization->id ?? null,
                 'regions' => $regions,
                 'packages' => $packages,
                 'protocols' => $protocols,
@@ -444,6 +446,35 @@ public function createOrganization(StoreRingotelOrganizationRequest $request, Ri
         }
     }
 
+        /**
+     * Submit API request to Ringotel to create a new organization
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function UpdateOrganization(UpdateRingotelOrganizationRequest $request, RingotelApiService $ringotelApiService)
+    {
+        $this->ringotelApiService = $ringotelApiService;
+
+        $inputs = $request->validated();
+
+        try {
+            // Send API request to update organization
+            $organization = $this->ringotelApiService->updateOrganization($inputs);
+
+            // Return a JSON response indicating success
+            return response()->json([
+                'messages' => ['success' => ['Organization successfully updated']]
+            ], 201);
+        } catch (\Exception $e) {
+            logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
+            // Handle any other exception that may occur
+            return response()->json([
+                'success' => false,
+                'errors' => ['server' => ['Unable to update organization. Check logs for more details']]
+            ], 500);  // 500 Internal Server Error for any other errors
+        }
+    }
+
     /**
      * Submit request to destroy organization to Ringotel
      *
@@ -560,15 +591,6 @@ public function destroyOrganization(Request $request, Domain $domain)
         }
     }
 
-
-    /**
-     * Submit request to update organization to Ringotel
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function updateOrganization(Request $request) {}
-
-
     /**
      * Submit API request to Ringotel to create a new connection
      *
@@ -582,7 +604,7 @@ public function createConnection(StoreRingotelConnectionRequest $request, Ringot
         $inputs = $request->validated();
 
         try {
-            // Send API request to create organization
+            // Send API request to create connection
             $connection = $this->ringotelApiService->createConnection($inputs);
 
             // Return a JSON response indicating success
@@ -615,7 +637,7 @@ public function destroyConnection(RingotelApiService $ringotelApiService)
         $this->ringotelApiService = $ringotelApiService;
 
         try {
-            // Send API request to create organization
+            // Send API request to delete connection
             $connection = $this->ringotelApiService->deleteConnection(request()->all());
 
             // Return a JSON response indicating success
@@ -633,12 +655,33 @@ public function destroyConnection(RingotelApiService $ringotelApiService)
     }
 
     /**
-     * Submit request to update connection to Ringotel
+     * Submit API request to update connection
      *
      * @return \Illuminate\Http\Response
      */
-    public function updateConnection(Request $request) {}
+    public function updateConnection(UpdateRingotelConnectionRequest $request, RingotelApiService $ringotelApiService) 
+    {
+        $this->ringotelApiService = $ringotelApiService;
 
+        $inputs = $request->validated();
+
+        try {
+            // Send API request to create connection
+            $connection = $this->ringotelApiService->updateConnection($inputs);
+
+            // Return a JSON response indicating success
+            return response()->json([
+                'messages' => ['success' => ['Connection updated successfully']]
+            ], 201);
+        } catch (\Exception $e) {
+            logger($e->getMessage() . " at " . $e->getFile() . ":" . $e->getLine());
+            // Handle any other exception that may occur
+            return response()->json([
+                'success' => false,
+                'errors' => ['server' => ['Unable to update connection. Check logs for more details']]
+            ], 500);  // 500 Internal Server Error for any other errors
+        }
+    }
 
     /**
      * Submit getOrganizations request to Ringotel API
diff --git a/app/Http/Requests/UpdateRingotelConnectionRequest.php b/app/Http/Requests/UpdateRingotelConnectionRequest.php
new file mode 100644
index 00000000..9d3f8703
--- /dev/null
+++ b/app/Http/Requests/UpdateRingotelConnectionRequest.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateRingotelConnectionRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize(): bool
+    {
+        return Auth::check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'org_id' => 'present',
+            'conn_id' => 'present',
+            'connection_name' => 'required|string|max:100',
+            'protocol' => 'required|string',
+            'domain' => 'required|string',
+            'port' => 'nullable|numeric',
+            'dont_verify_server_certificate' => 'present',
+            'disable_srtp' => 'present',
+            'multitenant' => 'present',
+            'proxy' => 'nullable|string',
+            'g711u_enabled' => 'present',
+            'g711a_enabled' => 'present',
+            'g729_enabled' => 'present',
+            'opus_enabled' => 'present',
+            'registration_ttl' => 'required|numeric',
+            'max_registrations' => 'required|numeric',
+            'app_opus_codec' => 'present',
+            'one_push' => 'present',
+            'show_call_settings' => 'present',
+            'allow_call_recording' => 'present',
+            'allow_state_change' => 'present',
+            'allow_video_calls' => 'present',
+            'allow_internal_chat' => 'present',
+            'disable_iphone_recents' => 'present',
+            'call_delay' => 'required|numeric',
+            'desktop_app_delay' => 'present',
+            'pbx_features' => 'present',
+            'voicemail_extension' => 'nullable|string',
+            'dnd_on_code' => 'nullable|string',
+            'dnd_off_code' => 'nullable|string',
+            'cf_on_code' => 'nullable|string',
+            'cf_off_code' => 'nullable|string',
+        ];
+    }
+
+
+    public function prepareForValidation(): void
+    {
+        // Check if 'region' is missing or empty and set it to null
+        if (!$this->has('protocol') || $this->input('protocol') === 'NULL') {
+            $this->merge(['protocol' => null]);
+        }
+
+        // if ($this->has('dont_send_user_credentials')) {
+        //     $this->merge([
+        //         'dont_send_user_credentials' => $this->dont_send_user_credentials ? 'true' : 'false',
+        //     ]);
+        // }
+
+    }
+
+    /**
+     * Sanitize the input field to prevent XSS and remove unwanted characters.
+     *
+     * @param string $input
+     * @return string
+     */
+    protected function sanitizeInput(string $input): string
+    {
+        // Trim whitespace
+        $input = trim($input);
+
+        // Strip HTML tags
+        $input = strip_tags($input);
+
+        // Escape special characters
+        $input = htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
+
+        // Remove any non-ASCII characters if necessary (optional)
+        $input = preg_replace('/[^\x20-\x7E]/', '', $input);
+
+        return $input;
+    }
+
+    /**
+     * Get custom attributes for validator errors.
+     *
+     * @return array
+     */
+    public function attributes(): array
+    {
+        return [
+            'voicemail_id' => 'voicemail extension',
+            'voicemail_password' => 'voicemail password',
+            'greeting_id' => 'extension number',
+            'voicemail_mail_to' => 'email address',
+            'voicemail_enabled' => 'enabled',
+            'voicemail_description' => 'description',
+            'voicemail_alternate_greet_id' => 'value',
+        ];
+    }
+}
diff --git a/app/Http/Requests/UpdateRingotelOrganizationRequest.php b/app/Http/Requests/UpdateRingotelOrganizationRequest.php
new file mode 100644
index 00000000..5adb38ec
--- /dev/null
+++ b/app/Http/Requests/UpdateRingotelOrganizationRequest.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateRingotelOrganizationRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize(): bool
+    {
+        return Auth::check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'organization_id' => 'present',
+            'organization_name' => 'required|string|max:100',
+            'package' => 'required',
+            'dont_send_user_credentials' => 'required',
+            'domain_uuid' => 'present',
+        ];
+    }
+
+
+    public function prepareForValidation(): void
+    {
+
+        // Check if 'package' is missing or empty and set it to null
+        if (!$this->has('package') || $this->input('package') === 'NULL') {
+            $this->merge(['package' => null]);
+        }
+
+        if ($this->has('dont_send_user_credentials')) {
+            $this->merge([
+                'dont_send_user_credentials' => $this->dont_send_user_credentials ? 'true' : 'false',
+            ]);
+        }
+
+    }
+
+    /**
+     * Sanitize the input field to prevent XSS and remove unwanted characters.
+     *
+     * @param string $input
+     * @return string
+     */
+    protected function sanitizeInput(string $input): string
+    {
+        // Trim whitespace
+        $input = trim($input);
+
+        // Strip HTML tags
+        $input = strip_tags($input);
+
+        // Escape special characters
+        $input = htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
+
+        // Remove any non-ASCII characters if necessary (optional)
+        $input = preg_replace('/[^\x20-\x7E]/', '', $input);
+
+        return $input;
+    }
+
+    /**
+     * Get custom attributes for validator errors.
+     *
+     * @return array
+     */
+    public function attributes(): array
+    {
+        return [
+            'voicemail_id' => 'voicemail extension',
+            'voicemail_password' => 'voicemail password',
+            'greeting_id' => 'extension number',
+            'voicemail_mail_to' => 'email address',
+            'voicemail_enabled' => 'enabled',
+            'voicemail_description' => 'description',
+            'voicemail_alternate_greet_id' => 'value',
+        ];
+    }
+}
diff --git a/app/Services/RingotelApiService.php b/app/Services/RingotelApiService.php
index 14125628..4a80820d 100644
--- a/app/Services/RingotelApiService.php
+++ b/app/Services/RingotelApiService.php
@@ -53,6 +53,42 @@ public function createOrganization($params)
         return $response['result'];
     }
 
+    public function updateOrganization($params)
+    {
+        // Prepare the payload
+        $data = [
+            'method' => 'updateOrganization',
+            'params' => [
+                'id' => $params['organization_id'],
+                'name' => $params['organization_name'],
+                'packageid' => (int) $params['package'],
+                'params' => [
+                    'hidePassInEmail' => $params['dont_send_user_credentials'],
+                ],
+            ],
+        ];
+
+        $response = Http::ringotel()
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function () {
+                throw new \Exception("Unable to update organization");
+            })
+            ->json();
+
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        // Handle empty response
+        if (!$response) {
+            return ['success' => true, 'message' => 'Organization updated successfully'];
+        }
+
+        return $response['result'];
+    }
+
     public function getOrganization($org_id)
     {
         // Prepare the payload
@@ -232,7 +268,7 @@ public function createConnection($params)
             ->withBody(json_encode($data), 'application/json')
             ->post('/')
             ->throw(function () {
-                throw new \Exception("Unable to activate organization");
+                throw new \Exception("Unable to create connection");
             })
             ->json();
 
@@ -247,6 +283,143 @@ public function createConnection($params)
         return $response['result'];
     }
 
+    public function updateConnection($params)
+    {
+
+        // Build codecs array based on enabled flags
+        $codecs = [];
+
+        if ($params['g711u_enabled']) {
+            $codecs[] = [
+                'codec' => 'G.711 Ulaw',
+                'frame' => 20,
+            ];
+        }
+
+        if ($params['g711a_enabled']) {
+            $codecs[] = [
+                'codec' => 'G.711 Alaw',
+                'frame' => 20,
+            ];
+        }
+
+        if ($params['g729_enabled']) {
+            $codecs[] = [
+                'codec' => 'G.729',
+                'frame' => 20,
+            ];
+        }
+
+        if ($params['opus_enabled']) {
+            $codecs[] = [
+                'codec' => 'OPUS',
+                'frame' => 20,
+            ];
+        }
+
+        // Build data array
+        $data = array(
+            'method' => 'updateBranch',
+            'params' => array(
+                "id" => $params['conn_id'],
+                "orgid" => $params['org_id'],
+                'name' => $params['connection_name'],
+                'address' => $params['domain'] . ":" . $params['port'],
+                'provision' => array(
+                    'protocol' => $params['protocol'],
+                    'noverify' => $params['dont_verify_server_certificate'],
+                    'nosrtp' => $params['disable_srtp'],
+                    'multitenant' => $params['multitenant'],
+                    'norec' => !$params['allow_call_recording'],
+                    // 'internal' => false,
+                    // 'sms' => false,
+                    'maxregs' => (int) $params['max_registrations'],
+                    // 'private' => false,
+                    'dtmfmode' => 'rfc2833',
+                    'regexpires' => (int) $params['registration_ttl'],
+                    'proxy' => array(
+                        'paddr' => $params['proxy'],
+                        'pauth' => '',
+                        'ppass' => '',
+                    ),
+                    'httpsproxy' => array(
+                        'address' => '',
+                    ),
+                    'certificate' => '',
+                    'tones' => array(
+                        'Ringback2' => 'Ringback 1',
+                        'Progress' => 'Progress 1',
+                        'Ringback' => 'United States',
+                    ),
+                    '1push' => $params['one_push'],
+                    'noptions' => !$params['show_call_settings'],
+                    'norecents' => $params['disable_iphone_recents'],
+                    'novideo' => !$params['allow_video_calls'],
+                    'nostates' => !$params['allow_state_change'],
+                    'nochats' => !$params['allow_internal_chat'],
+                    'calldelay' => $params['call_delay'],
+                    'pcdelay' => $params['desktop_app_delay'],
+                    'features' => $params['pbx_features'] ? 'pbx' : '',
+                    "speeddial" => array(
+                        [
+                            'number' => $params['voicemail_extension'],
+                            'title' => 'Voicemail'
+                        ]
+                    ),
+                    'vmail' => [
+                        'ext' => $params['voicemail_extension'],
+                        'name' => 'Voicemail',
+                        'mess' => 'You have a new message',
+                        'off' => '',
+                        'on' => '',
+                        'spref' => ''
+                    ],
+                    'dnd' => [
+                        'off' => $params['dnd_on_code'],
+                        'on' => $params['dnd_off_code']
+                    ],
+                    'forwarding' => [
+                        'cfuon' => '',
+                        'cfboff' => '',
+                        'cfon' => $params['cf_on_code'],
+                        'cfbon' => '',
+                        'cfuoff' => '',
+                        'cfoff' => $params['cf_off_code']
+                    ],
+
+                    'codecs' => $codecs,
+                    'app' => array(
+                        'g711' => !$params['app_opus_codec'],
+
+                    ),
+
+                )
+            )
+        );
+
+        // logger($data);
+
+        $response = Http::ringotel()
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function () {
+                throw new \Exception("Unable to update connection");
+            })
+            ->json();
+
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        // Handle empty response
+        if (!$response) {
+            return ['success' => true, 'message' => 'Connection updated successfully'];
+        }
+
+        return $response['result'];
+    }
+
     public function deleteConnection($params)
     {
 
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index a7bb2377..d9ce3fd4 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -167,8 +167,8 @@
     <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="showEditModal" :header="'Edit Ringotel Organization'"
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
-            <UpdateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="activateFormSubmiting" :activeTab="activationActiveTab"
-                @submit="handleCreateRequest" @cancel="handleActivationFinish" @error="handleFormErrorResponse" 
+            <UpdateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="updateFormSubmiting" :activeTab="activationActiveTab"
+                @submit="handleUpdateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse" 
                 @success="showNotification('success', $event )" @clear-errors="handleClearErrors"/>
         </template>
     </AddEditItemModal>
@@ -307,7 +307,7 @@ const handleUpdateRequest = (form) => {
     updateFormSubmiting.value = true;
     formErrors.value = null;
 
-    axios.put(form.update_route, form)
+    axios.put(props.routes.update_organization, form)
         .then((response) => {
             updateFormSubmiting.value = false;
             showNotification('success', response.data.messages);
@@ -442,7 +442,7 @@ const getItemOptions = (itemUuid = null) => {
         .then((response) => {
             loadingModal.value = false;
             itemOptions.value = response.data;
-            console.log(itemOptions.value);
+            // console.log(itemOptions.value);
 
         }).catch((error) => {
             handleModalClose();
diff --git a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
index f5236117..be3008e6 100644
--- a/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/CreateRingotelOrgForm.vue
@@ -74,8 +74,7 @@
                                     <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
                                         {{ errors.package[0] }}
                                     </div>
-                                    <p class="mt-3 text-sm leading-6 text-gray-600">The selected package defines the
-                                        available features.</p>
+                                    <p class="mt-3 text-sm leading-6 text-gray-600">Choose a package to set available features.</p>
 
                                 </div>
 
@@ -120,6 +119,7 @@
                                 <RingotelConnections v-model="connections" :routingTypes="options.routing_types"
                                     :optionsUrl="options.routes.get_routing_options" @add-connection="handleAddConnection"
                                     @delete-connection="handleDeleteConnectionRequest"
+                                    @edit-connection="handleEditConnection"
                                     :isDeleting="showConnectionDeletingStatus" />
                             </div>
 
@@ -153,6 +153,15 @@
                 @cancel="handleModalClose" />
         </template>
     </AddEditItemModal>
+
+    <AddEditItemModal :customClass="'sm:max-w-3xl'" :show="showEditConnectionModal" :header="'Edit Connection'"
+        :loading="loadingModal" @close="handleModalClose">
+        <template #modal-body>
+            <UpdateRingotelConnectionForm :options="options" :errors="errors" :selected-connection="selectedConnection"
+                :is-submitting="ringotelConnectionFormSubmiting" @submit="handleUpdateConnectionRequest"
+                @cancel="handleModalClose" />
+        </template>
+    </AddEditItemModal>
 </template>
 
 
@@ -178,6 +187,7 @@ import { BuildingOfficeIcon } from '@heroicons/vue/24/outline';
 import RingotelConnections from "../general/RingotelConnections.vue";
 import AddEditItemModal from "../modal/AddEditItemModal.vue";
 import CreateRingotelConnectionForm from "../forms/CreateRingotelConnectionForm.vue";
+import UpdateRingotelConnectionForm from "../forms/UpdateRingotelConnectionForm.vue";
 
 const ringotelConnectionFormSubmiting = ref(null);
 const loadingModal = ref(false);
@@ -206,7 +216,8 @@ const setActiveTab = (tabSlug) => {
 
 const showConnectionModal = ref(false);
 const showConnectionDeletingStatus = ref(false);
-
+const selectedConnection = ref(null);
+const showEditConnectionModal = ref(false);
 
 // Map icon names to their respective components
 const iconComponents = {
@@ -288,6 +299,50 @@ const handleCreateConnectionRequest = (form) => {
 
 };
 
+const handleUpdateConnectionRequest = (form) => {
+    ringotelConnectionFormSubmiting.value = true;
+    emits('clear-errors');
+
+    axios.post(props.options.routes.create_connection, form)
+        .then((response) => {
+            ringotelConnectionFormSubmiting.value = false;
+            emits('success', response.data.messages);
+
+            // Add the new connection to the connections array
+            connections.value.push({
+                org_id: response.data.org_id,
+                conn_id: response.data.conn_id,
+                connection_name: response.data.connection_name,
+                domain: response.data.domain
+            });
+
+            handleModalClose();
+            // handleClearSelection();
+        }).catch((error) => {
+            ringotelConnectionFormSubmiting.value = false;
+            // handleClearSelection();
+            // handleFormErrorResponse(error);
+            emits('error', error); // Emit the event with error
+        });
+
+};
+
+const handleEditConnection = (connection) => {
+    emits('clear-errors');
+    // Find the matching connection from props.options.connections
+    const matchedConnection = props.options.connections.find(
+        (conn) => conn.id === connection.conn_id
+    );
+
+    if (matchedConnection) {
+        selectedConnection.value = matchedConnection;
+        showEditConnectionModal.value = true;
+        // console.log(selectedConnection.value);
+    } else {
+        emits('error', { request: "Matching connection not found" });
+    }
+}
+
 const handleDeleteConnectionRequest = (connection) => {
     showConnectionDeletingStatus.value = true;
     // emits('clear-errors');
@@ -312,6 +367,7 @@ const handleDeleteConnectionRequest = (connection) => {
 
 const handleModalClose = () => {
     showConnectionModal.value = false;
+    showEditConnectionModal.value = false;
 }
 
 
diff --git a/resources/js/Pages/components/forms/UpdateRingotelConnectionForm.vue b/resources/js/Pages/components/forms/UpdateRingotelConnectionForm.vue
new file mode 100644
index 00000000..4eb47d6b
--- /dev/null
+++ b/resources/js/Pages/components/forms/UpdateRingotelConnectionForm.vue
@@ -0,0 +1,581 @@
+<template>
+    <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
+        <aside class="px-2 py-6 sm:px-6 lg:col-span-3 lg:px-0 lg:py-0">
+            <nav class="space-y-1">
+                <a v-for="item in options.conn_navigation" :key="item.name" href="#"
+                    :class="[activeTab === item.slug ? 'bg-gray-200 text-indigo-700 hover:bg-gray-100 hover:text-indigo-700' : 'text-gray-900 hover:bg-gray-200 hover:text-gray-900', 'group flex items-center rounded-md px-3 py-2 text-sm font-medium']"
+                    @click.prevent="setActiveTab(item.slug)" :aria-current="item.current ? 'page' : undefined">
+                    <component :is="iconComponents[item.icon]"
+                        :class="[item.current ? 'text-indigo-500 group-hover:text-indigo-500' : 'text-gray-400 group-hover:text-gray-500', '-ml-1 mr-3 h-6 w-6 flex-shrink-0']"
+                        aria-hidden="true" />
+                    <span class="truncate">{{ item.name }}</span>
+                    <ExclamationCircleIcon
+                        v-if="((errors?.connection_name || errors?.domain || errors?.registration_ttl || errors?.max_registrations) && item.slug === 'settings')"
+                        class="ml-2 h-5 w-5 text-red-500" aria-hidden="true" />
+
+                </a>
+            </nav>
+        </aside>
+
+        <div class="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
+            <form @submit.prevent="submitForm">
+                <div v-if="activeTab === 'settings'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Connection Details</h3>
+
+                                <!-- <Toggle label="Status" v-model="" /> -->
+
+                                <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                            </div>
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="connection_name" label="Connection Name"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.connection_name" type="text" name="connection_name"
+                                        id="connection_name" class="mt-1" :error="!!errors?.connection_name"
+                                        :placeholder="'Enter connection name'" />
+                                    <div v-if="errors?.connection_name" class="mt-2 text-xs text-red-600">
+                                        {{ errors.connection_name[0] }}
+                                    </div>
+                                </div>
+
+
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired label="Protocol" class="truncate mb-1" />
+                                    <ComboBox :options="options.protocols" :search="true" :placeholder="'Select protocol'"
+                                        :error="errors?.protocol && errors.protocol.length > 0"
+                                        :selectedItem="props.selectedConnection.provision.protocol"
+                                        @update:model-value="handleUpdateProtocolField" />
+                                    <div v-if="errors?.protocol" class="mt-2 text-xs text-red-600">
+                                        {{ errors.protocol[0] }}
+                                    </div>
+
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="domain" label="Domain or IP Address"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.domain" type="text" name="domain"
+                                        :placeholder="'Enter domain or IP'" id="domain" class="mt-1"
+                                        :error="!!errors?.domain" />
+                                    <div v-if="errors?.domain" class="mt-2 text-xs text-red-600">
+                                        {{ errors.domain[0] }}
+                                    </div>
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputOptional target="domain" label="Port" class="truncate mb-1" />
+                                    <InputField v-model="form.port" type="text" name="port" :placeholder="'Enter port'"
+                                        id="port" class="mt-1" :error="!!errors?.port" />
+                                    <div v-if="errors?.port" class="mt-2 text-xs text-red-600">
+                                        {{ errors.port[0] }}
+                                    </div>
+                                </div>
+
+                                <div class="divide-y divide-gray-200 col-span-6 ">
+
+                                    <Toggle label="Do not verify server certificate" description=""
+                                        v-model="form.dont_verify_server_certificate" customClass="py-4" />
+
+                                    <Toggle label="Disable SRTP" description="" v-model="form.disable_srtp"
+                                        customClass="py-4" />
+
+                                </div>
+                            </div>
+
+
+                            <div class="w-full border-t border-gray-300" />
+
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Outbound Proxy Settings</h3>
+                            </div>
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6">
+                                    <LabelInputOptional target="proxy" label="Address" class="truncate mb-1" />
+                                    <InputField v-model="form.proxy" type="text" name="proxy" id="proxy" class="mt-1"
+                                        :error="!!errors?.proxy" :placeholder="'Enter proxy address'" />
+                                    <div v-if="errors?.proxy" class="mt-2 text-xs text-red-600">
+                                        {{ errors.proxy[0] }}
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            <div class="w-full border-t border-gray-300" />
+
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Audio Codecs</h3>
+                            </div>
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6">
+                                    <fieldset>
+                                        <div class="space-y-5">
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.g711u_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="comments" class="font-medium text-gray-900">G.711
+                                                        Ulaw</label>
+
+                                                </div>
+                                            </div>
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.g711a_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="candidates" class="font-medium text-gray-900">G.711
+                                                        Alaw</label>
+
+                                                </div>
+                                            </div>
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.g729_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="offers" class="font-medium text-gray-900">G.729</label>
+
+                                                </div>
+                                            </div>
+                                            <div class="flex gap-3">
+                                                <div class="flex h-6 shrink-0 items-center">
+                                                    <div class="group grid size-4 grid-cols-1">
+                                                        <input v-model="form.opus_enabled" type="checkbox"
+                                                            class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto" />
+                                                        <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                                                            viewBox="0 0 14 14" fill="none">
+                                                            <path class="opacity-0 group-has-[:checked]:opacity-100"
+                                                                d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                            <path class="opacity-0 group-has-[:indeterminate]:opacity-100"
+                                                                d="M3 7H11" stroke-width="2" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="text-sm/6">
+                                                    <label for="offers" class="font-medium text-gray-900">Opus</label>
+
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </fieldset>
+
+                                </div>
+
+                            </div>
+
+                            <div class="w-full border-t border-gray-300" />
+
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Miscellaneous</h3>
+                            </div>
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="registration_ttl" label="Registration TTL"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.registration_ttl" type="text" name="registration_ttl"
+                                        id="registration_ttl" class="mt-1" :error="!!errors?.registration_ttl"
+                                        :placeholder="''" />
+                                    <div v-if="errors?.registration_ttl" class="mt-2 text-xs text-red-600">
+                                        {{ errors.registration_ttl[0] }}
+                                    </div>
+                                </div>
+
+                                <div class="col-span-6 sm:col-span-3">
+                                    <LabelInputRequired target="max_registrations" label="Max. registrations per user"
+                                        class="truncate mb-1" />
+                                    <InputField v-model="form.max_registrations" type="text" name="max_registrations"
+                                        id="max_registrations" class="mt-1" :error="!!errors?.max_registrations"
+                                        :placeholder="''" />
+                                    <div v-if="errors?.max_registrations" class="mt-2 text-xs text-red-600">
+                                        {{ errors.max_registrations[0] }}
+                                    </div>
+                                </div>
+
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Use OPUS audio codec"
+                                        description="Enabling the OPUS audio codec between the softphone apps and a softphone server improves call quality on low bandwidth/congested networks, but may cause small audio delays."
+                                        v-model="form.app_opus_codec" customClass="py-4" />
+                                    <Toggle label="Send one push notification"
+                                        description="This option can be useful for Queues or Ring groups with sequential ring strategy. It doesn't try to send second push notification in the case of the user's mobile app was not waked up by the first one."
+                                        v-model="form.one_push" customClass="py-4" />
+
+                                </div>
+
+
+
+                            </div>
+
+
+
+
+                            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                <button type="sumbit" :disabled="isSubmitting"
+                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
+                                    @click="open = false">
+                                    <Spinner :show="isSubmitting" />
+                                    Save
+                                </button>
+                                <button type="button" @click="emits('cancel')"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="activeTab === 'features'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                            <div class="flex justify-between items-center">
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">Features</h3>
+
+                                <!-- <Toggle label="Status" v-model="" /> -->
+
+                                <!-- <p class="mt-1 text-sm text-gray-500"></p> -->
+                            </div>
+
+
+
+                            <div class="grid grid-cols-6 gap-6">
+
+
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Show call settings"
+                                        description="Allow users to configure call settings from within the app, such as call forwarding, voicemail, call waiting."
+                                        v-model="form.show_call_settings" customClass="py-4" />
+
+                                    <Toggle label="Allow call recording"
+                                        description="Allow users to record calls. IMPORTANT: You are responsible for your compliance with call recording laws. We do not indemnify against legal claims that may arise from the use of this feature."
+                                        v-model="form.allow_call_recording" customClass="py-4" />
+
+                                    <Toggle label="Allow state change"
+                                        description="Allow users to change their state from the app, such as Online/DND/At the desk."
+                                        v-model="form.allow_state_change" customClass="py-4" />
+
+                                    <Toggle label="Allow video calls" description="Allow users to make 1-on-1 video calls."
+                                        v-model="form.allow_video_calls" customClass="py-4" />
+
+                                    <Toggle label="Allow internal chat"
+                                        description="Allow users to use internal chat feature and create new chats."
+                                        v-model="form.allow_internal_chat" customClass="py-4" />
+
+                                    <Toggle label="Disable call history syncing in iPhone Recents "
+                                        description="If enabled, this option disables call history syncing in iPhone Recents and hides the 'Show calls in iPhone Recents' option from the app's settings."
+                                        v-model="form.disable_iphone_recents" customClass="py-4" />
+
+                                </div>
+
+                            </div>
+
+                            <div class="grid grid-cols-6 gap-6">
+
+                                <div class="col-span-5">
+                                    <div class="flex items-center">
+                                        <LabelInputRequired target="call_delay"
+                                            label="Call Delay for 'At the Desk' Status (Seconds)"
+                                            class="mb-1 mr-1 flex-initial w-72" />
+                                        <InputField v-model="form.call_delay" type="text" name="call_delay" id="call_delay"
+                                            class="flex-none w-14" :error="!!errors?.call_delay" :placeholder="''" />
+                                    </div>
+
+                                    <div v-if="errors?.call_delay" class="mt-2 text-xs text-red-600">
+                                        {{ errors.call_delay[0] }}
+                                    </div>
+
+                                </div>
+
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Delay incoming calls to the desktop app" description=""
+                                        v-model="form.desktop_app_delay" customClass="py-4" />
+
+
+                                </div>
+
+                            </div>
+
+
+
+
+
+                            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                <button type="sumbit" :disabled="isSubmitting"
+                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
+                                    @click="open = false">
+                                    <Spinner :show="isSubmitting" />
+                                    Save
+                                </button>
+                                <button type="button" @click="emits('cancel')"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="activeTab === 'pbx_features'">
+                    <div class="shadow sm:rounded-md">
+                        <div class="space-y-6 bg-gray-100 px-4 py-6 sm:p-6">
+                            <div>
+                                <h3 class="text-base font-semibold leading-6 text-gray-900">PBX Features</h3>
+                                <p class="mt-1 text-sm text-gray-500">Provide feature codes configured on your PBX to handle
+                                    them on your server.</p>
+                            </div>
+
+
+
+                            <div class="grid grid-cols-6 gap-6">
+                                <div class="divide-y divide-gray-200 col-span-6">
+
+                                    <Toggle label="Enable PBX features"
+                                        description="Handle features on the PBX. NOTE: Please ensure you provide shortcodes for the PBX features."
+                                        v-model="form.pbx_features" customClass="py-4" />
+
+                                </div>
+                            </div>
+
+                            <div v-if="form.pbx_features">
+                                <div>
+                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Voicemail</h3>
+                                </div>
+
+                                <div class="grid grid-cols-6 gap-6 mt-1">
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="voicemail_extension" label="Voicemail code"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.voicemail_extension" type="text"
+                                            name="voicemail_extension" id="voicemail_extension" class="mt-1"
+                                            :error="!!errors?.voicemail_extension" :placeholder="''" />
+                                        <div v-if="errors?.voicemail_extension" class="mt-2 text-xs text-red-600">
+                                            {{ errors.voicemail_extension[0] }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            <div v-if="form.pbx_features">
+                                <div>
+                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Do Not Disturb</h3>
+                                </div>
+
+                                <div class="grid grid-cols-6 gap-6 mt-1">
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="dnd_on_code" label="Activate DND"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.dnd_on_code" type="text"
+                                            name="dnd_on_code" id="dnd_on_code" class="mt-1"
+                                            :error="!!errors?.dnd_on_code" :placeholder="''" />
+                                        <div v-if="errors?.dnd_on_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.dnd_on_code[0] }}
+                                        </div>
+                                    </div>
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="dnd_off_code" label="Deactivate DND"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.dnd_off_code" type="text"
+                                            name="dnd_off_code" id="dnd_off_code" class="mt-1"
+                                            :error="!!errors?.dnd_off_code" :placeholder="''" />
+                                        <div v-if="errors?.dnd_off_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.dnd_off_code[0] }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            <div v-if="form.pbx_features">
+                                <div>
+                                    <h3 class="text-base font-semibold leading-6 text-gray-900">Call Forwarding</h3>
+                                </div>
+
+                                <div class="grid grid-cols-6 gap-6 mt-1">
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="cf_on_code" label="Activate Call Forwarding"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.cf_on_code" type="text"
+                                            name="cf_on_code" id="cf_on_code" class="mt-1"
+                                            :error="!!errors?.cf_on_code" :placeholder="''" />
+                                        <div v-if="errors?.cf_on_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.cf_on_code[0] }}
+                                        </div>
+                                    </div>
+                                    <div class="col-span-6 sm:col-span-3">
+                                        <LabelInputOptional target="cf_off_code" label="Deactivate Call Forwarding"
+                                            class="truncate mb-1" />
+                                        <InputField v-model="form.cf_off_code" type="text"
+                                            name="cf_off_code" id="cf_off_code" class="mt-1"
+                                            :error="!!errors?.cf_off_code" :placeholder="''" />
+                                        <div v-if="errors?.cf_off_code" class="mt-2 text-xs text-red-600">
+                                            {{ errors.cf_off_code[0] }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+
+                            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                <button type="sumbit" :disabled="isSubmitting"
+                                    class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
+                                    @click="open = false">
+                                    <Spinner :show="isSubmitting" />
+                                    Save
+                                </button>
+                                <button type="button" @click="emits('cancel')"
+                                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import { usePage } from '@inertiajs/vue3';
+
+
+import ComboBox from "../general/ComboBox.vue";
+import InputField from "../general/InputField.vue";
+import LabelInputOptional from "../general/LabelInputOptional.vue";
+import LabelInputRequired from "../general/LabelInputRequired.vue";
+import Spinner from "../general/Spinner.vue";
+import { InformationCircleIcon } from '@heroicons/vue/20/solid'
+import { Cog6ToothIcon, AdjustmentsHorizontalIcon, EllipsisVerticalIcon } from '@heroicons/vue/24/outline';
+import { ExclamationCircleIcon } from '@heroicons/vue/20/solid'
+import { PlusIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/solid";
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import Toggle from "@generalComponents/Toggle.vue";
+import SettingsApplications from "@icons/SettingsApplications.vue"
+
+
+const props = defineProps({
+    selectedConnection: Object,
+    options: Object,
+    isSubmitting: Boolean,
+    errors: Object,
+});
+
+const page = usePage();
+
+const form = reactive({
+    // items: props.items,
+    org_id: props.options.orgId,
+    conn_id: props.selectedConnection.id,
+    connection_name: props.selectedConnection.name,
+    protocol: props.selectedConnection.provision.protocol,
+    domain: props.selectedConnection.address.split(':')[0], // Extracts the domain
+    port: props.selectedConnection.address.split(':')[1],   // Extracts the port
+    dont_verify_server_certificate: props.selectedConnection.provision.noverify,
+    disable_srtp: props.selectedConnection.provision.nosrtp,
+    proxy: props.selectedConnection.provision.proxy.paddr,
+    multitenant: props.options.settings.multitenant_mode === "true",
+    g711u_enabled: props.selectedConnection.provision.codecs.some(codec => codec.codec === "G.711 Ulaw"),
+    g711a_enabled: props.selectedConnection.provision.codecs.some(codec => codec.codec === "G.711 Alaw"),
+    g729_enabled: props.selectedConnection.provision.codecs.some(codec => codec.codec === "G.729"),
+    opus_enabled: props.selectedConnection.provision.codecs.some(codec => codec.codec === "Opus"),
+    registration_ttl: String(props.selectedConnection.provision.regexpires),
+    max_registrations: String(props.selectedConnection.provision.maxregs),
+    app_opus_codec: !props.selectedConnection.provision.app.g711, 
+    one_push: props.selectedConnection.provision["1push"],
+    show_call_settings: props.selectedConnection.provision.nostates === false, // Assuming inverse of `nostates`
+    allow_call_recording: !props.selectedConnection.provision.norec, // Inverse of `norec`
+    allow_state_change: props.selectedConnection.provision.nostates === false, // Assuming `nostates` indicates restriction
+    allow_video_calls: !props.selectedConnection.provision.novideo, // Inverse of `novideo`
+    allow_internal_chat: !props.selectedConnection.provision.nochats, // Inverse of `nochats`
+    disable_iphone_recents: props.selectedConnection.provision.norecents, // Assuming `norecents` indicates disabling
+    call_delay: props.selectedConnection.provision.calldelay,
+    desktop_app_delay: props.selectedConnection.provision.pcdelay, // Assuming `pcdelay` represents desktop app delay
+    pbx_features: props.selectedConnection.provision.features === "pbx",
+    voicemail_extension: props.selectedConnection.provision.vmail.ext,
+    dnd_on_code: props.selectedConnection.provision.dnd.on,
+    dnd_off_code: props.selectedConnection.provision.dnd.off,
+    cf_on_code: props.selectedConnection.provision.forwarding.cfon,
+    cf_off_code: props.selectedConnection.provision.forwarding.cfoff,
+    _token: page.props.csrf_token,
+})
+
+const emits = defineEmits(['submit', 'cancel']);
+
+
+// Initialize activeTab with the currently active tab from props
+const activeTab = ref(props.options.conn_navigation.find(item => item.slug)?.slug || props.options.conn_navigation[0].slug);
+
+
+const submitForm = () => {
+    // console.log(form);
+    emits('submit', form); // Emit the event with the form data
+}
+
+const handleUpdateProtocolField = (selected) => {
+    form.protocol = selected.value;
+}
+
+
+const iconComponents = {
+    'Cog6ToothIcon': Cog6ToothIcon,
+    'SettingsApplications': SettingsApplications,
+    'AdjustmentsHorizontalIcon': AdjustmentsHorizontalIcon,
+};
+
+const setActiveTab = (tabSlug) => {
+    activeTab.value = tabSlug;
+};
+
+
+
+</script>
\ No newline at end of file
diff --git a/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue b/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
index e22f92f8..3890e78c 100644
--- a/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
@@ -45,7 +45,7 @@
                                     <LabelInputRequired target="organization_domain" label="Unique Organization Domain"
                                         class="truncate" />
                                     <InputField v-model="form.organization_domain" type="text" name="organization_domain"
-                                        id="organization_domain" class="mt-2" :error="!!errors?.organization_domain" />
+                                        id="organization_domain" class="mt-2" :error="!!errors?.organization_domain" disabled/>
                                     <div v-if="errors?.organization_domain" class="mt-2 text-xs text-red-600">
                                         {{ errors.organization_domain[0] }}
                                     </div>
@@ -56,12 +56,12 @@
 
                                     <ComboBox :options="options.regions" :search="true" :placeholder="'Select region'"
                                         :error="errors?.region && errors.region.length > 0" :selectedItem="form.region"
-                                        @update:model-value="handleUpdateRegionField" />
+                                        @update:model-value="handleUpdateRegionField" disabled/>
                                     <div v-if="errors?.region" class="mt-2 text-xs text-red-600">
                                         {{ errors.region[0] }}
                                     </div>
-                                    <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region closest to your users
-                                        location. You won't be able to change it later.</p>
+                                    <!-- <p class="mt-3 text-sm leading-6 text-gray-600">Choose the region closest to your users
+                                        location. You won't be able to change it later.</p> -->
 
                                 </div>
 
@@ -74,8 +74,7 @@
                                     <div v-if="errors?.package" class="mt-2 text-xs text-red-600">
                                         {{ errors.package[0] }}
                                     </div>
-                                    <p class="mt-3 text-sm leading-6 text-gray-600">The selected package defines the
-                                        available features.</p>
+                                    <p class="mt-3 text-sm leading-6 text-gray-600">Choose a package to set available features.</p>
 
                                 </div>
 
@@ -98,7 +97,7 @@
                                 class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
                                 ref="saveButtonRef" :disabled="isSubmitting">
                                 <Spinner :show="isSubmitting" />
-                                Next
+                                Save
                             </button>
                         </div>
                     </div>
@@ -120,6 +119,7 @@
                                 <RingotelConnections v-model="connections" :routingTypes="options.routing_types"
                                     :optionsUrl="options.routes.get_routing_options" @add-connection="handleAddConnection"
                                     @delete-connection="handleDeleteConnectionRequest"
+                                    @edit-connection="handleEditConnection"
                                     :isDeleting="showConnectionDeletingStatus" />
                             </div>
 
@@ -131,7 +131,7 @@
                                 class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2 
                                 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-indigo-300 disabled:text-indigo-500"
                                 :disabled="connections.length == 0">
-                                Finish
+                                Close
                             </button>
                         </div>
 
@@ -153,6 +153,15 @@
                 @cancel="handleModalClose" />
         </template>
     </AddEditItemModal>
+
+    <AddEditItemModal :customClass="'sm:max-w-3xl'" :show="showEditConnectionModal" :header="'Edit Connection'"
+        :loading="loadingModal" @close="handleModalClose">
+        <template #modal-body>
+            <UpdateRingotelConnectionForm :options="options" :errors="errors" :selected-connection="selectedConnection"
+                :is-submitting="ringotelConnectionFormSubmiting" @submit="handleUpdateConnectionRequest"
+                @cancel="handleModalClose" />
+        </template>
+    </AddEditItemModal>
 </template>
 
 
@@ -178,6 +187,7 @@ import { BuildingOfficeIcon } from '@heroicons/vue/24/outline';
 import RingotelConnections from "../general/RingotelConnections.vue";
 import AddEditItemModal from "../modal/AddEditItemModal.vue";
 import CreateRingotelConnectionForm from "../forms/CreateRingotelConnectionForm.vue";
+import UpdateRingotelConnectionForm from "../forms/UpdateRingotelConnectionForm.vue";
 
 const ringotelConnectionFormSubmiting = ref(null);
 const loadingModal = ref(false);
@@ -201,12 +211,13 @@ watch(
 );
 
 const setActiveTab = (tabSlug) => {
-    // activeTab.value = tabSlug;
+    activeTab.value = tabSlug;
 };
 
 const showConnectionModal = ref(false);
 const showConnectionDeletingStatus = ref(false);
-
+const selectedConnection = ref(null);
+const showEditConnectionModal = ref(false);
 
 // Map icon names to their respective components
 const iconComponents = {
@@ -214,20 +225,32 @@ const iconComponents = {
     'BuildingOfficeIcon': BuildingOfficeIcon,
 };
 
-const connections = ref([...props.options.connections]);
+const connections = ref(
+    props.options.connections.map((conn) => ({
+        org_id: conn.accountId,
+        conn_id: conn.id,
+        connection_name: conn.name,
+        domain: conn.address
+    }))
+);
 
 // Watch for changes in props.options.connections and update the local variable
 watch(
     () => props.options.connections,
     (newConnections) => {
-        connections.value = [...newConnections];
+        connections.value = newConnections.map((conn) => ({
+            org_id: conn.accountId,
+            conn_id: conn.id,
+            connection_name: conn.name,
+            domain: conn.address
+        }));
     }
 );
 
-
 const page = usePage();
 
 const form = reactive({
+    organization_id: props.options.organization.id,
     organization_name: props.options.organization.name,
     organization_domain: props.options.organization.domain,
     region: props.options.organization.region,
@@ -260,6 +283,7 @@ const handleAddConnection = (selected) => {
     showConnectionModal.value = true;
 }
 
+
 const handleCreateConnectionRequest = (form) => {
     ringotelConnectionFormSubmiting.value = true;
     emits('clear-errors');
@@ -288,6 +312,42 @@ const handleCreateConnectionRequest = (form) => {
 
 };
 
+const handleUpdateConnectionRequest = (form) => {
+    ringotelConnectionFormSubmiting.value = true;
+    emits('clear-errors');
+
+    axios.put(props.options.routes.update_connection, form)
+        .then((response) => {
+            ringotelConnectionFormSubmiting.value = false;
+            emits('success', response.data.messages);
+
+            handleModalClose();
+            // handleClearSelection();
+        }).catch((error) => {
+            ringotelConnectionFormSubmiting.value = false;
+            // handleClearSelection();
+            // handleFormErrorResponse(error);
+            emits('error', error); // Emit the event with error
+        });
+
+};
+
+const handleEditConnection = (connection) => {
+    emits('clear-errors');
+    // Find the matching connection from props.options.connections
+    const matchedConnection = props.options.connections.find(
+        (conn) => conn.id === connection.conn_id
+    );
+
+    if (matchedConnection) {
+        selectedConnection.value = matchedConnection;
+        showEditConnectionModal.value = true;
+        // console.log(selectedConnection.value);
+    } else {
+        emits('error', { request: "Matching connection not found" });
+    }
+}
+
 const handleDeleteConnectionRequest = (connection) => {
     showConnectionDeletingStatus.value = true;
     // emits('clear-errors');
@@ -301,7 +361,6 @@ const handleDeleteConnectionRequest = (connection) => {
                 (conn) => conn.conn_id !== connection.conn_id
             );
             connections.value = updatedConnections;
-            console.log(connections.value);
 
         }).catch((error) => {
             showConnectionDeletingStatus.value = false;
@@ -312,6 +371,7 @@ const handleDeleteConnectionRequest = (connection) => {
 
 const handleModalClose = () => {
     showConnectionModal.value = false;
+    showEditConnectionModal.value = false;
 }
 
 
diff --git a/resources/js/Pages/components/general/RingotelConnections.vue b/resources/js/Pages/components/general/RingotelConnections.vue
index 0325da1f..175465d1 100644
--- a/resources/js/Pages/components/general/RingotelConnections.vue
+++ b/resources/js/Pages/components/general/RingotelConnections.vue
@@ -51,10 +51,10 @@
                                             <MenuItems
                                                 class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                                 <div class="py-1">
-                                                    <!-- <MenuItem v-slot="{ active }">
-                                                    <a href="#" @click.prevent="handleEdit(index)"
+                                                    <MenuItem v-slot="{ active }">
+                                                    <a href="#" @click.prevent="handleEdit(option)"
                                                         :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Edit</a>
-                                                    </MenuItem> -->
+                                                    </MenuItem>
                                                     <MenuItem v-slot="{ active }">
                                                     <a href="#" @click.prevent="handleDelete(option)"
                                                         :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm']">
@@ -107,7 +107,7 @@ const props = defineProps({
 });
 
 
-const emit = defineEmits(['update:model-value', 'add-connection', 'edit', 'delete-connection'])
+const emit = defineEmits(['update:model-value', 'add-connection', 'edit-connection', 'delete-connection'])
 
 // Create a local reactive copy of the modelValue
 const connections = ref([...props.modelValue]);
@@ -126,8 +126,8 @@ watch(
 
 const handleAddConnection = () => emit('add-connection');
 
-const handleEdit = (index) => {
-    emit('edit', index); // Emit the edit event with the index
+const handleEdit = (connection) => {
+    emit('edit-connection', connection); // Emit the edit event with
 };
 
 const handleDelete = (connection) => {
diff --git a/routes/web.php b/routes/web.php
index 390591f2..4701b888 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -219,12 +219,14 @@
     Route::resource('apps', AppsController::class);
     Route::post('apps/item-options', [AppsController::class, 'getItemOptions'])->name('apps.item.options');
     Route::post('/apps/organization/create', [AppsController::class, 'createOrganization'])->name('apps.organization.create');
+    Route::put('/apps/organization/update', [AppsController::class, 'updateOrganization'])->name('apps.organization.update');
     Route::delete('/apps/organization/{domain}', [AppsController::class, 'destroyOrganization'])->name('appsDestroyOrganization');
     // Route::get('/apps/organization/', [AppsController::class, 'getOrganizations'])->name('appsGetOrganizations');
     Route::post('/apps/organization/sync', [AppsController::class, 'syncOrganizations'])->name('appsSyncOrganizations');
     Route::post('/apps/users/{extension}', [AppsController::class, 'mobileAppUserSettings'])->name('mobileAppUserSettings');
     //Route::get('/apps/organization/update', [AppsController::class, 'updateOrganization']) ->name('appsUpdateOrganization');
     Route::post('/apps/connection/create', [AppsController::class, 'createConnection'])->name('apps.connection.create');
+    Route::put('/apps/connection/update', [AppsController::class, 'updateConnection'])->name('apps.connection.update');
     Route::post('/apps/connection/delete', [AppsController::class, 'destroyConnection'])->name('apps.connection.destroy');
     Route::get('/apps/connection/update', [AppsController::class, 'updateConnection'])->name('appsUpdateConnection');
     Route::post('/apps/user/create', [AppsController::class, 'createUser'])->name('appsCreateUser');

From 97fc99f06fceebc52bfd35b26c321dd49b7c4740 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Sat, 28 Dec 2024 00:04:54 -0800
Subject: [PATCH 18/19] added deactivation functions

---
 app/Http/Controllers/AppsController.php       | 146 ++++++------------
 app/Services/RingotelApiService.php           |  45 ++++++
 resources/js/Pages/RingotelAppSettings.vue    |  84 ++++------
 .../forms/UpdateRingotelOrgForm.vue           |   9 +-
 routes/web.php                                |   2 +-
 5 files changed, 128 insertions(+), 158 deletions(-)

diff --git a/app/Http/Controllers/AppsController.php b/app/Http/Controllers/AppsController.php
index 61409b8e..d16d7a5d 100644
--- a/app/Http/Controllers/AppsController.php
+++ b/app/Http/Controllers/AppsController.php
@@ -56,6 +56,7 @@ public function index()
                     'current_page' => route('apps.index'),
                     'create_organization' => route('apps.organization.create'),
                     'update_organization' => route('apps.organization.update'),
+                    'destroy_organization' => route('apps.organization.destroy'),
                     'item_options' => route('apps.item.options'),
                 ]
             ]
@@ -480,116 +481,61 @@ public function UpdateOrganization(UpdateRingotelOrganizationRequest $request, R
      *
      * @return \Illuminate\Http\JsonResponse
      */
-    public function destroyOrganization(Request $request, Domain $domain)
+    public function destroyOrganization(RingotelApiService $ringotelApiService)
     {
-
-        // Get Org ID from database
-        $org_id = appsGetOrganizationDetails($domain->domain_uuid);
-
-        //Get all connections
-        $response = appsGetConnections($org_id);
-
-        if (isset($response['error'])) {
-            return response()->json([
-                'status' => 401,
-                'error' => [
-                    'message' => $response['error']['message'],
-                ],
-                'domain' => $domain->domain_name,
-            ]);
-        }
-
-        //Delete all connections
-        foreach ($response['result'] as $conn) {
-            $response = appsDeleteConnection($org_id, $conn['id']);
-            if (isset($response['error'])) {
+        $this->ringotelApiService = $ringotelApiService;
+    
+        try {
+            // Get Org ID from database
+            $domain_uuid = request('domain_uuid');
+            $org_id = $this->ringotelApiService->getOrgIdByDomainUuid($domain_uuid);
+    
+            if (!$org_id) {
                 return response()->json([
-                    'status' => 401,
-                    'error' => [
-                        'message' => $response['error']['message'],
-                    ],
-                    'domain' => $domain->domain_name,
+                    'success' => false,
+                    'errors' => ['server' => ['Organization ID not found for the given domain.']]
+                ], 404); // 404 Not Found
+            }
+    
+            // Retrieve all connections for the organization
+            $connections = $this->ringotelApiService->getConnections($org_id);
+    
+            // Delete each connection
+            foreach ($connections as $connection) {
+                $this->ringotelApiService->deleteConnection([
+                    'conn_id' => $connection->id,
+                    'org_id' => $org_id,
                 ]);
             }
-        }
-
-        // Delete organization
-        $response = appsDeleteOrganization($org_id);
-        if (isset($response['error'])) {
-            return response()->json([
-                'status' => 401,
-                'error' => [
-                    'message' => $response['error']['message'],
-                ],
-                'domain' => $domain->domain_name,
-            ]);
-        }
-        //Detele records from database
-        $appOrgID = DomainSettings::where('domain_uuid', $domain->domain_uuid)
-            ->where('domain_setting_category', 'app shell')
-            ->where('domain_setting_subcategory', 'org_id')
-            ->first();
-
-        Log::info($appOrgID);
-
-        $appOrgID->delete();
-
-
-        return response()->json([
-            'org_details' => $org_id,
-            'connections' => $response,
-            // 'organization_domain' => $request->organization_domain,
-            // 'organization_region' => $request->organization_region,
-            // 'org_id' => $response['result']['id'],
-            'message' => 'Success',
-        ]);
-
-
-
-
-        // !!!!! TODO: The code below is unreachable, do we need it ? !!!!!
-        // If successful store Org ID and return success status
-        if (isset($response['result'])) {
-
-            // Add recieved OrgID to the request and store it in database
-            $request->merge(['org_id' => $response['result']['id']]);
-
-            if (!appsStoreOrganizationDetails($request)) {
+    
+            // Delete the organization
+            $deleteResponse = $this->ringotelApiService->deleteOrganization($org_id);
+    
+            if ($deleteResponse) {
+                // Remove local references from the database
+                DomainSettings::where('domain_uuid', $domain_uuid)
+                    ->where('domain_setting_category', 'app shell')
+                    ->where('domain_setting_subcategory', 'org_id')
+                    ->delete();
+    
                 return response()->json([
-                    'organization_name' => $request->organization_name,
-                    'organization_domain' => $request->organization_domain,
-                    'organization_region' => $request->organization_region,
-                    'org_id' => $response['result']['id'],
-                    'message' => 'Organization was created succesfully, but unable to store Org ID in database',
-                ]);
+                    'messages' => ['success' => ['Organization and its connections were successfully deleted.']]
+                ], 200); // 200 OK
             }
-
+    
             return response()->json([
-                'organization_name' => $request->organization_name,
-                'organization_domain' => $request->organization_domain,
-                'organization_region' => $request->organization_region,
-                'org_id' => $response['result']['id'],
-                'message' => 'Organization created succesfully',
-            ]);
-            // Otherwise return failed status
-        } elseif (isset($response['error'])) {
-            return response()->json([
-                'error' => 401,
-                'organization_name' => $request->organization_name,
-                'organization_domain' => $request->organization_domain,
-                'organization_region' => $request->organization_region,
-                'message' => $response['error']['message']
-            ]);
-        } else {
+                'success' => false,
+                'errors' => ['server' => ['Failed to delete the organization.']]
+            ], 500); // 500 Internal Server Error
+    
+        } catch (\Exception $e) {
             return response()->json([
-                'error' => 401,
-                'organization_name' => $request->organization_name,
-                'organization_domain' => $request->organization_domain,
-                'organization_region' => $request->organization_region,
-                'message' => 'Unknown error'
-            ]);
+                'success' => false,
+                'errors' => ['server' => [$e->getMessage()]]
+            ], 500); // 500 Internal Server Error
         }
     }
+    
 
     /**
      * Submit API request to Ringotel to create a new connection
diff --git a/app/Services/RingotelApiService.php b/app/Services/RingotelApiService.php
index 4a80820d..1e99ac59 100644
--- a/app/Services/RingotelApiService.php
+++ b/app/Services/RingotelApiService.php
@@ -2,6 +2,7 @@
 
 namespace App\Services;
 
+use App\Models\DomainSettings;
 use App\DTO\RingotelConnectionDTO;
 use Illuminate\Support\Facades\DB;
 use App\DTO\RingotelOrganizationDTO;
@@ -120,6 +121,40 @@ public function getOrganization($org_id)
         return RingotelOrganizationDTO::fromArray($response['result']);
     }
 
+    public function deleteOrganization($org_id)
+    {
+        // Prepare the payload
+        $data = [
+            'method' => 'deleteOrganization',
+            'params' => [
+                'id' => $org_id,
+            ],
+        ];
+
+        // Send the request
+        $response = Http::ringotel() // Ensure `ringotel` is configured in the HTTP client
+            ->timeout($this->timeout)
+            ->withBody(json_encode($data), 'application/json')
+            ->post('/')
+            ->throw(function ($response) {
+                throw new \Exception("Failed to delete organization: {$response->body()}");
+            })
+            ->json();
+
+        // Check for errors in the response
+        if (isset($response['error'])) {
+            throw new \Exception($response['error']['message']);
+        }
+
+        // Handle empty response
+        if (!$response) {
+            return ['success' => true, 'message' => 'Organization and its connections were successfully deleted.'];
+        }
+
+        return $response['result'];
+    }
+
+
     public function getOrganizations()
     {
         $data = array(
@@ -538,4 +573,14 @@ public function matchLocalDomains($organizations)
 
         return $orgArray;
     }
+
+    public function getOrgIdByDomainUuid($domain_uuid)
+    {
+        return DomainSettings::where([
+            ['domain_uuid', '=', $domain_uuid],
+            ['domain_setting_category', '=', 'app shell'],
+            ['domain_setting_subcategory', '=', 'org_id'],
+            ['domain_setting_enabled', '=', true],
+        ])->value('domain_setting_value');
+    }
 }
diff --git a/resources/js/Pages/RingotelAppSettings.vue b/resources/js/Pages/RingotelAppSettings.vue
index d9ce3fd4..054f822a 100644
--- a/resources/js/Pages/RingotelAppSettings.vue
+++ b/resources/js/Pages/RingotelAppSettings.vue
@@ -119,10 +119,10 @@
                                     </div>
                                 </ejs-tooltip>
 
-                                <ejs-tooltip v-if="row.ringotel_status == 'true'"  :content="'Delete'"
+                                <ejs-tooltip v-if="row.ringotel_status == 'true'"  :content="'Deactivate'"
                                     position='TopCenter' target="#delete_tooltip_target">
                                     <div id="delete_tooltip_target">
-                                        <LinkOffIcon @click="handleDeactivateRequest(row.destroy_route)"
+                                        <XCircleIcon @click="handleDeactivateButtonClick(row.domain_uuid)"
                                             class="h-9 w-9 transition duration-500 ease-in-out py-2 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 active:bg-gray-300 active:duration-150 cursor-pointer" />
                                     </div>
                                 </ejs-tooltip>
@@ -167,23 +167,15 @@
     <AddEditItemModal :customClass="'sm:max-w-4xl'" :show="showEditModal" :header="'Edit Ringotel Organization'"
         :loading="loadingModal" @close="handleModalClose">
         <template #modal-body>
-            <UpdateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="updateFormSubmiting" :activeTab="activationActiveTab"
-                @submit="handleUpdateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse" 
+            <UpdateRingotelOrgForm :options="itemOptions" :errors="formErrors" :is-submitting="updateFormSubmiting"
+                @submit="handleUpdateRequest" @cancel="handleModalClose" @error="handleFormErrorResponse" @refresh-data="getItemOptions"
                 @success="showNotification('success', $event )" @clear-errors="handleClearErrors"/>
         </template>
     </AddEditItemModal>
 
-    <AddEditItemModal :show="bulkUpdateModalTrigger" :header="'Bulk Edit'" :loading="loadingModal"
-        @close="handleModalClose">
-        <template #modal-body>
-            <BulkUpdateDeviceForm :items="selectedItems" :options="itemOptions" :errors="formErrors"
-                :is-submitting="bulkUpdateFormSubmiting" @submit="handleBulkUpdateRequest" @cancel="handleModalClose"
-                @domain-selected="getItemOptions" />
-        </template>
-    </AddEditItemModal>
-
-    <DeleteConfirmationModal :show="confirmationModalTrigger" @close="confirmationModalTrigger = false"
-        @confirm="confirmDeleteAction" />
+    <ConfirmationModal :show="showConfirmationModal" @close="showConfirmationModal = false"
+        @confirm="confirmDeleteAction" :header="'Confirm Action'" :text="'Are you sure you want to deactivate apps for this account? This action may impact account functionality.'"
+        confirm-button-label="Deactivate" cancel-button-label="Cancel" :loading="showDeactivateSpinner"/>
 
     <Notification :show="notificationShow" :type="notificationType" :messages="notificationMessages"
         @update:show="hideNotification" />
@@ -201,20 +193,20 @@ import TableColumnHeader from "./components/general/TableColumnHeader.vue";
 import TableField from "./components/general/TableField.vue";
 import Paginator from "./components/general/Paginator.vue";
 import AddEditItemModal from "./components/modal/AddEditItemModal.vue";
-import DeleteConfirmationModal from "./components/modal/DeleteConfirmationModal.vue";
+import ConfirmationModal from "./components/modal/ConfirmationModal.vue";
 import Loading from "./components/general/Loading.vue";
 import { registerLicense } from '@syncfusion/ej2-base';
 import { MagnifyingGlassIcon, TrashIcon, PencilSquareIcon } from "@heroicons/vue/24/solid";
 import { TooltipComponent as EjsTooltip } from "@syncfusion/ej2-vue-popups";
-import BulkUpdateDeviceForm from "./components/forms/BulkUpdateDeviceForm.vue";
 import BulkActionButton from "./components/general/BulkActionButton.vue";
 import MainLayout from "../Layouts/MainLayout.vue";
 import CreateRingotelOrgForm from "./components/forms/CreateRingotelOrgForm.vue";
 import UpdateRingotelOrgForm from "./components/forms/UpdateRingotelOrgForm.vue";
 import Notification from "./components/notifications/Notification.vue";
 import Badge from "@generalComponents/Badge.vue";
-import LinkOffIcon from "@icons/LinkOffIcon.vue";
 import { PowerIcon } from "@heroicons/vue/24/outline";
+import { XCircleIcon } from "@heroicons/vue/24/outline";
+
 
 
 const page = usePage()
@@ -226,11 +218,11 @@ const selectPageItems = ref(false);
 const showActivateModal = ref(false);
 const showEditModal = ref(false);
 const bulkUpdateModalTrigger = ref(false);
-const confirmationModalTrigger = ref(false);
-const confirmationModalDestroyPath = ref(null);
+const showConfirmationModal = ref(false);
 const activateFormSubmiting = ref(null);
 const activationActiveTab = ref('organization');
 const updateFormSubmiting = ref(null);
+const showDeactivateSpinner = ref(null);
 const confirmDeleteAction = ref(null);
 const bulkUpdateFormSubmiting = ref(null);
 const formErrors = ref(null);
@@ -269,6 +261,7 @@ onMounted(() => {
 });
 
 const handleActivateButtonClick = (itemUuid) => {
+    activationActiveTab.value = 'organization';
     showActivateModal.value = true
     formErrors.value = null;
     loadingModal.value = true
@@ -292,9 +285,7 @@ const handleCreateRequest = (form) => {
             showNotification('success', response.data.messages);
             itemOptions.value.orgId = response.data.org_id;
             activationActiveTab.value = 'connections';
-            // handleSearchButtonClick();
-            // handleModalClose();
-            // handleClearSelection();
+
         }).catch((error) => {
             activateFormSubmiting.value = false;
             handleClearSelection();
@@ -322,38 +313,31 @@ const handleUpdateRequest = (form) => {
 
 };
 
-const handleSingleItemDeleteRequest = (url) => {
-    confirmationModalTrigger.value = true;
-    confirmDeleteAction.value = () => executeSingleDelete(url);
+const handleDeactivateButtonClick = (uuid) => {
+    showConfirmationModal.value = true;
+    confirmDeleteAction.value = () => executeSingleDelete(uuid);
 }
 
-const executeSingleDelete = (url) => {
-    router.delete(url, {
-        preserveScroll: true,
-        preserveState: true,
-        onSuccess: (page) => {
-            if (page.props.flash.error) {
-                showNotification('error', page.props.flash.error);
-            }
-            if (page.props.flash.message) {
-                showNotification('success', page.props.flash.message);
-            }
-            confirmationModalTrigger.value = false;
-            confirmationModalDestroyPath.value = null;
-        },
-        onFinish: () => {
-            confirmationModalTrigger.value = false;
-            confirmationModalDestroyPath.value = null;
-        },
-        onError: (errors) => {
-            console.log(errors);
-        },
-    });
+const executeSingleDelete = (uuid) => {
+    showDeactivateSpinner.value = true;
+
+    axios.post(props.routes.destroy_organization, { domain_uuid: uuid })
+        .then((response) => {
+            showDeactivateSpinner.value = false;
+            showNotification('success', response.data.messages);
+            handleSearchButtonClick();
+            handleModalClose();
+            handleClearSelection();
+        }).catch((error) => {
+            showDeactivateSpinner.value = false;
+            handleClearSelection();
+            handleFormErrorResponse(error);
+        });
 }
 
 const handleBulkActionRequest = (action) => {
     if (action === 'bulk_delete') {
-        confirmationModalTrigger.value = true;
+        showConfirmationModal.value = true;
         confirmDeleteAction.value = () => executeBulkDelete();
     }
     if (action === 'bulk_update') {
@@ -516,7 +500,7 @@ const handleClearSelection = () => {
 const handleModalClose = () => {
     showActivateModal.value = false;
     showEditModal.value = false,
-    confirmationModalTrigger.value = false;
+    showConfirmationModal.value = false;
     bulkUpdateModalTrigger.value = false;
 }
 
diff --git a/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue b/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
index 3890e78c..09947edf 100644
--- a/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
+++ b/resources/js/Pages/components/forms/UpdateRingotelOrgForm.vue
@@ -260,7 +260,7 @@ const form = reactive({
     _token: page.props.csrf_token,
 })
 
-const emits = defineEmits(['submit', 'cancel', 'error', 'success', 'clear-errors']);
+const emits = defineEmits(['submit', 'cancel', 'error', 'success', 'clear-errors', 'refresh-data']);
 
 const submitForm = () => {
     emits('submit', form); // Emit the event with the form data
@@ -302,11 +302,8 @@ const handleCreateConnectionRequest = (form) => {
             });
 
             handleModalClose();
-            // handleClearSelection();
         }).catch((error) => {
             ringotelConnectionFormSubmiting.value = false;
-            // handleClearSelection();
-            // handleFormErrorResponse(error);
             emits('error', error); // Emit the event with error
         });
 
@@ -320,13 +317,11 @@ const handleUpdateConnectionRequest = (form) => {
         .then((response) => {
             ringotelConnectionFormSubmiting.value = false;
             emits('success', response.data.messages);
+            emits('refresh-data',props.options.model.domain_uuid);
 
             handleModalClose();
-            // handleClearSelection();
         }).catch((error) => {
             ringotelConnectionFormSubmiting.value = false;
-            // handleClearSelection();
-            // handleFormErrorResponse(error);
             emits('error', error); // Emit the event with error
         });
 
diff --git a/routes/web.php b/routes/web.php
index 4701b888..6ba5fda3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -220,7 +220,7 @@
     Route::post('apps/item-options', [AppsController::class, 'getItemOptions'])->name('apps.item.options');
     Route::post('/apps/organization/create', [AppsController::class, 'createOrganization'])->name('apps.organization.create');
     Route::put('/apps/organization/update', [AppsController::class, 'updateOrganization'])->name('apps.organization.update');
-    Route::delete('/apps/organization/{domain}', [AppsController::class, 'destroyOrganization'])->name('appsDestroyOrganization');
+    Route::post('/apps/organization/destroy', [AppsController::class, 'destroyOrganization'])->name('apps.organization.destroy');
     // Route::get('/apps/organization/', [AppsController::class, 'getOrganizations'])->name('appsGetOrganizations');
     Route::post('/apps/organization/sync', [AppsController::class, 'syncOrganizations'])->name('appsSyncOrganizations');
     Route::post('/apps/users/{extension}', [AppsController::class, 'mobileAppUserSettings'])->name('mobileAppUserSettings');

From cc819cdce5b4db2164e896e7f3ad048d29824ba9 Mon Sep 17 00:00:00 2001
From: nemerald-voip <info@nemerald.com>
Date: Sat, 28 Dec 2024 00:09:54 -0800
Subject: [PATCH 19/19] version bump

---
 app/Console/Commands/UpdateApp.php                            | 4 ++--
 .../Commands/Updates/{Update0916.php => Update0917.php}       | 4 ++--
 config/version.php                                            | 2 +-
 database/seeders/RecommendedSettingsSeeder.php                | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename app/Console/Commands/Updates/{Update0916.php => Update0917.php} (99%)

diff --git a/app/Console/Commands/UpdateApp.php b/app/Console/Commands/UpdateApp.php
index 074c6b2a..4841cd3e 100644
--- a/app/Console/Commands/UpdateApp.php
+++ b/app/Console/Commands/UpdateApp.php
@@ -6,7 +6,7 @@
 use App\Services\GitHubApiService;
 use Symfony\Component\Process\Process;
 use App\Console\Commands\Updates\Update097;
-use App\Console\Commands\Updates\Update0916;
+use App\Console\Commands\Updates\Update0917;
 
 
 class UpdateApp extends Command
@@ -49,7 +49,7 @@ public function handle()
         $updateSteps = [
             '0.9.7' => Update097::class,
             '0.9.11' => Update097::class,
-            '0.9.16' => Update0916::class,
+            '0.9.17' => Update0917::class,
             // Add more versions as needed
         ];
 
diff --git a/app/Console/Commands/Updates/Update0916.php b/app/Console/Commands/Updates/Update0917.php
similarity index 99%
rename from app/Console/Commands/Updates/Update0916.php
rename to app/Console/Commands/Updates/Update0917.php
index 3f9c776a..3c88bda0 100644
--- a/app/Console/Commands/Updates/Update0916.php
+++ b/app/Console/Commands/Updates/Update0917.php
@@ -5,7 +5,7 @@
 use App\Models\DefaultSettings;
 use Illuminate\Support\Str;
 
-class Update0916
+class Update0917
 {
     /**
      * Apply the 0.9.16 update steps.
@@ -69,7 +69,7 @@ public function apply()
                 'subcategory' => 'mobile_app_conn_protocol',
                 'type' => 'text',
                 'value' => 'sip',
-                'description' => 'sip or tcp or sips',
+                'description' => 'sip or sip-tcp or sips or DNS-NAPTR',
             ],
             [
                 'category' => 'mobile_apps',
diff --git a/config/version.php b/config/version.php
index 03e4d2e3..1c17fe9a 100644
--- a/config/version.php
+++ b/config/version.php
@@ -2,6 +2,6 @@
 
 return [
 
-    'release' => '0.9.16',
+    'release' => '0.9.17',
     
 ];
\ No newline at end of file
diff --git a/database/seeders/RecommendedSettingsSeeder.php b/database/seeders/RecommendedSettingsSeeder.php
index 99c4f687..26adc8aa 100644
--- a/database/seeders/RecommendedSettingsSeeder.php
+++ b/database/seeders/RecommendedSettingsSeeder.php
@@ -124,7 +124,7 @@ private function createDefaultSettings()
                 'default_setting_name'          => 'text',
                 'default_setting_value'         => 'sip',
                 'default_setting_enabled'       => true,
-                'default_setting_description'   => "Options: sip or tcp or sips",
+                'default_setting_description'   => "Options: sip or sip-tcp or sips or DNS-NAPTR",
             ],
             [
                 'default_setting_category'      => 'mobile_apps',