search bar for client name added

src/www/index.html

@@ -59,6 +59,11 @@
             <div class="flex-grow">
               <p class="text-2xl font-medium">Clients</p>
             </div>
+            <!-- search bar -->
+            <div class="flex-grow">
+              <input type="text" v-model="search" placeholder="Search" class="border-2 border-gray-100 py-2 px-4 rounded">
+            </div>
+
             <div class="flex-shrink-0">
               <button @click="clientCreate = true; clientCreateName = ''; clientCreateStoreId = '';"
                 class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 border-2 border-gray-100 py-2 px-4 rounded inline-flex items-center transition">
@@ -74,7 +79,7 @@
 
           <div>
             <!-- Client -->
-            <div v-if="clients && clients.length > 0" v-for="client in clients" :key="client.id"
+            <div v-if="clients && clients.length > 0" v-for="client in filteredClients" :key="client.id"
               class="relative overflow-hidden border-b border-gray-100 border-solid">
 
               <!-- Chart -->

src/www/js/app.js

@@ -31,6 +31,7 @@ new Vue({
     password: null,
     requiresPassword: null,
 
+    search: null,
     clients: null,
     clientsPersist: {},
     clientDelete: null,
@@ -112,6 +113,20 @@ new Vue({
       },
     },
   },
+  computed: {
+    filteredClients() {
+      if (!this.clients) return null;
+
+      return this.clients.filter(client => {
+        if (!this.search) return true;
+
+        const search = this.search.toLowerCase();
+        return client.name.toLowerCase().includes(search)
+          || client.address.toLowerCase().includes(search)
+          || client.id.toLowerCase().includes(search);
+      });
+    }
+  },
   methods: {
     dateTime: value => {
       return new Intl.DateTimeFormat(undefined, {