Consolidate service resources into a top level services/ directory

resources/views/theme/backend/adminlte/service/widget/broadband/usagegraph.blade.php

@@ -0,0 +1,92 @@
+<div class="card">
+	<div class="card-header bg-gray-dark">
+		<h3 class="card-title">Broadband Traffic</h3>
+	</div>
+
+	<div class="card-body">
+		<div class="row">
+			<div class="col-3">
+				<table class="table table-sm">
+					<thead>
+					<tr>
+						<th>Period</th>
+						<th class="text-right">Traffic <small>(GB)</small></th>
+					</tr>
+					</thead>
+					<tbody>
+					@foreach ($o->usage_summary(6) as $key => $oo)
+						<tr>
+							<td>{{ $key }}</td>
+							<td class="text-right">{{ number_format($oo/1024,2) }}</td>
+						</tr>
+					@endforeach
+					</tbody>
+				</table>
+			</div>
+			<div class="col-9">
+				<div id="graph"></div>
+			</div>
+		</div>
+	</div>
+</div>
+
+@section('page-scripts')
+	@js(highcharts)
+
+	<script>
+		const timezone = new Date().getTimezoneOffset()
+
+		Highcharts.setOptions({
+			global: {
+				timezoneOffset: timezone,
+			},
+			lang: {
+				thousandsSep: ','
+			}
+		});
+
+		Highcharts.chart('graph', {
+			chart: {
+				type: 'areaspline'
+			},
+			title: {
+				text: 'Usage Traffic up to {{ $o->usage(30)->max('date')->format('Y-m-d') }}'
+			},
+			legend: {
+				layout: 'vertical',
+				align: 'left',
+				verticalAlign: 'top',
+				x: 150,
+				y: 100,
+				floating: true,
+				borderWidth: 1,
+				backgroundColor:
+					Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'
+			},
+			xAxis: {
+				type: 'datetime'
+			},
+			yAxis: {
+				title: {
+					text: 'MB'
+				}
+			},
+			tooltip: {
+				shared: true,
+				valueSuffix: ' MB'
+			},
+			credits: {
+				enabled: false
+			},
+			plotOptions: {
+				areaspline: {
+					fillOpacity: 0.5
+				}
+			},
+			series: [{
+				name: 'Traffic',
+				data: {!! $o->usage(30)->map(function($item) { return ['x'=>$item->date->timestamp*1000,'y'=>$item->total];}) !!}
+			}]
+		});
+	</script>
+@append