Moved ShortCodes to a new controller, added Tabulator, bug fixes

app/Http/Controllers/ClientsController.php

@@ -854,21 +854,22 @@ class ClientsController extends Controller
     public function getShortCodes($type){
         //$auth_users = Models\SystemUser::pluck('name', 'id');
         //todo : separate the short codes into individual pages
+        // dd(session('current_user.designation'));
         switch ($type) {
             case 'sms':
-                $codes_data = Models\ClientShortCode::with('client_info','client_info', 'update_info')->where('code_type', 'sms')->get();
+                $codes_data = Models\ClientShortCode::with('client_info','client_info', 'update_info')->where('code_type', 'sms')->orderBy('id', 'DESC')->get();
                 break;
             case 'ussd':
-                $codes_data = Models\ClientShortCode::with('client_info', 'client_info', 'update_info')->where('code_type', 'ussd')->get();
+                $codes_data = Models\ClientShortCode::with('client_info', 'client_info', 'update_info')->where('code_type', 'ussd')->orderBy('id', 'DESC')->get();
                 break;
             case 'voice':
-                $codes_data = Models\ClientShortCode::with('client_info', 'client_info', 'update_info')->where('code_type', 'voice')->get();
+                $codes_data = Models\ClientShortCode::with('client_info', 'client_info', 'update_info')->where('code_type', 'voice')->orderBy('id', 'DESC')->get();
                 break;
             default:
                 // code... show 404
                 break;
         }
-        $codes = Models\ClientShortCode::with('update_info')->get();
+        // $codes = Models\ClientShortCode::with('update_info')->get();
 
         $data = [
             'page_title' => 'Client Short Codes',

app/Http/Controllers/ShortCodesController.php

@@ -0,0 +1,151 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Arr;
+use App\Http\Requests;
+use Carbon\Carbon;
+use App\Models;
+use Session;
+
+class ShortCodesController extends Controller{
+
+    public function indexTab(){
+        $data = [
+            'page_title' => 'Short Codes',
+            'type' => 'SMS',
+            'current_user' => session('current_user')
+        ];
+        return view('shortcodes.index', $data);
+    }
+
+    public function smsindex(){
+        // $codes_data = Models\ClientShortCode::groupBy('code_type')->get();
+        $codes_data = \DB::table('client_short_codes')
+                 ->select('code_type', \DB::raw('count(*) as total'))
+                 ->groupBy('code_type')
+                 ->get();
+        $data = [
+            'page_title' => 'Short Codes',
+            'type' => 'SMS',
+            'codes_data' => $codes_data,
+            'current_user' => session('current_user')
+        ];
+        return view('shortcodes.smsindex', $data);
+    }
+    public function getShortCodesJson(Request $request){
+        #$this->log_query();
+        //$codes_data = Models\ClientShortCode::with('client_info', 'update_info')->where('code_type', 'sms')->orderBy('id', 'DESC')->get();
+
+        $shortcode_arr = \DB::table('client_short_codes')
+            ->join('auth_users', 'auth_users.id', '=', 'client_short_codes.last_updated_by')
+            ->join('clients', 'clients.id', '=', 'client_short_codes.client_id')
+            ->select('client_short_codes.id', 'client_short_codes.name', 'client_short_codes.shortcode',  'clients.name AS clientName', 'client_short_codes.network', 'client_short_codes.toll_free', 'client_short_codes.status', 'client_short_codes.remarks', 'client_short_codes.launch_date', 'client_short_codes.expiry_date', 'client_short_codes.last_updated_by', 'auth_users.name AS modifiedBy')
+            ->where('client_short_codes.code_type', 'sms')
+            ->orderBy('client_short_codes.shortcode', 'ASC')
+            ->paginate(15);
+
+        if($request->has('keyword')){
+            $keyword = $request->keyword;
+            $code_type = 'sms';
+            $shortcode_arr = \DB::table('client_short_codes')
+            ->join('auth_users', 'auth_users.id', '=', 'client_short_codes.last_updated_by')
+            ->join('clients', 'clients.id', '=', 'client_short_codes.client_id')
+            ->select('client_short_codes.id', 'client_short_codes.name', 'client_short_codes.shortcode', 'clients.name AS clientName', 'client_short_codes.network', 'client_short_codes.toll_free', 'client_short_codes.status', 'client_short_codes.remarks', 'client_short_codes.launch_date', 'client_short_codes.expiry_date', 'client_short_codes.last_updated_by', 'auth_users.name AS modifiedBy')
+            ->whereRaw("code_type = '$code_type' AND (client_short_codes.name LIKE '%$keyword%' OR client_short_codes.shortcode LIKE '%$keyword%' OR client_short_codes.status LIKE '%$keyword%' OR client_short_codes.network LIKE '%$keyword%' OR client_short_codes.toll_free LIKE '%$keyword%' OR client_short_codes.launch_date LIKE '%$keyword%' OR client_short_codes.expiry_date LIKE '%$keyword%' OR clients.name LIKE '%$keyword%' OR auth_users.name LIKE '%$keyword%')")
+            // ->where('code_type', $code_type)
+            ->orderBy('client_short_codes.shortcode', 'ASC')
+            ->paginate(15);
+        }
+        return response()->json($shortcode_arr);
+    }
+
+    public function ussdindex(){
+        // $codes_data = Models\ClientShortCode::groupBy('code_type')->get();
+        $codes_data = \DB::table('client_short_codes')
+                 ->select('code_type', \DB::raw('count(*) as total'))
+                 ->groupBy('code_type')
+                 ->get();
+        $data = [
+            'page_title' => 'Short Codes',
+            'type' => 'USSD',
+            'codes_data' => $codes_data,
+            'current_user' => session('current_user')
+        ];
+        return view('shortcodes.ussdindex', $data);
+    }
+    public function getUssdShortCodesJson(Request $request){
+        #$this->log_query();
+        //$codes_data = Models\ClientShortCode::with('client_info', 'update_info')->where('code_type', 'sms')->orderBy('id', 'DESC')->get();
+
+        $shortcode_arr = \DB::table('client_short_codes')
+            ->join('auth_users', 'auth_users.id', '=', 'client_short_codes.last_updated_by')
+            ->join('clients', 'clients.id', '=', 'client_short_codes.client_id')
+            ->select('client_short_codes.id', 'client_short_codes.name', 'client_short_codes.shortcode',  'clients.name AS clientName', 'client_short_codes.network', 'client_short_codes.toll_free', 'client_short_codes.status', 'client_short_codes.remarks', 'client_short_codes.launch_date', 'client_short_codes.expiry_date', 'client_short_codes.last_updated_by', 'auth_users.name AS modifiedBy')
+            ->where('client_short_codes.code_type', 'ussd')
+            ->orderBy('client_short_codes.shortcode', 'ASC')
+            ->paginate(15);
+
+        if($request->has('keyword')){
+            $keyword = $request->keyword;
+            $code_type = 'ussd';
+            $shortcode_arr = \DB::table('client_short_codes')
+            ->join('auth_users', 'auth_users.id', '=', 'client_short_codes.last_updated_by')
+            ->join('clients', 'clients.id', '=', 'client_short_codes.client_id')
+            ->select('client_short_codes.id', 'client_short_codes.name', 'client_short_codes.shortcode', 'clients.name AS clientName', 'client_short_codes.network', 'client_short_codes.toll_free', 'client_short_codes.status', 'client_short_codes.remarks', 'client_short_codes.launch_date', 'client_short_codes.expiry_date', 'client_short_codes.last_updated_by', 'auth_users.name AS modifiedBy')
+            ->whereRaw("code_type = '$code_type' AND (client_short_codes.name LIKE '%$keyword%' OR client_short_codes.shortcode LIKE '%$keyword%' OR client_short_codes.status LIKE '%$keyword%' OR client_short_codes.network LIKE '%$keyword%' OR client_short_codes.toll_free LIKE '%$keyword%' OR client_short_codes.launch_date LIKE '%$keyword%' OR client_short_codes.expiry_date LIKE '%$keyword%' OR clients.name LIKE '%$keyword%' OR auth_users.name LIKE '%$keyword%')")
+            // ->where('code_type', $code_type)
+            ->orderBy('client_short_codes.shortcode', 'ASC')
+            ->paginate(15);
+        }
+        return response()->json($shortcode_arr);
+    }
+
+
+    public function voiceindex(){
+        // $codes_data = Models\ClientShortCode::groupBy('code_type')->get();
+        $codes_data = \DB::table('client_short_codes')
+                 ->select('code_type', \DB::raw('count(*) as total'))
+                 ->groupBy('code_type')
+                 ->get();
+        $data = [
+            'page_title' => 'Short Codes',
+            'type' => 'Voice',
+            'codes_data' => $codes_data,
+            'current_user' => session('current_user')
+        ];
+        return view('shortcodes.voiceindex', $data);
+    }
+    public function getVoiceShortCodesJson(Request $request){
+        #$this->log_query();
+        //$codes_data = Models\ClientShortCode::with('client_info', 'update_info')->where('code_type', 'sms')->orderBy('id', 'DESC')->get();
+
+        $shortcode_arr = \DB::table('client_short_codes')
+            ->join('auth_users', 'auth_users.id', '=', 'client_short_codes.last_updated_by')
+            ->join('clients', 'clients.id', '=', 'client_short_codes.client_id')
+            ->select('client_short_codes.id', 'client_short_codes.name', 'client_short_codes.shortcode',  'clients.name AS clientName', 'client_short_codes.network', 'client_short_codes.toll_free', 'client_short_codes.status', 'client_short_codes.remarks', 'client_short_codes.launch_date', 'client_short_codes.expiry_date', 'client_short_codes.last_updated_by', 'auth_users.name AS modifiedBy')
+            ->where('client_short_codes.code_type', 'voice')
+            ->orderBy('client_short_codes.shortcode', 'ASC')
+            ->paginate(15);
+
+        if($request->has('keyword')){
+            $keyword = $request->keyword;
+            $code_type = 'voice';
+            $shortcode_arr = \DB::table('client_short_codes')
+            ->join('auth_users', 'auth_users.id', '=', 'client_short_codes.last_updated_by')
+            ->join('clients', 'clients.id', '=', 'client_short_codes.client_id')
+            ->select('client_short_codes.id', 'client_short_codes.name', 'client_short_codes.shortcode', 'clients.name AS clientName', 'client_short_codes.network', 'client_short_codes.toll_free', 'client_short_codes.status', 'client_short_codes.remarks', 'client_short_codes.launch_date', 'client_short_codes.expiry_date', 'client_short_codes.last_updated_by', 'auth_users.name AS modifiedBy')
+            ->whereRaw("code_type = '$code_type' AND (client_short_codes.name LIKE '%$keyword%' OR client_short_codes.shortcode LIKE '%$keyword%' OR client_short_codes.status LIKE '%$keyword%' OR client_short_codes.network LIKE '%$keyword%' OR client_short_codes.toll_free LIKE '%$keyword%' OR client_short_codes.launch_date LIKE '%$keyword%' OR client_short_codes.expiry_date LIKE '%$keyword%' OR clients.name LIKE '%$keyword%' OR auth_users.name LIKE '%$keyword%')")
+            // ->where('code_type', $code_type)
+            ->orderBy('client_short_codes.shortcode', 'ASC')
+            ->paginate(15);
+        }
+        return response()->json($shortcode_arr);
+    }
+
+
+
+
+
+}

resources/views/client/partials/shortcode-index.blade.php

@@ -1,6 +1,6 @@
 <div>
   <div class="table-responsive">
-    <table class="table table-striped ">
+    <table class="table table-striped table-condensed table-bordered jambo_table">
       <thead>
         <tr class="headings">
           {{-- <th>#</th> --}}
@@ -14,7 +14,7 @@
           <th class="column-title">Renewal Date</th>
           <th class="column-title no-link last"><span class="nobr">Action</span>
           </th>
-         
+
         </tr>
       </thead>
       <tbody>
@@ -26,15 +26,23 @@
         @foreach ($codes_data as $row)
         <tr class="even pointer">
           <td class="mes-td col-md-2">{{ $row->name }}</td>
-          <td class="mes-td col-md-1">{{ $row->shortcode }}</td>
+          <td class="mes-td col-md-1 text-danger"><b>{{ $row->shortcode }}</b></td>
           <td class="mes-td col-md-2">{{ $row->network }}</td>
-          <td class="mes-td col-md-1">{{ strtoupper($row->toll_free) }}</td>                               
+          <td class="mes-td col-md-1">{{ strtoupper($row->toll_free) }}</td>
-          <td class="mes-td col-md-1">{{ $row->status }}</td>
+          <td class="mes-td col-md-1">
+            <!-- style='color:#3FB449; font-weight:bold;'
+            dump($row->status)
+           -->
+            <span class="label label-<?php echo ($row->status == 'LIVE') ? 'success' : 'warning' ?> ">
+              <?php //dump($row->status) ?>
+            {{ $row->status }}
+            </span>
+          </td>
           <td class="mes-td col-md-2">{{ $row->remarks }}</td>
           <td class="mes-td col-md-1" style="width: 100px;">{{ date('d-m-Y', strtotime($row->launch_date)) }}</td>
           <td class="mes-td col-md-1" style="width: 100px;">
             @if($row->expiry_date == false)
-              {{ "No found"}}
+              {{ "N/A"}}
             @else
               {{ date('d-m-Y', strtotime($row->expiry_date)) }}
             @endif
@@ -51,4 +59,4 @@
       </tbody>
     </table>
 </div>
-</div>
+</div>

resources/views/client/shortcodes.blade.php

@@ -19,7 +19,7 @@
         </div>
 
         <div class="title_right">
-          
+
           <div class="row">
               <div class="col-sm-12">
               <div class="pull-right">
@@ -47,11 +47,12 @@
                 <div role="tabpanel" class="tab-pane fade active in" id="tabSmsShortCode" aria-labelledby="smsshortcode-tab">
                       <h4 class="lead"><strong>
                       @if($type == 'voice')
-                        {{ ucfirst($type) }} Short Code 
+                        {{ ucfirst($type) }} Short Code
                       @else
-                        {{ strtoupper($type) }} Short Code 
+                        {{ strtoupper($type) }} Short Code
                       @endif
                     </strong></h4>
+                    <?php //dump($codes_data) ?>
                       @include('client.partials.shortcode-index')
                     </div>
               </div>
@@ -66,7 +67,7 @@
 @section('javascript')
   <script type="text/javascript">
   $(document).ready(function(){
-    
+
 
   });
   </script>

resources/views/layouts/partials/sidebar.blade.php

@@ -2,15 +2,8 @@
               <div class="menu_section">
                 <h3>General</h3>
                 <ul class="nav side-menu">
-                  <li><a href="{!! url('dashboard') !!}"><i class="fa fa-home"></i> Dashboard</a>
+                  <li><a href="{!! url('dashboard') !!}"><i class="fa fa-home"></i> Dashboard</a></li>
-
+                  <li><a href="{!! url('clients') !!}"><i class="fa fa-users"></i> Clients</a></li>
-                  </li>
-                  <li>
-                    <a href="{!! url('clients') !!}"><i class="fa fa-users"></i> Clients</a>
-                  </li>
-                  <li>
-                    <a href="{!! url('ussdclients') !!}"><i class="fa fa-money"></i> USSD Clients Payments</a>
-                  </li>
                   <li><a><i class="fa fa-file"></i> Documents <span class="fa fa-chevron-down"></span></a>
                     <ul class="nav child_menu">
                       <li><a href="{!! url('generaldocuments') !!}">Overview</a></li>
@@ -21,23 +14,19 @@
                       <li><a href="{!! url('generaldocuments/list/vpn_forms') !!}">VPN Forms</a></li>
                     </ul>
                   </li>
-                  <li><a href="{!! url('mnos') !!}"><i class="fa fa-globe"></i> Network Operators </a></li>
-                  <li><a href="{!! url('clickapps') !!}"><i class="fa fa-code"></i> Click Apps </a></li>
-                  <li><a href="{!! url('senderids') !!}"><i class="fa fa-th-list"></i> Sender IDs </a></li>
-                  <li><a href="{!! url('staffmembers') !!}"><i class="fa fa-users"></i> Team Members</a></li>
-                  <li><a href="{!! url('officelocations') !!}"><i class="fa fa-map-marker"></i> Branch Offices</a></li>
-                  <li>
-                  <li><a href="{!! url('infrastructure/server-list') !!}"><i class="fa fa-sitemap"></i>Server List</a></li>
-                    <!-- <a href="{!! url('services') !!}"><i class="fa fa-shopping-bag"></i> Services </a> -->
-                  </li>
                   <li><a><i class="fa fa-dot-circle-o"></i>Short Codes <span class="fa fa-chevron-down"></span></a>
                     <ul class="nav child_menu">
-                      <li><a href="{!! url('clients/shortcodes/sms') !!}">SMS</a></li>
+                      <li><a href="{!! url('smsshortcodes') !!}">SMS</a></li>
-                      <li><a href="{!! url('clients/shortcodes/ussd') !!}">USSD</a></li>
+                      <li><a href="{!! url('ussdshortcodes') !!}">USSD</a></li>
-                      <li><a href="{!! url('clients/shortcodes/voice') !!}">Voice</a></li>
+                      <li><a href="{!! url('voiceshortcodes') !!}">Voice</a></li>
 
                     </ul>
                   </li>
+                  <li><a href="{!! url('mnos') !!}"><i class="fa fa-globe"></i> Network Operators </a></li>
+                  <li><a href="{!! url('senderids') !!}"><i class="fa fa-th-list"></i> Sender IDs </a></li>
+
+                  <li><a href="{!! url('officelocations') !!}"><i class="fa fa-map-marker"></i> Branch Offices</a></li>
+                  <!-- <li> -->
                   <li><a><i class="fa fa-table"></i>Reports <span class="fa fa-chevron-down"></span></a>
                     <ul class="nav child_menu">
                       <li><a href="{!! url('clientpaymentreports') !!}">Client Payments</a></li>
@@ -45,14 +34,23 @@
                       <li><a href="{!! url('reports/recentclients') !!}">Recent Clients</a></li>
                     </ul>
                   </li>
-
+                  </ul>
+                </div>
+                  <div class="menu_section">
+                    <ul class="nav side-menu">
+                  <!-- <li><a href="{!! url('infrastructure/server-list') !!}"><i class="fa fa-sitemap"></i>Server List</a></li> -->
+                    <!-- <a href="{!! url('services') !!}"><i class="fa fa-shopping-bag"></i> Services </a> -->
                   <!-- </li> -->
-                  @if(session('current_user.designation') == 'administrator' ||  session('current_user.designation') == 'technical')
+
+                  <li><a href="{!! url('clickapps') !!}"><i class="fa fa-code"></i> Click Apps </a></li>
+                  <li><a href="{!! url('ussdclients') !!}"><i class="fa fa-money"></i> USSD Clients Payments</a></li>
+                  <li><a href="{!! url('staffmembers') !!}"><i class="fa fa-users"></i> Team Members</a></li>
+                  <!-- </li> -->
+                  @if(session('current_user.designation') == 'Administrator' ||  session('current_user.designation') == 'technical')
                   <li><a><i class="fa fa-sitemap"></i>Infrastructure <span class="fa fa-chevron-down"></span></a>
                     <ul class="nav child_menu">
                       <li><a href="{!! url('infrastructure/servers') !!}">Overview</a></li>
-                      <li><a href="{!! url('infrastructure/server-list') !!}">Server List</a></li>
+                      <li><a href="{!! url('infrastructure/server-list') !!}">Server List </a></li>
-
                     </ul>
                   </li>
                   @endif

resources/views/shortcodes/index.blade.php

@@ -0,0 +1,196 @@
+@extends('layouts.master')
+  @section('page_title')
+      @if(isset($page_title))
+          {{ $page_title }}
+      @endif
+  @endsection
+  @section('css')
+  <link href="{!! url('public/assets/vendors/tabulator/css/bootstrap/tabulator_bootstrap.css') !!}" type="text/css" rel="stylesheet">
+  @endsection
+@section('content')
+  <div class="">
+      <div class="page-title">
+        <div class="title_left">
+          <div class="title_left">
+            <ol class="breadcrumb">
+              <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
+              <!-- <li><a href="{!! url('clients') !!}">Clients</a></li> -->
+              <li class="active">{{ strtoupp($code_type) }} Short Codes </li>
+            </ol>
+          </div>
+        </div>
+
+        <div class="title_right">
+
+
+        </div>
+      </div>
+
+      <div class="clearfix"></div>
+      <div class="row">
+        @include('commons.notifications')
+        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="x_panel">
+          <div class="x_title">
+            <h2> Client Short Codes </h2>
+            <div class="pull-right">
+                <!-- <a class="btn btn-primary btn-sm" href="{!! url('clients/create') !!}"><i class="fa fa-plus-circle"></i> Add Client</a> -->
+            </div>
+            <div class="clearfix"></div>
+          </div>
+
+          <div class="x_content">
+
+                <div role="tabpanel" class="tab-pane fade active in" id="tab_sms" aria-labelledby="sms-tab">
+                  <div class="pull-left">
+                    <button id="smscodes-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
+                    <button id="smscodes-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button>
+                    </div>
+                    <div class="pull-right">
+                      <form method="GET" action="{!! url('shortcodes') !!}">
+                        <input type="hidden" name="code_type" value="sms">
+                        <div class="col-md-5 col-sm-5 col-xs-12 form-group">
+                          <div style="margin-top:1px; margin-right:-90px;" class="top_search">
+                          </div>
+                        </div>
+                        <div class="col-md-12 form-group pull-left top_search" style="margin-top: -2px;">
+                          <div class="input-group">
+                            <input type="text" name="keyword" class="form-control" id="keywordField" placeholder="Keyword here...">
+                            <span class="input-group-btn">
+                              <!-- <button type="submit" class="btn btn-primary" style="color: #fff;" type="button">Go!</button> -->
+                            </span>
+                          </div>
+                        </div>
+                      </form>
+                    </div>
+                  <div id="smsShortCodeTable"></div>
+                </div>
+                <div role="tabpanel" class="tab-pane fade" id="tab_ussd" aria-labelledby="ussd-tab">
+                  <div id="ussdShortCodeTable"></div>
+                </div>
+                <div role="tabpanel" class="tab-pane fade" id="tab_voice" aria-labelledby="voice-tab">
+                  <div id="voiceShortCodeTable"></div>
+                </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+@endsection
+
+@section('javascript')
+<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.plugin.autotable.js') !!}"></script>
+
+<script type="text/javascript">
+  $(document).ready(function(){
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/smsshortcodes/"+rowID+"' class='btn btn-link'>"+url+"</a>";
+      //return '<a href="'+ base_url + '"/clients/"'+rowID+'" class="btn btn-link">'+ url +'</a>';
+    }
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/smsshortcodes/"+rowID+"/edit' class='btn btn-link'>"+url+"</a>";
+    }
+    function cellDesign (cell, formatterParams){
+      var value = cell.getValue();
+      return "<span style='color:#54B4D3; font-weight:bold;'>" + value + "</span>";
+    }
+    function statusDesign (cell, formatterParams){
+      var value = cell.getValue();
+      if(value === 'LIVE'){
+            return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
+      }
+      else{
+            return "<span style='color:#E4A11B;'>" + value + "</span>";
+      }
+    }
+    var table = new Tabulator("#smsShortCodeTable", {
+        ajaxURL: "smsshortcodes/all",
+        paginationSize: 15,
+        layout: "fitColumns",
+        pagination: "remote",
+        selectable: false,
+        printAsHtml: true,
+        ajaxLoaderLoading: $('#logo_spinner').html(),
+        columns: [
+            {
+                title: "Friendly Name",
+                field: "name",
+                sorter: "string",
+                formatter:link,
+            },
+            {
+                title: "Short Code",
+                field: "shortcode",
+                sorter: "string",
+            },
+            {   title:"Network",
+                field:"network",
+                sorter:"string",
+            },
+            {   title:"Client",
+                field:"clientName",
+                sorter:"string",
+            },
+            {
+                title: "Status",
+                field: "status",
+                sorter: "string",
+                formatter: statusDesign,
+            },
+            {
+                title: "Launch Date",
+                field: "launch_date",
+                sorter: "string",
+            },
+            {
+                title: "Expirty Date",
+                field: "expiry_date",
+                sorter: "string",
+            },
+            {
+                title: "Last Modified By",
+                field: "modifiedBy",
+                sorter: "string",
+            }
+        ],
+        // $('#clients-download-xlsx').click(function(){
+        //   table.download("xlsx", "client-list.xlsx", {sheetName:"Sheet 1"});
+        // });
+
+        rowClick:function(e, row){
+        var userID = row.getData().id;
+        //$('#userEditModal').modal('show');
+        },
+    });
+    document.getElementById("smscodes-download-xlsx").addEventListener("click", function(){
+      table.download("xlsx", "sms-shortcode-list.xlsx", {sheetName:"Sheet 1"});
+    });
+        //trigger download of data.pdf file
+    document.getElementById("smscodes-download-pdf").addEventListener("click", function(){
+      table.download("pdf", "sms-shortcode-list.pdf", {
+          orientation:"portrait", //set page orientation to portrait
+          title:"Click Mobile - SMS Short Codes", //add title to report
+      });
+    });
+
+    $('#keywordField').on('keyup', function(){
+      console.log('up');
+      var keyword = $(this).val();
+      table.setData("smsshortcodes/all?keyword=" + keyword + "&code_type=sms");
+
+    });
+
+});
+
+</script>
+@endsection

resources/views/shortcodes/partials/shortcode-index.blade.php

@@ -0,0 +1,62 @@
+<div>
+  <div class="table-responsive">
+    <table class="table table-striped table-condensed table-bordered jambo_table">
+      <thead>
+        <tr class="headings">
+          {{-- <th>#</th> --}}
+          <th class="column-title">Name</th>
+         <th class="column-title">Code</th>
+          <th class="column-title">Network</th>
+          <th class="column-title">Toll Free</th>
+          <th class="column-title">Status</th>
+          <th class="column-title">Remarks</th>
+          <th class="column-title">Launch Date</th>
+          <th class="column-title">Renewal Date</th>
+          <th class="column-title no-link last"><span class="nobr">Action</span>
+          </th>
+
+        </tr>
+      </thead>
+      <tbody>
+        @if ($codes_data->isEmpty())
+        <tr>
+          <td class="" colspan="12">No Records found</td>
+        </tr>
+        @else
+        @foreach ($codes_data as $row)
+        <tr class="even pointer">
+          <td class="mes-td col-md-2">{{ $row->name }}</td>
+          <td class="mes-td col-md-1 text-danger"><b>{{ $row->shortcode }}</b></td>
+          <td class="mes-td col-md-2">{{ $row->network }}</td>
+          <td class="mes-td col-md-1">{{ strtoupper($row->toll_free) }}</td>
+          <td class="mes-td col-md-1">
+            <!-- style='color:#3FB449; font-weight:bold;'
+            dump($row->status)
+           -->
+            <span class="label label-<?php echo ($row->status == 'LIVE') ? 'success' : 'warning' ?> ">
+              <?php //dump($row->status) ?>
+            {{ $row->status }}
+            </span>
+          </td>
+          <td class="mes-td col-md-2">{{ $row->remarks }}</td>
+          <td class="mes-td col-md-1" style="width: 100px;">{{ date('d-m-Y', strtotime($row->launch_date)) }}</td>
+          <td class="mes-td col-md-1" style="width: 100px;">
+            @if($row->expiry_date == false)
+              {{ "N/A"}}
+            @else
+              {{ date('d-m-Y', strtotime($row->expiry_date)) }}
+            @endif
+          </td>
+
+          <td class="last col-md-1" style="width: 100px;">
+            <span>
+              <a href="" class="btn btn-xs btn-primary"><i class="fa fa-edit"></i></a>
+            </span>
+          </td>
+        </tr>
+        @endforeach
+        @endif
+      </tbody>
+    </table>
+</div>
+</div>

resources/views/shortcodes/shortcodes.blade.php

@@ -0,0 +1,172 @@
+@extends('layouts.master')
+  @section('page_title')
+      @if(isset($page_title))
+          {{ $page_title }}
+      @endif
+  @endsection
+
+@section('content')
+  <div class="">
+      <div class="page-title">
+        <div class="title_left">
+          <div class="title_left">
+            <ol class="breadcrumb">
+              <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
+              <li><a href="{!! url('clients') !!}">Clients</a></li>
+              <li class="active">Short Codes </li>
+            </ol>
+          </div>
+        </div>
+
+        <div class="title_right">
+
+          <div class="row">
+              <div class="col-sm-12">
+              <div class="pull-right">
+              </div>
+              </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="clearfix"></div>
+      <div class="row">
+        @include('commons.notifications')
+        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="x_panel">
+          <div class="x_title">
+            <h2> Client Short Codes </h2>
+            <div class="pull-right">
+                <!-- <a class="btn btn-primary btn-sm" href="{!! url('clients/create') !!}"><i class="fa fa-plus-circle"></i> Add Client</a> -->
+            </div>
+            <div class="clearfix"></div>
+          </div>
+
+          <div class="x_content">
+            <div class="col-md-12" style="border: 1px solid; min-height: 500px;">
+                <div role="tabpanel" class="tab-pane fade active in" id="tabSmsShortCode" aria-labelledby="smsshortcode-tab">
+                      <h4 class="lead"><strong>
+                      @if($type == 'voice')
+                        {{ ucfirst($type) }} Short Code
+                      @else
+                        {{ strtoupper($type) }} Short Code
+                      @endif
+                    </strong></h4>
+                    <?php //dump($codes_data) ?>
+                      @include('client.partials.shortcode-index')
+                    </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+@endsection
+
+@section('javascript')
+<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.plugin.autotable.js') !!}"></script>
+
+<script type="text/javascript">
+  $(document).ready(function(){
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/clients/"+rowID+"' class='btn btn-link'>"+url+"</a>";
+      //return '<a href="'+ base_url + '"/clients/"'+rowID+'" class="btn btn-link">'+ url +'</a>';
+    }
+    var table = new Tabulator("#clientsTable", {
+        ajaxURL: "clients/all",
+        paginationSize: 15,
+        layout: "fitColumns",
+        pagination: "remote",
+        selectable: false,
+        printAsHtml: true,
+        ajaxLoaderLoading: $('#logo_spinner').html(),
+        columns: [
+            {
+                title: "Client",
+                field: "name",
+                sorter: "string",
+                formatter:link,
+            },
+            {
+                title: "Account Manager",
+                field: "accountMgr",
+                sorter: "string",
+            },
+            /*
+            {   title:"Onboarding Progress Score",
+                field:"progress_indicator_score",
+                sorter:"number",
+                hozAlign:"left",
+                formatter:"progress",
+                width:200,
+                editable:true
+            },
+            */
+            {   title:"Onboarding %",
+                field:"progress_indicator_score",
+                sorter:"number",
+            },
+            {
+                title: "Status",
+                field: "status",
+                sorter: "string",
+            },
+            {
+                title: "Country",
+                field: "country",
+                sorter: "string",
+            },
+            {
+                title: "Flag",
+                field: "theflag",
+                download: false,
+                formatter:"image", formatterParams:{
+                    height:"20px",
+                    width:"30px",
+                    // urlPrefix:"http://website.com/images/",
+                    // urlSuffix:".png",
+                  }
+            },
+            {
+                title: "Last Modified By",
+                field: "modifiedBy",
+                sorter: "string",
+            }
+        ],
+        // $('#clients-download-xlsx').click(function(){
+        //   table.download("xlsx", "client-list.xlsx", {sheetName:"Sheet 1"});
+        // });
+
+        rowClick:function(e, row){
+        var userID = row.getData().id;
+        //$('#userEditModal').modal('show');
+        },
+    });
+    document.getElementById("clients-download-xlsx").addEventListener("click", function(){
+      table.download("xlsx", "client-list.xlsx", {sheetName:"Sheet 1"});
+    });
+        //trigger download of data.pdf file
+    document.getElementById("clients-download-pdf").addEventListener("click", function(){
+      table.download("pdf", "client-list.pdf", {
+          orientation:"portrait", //set page orientation to portrait
+          title:"Click Mobile - Clients", //add title to report
+      });
+    });
+
+    $('#keywordField').on('keyup', function(){
+      console.log('up');
+      var keyword = $(this).val();
+      table.setData("clients/all?keyword=" + keyword);
+
+    });
+
+});
+
+</script>
+@endsection

resources/views/shortcodes/smsindex.blade.php

@@ -0,0 +1,196 @@
+@extends('layouts.master')
+  @section('page_title')
+      @if(isset($page_title))
+          {{ $page_title }}
+      @endif
+  @endsection
+  @section('css')
+  <link href="{!! url('public/assets/vendors/tabulator/css/bootstrap/tabulator_bootstrap.css') !!}" type="text/css" rel="stylesheet">
+  @endsection
+@section('content')
+  <div class="">
+      <div class="page-title">
+        <div class="title_left">
+          <div class="title_left">
+            <ol class="breadcrumb">
+              <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
+              <!-- <li><a href="{!! url('clients') !!}">Clients</a></li> -->
+              <li class="active">SMS Short Codes </li>
+            </ol>
+          </div>
+        </div>
+
+        <div class="title_right">
+
+
+        </div>
+      </div>
+
+      <div class="clearfix"></div>
+      <div class="row">
+        @include('commons.notifications')
+        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="x_panel">
+          <div class="x_title">
+            <h2> Client Short Codes </h2>
+            <div class="pull-right">
+                <!-- <a class="btn btn-primary btn-sm" href="{!! url('clients/create') !!}"><i class="fa fa-plus-circle"></i> Add Client</a> -->
+            </div>
+            <div class="clearfix"></div>
+          </div>
+
+          <div class="x_content">
+
+                <div role="tabpanel" class="tab-pane fade active in" id="tab_sms" aria-labelledby="sms-tab">
+                  <div class="pull-left">
+                    <button id="smscodes-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
+                    <button id="smscodes-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button>
+                    </div>
+                    <div class="pull-right">
+                      <form method="GET" action="{!! url('shortcodes') !!}">
+                        <input type="hidden" name="code_type" value="sms">
+                        <div class="col-md-5 col-sm-5 col-xs-12 form-group">
+                          <div style="margin-top:1px; margin-right:-90px;" class="top_search">
+                          </div>
+                        </div>
+                        <div class="col-md-12 form-group pull-left top_search" style="margin-top: -2px;">
+                          <div class="input-group bg-info">
+                            <input type="text" name="keyword" class="form-control" id="keywordField" placeholder="Keyword here...">
+                            <span class="input-group-btn">
+                              <!-- <button type="submit" class="btn btn-primary" style="color: #fff;" type="button">Go!</button> -->
+                            </span>
+                          </div>
+                        </div>
+                      </form>
+                    </div>
+                  <div id="smsShortCodeTable"></div>
+                </div>
+                <div role="tabpanel" class="tab-pane fade" id="tab_ussd" aria-labelledby="ussd-tab">
+                  <div id="ussdShortCodeTable"></div>
+                </div>
+                <div role="tabpanel" class="tab-pane fade" id="tab_voice" aria-labelledby="voice-tab">
+                  <div id="voiceShortCodeTable"></div>
+                </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+@endsection
+
+@section('javascript')
+<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.plugin.autotable.js') !!}"></script>
+
+<script type="text/javascript">
+  $(document).ready(function(){
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/smsshortcodes/"+rowID+"' class='btn btn-link'>"+url+"</a>";
+      //return '<a href="'+ base_url + '"/clients/"'+rowID+'" class="btn btn-link">'+ url +'</a>';
+    }
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/smsshortcodes/"+rowID+"/edit' class='btn btn-link'>"+url+"</a>";
+    }
+    function cellDesign (cell, formatterParams){
+      var value = cell.getValue();
+      return "<span style='color:#54B4D3; font-weight:bold;'>" + value + "</span>";
+    }
+    function statusDesign (cell, formatterParams){
+      var value = cell.getValue();
+      if(value === 'LIVE'){
+            return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
+      }
+      else{
+            return "<span style='color:#E4A11B;'>" + value + "</span>";
+      }
+    }
+    var table = new Tabulator("#smsShortCodeTable", {
+        ajaxURL: "smsshortcodes/all",
+        paginationSize: 15,
+        layout: "fitColumns",
+        pagination: "remote",
+        selectable: false,
+        printAsHtml: true,
+        ajaxLoaderLoading: $('#logo_spinner').html(),
+        columns: [
+            {
+                title: "Friendly Name",
+                field: "name",
+                sorter: "string",
+                formatter:link,
+            },
+            {
+                title: "Short Code",
+                field: "shortcode",
+                sorter: "string",
+            },
+            {   title:"Network",
+                field:"network",
+                sorter:"string",
+            },
+            {   title:"Client",
+                field:"clientName",
+                sorter:"string",
+            },
+            {
+                title: "Status",
+                field: "status",
+                sorter: "string",
+                formatter: statusDesign,
+            },
+            {
+                title: "Launch Date",
+                field: "launch_date",
+                sorter: "string",
+            },
+            {
+                title: "Expirty Date",
+                field: "expiry_date",
+                sorter: "string",
+            },
+            {
+                title: "Last Modified By",
+                field: "modifiedBy",
+                sorter: "string",
+            }
+        ],
+        // $('#clients-download-xlsx').click(function(){
+        //   table.download("xlsx", "client-list.xlsx", {sheetName:"Sheet 1"});
+        // });
+
+        rowClick:function(e, row){
+        var userID = row.getData().id;
+        //$('#userEditModal').modal('show');
+        },
+    });
+    document.getElementById("smscodes-download-xlsx").addEventListener("click", function(){
+      table.download("xlsx", "sms-shortcode-list.xlsx", {sheetName:"Sheet 1"});
+    });
+        //trigger download of data.pdf file
+    document.getElementById("smscodes-download-pdf").addEventListener("click", function(){
+      table.download("pdf", "sms-shortcode-list.pdf", {
+          orientation:"portrait", //set page orientation to portrait
+          title:"Click Mobile - SMS Short Codes", //add title to report
+      });
+    });
+
+    $('#keywordField').on('keyup', function(){
+      console.log('up');
+      var keyword = $(this).val();
+      table.setData("smsshortcodes/all?keyword=" + keyword + "&code_type=sms");
+
+    });
+
+});
+
+</script>
+@endsection

resources/views/shortcodes/ussdindex.blade.php

@@ -0,0 +1,190 @@
+@extends('layouts.master')
+  @section('page_title')
+      @if(isset($page_title))
+          {{ $page_title }}
+      @endif
+  @endsection
+  @section('css')
+  <link href="{!! url('public/assets/vendors/tabulator/css/bootstrap/tabulator_bootstrap.css') !!}" type="text/css" rel="stylesheet">
+  @endsection
+@section('content')
+  <div class="">
+      <div class="page-title">
+        <div class="title_left">
+          <div class="title_left">
+            <ol class="breadcrumb">
+              <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
+              <!-- <li><a href="{!! url('clients') !!}">Clients</a></li> -->
+              <li class="active">USSD Short Codes </li>
+            </ol>
+          </div>
+        </div>
+
+        <div class="title_right">
+
+
+        </div>
+      </div>
+
+      <div class="clearfix"></div>
+      <div class="row">
+        @include('commons.notifications')
+        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="x_panel">
+          <div class="x_title">
+            <h2> USSD Short Codes </h2>
+            <div class="pull-right">
+                <!-- <a class="btn btn-primary btn-sm" href="{!! url('clients/create') !!}"><i class="fa fa-plus-circle"></i> Add Client</a> -->
+            </div>
+            <div class="clearfix"></div>
+          </div>
+
+          <div class="x_content">
+
+                <div role="tabpanel" class="tab-pane fade active in" id="tab_ussd" aria-labelledby="ussd-tab">
+                  <div class="pull-left">
+                    <button id="ussdcodes-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
+                    <button id="ussdcodes-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button>
+                    </div>
+                    <div class="pull-right">
+                      <form method="GET" action="{!! url('shortcodes') !!}">
+                        <input type="hidden" name="code_type" value="ussd">
+                        <div class="col-md-5 col-sm-5 col-xs-12 form-group">
+                          <div style="margin-top:1px; margin-right:-90px;" class="top_search">
+                          </div>
+                        </div>
+                        <div class="col-md-12 form-group pull-left top_search" style="margin-top: -2px;">
+                          <div class="input-group">
+                            <input type="text" name="keyword" class="form-control" id="keywordField" placeholder="Keyword here...">
+                            <span class="input-group-btn">
+                              <!-- <button type="submit" class="btn btn-primary" style="color: #fff;" type="button">Go!</button> -->
+                            </span>
+                          </div>
+                        </div>
+                      </form>
+                    </div>
+                  <div id="ussdShortCodeTable"></div>
+                </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+@endsection
+
+@section('javascript')
+<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.plugin.autotable.js') !!}"></script>
+
+<script type="text/javascript">
+  $(document).ready(function(){
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/ussdshortcodes/"+rowID+"' class='btn btn-link'>"+url+"</a>";
+      //return '<a href="'+ base_url + '"/clients/"'+rowID+'" class="btn btn-link">'+ url +'</a>';
+    }
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/ussdshortcodes/"+rowID+"/edit' class='btn btn-link'>"+url+"</a>";
+    }
+    function cellDesign (cell, formatterParams){
+      var value = cell.getValue();
+      return "<span style='color:#54B4D3; font-weight:bold;'>" + value + "</span>";
+    }
+    function statusDesign (cell, formatterParams){
+      var value = cell.getValue();
+      if(value === 'LIVE'){
+            return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
+      }
+      else{
+            return "<span style='color:#E4A11B;'>" + value + "</span>";
+      }
+    }
+    var table = new Tabulator("#ussdShortCodeTable", {
+        ajaxURL: "ussdshortcodes/all",
+        paginationSize: 15,
+        layout: "fitColumns",
+        pagination: "remote",
+        selectable: false,
+        printAsHtml: true,
+        ajaxLoaderLoading: $('#logo_spinner').html(),
+        columns: [
+            {
+                title: "Friendly Name",
+                field: "name",
+                sorter: "string",
+                formatter:link,
+            },
+            {
+                title: "Short Code",
+                field: "shortcode",
+                sorter: "string",
+            },
+            {   title:"Network",
+                field:"network",
+                sorter:"string",
+            },
+            {   title:"Client",
+                field:"clientName",
+                sorter:"string",
+            },
+            {
+                title: "Status",
+                field: "status",
+                sorter: "string",
+                formatter: statusDesign,
+            },
+            {
+                title: "Launch Date",
+                field: "launch_date",
+                sorter: "string",
+            },
+            {
+                title: "Expirty Date",
+                field: "expiry_date",
+                sorter: "string",
+            },
+            {
+                title: "Last Modified By",
+                field: "modifiedBy",
+                sorter: "string",
+            }
+        ],
+        // $('#clients-download-xlsx').click(function(){
+        //   table.download("xlsx", "client-list.xlsx", {sheetName:"Sheet 1"});
+        // });
+
+        rowClick:function(e, row){
+        var userID = row.getData().id;
+        //$('#userEditModal').modal('show');
+        },
+    });
+    document.getElementById("ussdcodes-download-xlsx").addEventListener("click", function(){
+      table.download("xlsx", "ussd-shortcode-list.xlsx", {sheetName:"Sheet 1"});
+    });
+        //trigger download of data.pdf file
+    document.getElementById("ussdcodes-download-pdf").addEventListener("click", function(){
+      table.download("pdf", "ussd-shortcode-list.pdf", {
+          orientation:"portrait", //set page orientation to portrait
+          title:"Click Mobile - USSD Short Codes", //add title to report
+      });
+    });
+
+    $('#keywordField').on('keyup', function(){
+      console.log('up');
+      var keyword = $(this).val();
+      table.setData("ussdshortcodes/all?keyword=" + keyword + "&code_type=ussd");
+
+    });
+
+});
+
+</script>
+@endsection

resources/views/shortcodes/voiceindex.blade.php

@@ -0,0 +1,189 @@
+@extends('layouts.master')
+  @section('page_title')
+      @if(isset($page_title))
+          {{ $page_title }}
+      @endif
+  @endsection
+  @section('css')
+  <link href="{!! url('public/assets/vendors/tabulator/css/bootstrap/tabulator_bootstrap.css') !!}" type="text/css" rel="stylesheet">
+  @endsection
+@section('content')
+  <div class="">
+      <div class="page-title">
+        <div class="title_left">
+          <div class="title_left">
+            <ol class="breadcrumb">
+              <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
+              <!-- <li><a href="{!! url('clients') !!}">Clients</a></li> -->
+              <li class="active">Voice Short Codes </li>
+            </ol>
+          </div>
+        </div>
+
+        <div class="title_right">
+
+
+        </div>
+      </div>
+
+      <div class="clearfix"></div>
+      <div class="row">
+        @include('commons.notifications')
+        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="x_panel">
+          <div class="x_title">
+            <h2> Voice Short Codes </h2>
+            <div class="pull-right">
+                <!-- <a class="btn btn-primary btn-sm" href="{!! url('clients/create') !!}"><i class="fa fa-plus-circle"></i> Add Client</a> -->
+            </div>
+            <div class="clearfix"></div>
+          </div>
+
+          <div class="x_content">
+
+                <div role="tabpanel" class="tab-pane fade active in" id="tab_voice" aria-labelledby="voice-tab">
+                  <div class="pull-left">
+                    <button id="voicecodes-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
+                    <button id="voicecodes-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button>
+                    </div>
+                    <div class="pull-right">
+                      <form method="GET" action="{!! url('voiceshortcodes') !!}">
+                        <input type="hidden" name="code_type" value="voice">
+                        <div class="col-md-5 col-sm-5 col-xs-12 form-group">
+                          <div style="margin-top:1px; margin-right:-90px;" class="top_search">
+                          </div>
+                        </div>
+                        <div class="col-md-12 form-group pull-left top_search" style="margin-top: -2px;">
+                          <div class="input-group">
+                            <input type="text" name="keyword" class="form-control" id="keywordField" placeholder="Keyword here...">
+                            <span class="input-group-btn">
+                              <!-- <button type="submit" class="btn btn-primary" style="color: #fff;" type="button">Go!</button> -->
+                            </span>
+                          </div>
+                        </div>
+                      </form>
+                    </div>
+                  <div id="voiceShortCodeTable"></div>
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+@endsection
+
+@section('javascript')
+<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.plugin.autotable.js') !!}"></script>
+
+<script type="text/javascript">
+  $(document).ready(function(){
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/voiceshortcodes/"+rowID+"' class='btn btn-link'>"+url+"</a>";
+      //return '<a href="'+ base_url + '"/clients/"'+rowID+'" class="btn btn-link">'+ url +'</a>';
+    }
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      return "<a href='"+ base_url + "/voiceshortcodes/"+rowID+"/edit' class='btn btn-link'>"+url+"</a>";
+    }
+    function cellDesign (cell, formatterParams){
+      var value = cell.getValue();
+      return "<span style='color:#54B4D3; font-weight:bold;'>" + value + "</span>";
+    }
+    function statusDesign (cell, formatterParams){
+      var value = cell.getValue();
+      if(value === 'LIVE'){
+            return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
+      }
+      else{
+            return "<span style='color:#E4A11B;'>" + value + "</span>";
+      }
+    }
+    var table = new Tabulator("#voiceShortCodeTable", {
+        ajaxURL: "voiceshortcodes/all",
+        paginationSize: 15,
+        layout: "fitColumns",
+        pagination: "remote",
+        selectable: false,
+        printAsHtml: true,
+        ajaxLoaderLoading: $('#logo_spinner').html(),
+        columns: [
+            {
+                title: "Friendly Name",
+                field: "name",
+                sorter: "string",
+                formatter:link,
+            },
+            {
+                title: "Short Code",
+                field: "shortcode",
+                sorter: "string",
+            },
+            {   title:"Network",
+                field:"network",
+                sorter:"string",
+            },
+            {   title:"Client",
+                field:"clientName",
+                sorter:"string",
+            },
+            {
+                title: "Status",
+                field: "status",
+                sorter: "string",
+                formatter: statusDesign,
+            },
+            {
+                title: "Launch Date",
+                field: "launch_date",
+                sorter: "string",
+            },
+            {
+                title: "Expirty Date",
+                field: "expiry_date",
+                sorter: "string",
+            },
+            {
+                title: "Last Modified By",
+                field: "modifiedBy",
+                sorter: "string",
+            }
+        ],
+        // $('#clients-download-xlsx').click(function(){
+        //   table.download("xlsx", "client-list.xlsx", {sheetName:"Sheet 1"});
+        // });
+
+        rowClick:function(e, row){
+        var userID = row.getData().id;
+        //$('#userEditModal').modal('show');
+        },
+    });
+    document.getElementById("voicecodes-download-xlsx").addEventListener("click", function(){
+      table.download("xlsx", "voice-shortcode-list.xlsx", {sheetName:"Sheet 1"});
+    });
+        //trigger download of data.pdf file
+    document.getElementById("voicecodes-download-pdf").addEventListener("click", function(){
+      table.download("pdf", "voice-shortcode-list.pdf", {
+          orientation:"portrait", //set page orientation to portrait
+          title:"Click Mobile - Voice Short Codes", //add title to report
+      });
+    });
+
+    $('#keywordField').on('keyup', function(){
+      console.log('up');
+      var keyword = $(this).val();
+      table.setData("voiceshortcodes/all?keyword=" + keyword + "&code_type=voice");
+
+    });
+
+});
+
+</script>
+@endsection

routes/web.php

@@ -41,6 +41,7 @@ Route::get('paperless', 'UtilityController@paperlessTest');
 Route::get('paperless_getparams/{name}', 'UtilityController@getPaperlessAttributes');
 
 
+
 Route::get('testmap', 'UtilityController@maptest');
 
 Route::get('login', 'LoginController@getLoginPage');
@@ -86,6 +87,16 @@ Route::group(['middleware' => ['checklogin', 'checkcurrentlylogged']], function(
 
 	Route::resource('generaldocuments', 'GeneralDocumentsController');
 
+	Route::get('smsshortcodes/all', 'ShortCodesController@getShortCodesJson');
+	Route::get('smsshortcodes', 'ShortCodesController@smsindex');
+
+	Route::get('ussdshortcodes/all', 'ShortCodesController@getUssdShortCodesJson');
+	Route::get('ussdshortcodes', 'ShortCodesController@ussdindex');
+
+	Route::get('voiceshortcodes/all', 'ShortCodesController@getVoiceShortCodesJson');
+	Route::get('voiceshortcodes', 'ShortCodesController@voiceindex');
+
+
 	Route::get('senderids/all', 'SenderIdController@getSenderIdsJson');
 	Route::resource('senderids', 'SenderIdController');