mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
add dark mode in est,inv,pay,rec view&create page (#1201)
* add dark mode in est,inv,pay,rec view&create page * fix dark issue in itemRow and total taxes --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
This commit is contained in:
Yash Kanakiya
GitHub
@ -43,6 +43,12 @@
|
||||
max-w-full
|
||||
left-0
|
||||
top-3
|
||||
bg-white
|
||||
dark:border
|
||||
dark:border-white/10
|
||||
dark:text-white
|
||||
dark:bg-gray-800
|
||||
dark:shadow-glass
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -53,7 +59,7 @@
|
||||
ring-1 ring-black ring-opacity-5
|
||||
"
|
||||
>
|
||||
<div class="relative grid bg-white">
|
||||
<div class="relative grid bg-white dark:bg-gray-800">
|
||||
<div class="relative p-4">
|
||||
<BaseInput
|
||||
v-model="textSearch"
|
||||
@ -66,7 +72,7 @@
|
||||
|
||||
<div
|
||||
v-if="filteredNotes.length > 0"
|
||||
class="relative flex flex-col overflow-auto list max-h-36"
|
||||
class="relative flex flex-col overflow-auto list max-h-36 dark:border-white/10"
|
||||
>
|
||||
<div
|
||||
v-for="(note, index) in filteredNotes"
|
||||
@ -79,6 +85,8 @@
|
||||
cursor-pointer
|
||||
hover:bg-gray-100 hover:cursor-pointer
|
||||
last:border-b-0
|
||||
dark:border-gray-600
|
||||
dark:border-white/10 dark:hover:bg-gray-700/30
|
||||
"
|
||||
@click="selectNote(index, close)"
|
||||
>
|
||||
@ -119,6 +127,10 @@
|
||||
bg-gray-200
|
||||
border-none
|
||||
outline-none
|
||||
dark:bg-gray-600/70
|
||||
dark:backdrop-blur-xl
|
||||
dark:shadow-glass
|
||||
dark:hover:bg-gray-600/80
|
||||
"
|
||||
@click="openNoteModal"
|
||||
>
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<template>
|
||||
<tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
|
||||
<tr
|
||||
class="
|
||||
box-border
|
||||
bg-white
|
||||
border border-gray-200 border-solid
|
||||
rounded-b
|
||||
dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
|
||||
"
|
||||
>
|
||||
<td colspan="5" class="p-0 text-left align-top">
|
||||
<table class="w-full">
|
||||
<colgroup>
|
||||
@ -130,7 +138,7 @@
|
||||
<div class="flex items-center justify-center w-6 h-10 mx-2">
|
||||
<BaseIcon
|
||||
v-if="showRemoveButton"
|
||||
class="h-5 text-gray-700 cursor-pointer"
|
||||
class="h-5 dark:text-red-400 cursor-pointer"
|
||||
name="TrashIcon"
|
||||
@click="store.removeItem(index)"
|
||||
/>
|
||||
|
||||
@ -1,155 +1,113 @@
|
||||
<template>
|
||||
<table class="text-center item-table min-w-full">
|
||||
<colgroup>
|
||||
<col style="width: 40%; min-width: 280px" />
|
||||
<col style="width: 10%; min-width: 120px" />
|
||||
<col style="width: 15%; min-width: 120px" />
|
||||
<col
|
||||
v-if="store[storeProp].discount_per_item === 'YES'"
|
||||
style="width: 15%; min-width: 160px"
|
||||
/>
|
||||
<col style="width: 15%; min-width: 120px" />
|
||||
</colgroup>
|
||||
<thead class="bg-white border border-gray-200 border-solid">
|
||||
<tr>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else class="pl-7">
|
||||
{{ $tc('items.item', 2) }}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-right text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else>
|
||||
{{ $t('invoices.item.quantity') }}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else>
|
||||
{{ $t('invoices.item.price') }}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
<div class="relative" >
|
||||
<BaseDarkHighlight class="z-[-1]" />
|
||||
<table class="text-center item-table min-w-full">
|
||||
<colgroup>
|
||||
<col style="width: 40%; min-width: 280px" />
|
||||
<col style="width: 10%; min-width: 120px" />
|
||||
<col style="width: 15%; min-width: 120px" />
|
||||
<col
|
||||
v-if="store[storeProp].discount_per_item === 'YES'"
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else>
|
||||
{{ $t('invoices.item.discount') }}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-right text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else class="pr-10 column-heading">
|
||||
{{ $t('invoices.item.amount') }}
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
v-model="store[storeProp].items"
|
||||
item-key="id"
|
||||
tag="tbody"
|
||||
handle=".handle"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<Item
|
||||
:key="element.id"
|
||||
:index="index"
|
||||
:item-data="element"
|
||||
:loading="isLoading"
|
||||
:currency="defaultCurrency"
|
||||
:item-validation-scope="itemValidationScope"
|
||||
:invoice-items="store[storeProp].items"
|
||||
:store="store"
|
||||
:store-prop="storeProp"
|
||||
style="width: 15%; min-width: 160px"
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
</table>
|
||||
<col style="width: 15%; min-width: 120px" />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="
|
||||
bg-white
|
||||
border border-gray-200 border-solid
|
||||
dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
|
||||
"
|
||||
>
|
||||
<tr>
|
||||
<th class="text-left" :class="theadClass">
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else class="pl-7">
|
||||
{{ $tc('items.item', 2) }}
|
||||
</span>
|
||||
</th>
|
||||
<th class="text-right" :class="theadClass">
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else>
|
||||
{{ $t('invoices.item.quantity') }}
|
||||
</span>
|
||||
</th>
|
||||
<th class="text-left" :class="theadClass">
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else>
|
||||
{{ $t('invoices.item.price') }}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
v-if="store[storeProp].discount_per_item_enabled"
|
||||
class="text-left"
|
||||
:class="theadClass"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else>
|
||||
{{ $t('invoices.item.discount') }}
|
||||
</span>
|
||||
</th>
|
||||
<th class="text-right" :class="theadClass">
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</BaseContentPlaceholders>
|
||||
<span v-else class="pr-10 column-heading">
|
||||
{{ $t('invoices.item.amount') }}
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
v-model="store[storeProp].items"
|
||||
item-key="id"
|
||||
tag="tbody"
|
||||
handle=".handle"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<Item
|
||||
:key="element.id"
|
||||
:index="index"
|
||||
:item-data="element"
|
||||
:loading="isLoading"
|
||||
:currency="defaultCurrency"
|
||||
:item-validation-scope="itemValidationScope"
|
||||
:invoice-items="store[storeProp].items"
|
||||
:store="store"
|
||||
:store-prop="storeProp"
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
</table>
|
||||
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
w-full
|
||||
px-6
|
||||
py-3
|
||||
text-base
|
||||
border border-t-0 border-gray-200 border-solid
|
||||
cursor-pointer
|
||||
text-primary-400
|
||||
hover:bg-primary-100
|
||||
"
|
||||
@click="store.addItem"
|
||||
>
|
||||
<BaseIcon name="PlusCircleIcon" class="mr-2" />
|
||||
{{ $t('general.add_new_item') }}
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
w-full
|
||||
px-6
|
||||
py-3
|
||||
text-base
|
||||
border border-t-0 border-gray-200 border-solid
|
||||
cursor-pointer
|
||||
text-primary-400
|
||||
hover:bg-primary-100
|
||||
dark:bg-gray-900/50 dark:border-white/10 dark:hover:bg-gray-900/80
|
||||
"
|
||||
@click="store.addItem"
|
||||
>
|
||||
<BaseIcon name="PlusCircleIcon" class="mr-2" />
|
||||
{{ $t('general.add_new_item') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -180,6 +138,11 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
theadClass: {
|
||||
type: String,
|
||||
default: `px-5 py-3 text-sm not-italic font-medium leading-5
|
||||
text-gray-700 border-t border-b border-gray-200 border-solid dark:text-white dark:border-white/10`
|
||||
},
|
||||
})
|
||||
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
mt-6
|
||||
bg-white
|
||||
border border-gray-200 border-solid
|
||||
dark:bg-gray-800/50 dark:border-white/10
|
||||
rounded
|
||||
md:min-w-[390px]
|
||||
min-w-[300px]
|
||||
@ -192,6 +193,7 @@
|
||||
pt-2
|
||||
mt-5
|
||||
border-t border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
@ -199,7 +201,7 @@
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
v-else
|
||||
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
|
||||
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase dark:text-gray-400"
|
||||
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
|
||||
>
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="h-5 ml-2 cursor-pointer"
|
||||
class="h-5 ml-2 cursor-pointer dark:text-red-400"
|
||||
@click="$emit('remove', tax.id)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
>
|
||||
<!-- Tax Search Input -->
|
||||
|
||||
<div class="relative bg-white">
|
||||
<div class="relative bg-white dark:bg-gray-800">
|
||||
<div class="relative p-4">
|
||||
<BaseInput
|
||||
v-model="textSearch"
|
||||
@ -65,13 +65,14 @@
|
||||
list
|
||||
max-h-36
|
||||
border-t border-gray-200
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(taxType, index) in filteredTaxType"
|
||||
:key="index"
|
||||
:class="{
|
||||
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
|
||||
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none dark:bg-gray-900':
|
||||
taxes.find((val) => {
|
||||
return val.tax_type_id === taxType.id
|
||||
}),
|
||||
@ -84,6 +85,7 @@
|
||||
cursor-pointer
|
||||
hover:bg-gray-100 hover:cursor-pointer
|
||||
last:border-b-0
|
||||
dark:border-gray-600 dark:hover:bg-gray-700/20
|
||||
"
|
||||
@click="selectTaxType(taxType, close)"
|
||||
>
|
||||
@ -140,6 +142,10 @@
|
||||
bg-gray-200
|
||||
border-none
|
||||
outline-none
|
||||
dark:bg-gray-600/70
|
||||
dark:backdrop-blur-xl
|
||||
dark:shadow-glass
|
||||
dark:hover:bg-gray-600/80
|
||||
"
|
||||
@click="openTaxTypeModal"
|
||||
>
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -62,6 +63,7 @@
|
||||
pb-2
|
||||
border border-gray-200 border-solid
|
||||
height-full
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div class="mb-6">
|
||||
@ -96,9 +98,10 @@
|
||||
px-4
|
||||
py-1
|
||||
pb-2
|
||||
mb-1 mb-2
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -161,6 +164,7 @@
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
base-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div v-for="(estimate, index) in estimateList" :key="index">
|
||||
@ -169,9 +173,9 @@
|
||||
:id="'estimate-' + estimate.id"
|
||||
:to="`/admin/estimates/${estimate.id}/view`"
|
||||
:class="[
|
||||
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
|
||||
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
|
||||
hasActiveUrl(estimate.id),
|
||||
},
|
||||
]"
|
||||
@ -191,6 +195,7 @@
|
||||
text-black
|
||||
capitalize
|
||||
truncate
|
||||
dark:text-white
|
||||
"
|
||||
/>
|
||||
|
||||
@ -203,6 +208,7 @@
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-600
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ estimate.estimate_number }}
|
||||
@ -228,6 +234,7 @@
|
||||
font-semibold
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
dark:text-white
|
||||
"
|
||||
/>
|
||||
|
||||
@ -239,6 +246,7 @@
|
||||
leading-5
|
||||
text-right text-gray-600
|
||||
est-date
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ estimate.formatted_estimate_date }}
|
||||
@ -251,7 +259,7 @@
|
||||
</div>
|
||||
<p
|
||||
v-if="!estimateList?.length && !isLoading"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $t('estimates.no_matching_estimates') }}
|
||||
</p>
|
||||
|
||||
@ -299,6 +299,7 @@ onSearched = debounce(onSearched, 500)
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -311,6 +312,7 @@ onSearched = debounce(onSearched, 500)
|
||||
pb-2
|
||||
border border-gray-200 border-solid
|
||||
height-full
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div class="mb-6">
|
||||
@ -339,9 +341,10 @@ onSearched = debounce(onSearched, 500)
|
||||
px-2
|
||||
py-1
|
||||
pb-2
|
||||
mb-1 mb-2
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -404,6 +407,7 @@ onSearched = debounce(onSearched, 500)
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
base-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div v-for="(invoice, index) in invoiceList" :key="index">
|
||||
@ -412,9 +416,9 @@ onSearched = debounce(onSearched, 500)
|
||||
:id="'invoice-' + invoice.id"
|
||||
:to="`/admin/invoices/${invoice.id}/view`"
|
||||
:class="[
|
||||
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
|
||||
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||
hasActiveUrl(invoice.id),
|
||||
},
|
||||
]"
|
||||
@ -434,6 +438,7 @@ onSearched = debounce(onSearched, 500)
|
||||
text-black
|
||||
capitalize
|
||||
truncate
|
||||
dark:text-white
|
||||
"
|
||||
/>
|
||||
|
||||
@ -446,16 +451,17 @@ onSearched = debounce(onSearched, 500)
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-600
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ invoice.invoice_number }}
|
||||
</div>
|
||||
<BaseEstimateStatusBadge
|
||||
<BaseInvoiceStatusBadge
|
||||
:status="invoice.status"
|
||||
class="px-1 text-xs"
|
||||
>
|
||||
{{ invoice.status }}
|
||||
</BaseEstimateStatusBadge>
|
||||
</BaseInvoiceStatusBadge>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 whitespace-nowrap right">
|
||||
@ -468,6 +474,7 @@ onSearched = debounce(onSearched, 500)
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
block
|
||||
dark:text-white
|
||||
"
|
||||
:amount="invoice.total"
|
||||
:currency="invoice.customer.currency"
|
||||
@ -480,6 +487,7 @@ onSearched = debounce(onSearched, 500)
|
||||
leading-5
|
||||
text-right text-gray-600
|
||||
est-date
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ invoice.formatted_invoice_date }}
|
||||
@ -492,7 +500,7 @@ onSearched = debounce(onSearched, 500)
|
||||
</div>
|
||||
<p
|
||||
v-if="!invoiceList?.length && !isLoading"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $t('invoices.no_matching_invoices') }}
|
||||
</p>
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -46,6 +47,7 @@
|
||||
pt-8
|
||||
pb-6
|
||||
border border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -77,6 +79,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -139,7 +142,7 @@
|
||||
|
||||
<div
|
||||
ref="paymentListSection"
|
||||
class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
|
||||
class="h-full overflow-y-scroll border-l border-gray-200 border-solid dark:border-gray-600"
|
||||
>
|
||||
<div v-for="(payment, index) in paymentList" :key="index">
|
||||
<router-link
|
||||
@ -147,9 +150,9 @@
|
||||
:id="'payment-' + payment.id"
|
||||
:to="`/admin/payments/${payment.id}/view`"
|
||||
:class="[
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||
hasActiveUrl(payment.id),
|
||||
},
|
||||
]"
|
||||
@ -169,6 +172,7 @@
|
||||
text-black
|
||||
capitalize
|
||||
truncate
|
||||
dark:text-white
|
||||
"
|
||||
/>
|
||||
|
||||
@ -181,6 +185,7 @@
|
||||
leading-5
|
||||
text-gray-500
|
||||
capitalize
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ payment?.payment_number }}
|
||||
@ -211,12 +216,13 @@
|
||||
font-semibold
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
dark:text-white
|
||||
"
|
||||
:amount="payment?.amount"
|
||||
:currency="payment.customer?.currency"
|
||||
/>
|
||||
|
||||
<div class="text-sm text-right text-gray-500 non-italic">
|
||||
<div class="text-sm text-right text-gray-500 non-italic dark:text-gray-400">
|
||||
{{ payment.formatted_payment_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -227,7 +233,7 @@
|
||||
</div>
|
||||
<p
|
||||
v-if="!paymentList?.length && !isLoading"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $t('payments.no_matching_payments') }}
|
||||
</p>
|
||||
|
||||
@ -152,6 +152,7 @@ onSearched = debounce(onSearched, 500)
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -164,6 +165,7 @@ onSearched = debounce(onSearched, 500)
|
||||
pb-2
|
||||
border border-gray-200 border-solid
|
||||
height-full
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div class="mb-6">
|
||||
@ -192,9 +194,10 @@ onSearched = debounce(onSearched, 500)
|
||||
px-2
|
||||
py-1
|
||||
pb-2
|
||||
mb-1 mb-2
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -243,6 +246,7 @@ onSearched = debounce(onSearched, 500)
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
base-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div v-for="(invoice, index) in invoiceList" :key="index">
|
||||
@ -251,9 +255,9 @@ onSearched = debounce(onSearched, 500)
|
||||
:id="'recurring-invoice-' + invoice.id"
|
||||
:to="`/admin/recurring-invoices/${invoice.id}/view`"
|
||||
:class="[
|
||||
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
|
||||
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid':
|
||||
'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
|
||||
hasActiveUrl(invoice.id),
|
||||
},
|
||||
]"
|
||||
@ -273,6 +277,7 @@ onSearched = debounce(onSearched, 500)
|
||||
text-black
|
||||
capitalize
|
||||
truncate
|
||||
dark:text-white
|
||||
"
|
||||
/>
|
||||
|
||||
@ -285,6 +290,7 @@ onSearched = debounce(onSearched, 500)
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-600
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ invoice.invoice_number }}
|
||||
@ -307,6 +313,7 @@ onSearched = debounce(onSearched, 500)
|
||||
font-semibold
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
dark:text-white
|
||||
"
|
||||
:amount="invoice.total"
|
||||
:currency="invoice.customer.currency"
|
||||
@ -320,6 +327,7 @@ onSearched = debounce(onSearched, 500)
|
||||
leading-5
|
||||
text-right text-gray-600
|
||||
est-date
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ invoice.formatted_starts_at }}
|
||||
@ -332,7 +340,7 @@ onSearched = debounce(onSearched, 500)
|
||||
</div>
|
||||
<p
|
||||
v-if="!invoiceList?.length && !isLoading"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $t('invoices.no_matching_invoices') }}
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user