Merge branch 'dev' into dev-vj

resources/views/app/mcp/appointments_filters.blade.php

@@ -6,10 +6,27 @@
 	#mcp-appointments-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-appointments-filters" method="GET" action="{{ route('mcp.appointments') }}" class="row align-items-start" v-cloak>
+<form id="mcp-appointments-filters" method="GET" action="{{ route('mcp.appointments') }}" class="filter-container" v-cloak>
 	   <!-- DATE -->
-	<div class="col-md-2">
+	<div class="">
 		<div class="form-group">
 			<label>Date:</label>
 			<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
@@ -20,18 +37,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.date_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
 					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div class="">
 		<div class="form-group">
 			<label>Status:</label>
 			<select name="status" class="form-control input-sm" v-model="filters.status">
@@ -44,12 +61,12 @@
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div class="">
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.appointments')}}')" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.appointments')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/bills_filters.blade.php

@@ -6,10 +6,27 @@
 	#mcp-bills-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-bills-filters" method="GET" action="{{ route('mcp.bills') }}" class="row align-items-start" v-cloak>
+<form id="mcp-bills-filters" method="GET" action="{{ route('mcp.bills') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Date:</label>
 			<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
@@ -20,18 +37,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.date_category" class="filter-child-container mt-2">
+				<div>
 					<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
 					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Status:</label>
 			<select name="status" class="form-control input-sm" v-model="filters.status">
@@ -42,12 +59,12 @@
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.bills')}}')" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.bills')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/client_messages_filters.blade.php

@@ -6,10 +6,27 @@
 	#mcp-client-messages-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-client-messages-filters" method="GET" action="{{ route('mcp.client_messages') }}" class="row align-items-start" v-cloak>
+<form id="mcp-client-messages-filters" method="GET" action="{{ route('mcp.client_messages') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Date:</label>
 			<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
@@ -20,18 +37,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.date_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
 					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- TO OR FROM ME -->
-	<!-- <div class="col-md-2">
+	<!-- <div>
 		<div class="form-group">
 			<label>To or From Me:</label>
 			<select name="to_or_from_me" class="form-control input-sm" v-model="filters.to_or_from_me">
@@ -42,7 +59,7 @@
 		</div>
 	</div> -->
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Status:</label>
 			<select name="sms_status" class="form-control input-sm" v-model="filters.sms_status">
@@ -52,12 +69,12 @@
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a v-on:click.prevent="fastLoad('{{route('mcp.client_messages')}}')" href="#" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a v-on:click.prevent="fastLoad('{{route('mcp.client_messages')}}')" href="#" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/erx_and_orders_filters.blade.php

@@ -6,10 +6,27 @@
 	#mcp-erx-and-orders-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-erx-and-orders-filters" method="GET" action="{{ route('mcp.notes') }}" class="row align-items-start" v-cloak>
+<form id="mcp-erx-and-orders-filters" method="GET" action="{{ route('mcp.notes') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Date:</label>
 			<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
@@ -20,18 +37,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.date_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
 					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Status:</label>
 			<select name="status" class="form-control input-sm" v-model="filters.status">
@@ -45,12 +62,12 @@
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.erx_and_orders')}}')" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.erx_and_orders')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/notes_filters.blade.php

@@ -6,10 +6,27 @@
 	#mcp-notes-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-notes-filters" method="GET" action="{{ route('mcp.notes') }}" class="row align-items-start" v-cloak>
+<form id="mcp-notes-filters" method="GET" action="{{ route('mcp.notes') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Date:</label>
 			<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
@@ -20,18 +37,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.date_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
 					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>New/FU:</label>
 			<select name="new_or_fu_or_na" class="form-control input-sm" v-model="filters.new_or_fu_or_na">
@@ -42,12 +59,12 @@
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit"  v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.notes')}}')" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="submit"  v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.notes')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/patients-table.blade.php

@@ -28,7 +28,7 @@
 			</td>
 			<td>{{$patient->displayName()}}</td>
 			<td class="text-nowrap">{{ friendly_date_time($patient->dob, false) }}</td>
-			<td>{{ $patient->age_in_years ?  $patient->age_in_years . ' y.o' : '-' }}</td>
+			<td>{{ $patient->age_in_years ?  $patient->age_in_years : '-' }}</td>
 			<td>{{ $patient->sex }}</td>
 			<td>{{ $patient->usual_bmi }}</td>
 			<td>

resources/views/app/mcp/patients_filters.blade.php

@@ -6,16 +6,33 @@
 	#mcp-patients-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-patients-filters" method="GET" action="{{ route('mcp.patients') }}" class="row align-items-start" v-cloak>
-	<div class="col-md-2">
+<form id="mcp-patients-filters" method="GET" action="{{ route('mcp.patients') }}" class="filter-container" v-cloak>
+	<div>
 		<div class="form-group">
 			<label>Name:</label>
 			<input name="name" class="form-control input-sm" v-model="filters.name">
 		</div>
 	</div>
 	<!-- AGE	 -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Age:</label>
 			<select name="age_category" class="form-control input-sm" v-model="filters.age_category">
@@ -26,18 +43,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.age_category" class="row mt-2">
-				<div :class="filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.age_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="age_value_1" v-model="filters.age_value_1" type="number" class="form-control input-sm" :placeholder="(filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN') ? 'From' : 'Age'" />
 				</div>
-				<div v-show="filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN'">
 					<input name="age_value_2" v-model="filters.age_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- SEX -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Sex:</label>
 			<select name="sex" class="form-control input-sm" v-model="filters.sex">
@@ -48,7 +65,7 @@
 		</div>
 	</div>
 	<!-- BMI -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>BMI:</label>
 			<select name="bmi_category" class="form-control input-sm" v-model="filters.bmi_category">
@@ -59,11 +76,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.bmi_category" class="row mt-2">
-				<div :class="filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.bmi_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="bmi_value_1" v-model="filters.bmi_value_1" type="number" class="form-control input-sm" :placeholder="(filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
 				</div>
-				<div v-show="filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN'">
 					<input name="bmi_value_2" v-model="filters.bmi_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -71,7 +88,7 @@
 	</div>
 
 	<!-- LAST VISIT -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Last Visit **:</label>
 			<select name="last_visit_category" class="form-control input-sm" v-model="filters.last_visit_category">
@@ -82,11 +99,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.last_visit_category" class="row mt-2">
-				<div :class="filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.last_visit_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="last_visit_value_1" v-model="filters.last_visit_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
 				</div>
-				<div v-show="filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN'">
 					<input name="last_visit_value_2" v-model="filters.last_visit_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -94,7 +111,7 @@
 	</div>
 
 	<!-- NEXT APPOINTMENT -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Next Appointment **:</label>
 			<select name="next_appointment_category" class="form-control input-sm" v-model="filters.next_appointment_category">
@@ -105,11 +122,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.next_appointment_category" class="row mt-2">
-				<div :class="filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.next_appointment_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="next_appointment_value_1" v-model="filters.next_appointment_value_1" type="number" class="form-control input-sm" :placeholder="(filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
 				</div>
-				<div v-show="filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN'">
 					<input name="next_appointment_value_2" v-model="filters.next_appointment_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -117,7 +134,7 @@
 	</div>
 
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Status:</label>
 			<select name="status" class="form-control input-sm" v-model="filters.status">
@@ -141,11 +158,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.last_weighed_in_category" class="row mt-2">
-				<div :class="filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.last_weighed_in_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="last_weighed_in_value_1" v-model="filters.last_weighed_in_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
 				</div>
-				<div v-show="filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN'">
 					<input name="last_weighed_in_value_2" v-model="filters.last_weighed_in_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -164,23 +181,23 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.last_bp_category" class="row mt-2">
-				<div :class="filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.last_bp_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="last_bp_value_1" v-model="filters.last_bp_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
 				</div>
-				<div v-show="filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN'">
 					<input name="last_bp_value_2" v-model="filters.last_bp_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class=" d-flex">
-				<button type="button" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.patients')}}')" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="button" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.patients')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/reports_filters.blade.php

@@ -6,10 +6,27 @@
 	#mcp-reports-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-reports-filters" method="GET" action="{{ route('mcp.reports') }}" class="row align-items-start" v-cloak>
+<form id="mcp-reports-filters" method="GET" action="{{ route('mcp.reports') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Date:</label>
 			<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
@@ -20,18 +37,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.date_category" class="filter-child-container mt-2">
+				<div>
 					<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
 					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Status:</label>
 			<select name="status" class="form-control input-sm" v-model="filters.status">
@@ -42,12 +59,12 @@
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.reports')}}')" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.reports')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/supply_orders_filters.blade.php

@@ -6,10 +6,27 @@
 	#mcp-supply-orders-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.filter-container >div:not(:last-child) {
+		margin-right: 20px;
+	}
+	.filter-child-container >div {
+		width: 85px;
+	}
+	.filter-child-container >div:not(:last-child) {
+		margin-right: 10px;
+	}
 </style>
-<form id="mcp-supply-orders-filters" method="GET" action="{{ route('mcp.supply_orders') }}" class="row align-items-start" v-cloak>
+<form id="mcp-supply-orders-filters" method="GET" action="{{ route('mcp.supply_orders') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Date:</label>
 			<select name="date_category" class="form-control input-sm" v-model="filters.date_category">
@@ -20,18 +37,18 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<div v-show="filters.date_category" class="filter-child-container mt-2">
+				<div>
 					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
 					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- STATUS -->
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>Status:</label>
 			<select name="status" class="form-control input-sm" v-model="filters.status">
@@ -55,12 +72,12 @@
 		</div>
 	</div>
 
-	<div class="col-md-2">
+	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2 mw-100px">Apply Filters</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.supply_orders')}}')" class="w-50 btn btn-danger btn-sm text-white mw-100px">Clear Filters</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.supply_orders')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
 			</div>
 		</div>
 	</div>