new file: app/Http/Controllers/PostHandler.php

modified:   app/Http/Controllers/SmartController.php
new file:   app/Models/Caller_DB.php
new file:   database/migrations/2024_12_23_035215_smart_caller.php
new file:   resources/views/smart/caller
modified:   resources/views/smart/dashboard
modified:   resources/views/smart/login
modified:   routes/web

app/Http/Controllers/PostHandler.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use App\Models\Caller_DB;
+class PostHandler extends Controller
+{
+        public function caller_add(Request $request)
+        {
+            try {
+
+                $data = $request->validate([
+                    "node_name" => "required|string",
+                    "whitelist_ip" => "nullable|string",
+                    "token" => "required|string",
+                ]);
+
+                $data["status"] = "active";
+                $user = Auth::user();
+
+                $caller = new Caller_DB();
+                $caller->node_name = $data["node_name"];
+                $caller->whitelist_ip = $data["whitelist_ip"];
+                if ($data["whitelist_ip"]) {
+                    $ips = explode(',', $data["whitelist_ip"]);
+                    foreach ($ips as $ip) {
+                        $ip = trim($ip);
+                        if (!filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4)) {
+                            throw new \Exception('Invalid IPv4 format.');
+                        }
+                    }
+                    $caller->whitelist_ip = implode(',', $ips);
+                } else {
+                    $caller->whitelist_ip = null;
+                }
+                $caller->token = $data["token"];
+                $caller->status = $data["status"];
+                $caller->created_by = $user->name;
+                $caller->updated_by = $user->name;
+                $caller->save();
+
+                return response()->json([
+                    "message" => "Caller added successfully.",
+                    "redirect" => "3000",
+                ], 200);
+
+            } catch (\Illuminate\Validation\ValidationException $exception) {
+                return response()->json(['error' => $exception->errors()], 422);
+            } catch (\Exception $exception) {
+                return response()->json(['error' => 'An unexpected error occurred.' . $exception->getMessage()], 500);
+            }
+    }
+}

app/Http/Controllers/SmartController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Models\Caller_DB;
 
 class SmartController extends Controller
 {
@@ -15,4 +16,13 @@ class SmartController extends Controller
     {
         return view('smart.dashboard');
     }
+
+    public function caller()
+    {
+
+        $callers = Caller_DB::all();
+        $callers_count = [$callers->count()];
+
+        return view('smart.caller', compact('callers', 'callers_count'));
+    }
 }

app/Models/Caller_DB.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Caller_DB extends Model
+{
+    protected $table = 'smart_caller';
+    protected $fillable = ['node_name', 'whitelist_ip', 'token', 'status', 'created_by', 'updated_by'];
+    protected $hidden = ['created_at', 'updated_at'];
+}

database/migrations/2024_12_23_035215_smart_caller.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('smart_caller', function (Blueprint $table) {
+            $table->id()->autoIncrement();
+            $table->string('node_name');
+            $table->string('whitelist_ip')->nullable();
+            $table->string('token');
+            $table->string('status');
+            $table->string('created_by');
+            $table->string('updated_by');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        //
+    }
+};

resources/views/smart/caller.blade.php

@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="en" class="bg-slate-900">
+<head>
+    @vite(['resources/css/app.css','resources/js/app.js'])
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NCORE - Smart Caller</title>
+</head>
+<style>
+  /* Base styles for all devices */
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .header, .footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 10px 0;
+  }
+
+  .content {
+    padding: 20px;
+  }
+
+  /* Responsive styles */
+  @media (max-width: 1200px) {
+    .container {
+      width: 90%;
+    }
+  }
+
+  @media (max-width: 992px) {
+    .container {
+      width: 80%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      width: 100%;
+      padding: 10px;
+    }
+
+    .header, .footer {
+      padding: 5px 0;
+    }
+
+    .content {
+      padding: 10px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .header, .footer {
+      font-size: 14px;
+    }
+
+    .content {
+      font-size: 14px;
+    }
+  }
+</style>
+</head>
+<button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+   <span class="sr-only">Open sidebar</span>
+   <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+   </svg>
+</button>
+<body class="bg-light text-dark">
+<aside id="default-sidebar" class="fixed top-0 left-0 z-50 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidenav">
+    <div class="overflow-y-auto py-5 px-3 h-full bg-slate-800 text-white border-r border-gray-200 dark:bg-slate-700 dark:border-slate-700">
+        <div class="flex items-center justify-between mb-6">
+            <div class="col">
+            <i class="bi bi-fire flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 32px;"></i>
+            <span class="text-2xl font-semibold">NCORE</span>
+            </div>
+            <button type="button" data-drawer-toggle="default-sidebar" class="sm:hidden text-gray-400 hover:text-white">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <ul class="space-y-2 rounded-lg text-light bg-white">
+                    <li>
+                            <a href="{{route('dashboard')}}" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                            <i class="bi bi-house-check-fill flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 20px;"></i>
+                                <span class="ml-3">Dashboard</span>
+                            </a>
+                    </li>
+          <li>
+              <button type="button" class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-slate-100 dark:text-white dark:hover:bg-slate-700" aria-controls="dropdown-pages" data-collapse-toggle="dropdown-pages">
+              <i class="bi bi-fire flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 20px;"></i>
+                <span class="flex-1 ml-3 text-left whitespace-nowrap">Firewall</span>
+                  <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+              </button>
+              <ul id="dropdown-pages" class="hidden py-2 space-y-2">
+                  <li>
+                      <a href="#" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <i class="bi bi-ethernet flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
+                      Traffic Rules
+                      </a>
+                  </li>
+                  <li>
+                      <a href="#" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <i class="bi bi-table flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
+                      Routing Table
+                      </a>
+                  </li>
+              </ul>
+          </li>
+          <li>
+              <button type="button" class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-authentication" data-collapse-toggle="dropdown-authentication">
+              <i class="bi bi-router flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 20px;"></i>
+                  <span class="flex-1 ml-3 text-left whitespace-nowrap">Protocols</span>
+                  <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+              </button>
+              <ul id="dropdown-authentication" class="hidden py-2 space-y-2">
+                  <li>
+                      <a href="#" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <i class="bi bi-building-add flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
+                      GRE
+                      </a>
+                  </li>
+                  <li>
+                      <a href="#" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <i class="bi bi-building-add flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
+                      VXLAN
+                      </a>
+                  </li>
+                  <li>
+                      <a href="#" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <i class="bi bi-building-add flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
+                      WireGuard
+                      </a>
+                  </li>
+              </ul>
+          </li>
+      </ul>
+      <ul class="pt-5 mt-5 space-y-2 rounded-lg text-light bg-white border-t border-gray-200 dark:border-gray-700">
+      <li>
+              <button type="button" class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-slate-100 dark:text-white dark:hover:bg-slate-700" aria-controls="dropdown-administration" data-collapse-toggle="dropdown-administration">
+              <i class="bi bi-server flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 20px;"></i>
+                <span class="flex-1 ml-3 text-left whitespace-nowrap">Nodes</span>
+                  <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+              </button>
+              <ul id="dropdown-administration" class="hidden py-2 space-y-2">
+                  <li>
+                      <a href="{{ route('caller') }}" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <i class="bi bi-phone-vibrate flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
+                      Smart Call API
+                      </a>
+                  </li>
+                  <li>
+                      <a href="#" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <i class="bi bi-list flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
+                      Logs
+                      </a>
+                  </li>
+              </ul>
+          </li>
+          </ul>
+  </div>
+  <div class="hidden absolute bottom-0 left-0 justify-center p-4 space-x-4 w-full lg:flex bg-white dark:bg-gray-800 z-20 border-r border-gray-200 dark:border-gray-700">
+        <a href="https://repo.ncore-solution.de/Jan_Hill/NCORE_Smart_Firewall" target="_blank" class="text-gray-900 dark:text-white hover:text-gray-900 dark:hover:text-white">
+            <i class="bi bi-git" style="font-size: 24px;"></i>
+            Visit Repository
+        </a>
+  </div>
+</aside>
+
+<main class="p-4 md:ml-64 h-auto pt-20 bg-gradient-to-br from-slate-800 to-slate-900 relative">
+    <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: 40px 40px;"></div>
+    <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800">
+        <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
+            <h5 class="text-xl font-semibold text-gray-900 dark:text-white">Smart Call API</h5>
+        </div>
+        <div class="p-4">
+            <div class="relative overflow-x-auto">
+                <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                        <tr>
+                            <th scope="col" class="px-6 py-3">ID</th>
+                            <th scope="col" class="px-6 py-3">Node</th>
+                            <th scope="col" class="px-6 py-3">Status</th>
+                            <th scope="col" class="px-6 py-3">Action</th>
+                        </tr>
+                        <tr class="bg-gray-100 dark:bg-gray-800">
+                          <!-- Modal toggle -->
+<div class="flex justify-end m-5">
+    <button id="updateProductButton" data-modal-target="updateProductModal" data-modal-toggle="updateProductModal" class="block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
+        <div class="flex items-center justify-center gap-2">
+          <i class="bi bi-bookmark-plus-fill flex-shrink-0 w-6 h-6 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 20px;"></i>
+          <span>Add New Node</span>
+        </div>
+    </button>
+</div>
+
+<!-- Main modal -->
+<div id="updateProductModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
+    <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
+        <!-- Modal content -->
+        <div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
+            <!-- Modal header -->
+            <div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                    Add Node
+                </h3>
+                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="updateProductModal">
+                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    <span class="sr-only">Close</span>
+                </button>
+            </div>
+            <!-- Modal body -->
+            <form id="addNode" class="space-y-4">
+              @csrf
+                <div class="grid gap-4 mb-4 sm:grid-cols-2">
+                    <div>
+                        <label for="node_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Node Name</label>
+                        <input type="text" name="node_name" id="node_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="My Call1 Node">
+                    </div>
+                    <div>
+                      <div class="flex items-center space-x-2">
+                        <label for="whitelist_ip" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">IP Whitelist</label>
+                        <span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">Please seperate with comma ","</span>
+                      </div>
+                      <div class="flex items-center space-x-2">
+                        <input type="text" name="whitelist_ip" id="whitelist_ip" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="z.B 5.230.x.x, 5.231.x.x">
+                        <span class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Optional</span>  
+                      </div>
+                      </div>
+                    <div>
+
+                    </div>
+                <div class="col-span-2">
+                  <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Generate Access Token</label>
+                  <div class="flex items-center space-x-2">
+                    <input type="text" name="access_token" id="access_token" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Generated token will appear here" readonly>
+                    <button type="button" onclick="generateToken()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                      Generate
+                    </button>
+                  </div>
+                </div>
+                <script>
+                  function generateToken() {
+                    const random = Math.random().toString(36).substring(2) + Date.now().toString(36);
+                    const token = btoa(random);
+                    document.getElementById('access_token').value = token;
+                  }
+                </script>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button type="submit" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                        Add Node
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              @php
+                              $counter = 1;
+                              foreach($callers_count as $caller_id) {
+                                echo $counter++;
+                              }
+                              @endphp
+                            </td>
+                            @foreach($callers as $caller)
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div>
+                                       {{ $caller->node_name }}
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
+                                    {{ $caller->status }}
+                                </span>
+                            </td>
+                            @endforeach
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                                <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">Edit</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</main>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const form = document.getElementById('addNode');
+        if (form) {
+            form.addEventListener('submit', (event) => {
+                event.preventDefault();
+
+                const node_name = document.getElementById('node_name').value.trim();
+                const whitelist_ip_input = document.getElementById('whitelist_ip').value.trim();
+                const access_token = document.getElementById('access_token').value.trim();
+                const whitelist_ip = document.getElementById('whitelist_ip').value.trim();
+
+                if (!node_name) {
+                    Swal.fire({
+                        title: "Validation Error",
+                        text: "Node name is required",
+                        icon: "error"
+                    });
+                    return;
+                }
+
+                axios.post("{{ route('caller_add') }}", {
+                    node_name: node_name,
+                    whitelist_ip: whitelist_ip,
+                    token: access_token
+                })
+                    .then(function (response) {
+                        Swal.fire({
+                            title: "Success!",
+                            text: response.data.message,
+                            icon: "success",
+                            timer: response.data.redirect
+                        }).then(() => {
+                            window.location.href = "{{ route('caller') }}";
+                        });
+                        console.log(response);
+                    })
+                    .catch(function (error) {
+                        Swal.fire({
+                            title: "Error!",
+                            text: error.response?.data?.message || "An error occurred.",
+                            icon: "error",
+                            showClass: {
+                                popup: `
+                                    animate__animated
+                                    animate__fadeInUp
+                                    animate__faster
+                                `
+                            },
+                            hideClass: {
+                                popup: `
+                                    animate__animated
+                                    animate__fadeOutDown
+                                    animate__faster
+                                `
+                            }
+                        });
+                        console.log(error);
+                    });
+            });
+        }
+    });
+</script>
+
+</body>
+</html>

resources/views/smart/dashboard.blade.php

@@ -154,7 +154,7 @@
               </button>
               <ul id="dropdown-administration" class="hidden py-2 space-y-2">
                   <li>
-                      <a href="#" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                      <a href="{{ route('caller') }}" class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
                       <i class="bi bi-phone-vibrate flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" style="font-size: 16px;"></i>
                       Smart Call API
                       </a>

resources/views/smart/login.blade.php

@@ -40,6 +40,7 @@
                     Secure Login
                 </h1>
                 <form id="loginForm" class="space-y-4 md:space-y-6">
+                 @csrf
                     <div>
                         <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your Account Email</label>
                         <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="admin@domain.com">

routes/web.php

@@ -30,4 +30,11 @@ Route::Group(['prefix' => 'call', 'middleware' => 'web'], function () {
 
 Route::Group(['prefix' => 'internal', 'middleware' => 'auth'], function () {
     Route::get('dashboard/', [\App\Http\Controllers\SmartController::class, 'dashboard'])->name('dashboard');
+    Route::get('caller/', [\App\Http\Controllers\SmartController::class, 'caller'])->name('caller');
+
+
+    // Post Request for Internal Handling
+
+    Route::post('caller/add', [\App\Http\Controllers\PostHandler::class, 'caller_add'])->name('caller_add');
+
 });