UI fixed

Strides-Admin/src/styles/index.scss

@@ -344,15 +344,14 @@ aside {
   align-items: center;
 }
 .filter-view > * {
-  margin: 10px 5px;
+  margin: 5px;
 }
 .filter-view .el-form-item {
-  margin: 10px 5px !important;
+  margin: 5px !important;
 }
 .filter-flex-button {
   flex: 1;
   text-align: right;
-  margin-bottom: 0;
 }
 .icon-action {
   padding: 10px;

Strides-Admin/src/views/access/DialogDetail.vue

@@ -29,8 +29,8 @@
               style="min-width: 70px; max-width: 78px;margin-right: 10px;"
               v-model="form.callingCode">
               <el-option
-                v-for="item in callingOptions"
-                :key="item.callingCode"
+                v-for="(item,index) in callingOptions"
+                :key="index"
                 :label="'+' + item.callingCode"
                 :value="item.callingCode"
               />

Strides-Admin/src/views/access/index.vue

@@ -2,18 +2,20 @@
   <div class="app-container">
     <div class="filter-container">
       <div class="filter-view">
-        <div class="flex1" style="min-width: 300px; max-width: 350px;">
+        <div class="flex1" style="min-width: 200px; max-width: 350px;">
           <el-input
             v-model="params.pageVo.criteria"
             placeholder="Search by Name, Email, Contact"
             @keyup.enter.native="getTableData" />
         </div>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="getTableData">
-          Search
-        </el-button>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getTableData">
+            Search
+          </el-button>
+        </div>
         <div class="filter-flex-button">
           <el-button
             type="primary"

Strides-Admin/src/views/charge/Connectors.vue

@@ -37,13 +37,15 @@
                 :value="item.value"/>
             </el-select>
           </el-form-item>
-          <el-button
-            v-waves
-            type="primary"
-            icon="el-icon-search"
-            @click="handleFilter">
-            Search
-          </el-button>
+          <div>
+            <el-button
+              v-waves
+              type="primary"
+              icon="el-icon-search"
+              @click="handleFilter">
+              Search
+            </el-button>
+          </div>
         </div>
       </el-form>
     </div>

Strides-Admin/src/views/charge/RegisteredChargeStations.vue

@@ -22,12 +22,14 @@
               placeholder="Search by Station ID/Site Name/Service Provider"
               @keyup.enter.native="handleFilter" />
           </el-form-item>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            @click="handleFilter">
-            Search
-          </el-button>
+          <div>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              @click="handleFilter">
+              Search
+            </el-button>
+          </div>
           <el-form-item
             label-width="130px"
             label="Heartbeat Period:"
@@ -62,7 +64,6 @@
           <div class="filter-flex-button">
             <el-button
               v-if="!$route.meta.onlyView"
-              class="filter-item"
               type="primary"
               icon="el-icon-plus"
               @click="addStation">

Strides-Admin/src/views/charging/ConfigureStations.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="app-container">
-    <div class="filter-view">
-      <el-input
-        clearable
-        style="max-width: 400px;"
-        v-model="filter.pageVo.criteria"
-        placeholder="Search by Station ID/Site Name"
-        @keyup.enter.native="getTableData" />
-      <el-button
-        type="primary"
-        icon="el-icon-search"
-        @click="getTableData">
-        Search
-      </el-button>
+    <div class="filter-container">
+      <div class="filter-view">
+        <el-input
+          clearable
+          style="max-width: 400px;"
+          v-model="filter.pageVo.criteria"
+          placeholder="Search by Station ID/Site Name"
+          @keyup.enter.native="getTableData" />
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getTableData">
+            Search
+          </el-button>
+        </div>
+      </div>
     </div>
     <el-table
       :data="table.list"

Strides-Admin/src/views/company/index.vue

@@ -17,8 +17,7 @@
               Search
             </el-button>
           </div>
-          <div class="flex1"></div>
-          <div>
+          <div class="filter-flex-button">
             <el-button
               icon="el-icon-plus"
               type="primary"

Strides-Admin/src/views/dashboard/components/Summary.vue

@@ -124,7 +124,7 @@
           <BarChart
             :index="index + '-2'"
             :chartData="bc.revenue"
-            unit="$"
+            :unit="bc.currency || '$'"
             :leftUnit="true"
             title="Revenue so far"/>
         </el-col>

Strides-Admin/src/views/dashboard/index.vue

@@ -119,6 +119,7 @@ export default {
     }
     
     .radio-group {
+      margin: 0;
       padding-top: 0px;
       user-select: none;
       

Strides-Admin/src/views/driver/index.vue

@@ -14,13 +14,15 @@
               placeholder="Search by Email, Phone or Group Name"
               clearable/>
           </el-form-item>
-          <el-button 
-            @click="onClickSearch"
-            icon="el-icon-search"
-            type="primary">
-            Search
-          </el-button>
-          <div class="flex1"></div>
+          <div>
+            <el-button
+              @click="onClickSearch"
+              icon="el-icon-search"
+              type="primary">
+              Search
+            </el-button>
+          </div>
+          <div class="filter-flex-button"></div>
           <my-upload
             accept=".xls,.xlsx,.csv"
             :limit="1"
@@ -39,19 +41,23 @@
               Import Excel
             </el-button>
           </my-upload>
-          <el-button
-            icon="el-icon-download"
-            type="primary"
-            :loading="loading.download"
-            @click="onDownloadTmp">
-            Download Template
-          </el-button>
-          <el-button
-            icon="el-icon-plus"
-            type="primary"
-            @click="onClickAdd">
-            Add Group User
-          </el-button>
+          <div>
+            <el-button
+              icon="el-icon-download"
+              type="primary"
+              :loading="loading.download"
+              @click="onDownloadTmp">
+              Download Template
+            </el-button>
+          </div>
+          <div>
+            <el-button
+              icon="el-icon-plus"
+              type="primary"
+              @click="onClickAdd">
+              Add Group User
+            </el-button>
+          </div>
         </div>
       </el-form>
     </div>

Strides-Admin/src/views/financial/IdleFee.vue

@@ -49,12 +49,14 @@
               :value="item.stationId"/>
           </el-select>
         </el-form-item>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="getTableData">
-          Search
-        </el-button>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getTableData">
+            Search
+          </el-button>
+        </div>
       </div>
     </el-form>
     <el-table

Strides-Admin/src/views/financial/TopUp.vue

@@ -20,12 +20,14 @@
             value-format="yyyy-MM"
             placeholder="Filter Date"/>
         </el-form-item>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="getTableData">
-          Search
-        </el-button>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getTableData">
+            Search
+          </el-button>
+        </div>
       </div>
     </el-form>
     <el-table

Strides-Admin/src/views/financial/index.vue

@@ -49,12 +49,14 @@
               :value="item.stationId"/>
           </el-select>
         </el-form-item>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="getTableData">
-          Search
-        </el-button>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getTableData">
+            Search
+          </el-button>
+        </div>
       </div>
     </el-form>
     <el-table

Strides-Admin/src/views/incident/connectivity.vue

@@ -14,18 +14,20 @@
         </el-radio-group>
       </div>
       <div class="filter-view">
-        <div class="flex1" style="min-width: 300px; max-width: 350px;">
+        <div class="flex1" style="min-width: 200px; max-width: 350px;">
           <el-input
             v-model="params.pageVo.criteria"
             placeholder="Search by Site ID, Station ID"
             @keyup.enter.native="getTableData" />
         </div>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="getTableData">
-          Search
-        </el-button>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getTableData">
+            Search
+          </el-button>
+        </div>
       </div>
     </div>
     <el-table

Strides-Admin/src/views/incident/error_table.vue

@@ -8,12 +8,14 @@
             placeholder="Search by Site ID, Station ID"
             @keyup.enter.native="handleFilter" />
         </div>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="handleFilter">
-          Search
-        </el-button>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="handleFilter">
+            Search
+          </el-button>
+        </div>
       </div>
     </div>
     <el-table

Strides-Admin/src/views/provider/ServiceProviderManagement.vue

@@ -7,36 +7,31 @@
         label-position="left"
         label-width="100px"
         style="width: 100%;">
-        <el-row :gutter="20">
-          <el-col :span="7">
-            <el-form-item
-              label=""
-              class="flex-item">
-              <el-input
-                v-model="filter.criteria"
-                placeholder="Search by Provider Name/Address/Contact"
-                @keyup.enter.native="handleFilter" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
+        <div class="filter-view">
+          <div class="flex1" style="min-width: 200px; max-width: 400px;">
+            <el-input
+              v-model="filter.criteria"
+              placeholder="Search by Provider Name/Address/Contact"
+              @keyup.enter.native="handleFilter" />
+          </div>
+          <div>
             <el-button
               type="primary"
               icon="el-icon-search"
               @click="handleFilter">
               Search
             </el-button>
-          </el-col>
-          <el-col :span="6" :offset="3" style="text-align: right;">
+          </div>
+          <div class="filter-flex-button">
             <el-button
               v-if="!$route.meta.onlyView"
-              class="filter-item"
               type="primary"
               icon="el-icon-plus"
               @click="addProvider">
                 Add Provider
             </el-button>
-          </el-col>
-        </el-row>
+          </div>
+        </div>
       </el-form>
     </div>
     <el-table

Strides-Admin/src/views/rfid/index.vue

@@ -2,25 +2,28 @@
   <div class="app-container">
     <div class="filter-container right">
       <div class="filter-view">
-        <el-input
-          style="flex: 1; min-width: 300px;"
-          v-model="params.pageVo.criteria"
-          placeholder="Search by Name, Email, Contact or Login ID"
-          @keyup.enter.native="getList" />
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="getList">
-          Search
-        </el-button>
-        <div class="flex1"></div>
-        <el-button
-          class="filter-item"
-          type="primary"
-          icon="el-icon-plus"
-          @click="addRfid">
-            Add
-        </el-button>
+        <div style="flex: 1; min-width: 180px; max-width: 350px;">
+          <el-input
+            v-model="params.pageVo.criteria"
+            placeholder="Search by Name, Email, Contact or Login ID"
+            @keyup.enter.native="getList" />
+        </div>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="getList">
+            Search
+          </el-button>
+        </div>
+        <div class="filter-flex-button">
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            @click="addRfid">
+              Add
+          </el-button>
+        </div>
       </div>
     </div>
     <el-table

Strides-Admin/src/views/site/SiteManagement.vue

@@ -8,38 +8,32 @@
         label-position="left"
         label-width="70px"
         style="width: 100%;">
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item
-              class="flex-item"
-              label="">
-              <el-input
-                v-model="filter.criteria"
-                placeholder="Search by Site Name or Address"
-                @keyup.enter.native="handleFilter" />
-              </el-form-item>
-          </el-col>
-          <el-col :span="16">
-            <div style="display: flex; justify-content: space-between">
-              <el-button
-                class="filter-item"
-                v-waves
-                type="primary"
-                icon="el-icon-search"
-                @click="handleFilter">
-                Search
-              </el-button>
-              <el-button
-                v-if="visible.addButton"
-                class="filter-item"
-                type="primary"
-                icon="el-icon-plus"
-                @click="handleClickAddSiteButton">
-                  Add Site
-              </el-button>
-            </div>
-            </el-col>
-        </el-row>
+        <div class="filter-view">
+          <div class="flex1" style="min-width: 200px; max-width: 350px;">
+            <el-input
+              v-model="filter.criteria"
+              placeholder="Search by Site Name or Address"
+              @keyup.enter.native="handleFilter" />
+          </div>
+          <div>
+            <el-button
+              v-waves
+              type="primary"
+              icon="el-icon-search"
+              @click="handleFilter">
+              Search
+            </el-button>
+          </div>
+          <div class="filter-flex-button">
+            <el-button
+              v-if="visible.addButton"
+              type="primary"
+              icon="el-icon-plus"
+              @click="handleClickAddSiteButton">
+                Add Site
+            </el-button>
+          </div>
+        </div>
       </el-form>
     </div>
     <el-table

Strides-Admin/src/views/transaction/reservations.vue

@@ -7,25 +7,22 @@
         label-position="left"
         label-width="100px"
         style="width: 100%;">
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item
-              class="flex-item">
-              <el-input
-                v-model="filter.chargeBoxId"
-                placeholder="Search by User ID, Email, Phone or Licence Plate"
-                @keyup.enter.native="handleFilter" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
+        <div class="filter-view">
+          <div style="flex: 1; max-width: 350px;">
+            <el-input
+              v-model="filter.chargeBoxId"
+              placeholder="Search by User ID, Email, Phone or Licence Plate"
+              @keyup.enter.native="handleFilter" />
+          </div>
+          <div>
             <el-button
               type="primary"
               icon="el-icon-search"
               @click="handleFilter">
               Search
             </el-button>
-          </el-col>
-        </el-row>
+          </div>
+        </div>
       </el-form>
     </div>
     <el-table

Strides-Admin/src/views/transaction/transactions.vue

@@ -7,56 +7,46 @@
         label-position="left"
         label-width="0px"
         style="width: 100%;">
-        <el-row :gutter="0">
-          <el-col :xs="16" :sm="12" :md="8">
-            <el-form-item
-              class="flex-item">
-              <el-input
-                v-model="filter.criteria"
-                placeholder="Search by User ID or Station ID"
-                @keyup.enter.native="handleFilter" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="8" :sm="12" :md="8">
+        <div class="filter-view">
+          <div style="flex: 1; min-width: 200px; max-width: 350px;">
+            <el-input
+              v-model="filter.criteria"
+              placeholder="Search by User ID or Station ID"
+              @keyup.enter.native="handleFilter" />
+          </div>
+          <div>
             <el-button
               type="primary"
               icon="el-icon-search"
               @click="handleFilter">
               Search
             </el-button>
-          </el-col>
-        </el-row>
-        <el-row :gutter="0">
-          <el-col :sm="12" :md="8">
-            <el-form-item
-              class="flex-item">
-              <el-select
-                v-model="filter.filter"
-                placeholder="Select"
-                @change="handleFilter">
-                <el-option
-                  v-for="(item, index) in filterOPtions"
-                  :key="index"
-                  :label="item.name"
-                  :value="item.value"/>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :sm="12" :md="6">
-            <el-form-item
-              class="flex-item">
-              <el-date-picker
-                v-model="filter.dateRange"
-                type="daterange"
-                range-separator="To"
-                start-placeholder="Start Date"
-                end-placeholder="End Date"
-                value-format="yyyy-MM-dd"
-                @change="handleFilter">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-        </el-row>
+          </div>
+          <div class="flex1"></div>
+          <div>
+            <el-select
+              v-model="filter.filter"
+              placeholder="Select"
+              @change="handleFilter">
+              <el-option
+                v-for="(item, index) in filterOPtions"
+                :key="index"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </div>
+          <div>
+            <el-date-picker
+              v-model="filter.dateRange"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start Date"
+              end-placeholder="End Date"
+              value-format="yyyy-MM-dd"
+              @change="handleFilter">
+            </el-date-picker>
+          </div>
+        </div>
       </el-form>
     </div>
     <el-table

Strides-Admin/src/views/user/UserManagement.vue

@@ -7,14 +7,14 @@
         label-position="left"
         label-width="70px"
         style="width: 100%;">
-        <div style="display: flex; align-item: 'center'; max-width: calc(100% - 100px)">
-          <el-form-item>
+        <div class="filter-view">
+          <div>
             <el-input
               v-model="criteria"
               placeholder="Search by User ID, Email, Phone or Licence Plate"
               style="width: 400px;" />
-          </el-form-item>
-          <div style="display: flex; height: 40px; justify-content: space-between; flex: 1;">
+          </div>
+          <div>
             <el-button
               v-waves
               type="primary"
@@ -22,6 +22,8 @@
               @click="handleFilter">
                 Search
             </el-button>
+          </div>
+          <div class="filter-flex-button">
             <el-button
               type="primary"
               icon="el-icon-plus"