first commit
This commit is contained in:
Inshal
170
resources/js/pages/apps/invoice/add/index.vue
Normal file
170
resources/js/pages/apps/invoice/add/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<script setup>
|
||||
import InvoiceEditable from '@/views/apps/invoice/InvoiceEditable.vue'
|
||||
import InvoiceSendInvoiceDrawer from '@/views/apps/invoice/InvoiceSendInvoiceDrawer.vue'
|
||||
|
||||
// 👉 Default Blank Data
|
||||
const invoiceData = ref({
|
||||
invoice: {
|
||||
id: 5037,
|
||||
issuedDate: '',
|
||||
service: '',
|
||||
total: 0,
|
||||
avatar: '',
|
||||
invoiceStatus: '',
|
||||
dueDate: '',
|
||||
balance: 0,
|
||||
client: {
|
||||
address: '112, Lorem Ipsum, Florida',
|
||||
company: 'Greeva Inc',
|
||||
companyEmail: 'johndoe@greeva.com',
|
||||
contact: '+1 123 3452 12',
|
||||
country: 'USA',
|
||||
name: 'John Doe',
|
||||
},
|
||||
},
|
||||
paymentDetails: {
|
||||
totalDue: '$12,110.55',
|
||||
bankName: 'American Bank',
|
||||
country: 'United States',
|
||||
iban: 'ETD95476213',
|
||||
swiftCode: 'BR91905',
|
||||
},
|
||||
purchasedProducts: [{
|
||||
title: '',
|
||||
cost: 0,
|
||||
hours: 0,
|
||||
description: '',
|
||||
}],
|
||||
note: '',
|
||||
paymentMethod: '',
|
||||
salesperson: '',
|
||||
thanksNote: '',
|
||||
})
|
||||
|
||||
const paymentTerms = ref(true)
|
||||
const clientNotes = ref(false)
|
||||
const paymentStub = ref(false)
|
||||
const selectedPaymentMethod = ref('Bank Account')
|
||||
|
||||
const paymentMethods = [
|
||||
'Bank Account',
|
||||
'PayPal',
|
||||
'UPI Transfer',
|
||||
]
|
||||
|
||||
const isSendPaymentSidebarVisible = ref(false)
|
||||
|
||||
const addProduct = value => {
|
||||
invoiceData.value?.purchasedProducts.push(value)
|
||||
}
|
||||
|
||||
const removeProduct = id => {
|
||||
invoiceData.value?.purchasedProducts.splice(id, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 InvoiceEditable -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<InvoiceEditable
|
||||
:data="invoiceData"
|
||||
@push="addProduct"
|
||||
@remove="removeProduct"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Right Column: Invoice Action -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<VCard class="mb-8">
|
||||
<VCardText>
|
||||
<!-- 👉 Send Invoice -->
|
||||
<VBtn
|
||||
block
|
||||
prepend-icon="ri-send-plane-line"
|
||||
class="mb-3"
|
||||
@click="isSendPaymentSidebarVisible = true"
|
||||
>
|
||||
Send Invoice
|
||||
</VBtn>
|
||||
|
||||
<!-- 👉 Preview -->
|
||||
<VBtn
|
||||
block
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
class="mb-3"
|
||||
:to="{ name: 'apps-invoice-preview-id', params: { id: '5036' } }"
|
||||
>
|
||||
Preview
|
||||
</VBtn>
|
||||
|
||||
<!-- 👉 Save -->
|
||||
<VBtn
|
||||
block
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Select payment method -->
|
||||
<VSelect
|
||||
v-model="selectedPaymentMethod"
|
||||
:items="paymentMethods"
|
||||
label="Accept Payment Via"
|
||||
class="mb-6"
|
||||
/>
|
||||
|
||||
<!-- 👉 Payment Terms -->
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<VLabel for="payment-terms">
|
||||
Payment Terms
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="payment-terms"
|
||||
v-model="paymentTerms"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Client Notes -->
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<VLabel for="client-notes">
|
||||
Client Notes
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="client-notes"
|
||||
v-model="clientNotes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Payment Stub -->
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<VLabel for="payment-stub">
|
||||
Payment Stub
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="payment-stub"
|
||||
v-model="paymentStub"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 Send Invoice Sidebar -->
|
||||
<InvoiceSendInvoiceDrawer v-model:isDrawerOpen="isSendPaymentSidebarVisible" />
|
||||
</template>
|
||||
166
resources/js/pages/apps/invoice/edit/[id].vue
Normal file
166
resources/js/pages/apps/invoice/edit/[id].vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<script setup>
|
||||
import InvoiceAddPaymentDrawer from '@/views/apps/invoice/InvoiceAddPaymentDrawer.vue'
|
||||
import InvoiceEditable from '@/views/apps/invoice/InvoiceEditable.vue'
|
||||
import InvoiceSendInvoiceDrawer from '@/views/apps/invoice/InvoiceSendInvoiceDrawer.vue'
|
||||
|
||||
const invoiceData = ref()
|
||||
const route = useRoute('apps-invoice-edit-id')
|
||||
const { data: invoiceDetails } = await useApi(`/apps/invoice/${ route.params.id }`)
|
||||
|
||||
invoiceData.value = {
|
||||
invoice: invoiceDetails.value.invoice,
|
||||
paymentDetails: invoiceDetails.value.paymentDetails,
|
||||
purchasedProducts: [{
|
||||
title: 'App Design',
|
||||
cost: 24,
|
||||
hours: 2,
|
||||
description: 'Designed UI kit & app pages.',
|
||||
}],
|
||||
note: 'It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance projects. Thank You!',
|
||||
paymentMethod: 'Bank Account',
|
||||
salesperson: 'Tom Cook',
|
||||
thanksNote: 'Thanks for your business',
|
||||
}
|
||||
|
||||
const addProduct = value => {
|
||||
invoiceData.value?.purchasedProducts.push(value)
|
||||
}
|
||||
|
||||
const removeProduct = id => {
|
||||
invoiceData.value?.purchasedProducts.splice(id, 1)
|
||||
}
|
||||
|
||||
const isSendSidebarActive = ref(false)
|
||||
const isAddPaymentSidebarActive = ref(false)
|
||||
const paymentTerms = ref(true)
|
||||
const clientNotes = ref(false)
|
||||
const paymentStub = ref(false)
|
||||
const selectedPaymentMethod = ref('Bank Account')
|
||||
|
||||
const paymentMethods = [
|
||||
'Bank Account',
|
||||
'PayPal',
|
||||
'UPI Transfer',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 InvoiceEditable -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<InvoiceEditable
|
||||
v-if="invoiceData?.invoice"
|
||||
:data="invoiceData"
|
||||
@push="addProduct"
|
||||
@remove="removeProduct"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Right Column: Invoice Action -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<VCard class="mb-8">
|
||||
<VCardText>
|
||||
<!-- 👉 Send Invoice Trigger button -->
|
||||
<VBtn
|
||||
block
|
||||
prepend-icon="ri-send-plane-line"
|
||||
class="mb-4"
|
||||
@click="isSendSidebarActive = true"
|
||||
>
|
||||
Send Invoice
|
||||
</VBtn>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<!-- 👉 Preview button -->
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
class="flex-grow-1"
|
||||
:to="{ name: 'apps-invoice-preview-id', params: { id: route.params.id } }"
|
||||
>
|
||||
Preview
|
||||
</VBtn>
|
||||
|
||||
<!-- 👉 Save button -->
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
class="mb-4 flex-grow-1"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Add Payment trigger button -->
|
||||
<VBtn
|
||||
block
|
||||
color="success"
|
||||
prepend-icon="ri-money-dollar-circle-line"
|
||||
@click="isAddPaymentSidebarActive = true"
|
||||
>
|
||||
Add Payment
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Accept payment via -->
|
||||
<VSelect
|
||||
v-model="selectedPaymentMethod"
|
||||
:items="paymentMethods"
|
||||
label="Accept Payment Via"
|
||||
class="mb-6"
|
||||
/>
|
||||
|
||||
<!-- 👉 Payment Terms -->
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<VLabel for="payment-terms">
|
||||
Payment Terms
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="payment-terms"
|
||||
v-model="paymentTerms"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Client Notes -->
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<VLabel for="client-notes">
|
||||
Client Notes
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="client-notes"
|
||||
v-model="clientNotes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Payment Stub -->
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<VLabel for="payment-stub">
|
||||
Payment Stub
|
||||
</VLabel>
|
||||
<div>
|
||||
<VSwitch
|
||||
id="payment-stub"
|
||||
v-model="paymentStub"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Invoice send drawer -->
|
||||
<InvoiceSendInvoiceDrawer v-model:isDrawerOpen="isSendSidebarActive" />
|
||||
|
||||
<!-- 👉 Invoice add payment drawer -->
|
||||
<InvoiceAddPaymentDrawer v-model:isDrawerOpen="isAddPaymentSidebarActive" />
|
||||
</VRow>
|
||||
</template>
|
||||
454
resources/js/pages/apps/invoice/list/index.vue
Normal file
454
resources/js/pages/apps/invoice/list/index.vue
Normal file
@@ -0,0 +1,454 @@
|
||||
<script setup>
|
||||
const searchQuery = ref('')
|
||||
const selectedStatus = ref(null)
|
||||
const selectedRows = ref([])
|
||||
|
||||
// Data table options
|
||||
const itemsPerPage = ref(10)
|
||||
const page = ref(1)
|
||||
const sortBy = ref()
|
||||
const orderBy = ref()
|
||||
|
||||
const updateOptions = options => {
|
||||
page.value = options.page
|
||||
sortBy.value = options.sortBy[0]?.key
|
||||
orderBy.value = options.sortBy[0]?.order
|
||||
}
|
||||
|
||||
const widgetData = ref([
|
||||
{
|
||||
title: 'Clients',
|
||||
value: 24,
|
||||
icon: 'ri-user-line',
|
||||
},
|
||||
{
|
||||
title: 'Invoices',
|
||||
value: 165,
|
||||
icon: 'ri-pages-line',
|
||||
},
|
||||
{
|
||||
title: 'Paid',
|
||||
value: '$2.46k',
|
||||
icon: 'ri-wallet-line',
|
||||
},
|
||||
{
|
||||
title: 'Unpaid',
|
||||
value: '$876',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
},
|
||||
])
|
||||
|
||||
// 👉 headers
|
||||
const headers = [
|
||||
{
|
||||
title: '#',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'trending',
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
title: 'Client',
|
||||
key: 'client',
|
||||
},
|
||||
{
|
||||
title: 'Total',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
title: 'Issued Date',
|
||||
key: 'date',
|
||||
},
|
||||
{
|
||||
title: 'Balance',
|
||||
key: 'balance',
|
||||
},
|
||||
{
|
||||
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)
|
||||
|
||||
// 👉 Invoice balance variant resolver
|
||||
const resolveInvoiceBalanceVariant = (balance, total) => {
|
||||
if (balance === total)
|
||||
return {
|
||||
status: 'Unpaid',
|
||||
chip: { color: 'error' },
|
||||
}
|
||||
if (balance === 0)
|
||||
return {
|
||||
status: 'Paid',
|
||||
chip: { color: 'success' },
|
||||
}
|
||||
|
||||
return {
|
||||
status: balance,
|
||||
chip: { variant: 'text' },
|
||||
}
|
||||
}
|
||||
|
||||
const resolveInvoiceStatusVariantAndIcon = status => {
|
||||
if (status === 'Partial Payment')
|
||||
return {
|
||||
variant: 'warning',
|
||||
icon: 'ri-line-chart-line',
|
||||
}
|
||||
if (status === 'Paid')
|
||||
return {
|
||||
variant: 'success',
|
||||
icon: 'ri-check-line',
|
||||
}
|
||||
if (status === 'Downloaded')
|
||||
return {
|
||||
variant: 'info',
|
||||
icon: 'ri-arrow-down-line',
|
||||
}
|
||||
if (status === 'Draft')
|
||||
return {
|
||||
variant: 'secondary',
|
||||
icon: 'ri-save-line',
|
||||
}
|
||||
if (status === 'Sent')
|
||||
return {
|
||||
variant: 'primary',
|
||||
icon: 'ri-mail-line',
|
||||
}
|
||||
if (status === 'Past Due')
|
||||
return {
|
||||
variant: 'error',
|
||||
icon: 'ri-error-warning-line',
|
||||
}
|
||||
|
||||
return {
|
||||
variant: 'secondary',
|
||||
icon: 'ri-close-line',
|
||||
}
|
||||
}
|
||||
|
||||
const computedMoreList = computed(() => {
|
||||
return paramId => [
|
||||
{
|
||||
title: 'Download',
|
||||
value: 'download',
|
||||
prependIcon: 'ri-download-line',
|
||||
},
|
||||
{
|
||||
title: 'Edit',
|
||||
value: 'edit',
|
||||
prependIcon: 'ri-pencil-line',
|
||||
to: {
|
||||
name: 'apps-invoice-edit-id',
|
||||
params: { id: paramId },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Duplicate',
|
||||
value: 'duplicate',
|
||||
prependIcon: 'ri-stack-line',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const deleteInvoice = async id => {
|
||||
await $api(`/apps/invoice/${ id }`, { method: 'DELETE' })
|
||||
fetchInvoices()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-if="invoices">
|
||||
<!-- 👉 Invoice Widgets -->
|
||||
<VCard class="mb-6">
|
||||
<VCardText class="px-2">
|
||||
<VRow>
|
||||
<template
|
||||
v-for="(data, id) in widgetData"
|
||||
:key="id"
|
||||
>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
class="px-6"
|
||||
:class="id !== widgetData.length - 1 && $vuetify.display.width <= 600 ? 'border-b' : ''"
|
||||
>
|
||||
<div class="d-flex justify-space-between">
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="text-h4">
|
||||
{{ data.value }}
|
||||
</h4>
|
||||
<span class="text-body-1 text-capitalize">{{ data.title }}</span>
|
||||
</div>
|
||||
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
rounded
|
||||
size="42"
|
||||
>
|
||||
<VIcon
|
||||
:icon="data.icon"
|
||||
size="26"
|
||||
color="high-emphasis"
|
||||
/>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VCol>
|
||||
<VDivider
|
||||
v-if="$vuetify.display.mdAndUp ? id !== widgetData.length - 1
|
||||
: $vuetify.display.smAndUp ? id % 2 === 0
|
||||
: false"
|
||||
vertical
|
||||
inset
|
||||
/>
|
||||
</template>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard id="invoice-list">
|
||||
<VCardText class="d-flex align-center flex-wrap gap-4">
|
||||
<!-- 👉 Create invoice -->
|
||||
<VBtn
|
||||
prepend-icon="ri-add-line"
|
||||
:to="{ name: 'apps-invoice-add' }"
|
||||
>
|
||||
Create invoice
|
||||
</VBtn>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="d-flex align-center flex-wrap gap-4">
|
||||
<!-- 👉 Search -->
|
||||
<div class="invoice-list-search">
|
||||
<VTextField
|
||||
v-model="searchQuery"
|
||||
density="compact"
|
||||
placeholder="Search Invoice"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="invoice-list-search">
|
||||
<VSelect
|
||||
v-model="selectedStatus"
|
||||
placeholder="Invoice Status"
|
||||
clearable
|
||||
density="compact"
|
||||
clear-icon="ri-close-line"
|
||||
:items="['Downloaded', 'Draft', 'Sent', 'Paid', 'Partial Payment', 'Past Due']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<!-- SECTION Datatable -->
|
||||
<VDataTableServer
|
||||
v-model="selectedRows"
|
||||
v-model:items-per-page="itemsPerPage"
|
||||
v-model:page="page"
|
||||
show-select
|
||||
:items-length="totalInvoices"
|
||||
:headers="headers"
|
||||
:items="invoices"
|
||||
item-value="id"
|
||||
class="text-no-wrap 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>
|
||||
|
||||
<!-- client -->
|
||||
<template #item.client="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:color="!item.avatar.length ? resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant : undefined"
|
||||
:variant="!item.avatar.length ? 'tonal' : undefined"
|
||||
class="me-3"
|
||||
>
|
||||
<VImg
|
||||
v-if="item.avatar.length"
|
||||
:src="item.avatar"
|
||||
/>
|
||||
<span v-else>{{ avatarText(item.client.name) }}</span>
|
||||
</VAvatar>
|
||||
<div class="d-flex flex-column">
|
||||
<RouterLink
|
||||
:to="{ name: 'pages-user-profile-tab', params: { tab: 'profile' } }"
|
||||
class="text-h6 font-weight-medium mb-0"
|
||||
>
|
||||
{{ item.client.name }}
|
||||
</RouterLink>
|
||||
<span class="text-body-2">{{ item.client.companyEmail }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Total -->
|
||||
<template #item.total="{ item }">
|
||||
${{ item.total }}
|
||||
</template>
|
||||
|
||||
<!-- Date -->
|
||||
<template #item.date="{ item }">
|
||||
{{ item.issuedDate }}
|
||||
</template>
|
||||
|
||||
<!-- Balance -->
|
||||
<template #item.balance="{ item }">
|
||||
<VChip
|
||||
v-if="typeof ((resolveInvoiceBalanceVariant(item.balance, item.total)).status) === 'string'"
|
||||
:color="resolveInvoiceBalanceVariant(item.balance, item.total).chip.color"
|
||||
size="small"
|
||||
>
|
||||
{{ (resolveInvoiceBalanceVariant(item.balance, item.total)).status }}
|
||||
</VChip>
|
||||
<h6
|
||||
v-else
|
||||
class="text-h6 font-weight-regular"
|
||||
>
|
||||
{{ Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status) > 0 ? `$${(resolveInvoiceBalanceVariant(item.balance, item.total)).status}` : `-$${Math.abs(Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status))}` }}
|
||||
</h6>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<div class="text-no-wrap">
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="deleteInvoice(item.id)"
|
||||
>
|
||||
<VIcon icon="ri-delete-bin-7-line" />
|
||||
</IconBtn>
|
||||
|
||||
<IconBtn
|
||||
size="small"
|
||||
:to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }"
|
||||
>
|
||||
<VIcon icon="ri-eye-line" />
|
||||
</IconBtn>
|
||||
|
||||
<MoreBtn
|
||||
size="small"
|
||||
:menu-list="computedMoreList(item.id)"
|
||||
item-props
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Pagination -->
|
||||
<template #bottom>
|
||||
<VDivider />
|
||||
|
||||
<div class="d-flex justify-end flex-wrap gap-x-6 px-2 py-1">
|
||||
<div class="d-flex align-center gap-x-2 text-medium-emphasis text-base">
|
||||
Rows Per Page:
|
||||
<VSelect
|
||||
v-model="itemsPerPage"
|
||||
class="per-page-select"
|
||||
variant="plain"
|
||||
:items="[10, 20, 25, 50, 100]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="d-flex align-center text-base text-high-emphasis me-2 mb-0">
|
||||
{{ paginationMeta({ page, itemsPerPage }, totalInvoices) }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex gap-x-2 align-center me-2">
|
||||
<VBtn
|
||||
class="flip-in-rtl"
|
||||
icon="ri-arrow-left-s-line"
|
||||
variant="text"
|
||||
density="comfortable"
|
||||
color="high-emphasis"
|
||||
:disabled="page <= 1"
|
||||
@click="page <= 1 ? page = 1 : page--"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
class="flip-in-rtl"
|
||||
icon="ri-arrow-right-s-line"
|
||||
density="comfortable"
|
||||
variant="text"
|
||||
color="high-emphasis"
|
||||
:disabled="page >= Math.ceil(totalInvoices / itemsPerPage)"
|
||||
@click="page >= Math.ceil(totalInvoices / itemsPerPage) ? page = Math.ceil(totalInvoices / itemsPerPage) : page++ "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VDataTableServer>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</section>
|
||||
<section v-else>
|
||||
<VCard>
|
||||
<VCardTitle>No Invoice Found</VCardTitle>
|
||||
</VCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#invoice-list {
|
||||
.invoice-list-actions {
|
||||
inline-size: 8rem;
|
||||
}
|
||||
|
||||
.invoice-list-search {
|
||||
inline-size: 12rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
438
resources/js/pages/apps/invoice/preview/[id].vue
Normal file
438
resources/js/pages/apps/invoice/preview/[id].vue
Normal file
@@ -0,0 +1,438 @@
|
||||
<script setup>
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import InvoiceAddPaymentDrawer from '@/views/apps/invoice/InvoiceAddPaymentDrawer.vue'
|
||||
import InvoiceSendInvoiceDrawer from '@/views/apps/invoice/InvoiceSendInvoiceDrawer.vue'
|
||||
|
||||
const route = useRoute('apps-invoice-preview-id')
|
||||
const isAddPaymentSidebarVisible = ref(false)
|
||||
const isSendPaymentSidebarVisible = ref(false)
|
||||
const { data: invoiceData } = await useApi(`/apps/invoice/${ Number(route.params.id) }`)
|
||||
const invoice = invoiceData.value.invoice
|
||||
const paymentDetails = invoiceData.value.paymentDetails
|
||||
|
||||
const purchasedProducts = [
|
||||
{
|
||||
name: 'Premium Branding Package',
|
||||
description: 'Branding & Promotion',
|
||||
qty: 1,
|
||||
hours: 15,
|
||||
price: 32,
|
||||
},
|
||||
{
|
||||
name: 'SMM',
|
||||
description: 'Social media templates',
|
||||
qty: 1,
|
||||
hours: 14,
|
||||
price: 28,
|
||||
},
|
||||
{
|
||||
name: 'Web Design',
|
||||
description: 'Web designing package',
|
||||
qty: 1,
|
||||
hours: 12,
|
||||
price: 24,
|
||||
},
|
||||
{
|
||||
name: 'SEO',
|
||||
description: 'Search engine optimization',
|
||||
qty: 1,
|
||||
hours: 5,
|
||||
price: 22,
|
||||
},
|
||||
]
|
||||
|
||||
const printInvoice = () => {
|
||||
window.print()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-if="invoiceData">
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<VCard class="invoice-preview-wrapper pa-12">
|
||||
<!-- SECTION Header -->
|
||||
<div class="invoice-header-preview d-flex flex-wrap justify-space-between flex-column flex-sm-row print-row bg-var-theme-background gap-6 rounded pa-6 mb-6">
|
||||
<!-- 👉 Left Content -->
|
||||
<div>
|
||||
<div class="d-flex align-center mb-6">
|
||||
<!-- 👉 Logo -->
|
||||
<VNodeRenderer
|
||||
:nodes="themeConfig.app.logo"
|
||||
class="me-3"
|
||||
/>
|
||||
|
||||
<!-- 👉 Title -->
|
||||
<h6 class="text-xl leading-normal text-uppercase">
|
||||
{{ themeConfig.app.title }}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Address -->
|
||||
<h6 class="text-h6 font-weight-regular">
|
||||
Office 149, 450 South Brand Brooklyn
|
||||
</h6>
|
||||
<h6 class="text-h6 font-weight-regular">
|
||||
San Diego County, CA 91905, USA
|
||||
</h6>
|
||||
<h6 class="text-h6 font-weight-regular">
|
||||
+1 (123) 456 7891, +44 (876) 543 2198
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Right Content -->
|
||||
<div>
|
||||
<!-- 👉 Invoice ID -->
|
||||
<h6 class="font-weight-medium text-lg mb-6">
|
||||
Invoice #{{ invoice.id }}
|
||||
</h6>
|
||||
|
||||
<!-- 👉 Issue Date -->
|
||||
<h6 class="text-h6 font-weight-regular">
|
||||
<span>Date Issued: </span>
|
||||
<span>{{ new Date(invoice.issuedDate).toLocaleDateString('en-GB') }}</span>
|
||||
</h6>
|
||||
|
||||
<!-- 👉 Due Date -->
|
||||
<h6 class="text-h6 font-weight-regular">
|
||||
<span>Due Date: </span>
|
||||
<span>{{ new Date(invoice.dueDate).toLocaleDateString('en-GB') }}</span>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- 👉 Payment Details -->
|
||||
<VRow class="print-row mb-6">
|
||||
<VCol class="text-no-wrap">
|
||||
<h6 class="text-h6 mb-4">
|
||||
Invoice To:
|
||||
</h6>
|
||||
|
||||
<p class="mb-0">
|
||||
{{ invoice.client.name }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
{{ invoice.client.company }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
{{ invoice.client.address }}, {{ invoice.client.country }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
{{ invoice.client.contact }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
{{ invoice.client.companyEmail }}
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol class="text-no-wrap">
|
||||
<h6 class="text-h6 mb-4">
|
||||
Bill To:
|
||||
</h6>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="pe-6">
|
||||
Total Due:
|
||||
</td>
|
||||
<td>
|
||||
{{ paymentDetails.totalDue }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pe-6">
|
||||
Bank Name:
|
||||
</td>
|
||||
<td>
|
||||
{{ paymentDetails.bankName }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pe-6">
|
||||
Country:
|
||||
</td>
|
||||
<td>
|
||||
{{ paymentDetails.country }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pe-6">
|
||||
IBAN:
|
||||
</td>
|
||||
<td>
|
||||
{{ paymentDetails.iban }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pe-6">
|
||||
SWIFT Code:
|
||||
</td>
|
||||
<td>
|
||||
{{ paymentDetails.swiftCode }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 invoice Table -->
|
||||
<VTable class="invoice-preview-table border text-high-emphasis overflow-hidden mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
ITEM
|
||||
</th>
|
||||
<th scope="col">
|
||||
DESCRIPTION
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="text-center"
|
||||
>
|
||||
HOURS
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="text-center"
|
||||
>
|
||||
QTY
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="text-center"
|
||||
>
|
||||
TOTAL
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in purchasedProducts"
|
||||
:key="item.name"
|
||||
>
|
||||
<td class="text-no-wrap">
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td class="text-no-wrap">
|
||||
{{ item.description }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.hours }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ item.qty }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
${{ item.price }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
<!-- 👉 Total -->
|
||||
<div class="d-flex justify-space-between flex-column flex-sm-row print-row">
|
||||
<div class="mb-2">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<h6 class="text-h6 me-2">
|
||||
Salesperson:
|
||||
</h6>
|
||||
<span>Jenny Parker</span>
|
||||
</div>
|
||||
<p>Thanks for your business</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<table class="w-100">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="pe-16">
|
||||
Subtotal:
|
||||
</td>
|
||||
<td :class="$vuetify.locale.isRtl ? 'text-start' : 'text-end'">
|
||||
<h6 class="text-sm">
|
||||
$1800
|
||||
</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pe-16">
|
||||
Discount:
|
||||
</td>
|
||||
<td :class="$vuetify.locale.isRtl ? 'text-start' : 'text-end'">
|
||||
<h6 class="text-sm">
|
||||
$28
|
||||
</h6>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pe-16">
|
||||
Tax:
|
||||
</td>
|
||||
<td :class="$vuetify.locale.isRtl ? 'text-start' : 'text-end'">
|
||||
<h6 class="text-sm">
|
||||
21%
|
||||
</h6>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<VDivider class="mt-4 mb-3" />
|
||||
|
||||
<table class="w-100">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="pe-16">
|
||||
Total:
|
||||
</td>
|
||||
<td :class="$vuetify.locale.isRtl ? 'text-start' : 'text-end'">
|
||||
<h6 class="text-sm">
|
||||
$1690
|
||||
</h6>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider class="my-6 border-dashed" />
|
||||
|
||||
<p class="mb-0">
|
||||
<span class="text-high-emphasis font-weight-medium me-1">
|
||||
Note:
|
||||
</span>
|
||||
<span>It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance projects. Thank You!</span>
|
||||
</p>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
class="d-print-none"
|
||||
>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<!-- 👉 Send Invoice Trigger button -->
|
||||
<VBtn
|
||||
block
|
||||
prepend-icon="ri-send-plane-line"
|
||||
class="mb-4"
|
||||
@click="isSendPaymentSidebarVisible = true"
|
||||
>
|
||||
Send Invoice
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
class="mb-4"
|
||||
>
|
||||
Download
|
||||
</VBtn>
|
||||
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
class="flex-grow-1"
|
||||
@click="printInvoice"
|
||||
>
|
||||
Print
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
class="mb-4 flex-grow-1"
|
||||
:to="{ name: 'apps-invoice-edit-id', params: { id: route.params.id } }"
|
||||
>
|
||||
Edit
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Add Payment trigger button -->
|
||||
<VBtn
|
||||
block
|
||||
prepend-icon="ri-money-dollar-circle-line"
|
||||
color="success"
|
||||
@click="isAddPaymentSidebarVisible = true"
|
||||
>
|
||||
Add Payment
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 Add Payment Sidebar -->
|
||||
<InvoiceAddPaymentDrawer v-model:isDrawerOpen="isAddPaymentSidebarVisible" />
|
||||
|
||||
<!-- 👉 Send Invoice Sidebar -->
|
||||
<InvoiceSendInvoiceDrawer v-model:isDrawerOpen="isSendPaymentSidebarVisible" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.invoice-preview-table {
|
||||
--v-table-header-color: var(--v-theme-surface);
|
||||
|
||||
&.v-table .v-table__wrapper table thead tr th{
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.v-theme--dark {
|
||||
--v-theme-surface: 255, 255, 255;
|
||||
--v-theme-on-surface: 94, 86, 105;
|
||||
}
|
||||
|
||||
body {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.invoice-header-preview,
|
||||
.invoice-preview-wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.product-buy-now {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v-navigation-drawer,
|
||||
.layout-vertical-nav,
|
||||
.app-customizer-toggler,
|
||||
.layout-footer,
|
||||
.layout-navbar,
|
||||
.layout-navbar-and-nav-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
box-shadow: none !important;
|
||||
|
||||
.print-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-content-wrapper {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.v-table__wrapper {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user