add status dropdown and due tab

resources/scripts/views/invoices/Index.vue

@@ -48,6 +48,18 @@
         />
       </BaseInputGroup>
 
+      <BaseInputGroup :label="$t('invoices.status')">
+        <BaseMultiselect
+          v-model="filters.status"
+          :groups="true"
+          :options="status"
+          searchable
+          :placeholder="$t('general.select_a_status')"
+          @update:modelValue="setActiveTab"
+          @remove="clearStatusSearch()"
+        />
+      </BaseInputGroup>
+
       <BaseInputGroup :label="$t('general.from')">
         <BaseDatePicker
           v-model="filters.from_date"
@@ -116,6 +128,7 @@
         <!-- Tabs -->
         <BaseTabGroup class="-mb-5" @change="setStatusFilter">
           <BaseTab :title="$t('general.draft')" filter="DRAFT" />
+          <BaseTab :title="$t('general.due')" filter="DUE" />
           <BaseTab :title="$t('general.sent')" filter="SENT" />
           <BaseTab :title="$t('general.all')" filter="" />
         </BaseTabGroup>
@@ -265,12 +278,15 @@ const table = ref(null)
 const showFilters = ref(false)
 
 const status = ref([
-  'DRAFT',
+  {
-  'SENT',
+    label: 'Status',
-  'VIEWED',
+    options: ['DRAFT', 'DUE', 'SENT', 'VIEWED', 'OVERDUE', 'COMPLETED'],
-  'EXPIRED',
+  },
-  'ACCEPTED',
+  {
-  'REJECTED',
+    label: 'Paid Status',
+    options: ['UNPAID', 'PAID', 'PARTIALLY_PAID'],
+  },
+  ,
 ])
 const isRequestOngoing = ref(true)
 const activeTab = ref('general.draft')
@@ -357,6 +373,11 @@ function hasAtleastOneAbility() {
   ])
 }
 
+async function clearStatusSearch(removedOption, id) {
+  filters.status = ''
+  refreshTable()
+}
+
 function refreshTable() {
   table.value && table.value.refresh()
 }
@@ -404,6 +425,11 @@ function setStatusFilter(val) {
     case t('general.sent'):
       filters.status = 'SENT'
       break
+
+    case t('general.due'):
+      filters.status = 'DUE'
+      break
+
     default:
       filters.status = ''
       break
@@ -472,6 +498,35 @@ function setActiveTab(val) {
     case 'SENT':
       activeTab.value = t('general.sent')
       break
+
+    case 'DUE':
+      activeTab.value = t('general.due')
+      break
+
+    case 'COMPLETED':
+      activeTab.value = t('invoices.completed')
+      break
+
+    case 'PAID':
+      activeTab.value = t('invoices.paid')
+      break
+
+    case 'UNPAID':
+      activeTab.value = t('invoices.unpaid')
+      break
+
+    case 'PARTIALLY_PAID':
+      activeTab.value = t('invoices.partially_paid')
+      break
+
+    case 'VIEWED':
+      activeTab.value = t('invoices.viewed')
+      break
+
+    case 'OVERDUE':
+      activeTab.value = t('invoices.overdue')
+      break
+
     default:
       activeTab.value = t('general.all')
       break