Work in progress, initial dashboard

resources/theme/backend/adminlte/widgets/services_active.blade.php

@@ -11,35 +11,62 @@
 
     <div class="box-body">
         @if ($user->services_active->count())
-            <table class="table table-bordered table-striped table-hover" id="table">
-                <tr>
-                    <th>Type</th>
-                    <th>Service</th>
-                    <th>Name</th>
-                    <th>Status</th>
-                    <th>Next Invoice</th>
-                </tr>
-                @foreach ($user->services_active as $o)
-                    <tr>
-                        <td>{{ $o->category }}</td>
-                        <td>{{ $o->service_number }}</td>
-                        <td>{{ $o->service_name }}</td>
-                        <td><span class="label
-                            @switch($o->active)
-                                @case(1) label-success">Active @break
-                                @default label-warning">Unknown
-                            @endswitch
-                            </span></td>
-                        <td>{{ $o->next_invoice }}</td>
-                    </tr>
-                @endforeach
-                <tr>
-                    <th>Count {{ $user->services_active->count() }}</th>
-                    <th colspan="4">&nbsp;</th>
-                </tr>
+            <table class="table table-bordered table-striped table-hover" id="services" style="width: 100%;">
+	            <thead>
+		            <tr>
+			            <th>Category</th>
+			            <th>Service</th>
+			            <th>Name</th>
+			            <th>Status</th>
+			            <th>Next Invoice</th>
+		            </tr>
+	            </thead>
+                <tfoot>
+		            <tr>
+		                <th>Count {{ $user->services_active->count() }}</th>
+		                <th colspan="4">&nbsp;</th>
+		            </tr>
+                </tfoot>
             </table>
         @else
             <p>No services active</p>
         @endif
     </div>
-</div>
+</div>
+
+@section('page-scripts')
+	@css('https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css')
+	@css('https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css')
+	@js('https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js')
+	@js('https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js')
+
+	<script type="text/javascript">
+        $(document).ready(function() {
+            var table = $('#services').DataTable( {
+                rowGroup: {
+                    dataSrc: 'product_id',
+                    startRender: null,
+                    endRender: function ( rows, group ) {
+                        return group +' ('+rows.count()+')';
+                    },
+                },
+                orderFixed: [2, 'asc'],
+                responsive: true,
+                ajax: "/api/u/services",
+                columns: [
+                    {
+                        defaultContent: '&nbsp;'
+                    },
+                    { data: "id" },
+                    { data: "product_id" },
+	                { data: "active" },
+                    { data: "date_next_invoice" }
+                ],
+                language: {
+                    emptyTable: "No Active Services"
+                },
+                order: [4, 'asc']
+            });
+        });
+		</script>
+@append