diff --git a/app/Http/Controllers/ContactController.php b/app/Http/Controllers/ContactController.php
index ac507077..66c04163 100644
--- a/app/Http/Controllers/ContactController.php
+++ b/app/Http/Controllers/ContactController.php
@@ -15,33 +15,48 @@ class ContactController extends Controller
         $this->_viewname = 'contact';
         $this->_title = 'Contact';
         $this->_base_url = '/contact';
+        $this->_listtype = 'ajaxlist';
     }
 
     public function list(Request $request) {
-        $response = LambdaRequest::signedrequest('get', $this->_service, $this->_module.'/get_all');
-        //echo '<pre>'; print_r($items); exit;
-        $items = [];
-        foreach ($response->data->items as $item) {
-            $item->position = $item->hierarchy_info->code;
-            unset($item->hierarchy_info);
-            $items[] = $item;
-        }
-        
         $fields = $this->get_list_fields();
-        return $this->view('list')->with([
+        return $this->view($this->_listtype)->with([
             'title' => $this->_title,
             'fields' => $fields,
             'base_url' => $this->_base_url,
-            'items' => $items,
+            //'items' => $response->data->items,
             'buttons' => $this->get_list_buttons()
         ]);
     }
 
+
+    // public function list(Request $request) {
+    //     $response = LambdaRequest::signedrequest('get', $this->_service, $this->_module.'/get_all');
+    //     //echo '<pre>'; print_r($items); exit;
+    //     $items = [];
+    //     foreach ($response->data->items as $item) {
+    //         $item->position = $item->hierarchy_info->code;
+    //         unset($item->hierarchy_info);
+    //         $items[] = $item;
+    //     }
+        
+    //     $fields = $this->get_list_fields();
+    //     return $this->view('list')->with([
+    //         'title' => $this->_title,
+    //         'fields' => $fields,
+    //         'base_url' => $this->_base_url,
+    //         'items' => $items,
+    //         'buttons' => $this->get_list_buttons()
+    //     ]);
+    // }
+
     protected function get_list_fields(){
         return [
             'actions' => ['title' => 'Actions', 'buttons' => [ 'edit', 'delete' ] ],
             'name' => ['title' => 'Name', 'type' => 'text'],
-            'position' => ['title' => 'Position', 'type' => 'text'],
+            'msl_code' => ['title' => 'MSL Code', 'type' => 'text'],
+            'position_name' => ['title' => 'Position', 'type' => 'text'],
+            'user_name' => ['title' => 'Rep Name', 'type' => 'text'],
             'status' => ['title' => 'Status', 'type' => 'select'],
         ];
     }
diff --git a/app/Http/Controllers/Controller.php b/app/Http/Controllers/Controller.php
index dc3fa8c3..cc531ee5 100755
--- a/app/Http/Controllers/Controller.php
+++ b/app/Http/Controllers/Controller.php
@@ -21,6 +21,7 @@ class Controller extends BaseController
     protected $_title;
     protected $_id;
     protected $_request;
+    protected $_listtype = 'list';
 
     protected function view($viewname) {
     	if (\View::exists($this->_viewname.'.'.$viewname)) {
@@ -84,7 +85,7 @@ class Controller extends BaseController
         }
     	$fields = $this->get_list_fields();
         //echo '<pre>'; print_r($fields); exit;
-        return $this->view('list')->with([
+        return $this->view($this->_listtype)->with([
         	'title' => $this->_title,
         	'fields' => $fields,
         	'base_url' => $this->_base_url,
@@ -93,6 +94,63 @@ class Controller extends BaseController
         ]);
     }
 
+    public function ajaxlist(Request $request) {
+        $params = $request->input();
+        $search = [];
+        foreach($params['columns'] as $col) {
+            if($col['search']['value'] != '') {
+                $search[$col['data']] = $col['search']['value'];
+            }
+        }
+        $fields = $this->get_list_fields();
+        $response = LambdaRequest::signedrequest('get', $this->_service, $this->_module.'/get_all', ['start' => $params['start'], 'length' => $params['length'], 'search' => json_encode($search), 'keyword' => $params['search']['value']  ]);
+        Log::debug(print_r($response, true));
+
+        $users = [];
+        foreach($response->data->items as $item) {
+            $user = [];
+            foreach($fields as $field => $props){
+                if($field != 'actions') {
+                    switch($props['type']){
+                        case('image'):
+                            $user[$field] = '<img src="'.$item->{$field}.'" class="img-thumbnail"> ';
+                            break;
+                        case('text'):
+                        case('select'):
+                            $user[$field] = isset($item->{$field}) ? $item->{$field} : '';
+                            break;
+                        case('date'):
+                            $user[$field] = date("d M Y", strtotime($item->{$field}));
+                            break;
+                    }
+                } else {
+                    $user['actions'] = [];
+                    foreach($props['buttons'] as $key => $button){
+                        switch($button) {
+                            case 'edit':
+                                $user['actions'][] = ['link' => '/edit?id='.$item->id, 'icon' => 'square-edit-outline text-warning'];
+                                break;
+                            case 'delete':
+                                $user['actions'][] = ['link' => '/delete?id='.$item->id, 'icon' => 'delete text-danger'];
+                                break;
+                            default:
+                                $querystring = $button['querystring'];
+                                foreach((array)$item as $k => $v) {
+                                    if(strpos($querystring,'{'.strtoupper($k).'}') !== false)
+                                        $querystring = str_replace('{'.strtoupper($k).'}', $v, $querystring);
+                                }
+                                $user['actions'][] = ['link' => '/'.$key.'?'.$querystring, 'icon' => $button['icon']];
+                                break;
+                        }
+                    }
+                }
+            }
+            $users[] = $user;
+        }
+
+        return response()->json(['data' => $users, 'iTotalRecords' => $response->data->count, 'iTotalDisplayRecords' => $response->data->count]);
+    }
+
     public function unauthorised() {
         return view('common.unauthorised');
     }
diff --git a/app/Http/Controllers/FormController.php b/app/Http/Controllers/FormController.php
index 41cc4e2d..27978588 100644
--- a/app/Http/Controllers/FormController.php
+++ b/app/Http/Controllers/FormController.php
@@ -62,10 +62,11 @@ class FormController extends Controller
     public function handle($finfo, Request $request) {
         $request->session()->put('finfo', $finfo);
         $finfo = Cache::remember($finfo, 3600, function () use ($finfo) {
-            return LambdaRequest::postrequest('form', 'formentity/getforminfo', ['finfo' => $finfo]);
+           return LambdaRequest::postrequest('form', 'formentity/getforminfo', ['finfo' => $finfo]);
         });
-
-        $request->session()->put('formdata', $finfo->data->formdata);        
+        // $finfo = LambdaRequest::postrequest('form', 'formentity/getforminfo', ['finfo' => $finfo]);
+        // Log::debug(print_r($finfo, true));
+        $request->session()->put('formdata', $finfo->data->formdata);
         if($finfo->status == 'success' && $finfo->data->formdata->link_type == 'form') {
             return $this->deliverform($finfo->data->formdata, $finfo->data->questions);
         } elseif($finfo->status == 'success' && $finfo->data->formdata->link_type == 'list') {
diff --git a/app/Http/Controllers/MetricreportController.php b/app/Http/Controllers/MetricreportController.php
index a8dd7a87..d6509550 100644
--- a/app/Http/Controllers/MetricreportController.php
+++ b/app/Http/Controllers/MetricreportController.php
@@ -60,6 +60,7 @@ class MetricreportController extends Controller
         //echo '<pre>'; print_r($response); print_r($post); exit;
         $colors = ['FECD00', '01C14B', 'FF8050', '4A5CD0', '707070'];
 
+        //echo '<pre>'; print_r(['periods' => $response->data->periods, 'charts' => $response->data->available_charts, 'graph' => $response->data->graph, 'post' => $post, 'colors' => $colors]); exit;
         return $this->view('report')->with(['periods' => $response->data->periods, 'charts' => $response->data->available_charts, 'graph' => $response->data->graph, 'post' => $post, 'colors' => $colors]);
     }
 
diff --git a/app/Http/Controllers/MetricviewController.php b/app/Http/Controllers/MetricviewController.php
index 94527a56..b3a6a4ba 100644
--- a/app/Http/Controllers/MetricviewController.php
+++ b/app/Http/Controllers/MetricviewController.php
@@ -150,7 +150,12 @@ class MetricviewController extends Controller
     protected function _beforeform($type, $values) {
         if ($type == 'edit') {
             $values->designations = explode('#', $values->designations);
-            $values->report_roles = explode('#', $values->report_roles);
+            if(isset($values->report_roles)) {
+                $values->report_roles = explode('#', $values->report_roles);
+            } else {
+                $values->report_roles = [];
+            }
+            
             $values->validity_start = date("d/m/Y", strtotime($values->validity_start));
             $values->validity_end = date('d/m/Y', strtotime($values->validity_end));
         }
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index d5f795af..83555838 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -4,6 +4,7 @@ namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use App\Http\Requests\LambdaRequest;
 use DB;
+use Log;
 
 class UserController extends Controller
 {
@@ -15,6 +16,7 @@ class UserController extends Controller
         $this->_viewname = 'users';
         $this->_title = 'Users';
         $this->_base_url = '/user';
+        $this->_listtype = 'ajaxlist';
     }
 
     protected function get_list_fields(){
@@ -88,6 +90,7 @@ class UserController extends Controller
             $channels_dd[$channel->id] = $channel->name;
         }
         return [
+            'actions' => ['title' => 'Actions', 'buttons' => [ 'edit', 'delete' ] ],
             'employee_code' => ['title' => 'Employee Code', 'type' => 'text', 'required' => true],
             'firstname' => ['title' => 'Firstname', 'type' => 'text', 'required' => true],
             'lastname' => ['title' => 'Lastname', 'type' => 'text'],
@@ -105,4 +108,15 @@ class UserController extends Controller
             'hierarchy' => ['title' => 'Heirarchy', 'type' => 'text'],
         ];
     }
+
+    public function list(Request $request) {
+        $fields = $this->get_list_fields();
+        return $this->view($this->_listtype)->with([
+            'title' => $this->_title,
+            'fields' => $fields,
+            'base_url' => $this->_base_url,
+            //'items' => $response->data->items,
+            'buttons' => $this->get_list_buttons()
+        ]);
+    }
 }
diff --git a/resources/views/common/ajaxlist.blade.php b/resources/views/common/ajaxlist.blade.php
new file mode 100644
index 00000000..d22350d2
--- /dev/null
+++ b/resources/views/common/ajaxlist.blade.php
@@ -0,0 +1,216 @@
+@extends('layouts.vertical', ["page_title"=> "Datatables"])
+
+@section('css')
+<!-- third party css -->
+<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
+<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
+<!-- third party css end -->
+@endsection
+
+@section('content')
+<!-- Start Content-->
+<div class="container-fluid">
+
+    <!-- start page title -->
+    <div class="row">
+        <div class="col-md-6 p-2">
+            <h4 class="page-title">{{$title}} Management</h4>
+        </div>
+        <div class="col-md-6 p-2">
+            @if(isset($buttons))
+                @foreach($buttons as $button)
+                    <a href="{{$button['link']}}" class="btn btn-{{$button['title']=='Add New'?'success':'dark'}} waves-effect waves-light float-end me-2" id="btn-{{strtolower(str_replace(' ', '-', $button['title']))}}">{{$button['title']}}</a>
+                @endforeach
+            @endif
+        </div>
+    </div>
+    <!-- end page title -->
+@if(session()->has('message'))
+    <div class="alert alert-success">
+        {{ session()->get('message') }}
+    </div>
+@endif
+@if(session()->has('error'))
+    <div class="alert alert-danger">
+        {{ session()->get('error') }}
+    </div>
+@endif
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+                    <table id="list-page-datatable" class="table w-100 nowrap">
+                        <thead>
+                            <tr>
+                                @foreach($fields as $field => $props)
+                                <th>{{$props['title']}}</th>
+                                @endforeach
+                            </tr>
+                        </thead>
+                        <!-- <tfoot>
+                            <tr>
+                                @foreach($fields as $field => $props)
+                                <th>
+                                    @if($field != 'actions')
+                                    <input type="text" placeholder="Search" class="form-control" />
+                                    @endif
+                                </th>
+                                @endforeach
+                            </tr>
+                        </tfoot> -->
+                        <tbody>
+                            
+                        </tbody>
+                    </table>
+
+                </div> <!-- end card body-->
+            </div> <!-- end card -->
+        </div><!-- end col-->
+    </div>
+    <!-- end row-->
+</div> <!-- container -->
+
+<!-- Right modal content -->
+<div id="date_filter_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+            <div class="modal-header border-0">
+                <h4 class="modal-title" id="standard-modalLabel">Filter results by date</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <form method="get" id="form-date-filter">
+                    <div class="col-12">
+                        <div class="mb-3">
+                            <label class="form-label">From Date</label>
+                            <input type="text" name="startdate" class="form-control" data-provide="datepicker" value="{{isset($startdate)?date("m/d/Y", strtotime($startdate)):''}}" data-date-autoclose="true">
+                        </div>
+                    </div>
+
+                    <div class="col-12">
+                        <div class="mb-3">
+                            <label class="form-label">To Date</label>
+                            <input type="text" name="enddate" class="form-control" data-provide="datepicker" value="{{isset($enddate)?date("m/d/Y", strtotime($enddate)):''}}" data-date-autoclose="true">
+                        </div>
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-success btn-sm">Filter</button>
+                <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
+                </form>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
+
+<style type="text/css">
+    .img-thumbnail { max-width: 100px }
+    thead {display: table-header-group;}
+    tfoot {display: table-header-group;}
+</style>
+@endsection
+
+@section('script')
+<!-- third party js -->
+<script src="{{asset('assets/libs/datatables/datatables.min.js')}}"></script>
+<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
+<script type="text/javascript">
+    jQuery(document).ready(function($){
+        var table = $('#list-page-datatable').DataTable({
+            //"stateSave": true,
+            "scrollX": true,
+            "language": {
+                "paginate": {
+                    "previous": "<i class='mdi mdi-chevron-left'>",
+                    "next": "<i class='mdi mdi-chevron-right'>"
+                }
+            },
+            "drawCallback": function () {
+                $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
+            },
+
+            fixedHeader: true,
+            "pageLength": 50,
+            "lengthMenu": [[50, 100, 250, 500], [50, 100, 250, 500]],
+            'processing': true,
+            'serverSide': true,
+            'serverMethod': 'get',
+            searchDelay: 2000,
+            "order": [[ 1, "asc" ]],
+            'searching': true,
+            'info': true,
+            
+            "ajax": {
+                url: '{{$base_url}}/ajaxlist',
+                data:{
+                     //'listfilters': listfilters
+                },
+                dataSrc: 'data'
+            },
+            columns: [
+                @foreach($fields as $field => $props)
+                    @if($field == 'actions')
+                    {
+                      data: null,
+                      render: function ( data, type, row ) {
+                        return data.actions.map(l => '<a href="{{$base_url}}'+l.link+'" class="action-icon"> <i class="mdi mdi-'+l.icon+'"></i></a>').join('')
+                      }
+                    },
+                    @else
+                    { "data": "{{$field}}" },
+                    @endif
+                @endforeach
+            ],
+             "initComplete": function(settings, json) {
+                var api = this.api();
+                var textBox = $('.dataTables_filter label input');
+                textBox.unbind();
+                textBox.bind('keyup input', function(e) {
+                    if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
+                        // do nothing ¯\_(ツ)_/¯
+                    } else if(e.keyCode == 13 || !textBox.val()) {
+                        api.search(this.value).draw();
+                    }
+                });
+
+                $searchButton = $('<button class="btn btn-success btn-xs p-1 m-2">')
+                       .text('Search')
+                       .click(function() {
+                          api.search(textBox.val()).draw();
+                       }),
+                $clearButton = $('<button class="btn btn-warning btn-xs p-1">')
+                           .text('Clear')
+                           .click(function() {
+                              textBox.val('');
+                              $searchButton.click(); 
+                           })
+                $('.dataTables_filter').append($searchButton, $clearButton);
+
+                 
+            }
+        });
+
+        // table.columns().every( function (index) {
+        //     var that = this;
+        //     $( 'input', this.footer() ).on( 'keyup change clear', function () {
+        //         console.log(this.value)
+        //         that.search( this.value ).draw();
+        //     });
+        // });
+
+        $('.dataTables_filter input')
+        .unbind('keypress keyup')
+        .bind('keypress keyup', function(e){
+          if ($(this).val().length < 3 && e.keyCode != 13) return;
+          table.fnFilter($(this).val());
+        });
+
+        $("#btn-date-filter").click(function(){
+            $("#date_filter_modal").modal("show")
+        })
+    });
+
+</script>
+<!-- end demo js-->
+@endsection
\ No newline at end of file
diff --git a/resources/views/form/list.blade.php b/resources/views/form/list.blade.php
index 5d2dfb43..ec321328 100644
--- a/resources/views/form/list.blade.php
+++ b/resources/views/form/list.blade.php
@@ -52,7 +52,7 @@
                                             <tr>
                                                 <th>{{date("d M Y", strtotime(isset($submission->record_date) ? $submission->record_date : $submission->updatedAt))}}</th>
                                                 <th>
-                                                    <img src="{{$submission->user_info->avatar}}" class="rounded-circle avatar-sm" />
+                                                    <img src="{{isset($submission->user_info->avatar) ? $submission->user_info->avatar : 'https://ui-avatars.com/api/?background=random&name='.$submission->user_info->name}}" class="rounded-circle avatar-sm" />
                                                 </th>
                                                 <td>
                                                     <h5 class="m-0 fw-normal">{{$submission->user_info->name}}</h5>
@@ -62,7 +62,7 @@
                                                     @if(count((array)$question->options) > 0)
                                                     <td>{{ isset($submission->formdata->{$code}) && isset($question->options->{ $submission->formdata->{$code} }) ? $question->options->{ $submission->formdata->{$code} } : '' }}</td>
                                                     @else
-                                                    <td>{{ $submission->formdata->{$code} }}</td>
+                                                    <td>{{ isset($submission->formdata->{$code}) ? $submission->formdata->{$code} : ''  }}</td>
                                                     @endif
                                                 @endforeach
                                                 <th>
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index f4a22c86..b1670fea 100755
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -45,7 +45,7 @@
                     <div class="widget-chart text-center" dir="ltr">
                         <div id="chart-{{$metric->id}}" class="mt-0" data-colors="#f1556c"></div>
                         <h5 class="text-muted mt-0">{{$metric->label}}</h5>
-                        <h2>{{$metric->value}}</h2>
+                        <h2>{{$metric->value}} {{$metric->type=='verses' ? ' / ' . $metric->max : ''}} </h2>
                         <div class="button-list">
                             @foreach($metric->available_charts as $chart)
                                 <a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}&period={{$metric->periods[0]->value}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}} Chart</a>
@@ -150,7 +150,7 @@
                 @endif
                 
             @elseif($metric->agg_type == 'team')
-                @if($metric->type == 'grouped' || $metric->type == 'verses')
+                @if($metric->type == 'grouped')
                     values = {!!json_encode($metric->values)!!}
                     options = {
                       series: values.map(a => a.value),
@@ -176,7 +176,7 @@
                       }
                     }]
                     };
-                @elseif($metric->type == 'simple')
+                @elseif($metric->type == 'simple' || $metric->type == 'verses')
                     options = {
                         series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
                         chart: {
@@ -214,8 +214,8 @@
                     };
                 @endif
             @endif
-            chart = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
-            chart.render();
+            chart['{{$metric->id}}'] = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
+            chart['{{$metric->id}}'].render();
         @endforeach
     });
 </script>
diff --git a/resources/views/metricreport/report.blade.php b/resources/views/metricreport/report.blade.php
index 60ab7ab1..0a81e62b 100644
--- a/resources/views/metricreport/report.blade.php
+++ b/resources/views/metricreport/report.blade.php
@@ -106,11 +106,16 @@
                                                     @if($leader_id != $val->user->id)
                                                     <tr>
                                                         <td><img src="https://ui-avatars.com/api/?background={{$i>3?$colors[4]:$colors[$i]}}&name={{$val->rank}}" class="avatar-md"></td>
-                                                        <td><img src="{{$val->user->avatar}}" class="avatar-sm rounded-circle"></td>
+                                                        <td><img src="{{isset($val->user->avatar)?$val->user->avatar:''}}" class="avatar-sm rounded-circle"></td>
                                                         <td style="text-align:left;">{{$val->user->name}}</td>
                                                         <td>{{$val->user->designation}}</td>
+                                                        @if($graph->type == 'verses')
+                                                        <td>{{isset($val->actual)?$val->actual:0}} / {{isset($val->target)?$val->target:0}}</td>
+                                                        <td>{{round($val->score, 2)}}%</td>
+                                                        @else
                                                         <td>{{round($val->score, 2)}}</td>
                                                         <td>{{$graph->values[0]->rank != 0 ? ($graph->values[0]->rank == 1 ? ($graph->values[0]->score ? ceil(($val->score/$graph->values[0]->score)*100) : 0) : ($graph->values[1]->score ? ceil(($val->score/$graph->values[1]->score)*100) : 0 ) ) : 0 }}%</td>
+                                                        @endif
                                                     </tr>
                                                     @endif
                                                 @php
@@ -209,12 +214,66 @@
                                     </div> <!-- .table-responsive -->
                                 </div> <!-- end collapse-->
                                 @break
+                            @case($post['type'] == 'trend' && $graph->type == 'verses' && $graph->chart == 'tabular' )
+                                <div id="cardCollpase4" class="collapse pt-3 show">
+                                    <div class="table-responsive">
+                                        <table class="table table-centered table-nowrap table-borderless mb-0">
+                                            <thead class="table-light">
+                                                <tr>
+                                                    <th>Periods</th>
+                                                    <th>Actual</th>
+                                                    <th>Target</th>
+                                                    <th>Percent</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                @foreach($graph->values[0]->stats as $i => $val)
+                                                <tr>
+                                                    <td>{{$val->x}}</td>
+                                                    <td>{{$val->actual}}</td>
+                                                    <td>{{$val->target}}</td>
+                                                    <td>{{$val->y}}%</td>
+                                                </tr>
+                                                @endforeach
+                                            </tbody>
+                                        </table>
+                                    </div> <!-- .table-responsive -->
+                                </div> <!-- end collapse-->
+                                @break
                             @default
                                 <div id="chart-{{$graph->id}}" class="mt-0" data-colors="#f1556c"></div>
-                                @if($post['type'] == 'value' || ($post['type'] == 'graphical' && $graph->chart = 'percentile' && $graph->type == 'simple' ))
+                                @if(($post['type'] == 'value' && $graph->type != 'verses') || ($post['type'] == 'graphical' && $graph->chart = 'percentile' && $graph->type == 'simple' ))
                                 <h5 class="text-muted mt-0">{{ $graph->type == 'simple' ? $graph->label : 'Total ' . $graph->name }}</h5>
                                 <h2>{{$graph->value}}</h2>
                                 @endif
+                                @if(($post['type'] == 'graphical' || $post['type'] == 'value') && $graph->type == 'verses' )
+                                <h5 class="text-muted mt-0">{{ $graph->type == 'simple' ? $graph->label : 'Total ' . $graph->name }}</h5>
+                                <h2>{{$graph->value}} / {{$graph->max}}</h2>
+                                @endif
+                                @if($post['type'] == 'trend' && $graph->type == 'verses' )
+                                <div id="cardCollpase4" class="collapse pt-3 show">
+                                    <div class="table-responsive">
+                                        <table class="table table-centered table-nowrap table-borderless mb-0">
+                                            <thead class="table-light">
+                                                <tr>
+                                                    <th>Periods</th>
+                                                    <th>Actual</th>
+                                                    <th>Target</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                @foreach($graph->values[0]->stats as $i => $val)
+                                                <tr>
+                                                    <td>{{$val->x}}</td>
+                                                    <td>{{$val->actual}}</td>
+                                                    <td>{{$val->target}}</td>
+                                                </tr>
+                                                @endforeach
+                                            </tbody>
+                                        </table>
+                                    </div> <!-- .table-responsive -->
+                                </div> <!-- end collapse-->
+                                @endif
                                 @break
                         @endswitch
                         
@@ -279,7 +338,7 @@
         let chart = {}
         let values = []
         colors.shift()
-        @if($graph->type == 'grouped')
+        @if($graph->type == 'grouped' || $graph->type == 'verses')
             @switch($post['type'])
                 @case('graphical')
                     values = {!!json_encode($graph->values)!!}
@@ -344,6 +403,45 @@
                               categories: values.map(a => a.label),
                             }
                         };
+                    @elseif($graph->type == 'verses' && $post['chart'] == 'progress')
+                        options = {
+                            series: [{{ $graph->max > 0 ? ceil(($graph->value/$graph->max)*100) : 0 }}],
+                            chart: {
+                                height: 250,
+                                type: 'radialBar',
+                                animations: {
+                                    enabled: true,
+                                    easing: 'easeinout',
+                                    speed: 2000,
+                                  }
+                            },
+                            plotOptions: {
+                                radialBar: {
+                                    startAngle: -90,
+                                    endAngle: 270,
+                                    hollow: {
+                                        size: '58%',
+                                    }
+                                },
+                            },
+                            fill: {
+                              type: 'gradient',
+                              gradient: {
+                                  shade: 'dark',
+                                  shadeIntensity: 0.15,
+                                  inverseColors: false,
+                                  opacityFrom: 1,
+                                  opacityTo: 1,
+                                  stops: [0, 50, 65, 91]
+                              },
+                            },
+                            stroke: {
+                              dashArray: 7
+                            },
+                            colors: colors,
+                            labels: ['{{$graph->label}}'],
+                        };
+
                     @endif
                     
                 @break
@@ -476,6 +574,88 @@
 
             @endswitch
 
+        @elseif($graph->type == 'verses')
+            @switch($post['type'])
+                @case('graphical')
+                    options = {
+                    series: [{{ $graph->max > 0 ? ceil(($graph->value/$graph->max)*100) : 0 }}],
+                    chart: {
+                        height: 250,
+                        type: 'radialBar',
+                        animations: {
+                            enabled: true,
+                            easing: 'easeinout',
+                            speed: 2000,
+                          }
+                    },
+                    plotOptions: {
+                        radialBar: {
+                            startAngle: -90,
+                            endAngle: 270,
+                            hollow: {
+                                size: '58%',
+                            }
+                        },
+                    },
+                    fill: {
+                      type: 'gradient',
+                      gradient: {
+                          shade: 'dark',
+                          shadeIntensity: 0.15,
+                          inverseColors: false,
+                          opacityFrom: 1,
+                          opacityTo: 1,
+                          stops: [0, 50, 65, 91]
+                      },
+                    },
+                    stroke: {
+                      dashArray: 7
+                    },
+                    colors: colors,
+                    labels: ['{{$graph->label}}'],
+                };
+                @break
+                @case('trend')
+                    
+                    values = {!!json_encode($graph->values)!!}
+                    options = {
+                        series: [{
+                            name: "{{$graph->label}}",
+                            data: values.map(a => a.y)
+                        }],
+                        chart: {
+                          height: 350,
+                          type: '{{$post['chart']}}',
+                          zoom: {
+                            enabled: false
+                          },
+                          animations: {
+                            enabled: true,
+                            easing: 'easeinout',
+                            speed: 2000,
+                          }
+                        },
+                        dataLabels: {
+                          enabled: false
+                        },
+                        stroke: {
+                          curve: 'straight'
+                        },
+                        grid: {
+                          row: {
+                            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+                            opacity: 0.5
+                          },
+                        },
+                        xaxis: {
+                          categories: values.map(a => a.x),
+                        }
+                    };
+                    
+                @break
+
+            @endswitch
+
             
         @endif
         chart = new ApexCharts(document.querySelector("#chart-{{$graph->id}}"), options);
diff --git a/routes/web.php b/routes/web.php
index d4a39a9e..bf65b638 100755
--- a/routes/web.php
+++ b/routes/web.php
@@ -60,6 +60,10 @@ Route::get('/myaccount', [DashboardController::class, 'myaccount'])->name('myacc
 Route::get('/myaccounts', [DashboardController::class, 'myaccount'])->name('myaccount');
 Route::post('/myaccount', [DashboardController::class, 'postmyaccount']);
 
+Route::get('/home', function () {
+    return 'Nothing here';
+});
+
 $modules = ['user' => UserController::class,
             'group' => GroupController::class,
             'channel' => ChannelController::class,