mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
Compare commits
13 Commits
dark-label
...
dark-switc
| Author | SHA1 | Date | |
|---|---|---|---|
| 9d49d7f1b1 | |||
| d1ab4a8021 | |||
| 45aaee72d8 | |||
| f4bc78ce98 | |||
| ba769864d4 | |||
| de235a91e5 | |||
| 18dc88682c | |||
| deb039ba02 | |||
| 7e80bfb507 | |||
| 8a5632c7d6 | |||
| 1a4309ca69 | |||
| 3b3da13218 | |||
| 5440b0f354 |
@ -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)"
|
||||
/>
|
||||
|
||||
@ -30,7 +30,22 @@
|
||||
<template v-if="userStore.hasAbilities(ability)" #action>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
w-full
|
||||
px-2
|
||||
py-2
|
||||
bg-gray-200
|
||||
border-none
|
||||
outline-none
|
||||
cursor-pointer
|
||||
dark:bg-gray-600/70
|
||||
dark:backdrop-blur-xl
|
||||
dark:shadow-glass
|
||||
dark:hover:bg-gray-600/80
|
||||
"
|
||||
@click="openTaxModal"
|
||||
>
|
||||
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
|
||||
@ -53,7 +68,7 @@
|
||||
<BaseIcon
|
||||
v-if="taxes.length && index !== taxes.length - 1"
|
||||
name="TrashIcon"
|
||||
class="h-5 text-gray-700 cursor-pointer"
|
||||
class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
|
||||
@click="removeTax(index)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,155 +1,172 @@
|
||||
<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="
|
||||
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
|
||||
dark:text-white dark:border-white/10
|
||||
"
|
||||
>
|
||||
<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
|
||||
dark:text-white dark:border-white/10
|
||||
"
|
||||
>
|
||||
<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
|
||||
dark:text-white dark:border-white/10
|
||||
"
|
||||
>
|
||||
<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 === '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
|
||||
dark:text-white dark:border-white/10
|
||||
"
|
||||
>
|
||||
<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
|
||||
dark:text-white dark:border-white/10
|
||||
"
|
||||
>
|
||||
<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>
|
||||
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
px-4
|
||||
md:px-8
|
||||
py-1.5
|
||||
dark:text-gray-200
|
||||
"
|
||||
>
|
||||
{{ $tc('settings.roles.permission', 2) }}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="h-screen overflow-y-auto text-base">
|
||||
<div class="h-screen overflow-y-auto text-base dark:bg-gray-800/80 dark:text-white">
|
||||
<NotificationRoot />
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container px-4 mx-auto">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
|
||||
<div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100 dark:bg-gray-900">
|
||||
<NotificationRoot />
|
||||
|
||||
<div
|
||||
|
||||
@ -68,10 +68,8 @@
|
||||
</TransitionChild>
|
||||
<div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center shrink-0 px-4 mb-10">
|
||||
<MainLogo
|
||||
class="block h-auto max-w-full w-36 text-primary-400"
|
||||
alt="Crater Logo"
|
||||
/>
|
||||
<img class="h-auto max-w-full w-36 hidden dark:block" :src="getDarkLogo"/>
|
||||
<img class="h-auto max-w-full w-36 block dark:hidden" :src="getLightLogo"/>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
@ -95,7 +93,7 @@
|
||||
:name="item.icon"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-500 '
|
||||
? 'text-primary-500 dark:text-primary-400'
|
||||
: 'text-gray-400',
|
||||
'mr-4 shrink-0 h-5 w-5',
|
||||
]"
|
||||
@ -151,7 +149,7 @@
|
||||
:name="item.icon"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
|
||||
? 'text-primary-500 dark:text-primary-400'
|
||||
: 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
|
||||
'mr-4 shrink-0 h-5 w-5 ',
|
||||
]"
|
||||
@ -167,8 +165,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MainLogo from '@/scripts/components/icons/MainLogo.vue'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
@ -183,6 +180,9 @@ import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
|
||||
const route = useRoute()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const getDarkLogo = computed(() => new URL('/img/logo-white.png', import.meta.url))
|
||||
const getLightLogo = computed(() => new URL('/img/crater-logo.png', import.meta.url))
|
||||
|
||||
function hasActiveUrl(url) {
|
||||
return route.path.indexOf(url) > -1
|
||||
}
|
||||
|
||||
@ -34,8 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
|
||||
isAppLoaded: false,
|
||||
isSidebarOpen: false,
|
||||
areCurrenciesLoading: false,
|
||||
isDarkModeOn: false,
|
||||
|
||||
isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
|
||||
downloadReport: null,
|
||||
}),
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="mt-4 mb-4 text-sm">
|
||||
<router-link
|
||||
to="/login"
|
||||
class="text-sm text-primary-400 hover:text-gray-700"
|
||||
class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
|
||||
>
|
||||
{{ $t('general.back_to_login') }}
|
||||
</router-link>
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<div class="mb-4">
|
||||
<router-link
|
||||
to="forgot-password"
|
||||
class="text-sm text-primary-400 hover:text-gray-700"
|
||||
class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
|
||||
>
|
||||
{{ $t('login.forgot_password') }}
|
||||
</router-link>
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
</span>
|
||||
</template>
|
||||
<BaseDropdownItem @click="removeMultipleCustomers">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -154,7 +154,7 @@
|
||||
:text="row.data.name"
|
||||
:length="30"
|
||||
tag="span"
|
||||
class="font-medium text-primary-500 flex flex-col"
|
||||
class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
|
||||
/>
|
||||
<BaseText
|
||||
:text="row.data.contact_name ? row.data.contact_name : ''"
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
|
||||
:to="`/admin/estimates/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem class="">
|
||||
<BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
|
||||
<BaseDropdownItem v-slot="slotProps">
|
||||
<BaseIcon name="DocumentIcon" :class="slotProps.class" />
|
||||
{{ $t('estimates.new_estimate') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
@ -44,8 +44,8 @@
|
||||
v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
|
||||
:to="`/admin/invoices/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
|
||||
<BaseDropdownItem v-slot="slotProps">
|
||||
<BaseIcon name="DocumentTextIcon" :class="slotProps.class" />
|
||||
{{ $t('invoices.new_invoice') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
@ -54,8 +54,8 @@
|
||||
v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
|
||||
:to="`/admin/payments/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
|
||||
<BaseDropdownItem v-slot="slotProps">
|
||||
<BaseIcon name="CreditCardIcon" :class="slotProps.class" />
|
||||
{{ $t('payments.new_payment') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
@ -64,8 +64,8 @@
|
||||
v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
|
||||
:to="`/admin/expenses/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
|
||||
<BaseDropdownItem v-slot="slotProps">
|
||||
<BaseIcon name="CalculatorIcon" :class="slotProps.class" />
|
||||
{{ $t('expenses.new_expense') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -25,6 +26,7 @@
|
||||
pb-2
|
||||
border border-gray-200 border-solid
|
||||
height-full
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -59,6 +61,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -114,6 +117,7 @@
|
||||
border-l border-gray-200 border-solid
|
||||
sidebar
|
||||
base-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<div v-for="(customer, index) in customerList" :key="index">
|
||||
@ -122,9 +126,9 @@
|
||||
:id="'customer-' + customer.id"
|
||||
:to="`/admin/customers/${customer.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:border-primary-400 dark:bg-gray-700':
|
||||
hasActiveUrl(customer.id),
|
||||
},
|
||||
]"
|
||||
@ -143,6 +147,7 @@
|
||||
text-black
|
||||
capitalize
|
||||
truncate
|
||||
dark:text-white
|
||||
"
|
||||
/>
|
||||
|
||||
@ -157,6 +162,7 @@
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-600
|
||||
dark:text-gray-400
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
@ -175,7 +181,7 @@
|
||||
</div>
|
||||
<p
|
||||
v-if="!customerList?.length && !isFetching"
|
||||
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('customers.no_matching_customers') }}
|
||||
</p>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<template #cell-user="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `invoices/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.customer.name }}
|
||||
</router-link>
|
||||
@ -78,7 +78,7 @@
|
||||
<template #cell-user="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `estimates/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.customer.name }}
|
||||
</router-link>
|
||||
|
||||
@ -164,7 +164,7 @@
|
||||
</template>
|
||||
|
||||
<BaseDropdownItem @click="removeMultipleEstimates">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -205,7 +205,7 @@
|
||||
<template #cell-estimate_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `estimates/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.estimate_number }}
|
||||
</router-link>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -135,7 +135,7 @@
|
||||
v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
|
||||
@click="removeMultipleExpenses"
|
||||
>
|
||||
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -171,7 +171,7 @@
|
||||
<template #cell-name="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `expenses/${row.data.id}/edit` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.expense_category.name }}
|
||||
</router-link>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-between w-full pt-10">
|
||||
<LightDarkButton class="absolute z-10 top-2 right-2"/>
|
||||
<img
|
||||
id="logo-crater"
|
||||
src="/img/crater-logo.png"
|
||||
@ -29,6 +30,7 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
|
||||
import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
|
||||
import { useInstallationStore } from '@/scripts/admin/stores/installation'
|
||||
import { useRouter } from 'vue-router'
|
||||
import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -40,6 +42,7 @@ export default {
|
||||
step_6: Step6AccountSettings,
|
||||
step_7: Step7CompanyInfo,
|
||||
step_8: Step8CompanyPreferences,
|
||||
LightDarkButton
|
||||
},
|
||||
|
||||
setup() {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="mb-6">
|
||||
<div
|
||||
v-if="phpSupportInfo"
|
||||
class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4"
|
||||
class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-white/10"
|
||||
>
|
||||
<div class="col-span-2 text-sm">
|
||||
{{
|
||||
@ -32,7 +32,7 @@
|
||||
<div
|
||||
v-for="(requirement, index) in requirements"
|
||||
:key="index"
|
||||
class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4"
|
||||
class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 dark:border-gray-600 lg:gap-24 sm:gap-4"
|
||||
>
|
||||
<div class="col-span-2 text-sm">
|
||||
{{ index }}
|
||||
|
||||
@ -8,12 +8,7 @@
|
||||
<div
|
||||
v-for="(permission, index) in 3"
|
||||
:key="index"
|
||||
class="
|
||||
grid grid-flow-row grid-cols-3
|
||||
lg:gap-24
|
||||
sm:gap-4
|
||||
border border-gray-200
|
||||
"
|
||||
class="grid grid-flow-row grid-cols-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-gray-600"
|
||||
>
|
||||
<BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
|
||||
</div>
|
||||
@ -29,7 +24,7 @@
|
||||
<div
|
||||
v-for="(permission, index) in permissions"
|
||||
:key="index"
|
||||
class="border border-gray-200"
|
||||
class="border border-gray-200 dark:border-gray-600"
|
||||
>
|
||||
<div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
|
||||
<div class="col-span-2 p-3">
|
||||
@ -38,11 +33,11 @@
|
||||
<div class="p-3 text-right">
|
||||
<span
|
||||
v-if="permission.isSet"
|
||||
class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-green-500"
|
||||
class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-red-500"
|
||||
class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
|
||||
/>
|
||||
<span>{{ permission.permission }}</span>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<BaseWizardStep
|
||||
:title="$t('wizard.database.database')"
|
||||
:description="$t('wizard.database.desc')"
|
||||
step-container="w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded md:w-full"
|
||||
>
|
||||
<component
|
||||
:is="databaseData.database_connection"
|
||||
|
||||
@ -18,18 +18,18 @@
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
|
||||
<ul class="w-full text-gray-600 list-disc list-inside">
|
||||
<p class="mt-4 mb-0 text-sm text-gray-600 dark:text-white">Notes:</p>
|
||||
<ul class="w-full text-gray-600 list-disc list-inside dark:text-gray-300">
|
||||
<li class="text-sm leading-8">
|
||||
App domain should not contain
|
||||
<b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> or
|
||||
<b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> in front of
|
||||
<b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">https://</b> or
|
||||
<b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">http</b> in front of
|
||||
the domain.
|
||||
</li>
|
||||
<li class="text-sm leading-8">
|
||||
If you're accessing the website on a different port, please mention the
|
||||
port. For example:
|
||||
<b class="inline-block px-1 bg-gray-100">localhost:8080</b>
|
||||
<b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">localhost:8080</b>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@ -68,13 +68,15 @@
|
||||
@input="v$.userForm.password.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<EyeOffIcon
|
||||
<BaseIcon
|
||||
v-if="isShowPassword"
|
||||
name="EyeOffIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<EyeIcon
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<BaseWizardStep
|
||||
:title="$t('wizard.company_info')"
|
||||
:description="$t('wizard.company_info_desc')"
|
||||
step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
|
||||
>
|
||||
<form action="" @submit.prevent="next">
|
||||
<div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<BaseWizardStep
|
||||
:title="$t('wizard.preferences')"
|
||||
:description="$t('wizard.preferences_desc')"
|
||||
step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
|
||||
>
|
||||
<form action="" @submit.prevent="next">
|
||||
<div>
|
||||
|
||||
@ -178,7 +178,7 @@
|
||||
</template>
|
||||
|
||||
<BaseDropdownItem @click="removeMultipleInvoices">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -220,7 +220,7 @@
|
||||
<template #cell-invoice_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `invoices/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.invoice_number }}
|
||||
</router-link>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
</span>
|
||||
</template>
|
||||
<BaseDropdownItem @click="removeMultipleItems">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -153,7 +153,7 @@
|
||||
<template #cell-name="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `items/${row.data.id}/edit` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.name }}
|
||||
</router-link>
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
</span>
|
||||
</template>
|
||||
<BaseDropdownItem @click="removeMultiplePayments">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -158,7 +158,7 @@
|
||||
<template #cell-payment_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `payments/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.payment_number }}
|
||||
</router-link>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -151,12 +151,12 @@
|
||||
"
|
||||
>
|
||||
{{ $t('general.actions') }}
|
||||
<BaseIcon name="ChevronDownIcon" class="h-5" />
|
||||
<BaseIcon name="ChevronDownIcon"/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<BaseDropdownItem @click="removeMultipleRecurringInvoices()">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -204,7 +204,7 @@
|
||||
:text="row.data.customer.name"
|
||||
:length="30"
|
||||
tag="span"
|
||||
class="font-medium text-primary-500 flex flex-col"
|
||||
class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
|
||||
/>
|
||||
|
||||
<BaseText
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
<tr
|
||||
v-for="(ext, i) in requiredExtentions"
|
||||
:key="i"
|
||||
class="p-2 border-2 border-gray-200"
|
||||
class="p-2 border-2 border-gray-200 dark:border-gray-600"
|
||||
>
|
||||
<td width="70%" class="p-2 text-sm truncate">
|
||||
{{ i }}
|
||||
@ -121,7 +121,7 @@
|
||||
{{ $t('settings.update_app.update_progress') }}
|
||||
</h6>
|
||||
<p
|
||||
class="mb-8 text-sm leading-snug text-gray-500"
|
||||
class="mb-8 text-sm leading-snug text-gray-500 dark:text-gray-400"
|
||||
style="max-width: 480px"
|
||||
>
|
||||
{{ $t('settings.update_app.progress_text') }}
|
||||
@ -135,11 +135,11 @@
|
||||
<li
|
||||
v-for="step in updateSteps"
|
||||
:key="step.stepUrl"
|
||||
class="flex justify-between w-full py-3 border-b border-gray-200 border-solid last:border-b-0"
|
||||
class="flex justify-between w-full py-3 border-b border-gray-200 dark:border-gray-600 border-solid last:border-b-0"
|
||||
>
|
||||
<p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
|
||||
<p class="m-0 text-sm dark:text-gray-300 leading-8">{{ $t(step.translationKey) }}</p>
|
||||
<div class="flex flex-row items-center">
|
||||
<span v-if="step.time" class="mr-3 text-xs text-gray-500">
|
||||
<span v-if="step.time" class="mr-3 text-xs text-gray-500 dark:text-gray-300">
|
||||
{{ step.time }}
|
||||
</span>
|
||||
<span
|
||||
@ -275,7 +275,7 @@ function statusClass(step) {
|
||||
case 'running':
|
||||
return 'text-blue-400 bg-blue-100'
|
||||
case 'error':
|
||||
return 'text-danger bg-red-200'
|
||||
return 'text-red-400 bg-red-200'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
|
||||
@ -51,27 +51,12 @@
|
||||
<BaseInput
|
||||
v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
|
||||
:content-loading="isFetchingInitialData"
|
||||
:type="getInputType"
|
||||
type="password"
|
||||
name="mailgun_secret"
|
||||
autocomplete="off"
|
||||
:invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
|
||||
@input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
v-if="isShowPassword"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
name="EyeOffIcon"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
name="EyeIcon"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
</BaseInput>
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
@ -184,15 +169,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
|
||||
const mailDriverStore = useMailDriverStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
let isShowPassword = ref(false)
|
||||
|
||||
const getInputType = computed(() => {
|
||||
if (isShowPassword.value) {
|
||||
return 'text'
|
||||
}
|
||||
return 'password'
|
||||
})
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
mailgunConfig: {
|
||||
|
||||
@ -146,27 +146,12 @@
|
||||
<BaseInput
|
||||
v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
|
||||
:content-loading="isFetchingInitialData"
|
||||
:type="getInputType"
|
||||
type="password"
|
||||
name="mail_ses_secret"
|
||||
autocomplete="off"
|
||||
:invalid="v$.sesConfig.mail_ses_secret.$error"
|
||||
@input="v$.sesConfig.mail_ses_secret.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
v-if="isShowPassword"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
name="EyeOffIcon"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
name="EyeIcon"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
</BaseInput>
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
|
||||
@ -223,7 +208,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
|
||||
const mailDriverStore = useMailDriverStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
let isShowPassword = ref(false)
|
||||
const encryptions = reactive(['tls', 'ssl', 'starttls'])
|
||||
|
||||
const rules = computed(() => {
|
||||
@ -264,13 +248,6 @@ const v$ = useVuelidate(
|
||||
computed(() => mailDriverStore)
|
||||
)
|
||||
|
||||
const getInputType = computed(() => {
|
||||
if (isShowPassword.value) {
|
||||
return 'text'
|
||||
}
|
||||
return 'password'
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
for (const key in mailDriverStore.sesConfig) {
|
||||
if (props.configData.hasOwnProperty(key)) {
|
||||
|
||||
@ -58,24 +58,9 @@
|
||||
<BaseInput
|
||||
v-model.trim="mailDriverStore.smtpConfig.mail_password"
|
||||
:content-loading="isFetchingInitialData"
|
||||
:type="getInputType"
|
||||
type="password"
|
||||
name="password"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
v-if="isShowPassword"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
name="EyeOffIcon"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
name="EyeIcon"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
</BaseInput>
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
@ -209,17 +194,8 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
|
||||
|
||||
const mailDriverStore = useMailDriverStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
let isShowPassword = ref(false)
|
||||
const encryptions = reactive(['tls', 'ssl', 'starttls'])
|
||||
|
||||
const getInputType = computed(() => {
|
||||
if (isShowPassword.value) {
|
||||
return 'text'
|
||||
}
|
||||
return 'password'
|
||||
})
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
smtpConfig: {
|
||||
|
||||
@ -118,11 +118,11 @@
|
||||
"
|
||||
>
|
||||
{{ $t('general.actions') }}
|
||||
<BaseIcon name="ChevronDownIcon" class="h-5" />
|
||||
<BaseIcon name="ChevronDownIcon"/>
|
||||
</span>
|
||||
</template>
|
||||
<BaseDropdownItem @click="removeMultipleUsers">
|
||||
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@ -158,7 +158,7 @@
|
||||
<template #cell-name="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `users/${row.data.id}/edit` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.name }}
|
||||
</router-link>
|
||||
|
||||
@ -93,6 +93,7 @@
|
||||
rounded-full
|
||||
text-primary-500
|
||||
dark:bg-gray-600
|
||||
dark:text-primary-400
|
||||
"
|
||||
>
|
||||
{{ initGenerator(customer.name) }}
|
||||
@ -141,6 +142,7 @@
|
||||
bg-gray-200
|
||||
rounded-full
|
||||
text-primary-500
|
||||
dark:text-primary-400
|
||||
dark:bg-gray-600
|
||||
"
|
||||
>
|
||||
|
||||
41
resources/scripts/components/LightDarkButton.vue
Normal file
41
resources/scripts/components/LightDarkButton.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
flex
|
||||
h-8
|
||||
w-8
|
||||
items-center
|
||||
justify-center
|
||||
rounded-md
|
||||
transition
|
||||
hover:bg-zinc-900/5
|
||||
dark:hover:bg-white/5
|
||||
"
|
||||
@click="onChange"
|
||||
>
|
||||
<BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
|
||||
<BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
|
||||
</button>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useGlobalStore } from '@/scripts/customer/stores/global'
|
||||
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
function onChange() {
|
||||
globalStore.isDarkModeOn = !globalStore.isDarkModeOn
|
||||
|
||||
if (globalStore.isDarkModeOn) {
|
||||
localStorage.theme = 'dark'
|
||||
document.documentElement.classList.add('dark')
|
||||
document.documentElement.style.setProperty('color-scheme', 'dark')
|
||||
} else {
|
||||
localStorage.theme = 'light'
|
||||
document.documentElement.classList.remove('dark')
|
||||
document.documentElement.style.setProperty('color-scheme', 'light')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -16,26 +16,28 @@ defineProps({
|
||||
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const enabled = ref(
|
||||
localStorage.getItem('theme') === 'dark' ||
|
||||
document.documentElement.classList.contains('dark')
|
||||
const isDark = ref(
|
||||
localStorage.getItem('theme') === 'dark'
|
||||
|| document.documentElement.classList.contains('dark'),
|
||||
)
|
||||
|
||||
globalStore.isDarkModeOn = enabled
|
||||
globalStore.isDarkModeOn = isDark
|
||||
|
||||
function onChange(val) {
|
||||
if (val) {
|
||||
localStorage.theme = 'dark'
|
||||
document.documentElement.classList.add('dark')
|
||||
document.documentElement.style.setProperty('color-scheme', 'dark')
|
||||
globalStore.isDarkModeOn = true
|
||||
} else {
|
||||
localStorage.theme = 'light'
|
||||
document.documentElement.classList.remove('dark')
|
||||
document.documentElement.style.setProperty('color-scheme', 'light')
|
||||
globalStore.isDarkModeOn = false
|
||||
}
|
||||
}
|
||||
const enabled = computed({
|
||||
get: () => globalStore.isDarkModeOn,
|
||||
set: (value) => {
|
||||
if (value) {
|
||||
localStorage.theme = 'dark'
|
||||
document.documentElement.classList.add('dark')
|
||||
document.documentElement.style.setProperty('color-scheme', 'dark')
|
||||
} else {
|
||||
localStorage.theme = 'light'
|
||||
document.documentElement.classList.remove('dark')
|
||||
document.documentElement.style.setProperty('color-scheme', 'light')
|
||||
}
|
||||
globalStore.isDarkModeOn = value
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -49,7 +51,6 @@ function onChange(val) {
|
||||
v-model="enabled"
|
||||
class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
|
||||
:class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
|
||||
@update:modelValue="onChange"
|
||||
>
|
||||
<span class="sr-only">Use setting</span>
|
||||
<span
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
:attributes="attrs"
|
||||
:model-config="config"
|
||||
:masks="masks"
|
||||
:is-dark="isDarkModeOn"
|
||||
:locale="global.locale"
|
||||
>
|
||||
<template
|
||||
@ -72,7 +73,7 @@
|
||||
|
||||
<template v-if="showExtraOptions" #footer>
|
||||
<div
|
||||
class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
|
||||
class="bg-gray-100 dark:bg-gray-800 grid grid-cols-3 gap-2 p-2 border-t dark:border-gray-500 rounded-b-lg"
|
||||
>
|
||||
<button type="button" class="extra-button" @click="moveToDate(sourceDate)">
|
||||
{{ global.t('date_picker.same_day') }}
|
||||
@ -146,7 +147,7 @@ const props = defineProps({
|
||||
defaultInputClass: {
|
||||
type: String,
|
||||
default:
|
||||
'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||
'border-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||
},
|
||||
time24hr: {
|
||||
type: Boolean,
|
||||
@ -163,7 +164,7 @@ const props = defineProps({
|
||||
sourceDate: {
|
||||
type: [String, Date],
|
||||
default: () => new Date(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
@ -175,6 +176,9 @@ const vCalendar = ref(null)
|
||||
const hasIconSlot = computed(() => {
|
||||
return !!slots.icon
|
||||
})
|
||||
const isDarkModeOn = computed(() =>
|
||||
document.documentElement.classList.contains('dark')
|
||||
)
|
||||
|
||||
const computedContainerClass = computed(() => {
|
||||
let containerClass = `${props.containerClass} `
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
|
||||
<input
|
||||
v-bind="$attrs"
|
||||
:type="type"
|
||||
:type="getType"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
@ -144,6 +144,44 @@
|
||||
>
|
||||
<slot name="right" :class="iconRightClass" />
|
||||
</div>
|
||||
<div
|
||||
v-if="loading && loadingPosition === 'right'" class="
|
||||
absolute
|
||||
inset-y-0
|
||||
right-0
|
||||
flex
|
||||
items-center
|
||||
pr-3
|
||||
pointer-events-none
|
||||
"
|
||||
>
|
||||
<svg
|
||||
class="animate-spin !text-primary-500" :class="[iconRightClass]" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24"
|
||||
>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||
<path
|
||||
class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-if="hasRightIconSlot" class="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<slot name="right" :class="iconRightClass" />
|
||||
</div>
|
||||
|
||||
<div v-if="type == 'password'" class="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<a
|
||||
v-if="isShowPassword" href="#" class="block" data-cy="eye" tabindex="-1"
|
||||
@click.prevent="isShowPassword = !isShowPassword"
|
||||
>
|
||||
<BaseIcon name="EyeOffIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
|
||||
</a>
|
||||
<a v-else href="#" class="block" data-cy="eye" tabindex="-1" @click.prevent="isShowPassword = !isShowPassword">
|
||||
<BaseIcon name="EyeIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -219,6 +257,15 @@ const slots = useSlots()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const isShowPassword = ref(false)
|
||||
|
||||
const getType = computed(() => {
|
||||
if (props.type === 'password')
|
||||
return isShowPassword.value ? 'text' : 'password'
|
||||
|
||||
return props.type
|
||||
})
|
||||
|
||||
const hasLeftIconSlot = computed(() => {
|
||||
return !!slots.left || (props.loading && props.loadingPosition === 'left')
|
||||
})
|
||||
|
||||
@ -29,14 +29,12 @@
|
||||
text-left
|
||||
bg-white
|
||||
dark:bg-gray-700
|
||||
border border-gray-200
|
||||
rounded-md
|
||||
shadow-sm
|
||||
cursor-default
|
||||
focus:outline-none
|
||||
focus:ring-1
|
||||
focus:ring-primary-500
|
||||
focus:border-primary-500
|
||||
focus:ring-primary-400 focus:border-primary-400
|
||||
sm:text-sm
|
||||
"
|
||||
>
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
:class="containerClass"
|
||||
class="
|
||||
relative
|
||||
after:bg-gray-200
|
||||
after:absolute
|
||||
after:transform
|
||||
after:top-1/2
|
||||
after:-translate-y-1/2
|
||||
after:h-2
|
||||
after:w-full
|
||||
"
|
||||
class="relative after:bg-gray-200 dark:after:bg-gray-700 after:absolute after:transform after:top-1/2 after:-translate-y-1/2 after:h-2 after:w-full"
|
||||
>
|
||||
<a
|
||||
v-for="(number, index) in steps"
|
||||
@ -58,21 +49,21 @@ export default {
|
||||
},
|
||||
currentStepClass: {
|
||||
type: String,
|
||||
default: 'bg-white border-primary-500',
|
||||
default: 'bg-white border-primary-500 dark:bg-gray-600 dark:border-gray-500 dark:border-primary-600',
|
||||
},
|
||||
nextStepClass: {
|
||||
type: String,
|
||||
default: 'border-gray-200 bg-white',
|
||||
default: 'border-gray-200 bg-white dark:bg-gray-600 dark:border-gray-500',
|
||||
},
|
||||
previousStepClass: {
|
||||
type: String,
|
||||
default:
|
||||
'bg-primary-500 border-primary-500 flex justify-center items-center',
|
||||
'bg-primary-500 dark:bg-primary-600 border-primary-500 flex justify-center items-center dark:border-primary-600',
|
||||
},
|
||||
iconClass: {
|
||||
type: String,
|
||||
default:
|
||||
'flex items-center justify-center w-full h-full text-sm font-black text-center text-white',
|
||||
'flex items-center justify-center w-full h-full text-sm font-black text-center text-white dark:text-gray-400',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<slot />
|
||||
<BaseDarkHighlight class="z-[-1]"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -25,16 +26,16 @@ const props = defineProps({
|
||||
stepContainerClass: {
|
||||
type: String,
|
||||
default:
|
||||
'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded',
|
||||
'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10',
|
||||
},
|
||||
stepTitleClass: {
|
||||
type: String,
|
||||
default: 'text-2xl not-italic font-semibold leading-7 text-black',
|
||||
default: 'text-2xl not-italic font-semibold leading-7 text-black dark:text-white',
|
||||
},
|
||||
stepDescriptionClass: {
|
||||
type: String,
|
||||
default:
|
||||
'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 lg:w-7/12 md:w-7/12 sm:w-7/12',
|
||||
'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 dark:text-gray-300 lg:w-7/12 md:w-7/12 sm:w-7/12',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -5,27 +5,30 @@
|
||||
viewBox="0 0 50 50"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:class="colorClass"
|
||||
>
|
||||
<circle cx="25" cy="25" r="25" fill="#EAF1FB" />
|
||||
<circle cx="25" cy="25" r="25" :class="bgColor" />
|
||||
<path
|
||||
d="M17.8 17.8C17.1635 17.8 16.5531 18.0529 16.103 18.503C15.6529 18.9531 15.4 19.5635 15.4 20.2V21.4H34.6V20.2C34.6 19.5635 34.3472 18.9531 33.8971 18.503C33.447 18.0529 32.8365 17.8 32.2 17.8H17.8Z"
|
||||
fill="currentColor"
|
||||
:class="color"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M34.6 23.8H15.4V29.8C15.4 30.4366 15.6529 31.047 16.103 31.4971C16.5531 31.9472 17.1635 32.2 17.8 32.2H32.2C32.8365 32.2 33.447 31.9472 33.8971 31.4971C34.3472 31.047 34.6 30.4366 34.6 29.8V23.8ZM17.8 28.6C17.8 28.2818 17.9265 27.9766 18.1515 27.7515C18.3765 27.5265 18.6818 27.4 19 27.4H20.2C20.5183 27.4 20.8235 27.5265 21.0486 27.7515C21.2736 27.9766 21.4 28.2818 21.4 28.6C21.4 28.9183 21.2736 29.2235 21.0486 29.4486C20.8235 29.6736 20.5183 29.8 20.2 29.8H19C18.6818 29.8 18.3765 29.6736 18.1515 29.4486C17.9265 29.2235 17.8 28.9183 17.8 28.6ZM23.8 27.4C23.4818 27.4 23.1765 27.5265 22.9515 27.7515C22.7265 27.9766 22.6 28.2818 22.6 28.6C22.6 28.9183 22.7265 29.2235 22.9515 29.4486C23.1765 29.6736 23.4818 29.8 23.8 29.8H25C25.3183 29.8 25.6235 29.6736 25.8486 29.4486C26.0736 29.2235 26.2 28.9183 26.2 28.6C26.2 28.2818 26.0736 27.9766 25.8486 27.7515C25.6235 27.5265 25.3183 27.4 25 27.4H23.8Z"
|
||||
fill="currentColor"
|
||||
:class="color"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
colorClass: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'fill-primary-500 dark:fill-white',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'text-primary-500',
|
||||
default: 'fill-gray-100 dark:fill-primary-400',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<path
|
||||
d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
|
||||
fill="white"
|
||||
class="dark:fill-gray-900"
|
||||
fill-opacity="0.1"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<!-- <SiteSidebar /> -->
|
||||
|
||||
<main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
|
||||
<main class="h-screen min-h-0 pb-16 mt-16 overflow-y-auto">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -1,31 +1,24 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
min-h-screen
|
||||
bg-gray-200
|
||||
flex flex-col
|
||||
justify-center
|
||||
py-12
|
||||
sm:px-6
|
||||
lg:px-8
|
||||
"
|
||||
class="flex flex-col justify-center h-full min-h-screen py-12 overflow-hidden bg-gray-100 sm:px-6 lg:px-8 dark:bg-gray-800/80 dark:text-white font-base "
|
||||
>
|
||||
<NotificationRoot />
|
||||
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
|
||||
<div class="px-4 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
|
||||
<MainLogo
|
||||
v-if="!customerLogo"
|
||||
class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
|
||||
class="block w-48 h-auto max-w-full mx-auto text-primary-400"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
:src="customerLogo"
|
||||
class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
|
||||
class="block w-48 h-auto max-w-full mx-auto text-primary-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
|
||||
<div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
|
||||
<div class="px-4 mt-8 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
|
||||
<div class="px-4 py-8 bg-white rounded-lg shadow sm:px-10 dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10">
|
||||
<BaseDarkHighlight/>
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
<Disclosure
|
||||
v-slot="{ open }"
|
||||
as="nav"
|
||||
class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full"
|
||||
class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full dark:bg-gray-800"
|
||||
>
|
||||
<BaseDarkHighlight />
|
||||
<div class="mx-auto px-8">
|
||||
<div class="flex justify-between h-16 w-full">
|
||||
<div class="flex">
|
||||
@ -33,8 +34,8 @@
|
||||
:to="`/${globalStore.companySlug}${item.link}`"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'border-primary-500 text-primary-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
|
||||
? 'text-primary-600 border-primary-600 dark:border-primary-400 dark:text-primary-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
|
||||
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
|
||||
]"
|
||||
>
|
||||
@ -43,20 +44,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
bg-white
|
||||
p-1
|
||||
rounded-full
|
||||
text-gray-400
|
||||
hover:text-gray-500
|
||||
focus:outline-none
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-primary-500
|
||||
"
|
||||
></button>
|
||||
<!-- Dark mode Toggle -->
|
||||
<LightDarkButton/>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
|
||||
@ -85,7 +74,7 @@
|
||||
<router-link :to="{ name: 'customer.profile' }">
|
||||
<BaseDropdownItem>
|
||||
<CogIcon
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('navigation.settings') }}
|
||||
@ -94,7 +83,7 @@
|
||||
|
||||
<BaseDropdownItem @click="logout">
|
||||
<LogoutIcon
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('navigation.logout') }}
|
||||
@ -118,6 +107,8 @@
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-primary-500
|
||||
dark:bg-gray-700
|
||||
dark:focus:ring-offset-gray-900
|
||||
"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
@ -136,43 +127,31 @@
|
||||
:to="`/${globalStore.companySlug}${item.link}`"
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'bg-primary-50 border-primary-500 text-primary-700'
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
|
||||
? 'bg-primary-50 border-primary-500 text-primary-700 dark:bg-gray-700 dark:text-primary-400'
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
|
||||
'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
|
||||
]"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>{{ item.title }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-gray-200">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
{{ globalStore.currentUser.title }}
|
||||
<div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
|
||||
<div class="flex items-center justify-between pr-5">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500">
|
||||
{{ globalStore.currentUser.email }}
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
{{ globalStore.currentUser.title }}
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-200">
|
||||
{{ globalStore.currentUser.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
ml-auto
|
||||
bg-white
|
||||
shrink-0
|
||||
p-1
|
||||
rounded-full
|
||||
text-gray-400
|
||||
hover:text-gray-500
|
||||
focus:outline-none
|
||||
focus:ring-2
|
||||
focus:ring-offset-2
|
||||
focus:ring-primary-500
|
||||
"
|
||||
></button>
|
||||
</div>
|
||||
<!-- Dark mode Toggle -->
|
||||
<LightDarkButton/>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<router-link
|
||||
@ -182,7 +161,7 @@
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'bg-primary-50 border-primary-500 text-primary-700'
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
|
||||
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
|
||||
'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
|
||||
]"
|
||||
>{{ item.title }}</router-link
|
||||
@ -199,6 +178,7 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useGlobalStore } from '@/scripts/customer/stores/global'
|
||||
import MainLogo from '@/scripts/components/icons/MainLogo.vue'
|
||||
import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
|
||||
import {
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
|
||||
@ -13,7 +13,8 @@ export const useGlobalStore = defineStore({
|
||||
currentUser: null,
|
||||
companySlug: '',
|
||||
mainMenu: null,
|
||||
enabledModules: []
|
||||
enabledModules: [],
|
||||
isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
|
||||
}),
|
||||
|
||||
actions: {
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
<div class="mt-4 mb-4 text-sm">
|
||||
<router-link
|
||||
to="login"
|
||||
class="text-sm text-primary-400 hover:text-gray-700"
|
||||
class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
|
||||
>
|
||||
{{ $t('general.back_to_login') }}
|
||||
</router-link>
|
||||
|
||||
@ -32,30 +32,15 @@
|
||||
>
|
||||
<BaseInput
|
||||
v-model="authStore.loginData.password"
|
||||
:type="getInputType"
|
||||
:invalid="v$.loginData.password.$error"
|
||||
type="password"
|
||||
@input="v$.loginData.password.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
v-if="isShowPassword"
|
||||
name="EyeOffIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
</BaseInput>
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
<div class="flex items-center justify-between">
|
||||
<router-link
|
||||
:to="{ name: 'customer.forgot-password' }"
|
||||
class="text-sm text-primary-600 hover:text-gray-500"
|
||||
class="text-sm text-primary-400 hover:text-gray-500 dark:hover:text-primary-500"
|
||||
>
|
||||
{{ $t('login.forgot_password') }}
|
||||
</router-link>
|
||||
@ -91,14 +76,6 @@ const authStore = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
let isLoading = ref(false)
|
||||
const isShowPassword = ref(false)
|
||||
|
||||
const getInputType = computed(() => {
|
||||
if (isShowPassword.value) {
|
||||
return 'text'
|
||||
}
|
||||
return 'password'
|
||||
})
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
|
||||
@ -23,23 +23,11 @@
|
||||
>
|
||||
<BaseInput
|
||||
v-model="loginData.password"
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
type="password"
|
||||
name="password"
|
||||
:invalid="v$.password.$error"
|
||||
@input="v$.password.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<EyeOffIcon
|
||||
v-if="isShowPassword"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<EyeIcon
|
||||
v-else
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/> </template
|
||||
></BaseInput>
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
@ -93,7 +81,6 @@ const loginData = reactive({
|
||||
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
let isShowPassword = ref(false)
|
||||
let isLoading = ref(false)
|
||||
|
||||
const rules = computed(() => {
|
||||
|
||||
@ -12,18 +12,24 @@
|
||||
hover:bg-gray-50
|
||||
xl:p-4
|
||||
lg:col-span-2
|
||||
dark:backdrop-blur-xl
|
||||
dark:shadow-glass
|
||||
dark:border
|
||||
dark:border-white/10
|
||||
dark:bg-gray-800/70
|
||||
"
|
||||
:class="{ 'lg:!col-span-3': large }"
|
||||
:to="route"
|
||||
>
|
||||
<div>
|
||||
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
|
||||
<span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
|
||||
<slot />
|
||||
</span>
|
||||
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
|
||||
<span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
<BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
|
||||
<div class="flex items-center">
|
||||
<component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<BaseContentPlaceholders
|
||||
:rounded="true"
|
||||
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
|
||||
class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
|
||||
>
|
||||
<div>
|
||||
<BaseContentPlaceholdersText
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
shadow
|
||||
lg:col-span-2
|
||||
xl:p-4
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<div>
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
:to="{
|
||||
path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
|
||||
}"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.invoice_number }}
|
||||
</router-link>
|
||||
@ -73,7 +73,7 @@
|
||||
:to="{
|
||||
path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
|
||||
}"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.estimate_number }}
|
||||
</router-link>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
<template #cell-estimate_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `estimates/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.estimate_number }}
|
||||
</router-link>
|
||||
@ -119,11 +119,11 @@
|
||||
<template #cell-actions="{ row }">
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
|
||||
</template>
|
||||
<router-link :to="`estimates/${row.data.id}/view`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
@ -36,6 +36,7 @@
|
||||
pt-8
|
||||
pb-6
|
||||
border border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -70,6 +71,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -124,7 +126,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
|
||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
||||
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||
</BaseButton>
|
||||
@ -138,6 +140,7 @@
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
sw-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
@ -146,9 +149,9 @@
|
||||
:key="index"
|
||||
:to="`/${globalStore.companySlug}/customer/estimates/${estimate.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(estimate.id),
|
||||
},
|
||||
]"
|
||||
@ -164,6 +167,7 @@
|
||||
leading-5
|
||||
text-gray-500
|
||||
capitalize
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ estimate.estimate_number }}
|
||||
@ -184,11 +188,12 @@
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
block
|
||||
dark:text-white
|
||||
"
|
||||
:amount="estimate.total"
|
||||
:currency="estimate.currency"
|
||||
/>
|
||||
<div class="text-sm text-right text-gray-500 non-italic">
|
||||
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||
{{ estimate.formatted_estimate_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -196,7 +201,7 @@
|
||||
|
||||
<p
|
||||
v-if="!estimateStore.estimates.length"
|
||||
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>
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
<template #cell-invoice_number="{ row }">
|
||||
<router-link
|
||||
:to="{ path: `invoices/${row.data.id}/view` }"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.invoice_number }}
|
||||
</router-link>
|
||||
@ -126,11 +126,11 @@
|
||||
<template #cell-actions="{ row }">
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
|
||||
</template>
|
||||
<router-link :to="`invoices/${row.data.id}/view`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
@ -42,6 +42,7 @@
|
||||
pt-8
|
||||
pb-6
|
||||
border border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -76,6 +77,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -130,7 +132,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
|
||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
||||
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||
</BaseButton>
|
||||
@ -144,6 +146,7 @@
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
sw-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
@ -152,9 +155,9 @@
|
||||
:key="index"
|
||||
:to="`/${globalStore.companySlug}/customer/invoices/${invoice.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(invoice.id),
|
||||
},
|
||||
]"
|
||||
@ -170,6 +173,7 @@
|
||||
text-gray-500
|
||||
capitalize
|
||||
text-md
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ invoice.invoice_number }}
|
||||
@ -189,12 +193,13 @@
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
block
|
||||
dark:text-white
|
||||
"
|
||||
:amount="invoice.total"
|
||||
:currency="invoice.currency"
|
||||
/>
|
||||
|
||||
<div class="text-sm text-right text-gray-500 non-italic">
|
||||
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||
{{ invoice.formatted_invoice_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -202,7 +207,7 @@
|
||||
|
||||
<p
|
||||
v-if="!invoiceStore.invoices.length"
|
||||
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>
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
:to="{
|
||||
path: `payments/${row.data.id}/view`,
|
||||
}"
|
||||
class="font-medium text-primary-500"
|
||||
class="font-medium text-primary-500 dark:text-primary-400"
|
||||
>
|
||||
{{ row.data.payment_number }}
|
||||
</router-link>
|
||||
@ -111,11 +111,11 @@
|
||||
<template #cell-actions="{ row }">
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500" />
|
||||
<BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500 dark:text-gray-200" />
|
||||
</template>
|
||||
<router-link :to="`payments/${row.data.id}/view`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
|
||||
<BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
|
||||
class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
@ -30,6 +30,7 @@
|
||||
pt-8
|
||||
pb-6
|
||||
border border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
@ -64,6 +65,7 @@
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@ -118,7 +120,7 @@
|
||||
</div>
|
||||
</BaseDropdown>
|
||||
|
||||
<BaseButton class="ml-1" variant="white" @click="sortData">
|
||||
<BaseButton class="ml-1" variant="gray" @click="sortData">
|
||||
<BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
|
||||
<BaseIcon v-else name="SortDescendingIcon" class="h-5" />
|
||||
</BaseButton>
|
||||
@ -132,6 +134,7 @@
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
sw-scroll
|
||||
dark:border-gray-600
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
@ -140,9 +143,9 @@
|
||||
:key="index"
|
||||
:to="`/${globalStore.companySlug}/customer/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),
|
||||
},
|
||||
]"
|
||||
@ -158,6 +161,7 @@
|
||||
leading-5
|
||||
text-gray-500
|
||||
capitalize
|
||||
dark:text-gray-400
|
||||
"
|
||||
>
|
||||
{{ payment.payment_number }}
|
||||
@ -174,12 +178,13 @@
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
block
|
||||
dark:text-white
|
||||
"
|
||||
:amount="payment.amount"
|
||||
:currency="payment.currency"
|
||||
/>
|
||||
|
||||
<div class="text-sm text-right text-gray-500 non-italic">
|
||||
<div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
|
||||
{{ payment.formatted_payment_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -187,7 +192,7 @@
|
||||
|
||||
<p
|
||||
v-if="!paymentStore.payments.length"
|
||||
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>
|
||||
|
||||
@ -66,24 +66,10 @@
|
||||
>
|
||||
<BaseInput
|
||||
v-model="userStore.userForm.password"
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
type="password"
|
||||
:invalid="v$.userForm.password.$error"
|
||||
@input="v$.userForm.password.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
v-if="isShowPassword"
|
||||
name="EyeOffIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/> </template
|
||||
></BaseInput>
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
@ -95,24 +81,10 @@
|
||||
>
|
||||
<BaseInput
|
||||
v-model="userStore.userForm.confirm_password"
|
||||
:type="isShowConfirmPassword ? 'text' : 'password'"
|
||||
type="password"
|
||||
:invalid="v$.userForm.confirm_password.$error"
|
||||
@input="v$.userForm.confirm_password.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
v-if="isShowConfirmPassword"
|
||||
name="EyeOffIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowConfirmPassword = !isShowConfirmPassword"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowConfirmPassword = !isShowConfirmPassword"
|
||||
/> </template
|
||||
></BaseInput>
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
@ -151,8 +123,6 @@ const { t, tm } = useI18n()
|
||||
let imgFiles = ref([])
|
||||
let isSaving = ref(false)
|
||||
let avatarFileBlob = ref(null)
|
||||
let isShowPassword = ref(false)
|
||||
let isShowConfirmPassword = ref(false)
|
||||
const isCustomerAvatarRemoved = ref(false)
|
||||
|
||||
if (userStore.userForm.avatar) {
|
||||
|
||||
Reference in New Issue
Block a user