Initial commit

resources/js/views/apps/user/view/UserInvoiceTable.vue

@@ -0,0 +1,261 @@
+<script setup>
+const searchQuery = ref('')
+const selectedStatus = ref()
+
+// Data table options
+const itemsPerPage = ref(10)
+const page = ref(1)
+const sortBy = ref()
+const orderBy = ref()
+
+const updateOptions = options => {
+  sortBy.value = options.sortBy[0]?.key
+  orderBy.value = options.sortBy[0]?.order
+}
+
+const isLoading = ref(false)
+
+// 👉 headers
+const headers = [
+  {
+    title: '#',
+    key: 'id',
+  },
+  {
+    title: 'Status',
+    key: 'trending',
+    sortable: false,
+  },
+  {
+    title: 'Total',
+    key: 'total',
+  },
+  {
+    title: 'Issued Date',
+    key: 'date',
+  },
+  {
+    title: 'Actions',
+    key: 'actions',
+    sortable: false,
+  },
+]
+
+const {
+  data: invoiceData,
+  execute: fetchInvoices,
+} = await useApi(createUrl('/apps/invoice', {
+  query: {
+    q: searchQuery,
+    status: selectedStatus,
+    itemsPerPage,
+    page,
+    sortBy,
+    orderBy,
+  },
+}))
+
+const invoices = computed(() => invoiceData.value?.invoices)
+const totalInvoices = computed(() => invoiceData.value?.totalInvoices)
+
+const resolveInvoiceStatusVariantAndIcon = status => {
+  if (status === 'Partial Payment')
+    return {
+      variant: 'success',
+      icon: 'tabler-check',
+    }
+  if (status === 'Paid')
+    return {
+      variant: 'warning',
+      icon: 'tabler-chart-pie',
+    }
+  if (status === 'Downloaded')
+    return {
+      variant: 'info',
+      icon: 'tabler-arrow-down',
+    }
+  if (status === 'Draft')
+    return {
+      variant: 'primary',
+      icon: 'tabler-folder',
+    }
+  if (status === 'Sent')
+    return {
+      variant: 'secondary',
+      icon: 'tabler-mail',
+    }
+  if (status === 'Past Due')
+    return {
+      variant: 'error',
+      icon: 'tabler-info-circle',
+    }
+  
+  return {
+    variant: 'secondary',
+    icon: 'tabler-x',
+  }
+}
+
+const computedMoreList = computed(() => {
+  return paramId => [
+    {
+      title: 'Download',
+      value: 'download',
+      prependIcon: 'tabler-download',
+    },
+    {
+      title: 'Edit',
+      value: 'edit',
+      prependIcon: 'tabler-pencil',
+      to: {
+        name: 'apps-invoice-edit-id',
+        params: { id: paramId },
+      },
+    },
+    {
+      title: 'Duplicate',
+      value: 'duplicate',
+      prependIcon: 'tabler-layers-intersect',
+    },
+  ]
+})
+
+const deleteInvoice = async id => {
+  await $api(`/apps/invoice/${ id }`, { method: 'DELETE' })
+  fetchInvoices()
+}
+</script>
+
+<template>
+  <section v-if="invoices">
+    <VCard id="invoice-list">
+      <VCardText>
+        <div class="d-flex align-center justify-space-between flex-wrap gap-4">
+          <div class="text-h5">
+            Invoice List
+          </div>
+          <div class="d-flex align-center gap-x-4">
+            <AppSelect
+              :model-value="itemsPerPage"
+              :items="[
+                { value: 10, title: '10' },
+                { value: 25, title: '25' },
+                { value: 50, title: '50' },
+                { value: 100, title: '100' },
+                { value: -1, title: 'All' },
+              ]"
+              style="inline-size: 6.25rem;"
+              @update:model-value="itemsPerPage = parseInt($event, 10)"
+            />
+
+            <!-- 👉 Export invoice -->
+            <VBtn
+              append-icon="tabler-upload"
+              variant="tonal"
+              color="secondary"
+            >
+              Export
+            </VBtn>
+          </div>
+        </div>
+      </VCardText>
+
+      <VDivider />
+
+      <!-- SECTION Datatable -->
+      <VDataTableServer
+        v-model:items-per-page="itemsPerPage"
+        v-model:page="page"
+        :loading="isLoading"
+        :items-length="totalInvoices"
+        :headers="headers"
+        :items="invoices"
+        item-value="total"
+        class="text-no-wrap text-sm rounded-0"
+        @update:options="updateOptions"
+      >
+        <!-- id -->
+        <template #item.id="{ item }">
+          <RouterLink :to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }">
+            #{{ item.id }}
+          </RouterLink>
+        </template>
+
+        <!-- trending -->
+        <template #item.trending="{ item }">
+          <VTooltip>
+            <template #activator="{ props }">
+              <VAvatar
+                :size="28"
+                v-bind="props"
+                :color="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant"
+                variant="tonal"
+              >
+                <VIcon
+                  :size="16"
+                  :icon="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).icon"
+                />
+              </VAvatar>
+            </template>
+            <p class="mb-0">
+              {{ item.invoiceStatus }}
+            </p>
+            <p class="mb-0">
+              Balance: {{ item.balance }}
+            </p>
+            <p class="mb-0">
+              Due date: {{ item.dueDate }}
+            </p>
+          </VTooltip>
+        </template>
+
+        <!-- Total -->
+        <template #item.total="{ item }">
+          ${{ item.total }}
+        </template>
+
+        <!-- issued Date -->
+        <template #item.date="{ item }">
+          {{ item.issuedDate }}
+        </template>
+
+        <!-- Actions -->
+        <template #item.actions="{ item }">
+          <IconBtn @click="deleteInvoice(item.id)">
+            <VIcon icon="tabler-trash" />
+          </IconBtn>
+
+          <IconBtn :to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }">
+            <VIcon icon="tabler-eye" />
+          </IconBtn>
+
+          <MoreBtn
+            :menu-list="computedMoreList(item.id)"
+            color="undefined"
+            item-props
+          />
+        </template>
+        <template #bottom>
+          <TablePagination
+            v-model:page="page"
+            :items-per-page="itemsPerPage"
+            :total-items="totalInvoices"
+          />
+        </template>
+      </VDataTableServer>
+      <!-- !SECTION -->
+    </VCard>
+  </section>
+</template>
+
+<style lang="scss">
+#invoice-list {
+  .invoice-list-actions {
+    inline-size: 8rem;
+  }
+
+  .invoice-list-search {
+    inline-size: 12rem;
+  }
+}
+</style>