Add dark mode with CSS custom property theme system
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
px-4
|
||||
py-2
|
||||
rounded-lg
|
||||
bg-gray-300/40
|
||||
bg-surface-muted/40
|
||||
whitespace-nowrap
|
||||
flex-col
|
||||
mt-1
|
||||
@@ -18,7 +18,7 @@
|
||||
pr-10
|
||||
text-sm
|
||||
font-medium
|
||||
text-black
|
||||
text-heading
|
||||
truncate
|
||||
select-all select-color
|
||||
"
|
||||
|
||||
@@ -53,13 +53,13 @@
|
||||
ring-1 ring-black/5
|
||||
"
|
||||
>
|
||||
<div class="relative grid bg-white">
|
||||
<div class="relative grid bg-surface">
|
||||
<div class="relative p-4">
|
||||
<BaseInput
|
||||
v-model="textSearch"
|
||||
:placeholder="$t('general.search')"
|
||||
type="text"
|
||||
class="text-black"
|
||||
class="text-heading"
|
||||
>
|
||||
</BaseInput>
|
||||
</div>
|
||||
@@ -75,9 +75,9 @@
|
||||
class="
|
||||
px-6
|
||||
py-4
|
||||
border-b border-gray-200 border-solid
|
||||
border-b border-line-default border-solid
|
||||
cursor-pointer
|
||||
hover:bg-gray-100 hover:cursor-pointer
|
||||
hover:bg-surface-tertiary hover:cursor-pointer
|
||||
last:border-b-0
|
||||
"
|
||||
@click="selectNote(index, close)"
|
||||
@@ -89,7 +89,7 @@
|
||||
text-base
|
||||
font-semibold
|
||||
leading-tight
|
||||
text-gray-700
|
||||
text-body
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
@@ -98,8 +98,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex justify-center p-5 text-gray-400">
|
||||
<label class="text-base text-gray-500">
|
||||
<div v-else class="flex justify-center p-5 text-subtle">
|
||||
<label class="text-base text-muted">
|
||||
{{ $t('general.no_note_found') }}
|
||||
</label>
|
||||
</div>
|
||||
@@ -115,7 +115,7 @@
|
||||
w-full
|
||||
px-2
|
||||
py-3
|
||||
bg-gray-200
|
||||
bg-surface-muted
|
||||
border-none
|
||||
outline-hidden
|
||||
"
|
||||
|
||||
@@ -62,9 +62,23 @@ watchEffect(() => {
|
||||
|
||||
onMounted(() => {
|
||||
let context = graph.value.getContext('2d')
|
||||
const style = getComputedStyle(document.documentElement)
|
||||
const gridColor = style.getPropertyValue('--color-line-light').trim() || 'rgba(0,0,0,0.1)'
|
||||
const tickColor = style.getPropertyValue('--color-muted').trim() || '#6b7280'
|
||||
|
||||
let options = reactive({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: gridColor },
|
||||
ticks: { color: tickColor },
|
||||
},
|
||||
y: {
|
||||
grid: { color: gridColor },
|
||||
ticks: { color: tickColor },
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
@@ -91,16 +105,16 @@ onMounted(() => {
|
||||
fill: false,
|
||||
tension: 0.3,
|
||||
backgroundColor: 'rgba(230, 254, 249)',
|
||||
borderColor: '#040405',
|
||||
borderColor: tickColor,
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: '#040405',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderColor: tickColor,
|
||||
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: '#040405',
|
||||
pointHoverBackgroundColor: tickColor,
|
||||
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
@@ -118,7 +132,7 @@ onMounted(() => {
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: 'rgb(2, 201, 156)',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: 'rgb(2, 201, 156)',
|
||||
@@ -139,7 +153,7 @@ onMounted(() => {
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: 'rgb(255,0,0)',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: 'rgb(255,0,0)',
|
||||
@@ -160,7 +174,7 @@ onMounted(() => {
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: 'rgba(88, 81, 216, 1)',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: 'rgba(88, 81, 216, 1)',
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<h6 class="font-medium text-lg text-left">
|
||||
{{ $t('settings.exchange_rate.title') }}
|
||||
</h6>
|
||||
<p class="mt-2 text-sm leading-snug text-gray-500" style="max-width: 680px">
|
||||
<p class="mt-2 text-sm leading-snug text-muted" style="max-width: 680px">
|
||||
{{
|
||||
$t('settings.exchange_rate.description', {
|
||||
currency: companyStore.selectedCompanyCurrency.name,
|
||||
@@ -34,12 +34,12 @@
|
||||
@input="v.exchange_rate.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<span class="text-gray-500 sm:text-sm">
|
||||
<span class="text-muted sm:text-sm">
|
||||
{{ companyStore.selectedCompanyCurrency.code }}
|
||||
</span>
|
||||
</template>
|
||||
</BaseInput>
|
||||
<span class="text-gray-400 text-xs mt-2 font-light">
|
||||
<span class="text-subtle text-xs mt-2 font-light">
|
||||
{{
|
||||
$t('settings.exchange_rate.exchange_help_text', {
|
||||
currency: c.code,
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<router-link :to="`/admin/administration/companies/${row.id}/edit`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<router-link :to="`/admin/administration/users/${row.id}/edit`">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -20,7 +20,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="ArrowRightEndOnRectangleIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('administration.users.impersonate') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit customField -->
|
||||
@@ -11,7 +11,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -23,7 +23,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'customers.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- Edit Customer -->
|
||||
@@ -15,7 +15,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -32,7 +32,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -45,7 +45,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'estimates.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else class="text-gray-500" name="EllipsisHorizontalIcon" />
|
||||
<BaseIcon v-else class="text-muted" name="EllipsisHorizontalIcon" />
|
||||
</template>
|
||||
|
||||
<!-- Copy PDF url -->
|
||||
@@ -14,7 +14,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="LinkIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.copy_pdf_url') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -27,7 +27,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -40,7 +40,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -56,7 +56,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -69,7 +69,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="DocumentTextIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('estimates.clone_estimate') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -81,7 +81,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="DocumentTextIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('estimates.convert_to_invoice') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -97,7 +97,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="CheckCircleIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('estimates.mark_as_sent') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -113,7 +113,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="PaperAirplaneIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('estimates.send_estimate') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -122,7 +122,7 @@
|
||||
<BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
|
||||
<BaseIcon
|
||||
name="PaperAirplaneIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('estimates.resend_estimate') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -137,7 +137,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="CheckCircleIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('estimates.mark_as_accepted') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -152,7 +152,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="XCircleIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('estimates.mark_as_rejected') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
>
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit expenseCategory -->
|
||||
@@ -17,7 +17,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -29,7 +29,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'expenses.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit expense -->
|
||||
@@ -15,7 +15,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -28,7 +28,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'invoices.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- Edit Invoice -->
|
||||
@@ -15,7 +15,7 @@
|
||||
<BaseDropdownItem v-show="row.allow_edit">
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -25,7 +25,7 @@
|
||||
<BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
|
||||
<BaseIcon
|
||||
name="LinkIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.copy_pdf_url') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -41,7 +41,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -51,7 +51,7 @@
|
||||
<BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
|
||||
<BaseIcon
|
||||
name="PaperAirplaneIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('invoices.send_invoice') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -60,7 +60,7 @@
|
||||
<BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
|
||||
<BaseIcon
|
||||
name="PaperAirplaneIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('invoices.resend_invoice') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -72,7 +72,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="CreditCardIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('invoices.record_payment') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -82,7 +82,7 @@
|
||||
<BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
|
||||
<BaseIcon
|
||||
name="CheckCircleIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('invoices.mark_as_sent') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -94,7 +94,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="DocumentTextIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('invoices.clone_invoice') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -106,7 +106,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'items.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit item -->
|
||||
@@ -15,7 +15,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -28,7 +28,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'members.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit user -->
|
||||
@@ -12,7 +12,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -22,7 +22,7 @@
|
||||
<BaseDropdownItem @click="removeUser(row.id)">
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'notes.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit note -->
|
||||
@@ -14,7 +14,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -26,7 +26,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'payments.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- Copy pdf url -->
|
||||
@@ -18,7 +18,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="LinkIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.copy_pdf_url') }}
|
||||
</BaseDropdown-item>
|
||||
@@ -31,7 +31,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -48,7 +48,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -65,7 +65,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="PaperAirplaneIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('payments.send_payment') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -77,7 +77,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
<BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit paymentMode -->
|
||||
<BaseDropdownItem @click="editPaymentMode(row.id)">
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -20,7 +20,7 @@
|
||||
<BaseDropdownItem @click="removePaymentMode(row.id)">
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
>
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- Edit Recurring Invoice -->
|
||||
@@ -18,7 +18,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -35,7 +35,7 @@
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.view') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -48,7 +48,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'roles.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit role -->
|
||||
@@ -14,7 +14,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -26,7 +26,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
|
||||
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
|
||||
</BaseButton>
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
|
||||
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
|
||||
</template>
|
||||
|
||||
<!-- edit tax-type -->
|
||||
@@ -14,7 +14,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
@@ -26,7 +26,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
|
||||
<tr class="box-border bg-surface border-b border-line-light">
|
||||
<td colspan="5" class="p-0 text-left align-top">
|
||||
<table class="w-full">
|
||||
<colgroup>
|
||||
@@ -17,7 +17,7 @@
|
||||
<td class="px-5 py-4 text-left align-top">
|
||||
<div class="flex justify-start">
|
||||
<div
|
||||
class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-gray-300 cursor-move handle"
|
||||
class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-subtle cursor-move handle"
|
||||
>
|
||||
<DragIcon />
|
||||
</div>
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="ChevronDownIcon"
|
||||
class="w-4 h-4 ml-1 text-gray-500"
|
||||
class="w-4 h-4 ml-1 text-muted"
|
||||
/>
|
||||
</span>
|
||||
</BaseButton>
|
||||
@@ -129,7 +129,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 text-body cursor-pointer"
|
||||
name="TrashIcon"
|
||||
@click="store.removeItem(index)"
|
||||
/>
|
||||
@@ -143,7 +143,7 @@
|
||||
<BaseContentPlaceholders v-if="loading">
|
||||
<BaseContentPlaceholdersText
|
||||
:lines="1"
|
||||
class="w-24 h-8 border border-gray-200 rounded-md"
|
||||
class="w-24 h-8 border border-line-light rounded-md"
|
||||
/>
|
||||
</BaseContentPlaceholders>
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<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-hidden cursor-pointer "
|
||||
class="flex items-center justify-center w-full px-2 py-2 bg-surface-muted border-none outline-hidden cursor-pointer "
|
||||
@click="openTaxModal"
|
||||
>
|
||||
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
|
||||
@@ -65,7 +65,7 @@
|
||||
<BaseIcon
|
||||
v-if="taxes.length && index !== taxes.length - 1"
|
||||
name="TrashIcon"
|
||||
class="h-5 text-gray-700 cursor-pointer"
|
||||
class="h-5 text-body cursor-pointer"
|
||||
@click="removeTax(index)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div class="rounded-xl border border-line-light shadow overflow-hidden bg-surface">
|
||||
<!-- Tax Included -->
|
||||
<div
|
||||
v-if="companyStore.selectedCompanySettings.tax_included === 'YES'"
|
||||
@@ -9,10 +10,10 @@
|
||||
w-full
|
||||
px-6
|
||||
text-base
|
||||
border border-b-0 border-gray-200 border-solid
|
||||
border-b border-line-light
|
||||
cursor-pointer
|
||||
text-primary-400
|
||||
bg-white
|
||||
bg-surface
|
||||
"
|
||||
>
|
||||
<BaseSwitchSection
|
||||
@@ -33,7 +34,7 @@
|
||||
/>
|
||||
<col style="width: 15%; min-width: 120px" />
|
||||
</colgroup>
|
||||
<thead class="bg-white border border-gray-200 border-solid">
|
||||
<thead class="bg-surface-secondary border-b border-line-light">
|
||||
<tr>
|
||||
<th
|
||||
class="
|
||||
@@ -43,8 +44,8 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
text-left text-body
|
||||
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
@@ -62,8 +63,8 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-right text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
text-right text-body
|
||||
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
@@ -81,8 +82,8 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
text-left text-body
|
||||
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
@@ -101,8 +102,8 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
text-left text-body
|
||||
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
@@ -120,8 +121,8 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-right text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
text-right text-body
|
||||
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
@@ -164,7 +165,7 @@
|
||||
px-6
|
||||
py-3
|
||||
text-base
|
||||
border border-t-0 border-gray-200 border-solid
|
||||
border-t border-line-light
|
||||
cursor-pointer
|
||||
text-primary-400
|
||||
hover:bg-primary-100
|
||||
@@ -174,6 +175,7 @@
|
||||
<BaseIcon name="PlusCircleIcon" class="mr-2" />
|
||||
{{ $t('general.add_new_item') }}
|
||||
</div>
|
||||
</div><!-- end rounded wrapper -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
>
|
||||
<SelectNotePopup :type="type" @select="onSelectNote" />
|
||||
</div>
|
||||
<label class="text-gray-800 font-medium mb-4 text-sm">
|
||||
<label class="text-heading font-medium mb-4 text-sm">
|
||||
{{ $t('invoices.notes') }}
|
||||
</label>
|
||||
<BaseCustomInput
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
px-5
|
||||
py-4
|
||||
mt-6
|
||||
bg-white
|
||||
border border-gray-200 border-solid
|
||||
rounded
|
||||
bg-surface
|
||||
border border-line-light border-solid
|
||||
rounded-xl shadow
|
||||
md:min-w-[390px]
|
||||
min-w-[300px]
|
||||
lg:mt-7
|
||||
@@ -18,7 +18,7 @@
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
v-else
|
||||
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
|
||||
class="text-sm font-semibold leading-5 text-subtle uppercase"
|
||||
>
|
||||
{{ $t('estimates.sub_total') }}
|
||||
</label>
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
<label
|
||||
v-else
|
||||
class="flex items-center justify-center m-0 text-lg text-black uppercase "
|
||||
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
|
||||
>
|
||||
<BaseFormatMoney
|
||||
:amount="store.getSubTotal"
|
||||
@@ -59,7 +59,7 @@
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
v-else-if="store[storeProp].tax_per_item === 'YES'"
|
||||
class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
|
||||
class="m-0 text-sm font-semibold leading-5 text-muted uppercase"
|
||||
>
|
||||
<template v-if="tax.calculation_type === 'percentage'">
|
||||
{{ tax.name }} - {{ tax.percent }}%
|
||||
@@ -75,7 +75,7 @@
|
||||
|
||||
<label
|
||||
v-else-if="store[storeProp].tax_per_item === 'YES'"
|
||||
class="flex items-center justify-center m-0 text-lg text-black uppercase "
|
||||
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
|
||||
>
|
||||
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
|
||||
</label>
|
||||
@@ -93,14 +93,14 @@
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
v-else
|
||||
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
|
||||
class="text-sm font-semibold leading-5 text-subtle uppercase"
|
||||
>
|
||||
{{ $t('estimates.discount') }}
|
||||
</label>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText
|
||||
:lines="1"
|
||||
class="w-24 h-8 border border-gray-200 rounded-md"
|
||||
class="w-24 h-8 border border-line-light rounded-md"
|
||||
/>
|
||||
</BaseContentPlaceholders>
|
||||
<div v-else class="flex" style="width: 140px" role="group">
|
||||
@@ -129,7 +129,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="ChevronDownIcon"
|
||||
class="w-4 h-4 ml-1 text-gray-500"
|
||||
class="w-4 h-4 ml-1 text-muted"
|
||||
/>
|
||||
</span>
|
||||
</BaseButton>
|
||||
@@ -198,14 +198,14 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
|
||||
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-line-light border-solid "
|
||||
>
|
||||
<BaseContentPlaceholders v-if="isLoading">
|
||||
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
|
||||
</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-subtle uppercase"
|
||||
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
|
||||
>
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between w-full mt-2 text-sm">
|
||||
<label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-gray-500 uppercase">
|
||||
<label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-muted uppercase">
|
||||
{{ tax.name }} ({{ tax.percent }} %)
|
||||
</label>
|
||||
<label v-else class="font-semibold leading-5 text-gray-500 uppercase">
|
||||
<label v-else class="font-semibold leading-5 text-muted uppercase">
|
||||
{{ tax.name }} (<BaseFormatMoney :amount="tax.fixed_amount" :currency="currency" />)
|
||||
</label>
|
||||
<label class="flex items-center justify-center text-lg text-black">
|
||||
<label class="flex items-center justify-center text-lg text-heading">
|
||||
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
|
||||
|
||||
<BaseIcon
|
||||
|
||||
@@ -28,12 +28,12 @@
|
||||
@input="v.exchange_rate.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<span class="text-gray-500 sm:text-sm">
|
||||
<span class="text-muted sm:text-sm">
|
||||
{{ companyCurrency.code }}
|
||||
</span>
|
||||
</template>
|
||||
</BaseInput>
|
||||
<span class="text-gray-400 text-xs mt-2 font-light">
|
||||
<span class="text-subtle text-xs mt-2 font-light">
|
||||
{{
|
||||
$t('settings.exchange_rate.exchange_help_text', {
|
||||
currency: selectedCurrency.code,
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</BaseContentPlaceholders>
|
||||
<label
|
||||
v-else
|
||||
class="text-sm font-semibold leading-5 text-gray-500 uppercase"
|
||||
class="text-sm font-semibold leading-5 text-muted uppercase"
|
||||
>
|
||||
{{ $t('estimates.net_total') }}
|
||||
</label>
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
<label
|
||||
v-else
|
||||
class="flex items-center justify-center m-0 text-lg text-black uppercase "
|
||||
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
|
||||
>
|
||||
<BaseFormatMoney
|
||||
:amount="store.getNetTotal"
|
||||
|
||||
@@ -44,13 +44,13 @@
|
||||
>
|
||||
<!-- Tax Search Input -->
|
||||
|
||||
<div class="relative bg-white">
|
||||
<div class="relative bg-surface">
|
||||
<div class="relative p-4">
|
||||
<BaseInput
|
||||
v-model="textSearch"
|
||||
:placeholder="$t('general.search')"
|
||||
type="text"
|
||||
class="text-black"
|
||||
class="text-heading"
|
||||
>
|
||||
</BaseInput>
|
||||
</div>
|
||||
@@ -64,14 +64,14 @@
|
||||
overflow-auto
|
||||
list
|
||||
max-h-36
|
||||
border-t border-gray-200
|
||||
border-t border-line-default
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(taxType, index) in filteredTaxType"
|
||||
:key="index"
|
||||
:class="{
|
||||
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
|
||||
'bg-surface-tertiary cursor-not-allowed opacity-50 pointer-events-none':
|
||||
taxes.find((val) => {
|
||||
return val.tax_type_id === taxType.id
|
||||
}),
|
||||
@@ -80,9 +80,9 @@
|
||||
class="
|
||||
px-6
|
||||
py-4
|
||||
border-b border-gray-200 border-solid
|
||||
border-b border-line-default border-solid
|
||||
cursor-pointer
|
||||
hover:bg-gray-100 hover:cursor-pointer
|
||||
hover:bg-surface-tertiary hover:cursor-pointer
|
||||
last:border-b-0
|
||||
"
|
||||
@click="selectTaxType(taxType, close)"
|
||||
@@ -94,7 +94,7 @@
|
||||
text-base
|
||||
font-semibold
|
||||
leading-tight
|
||||
text-gray-700
|
||||
text-body
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
@@ -106,7 +106,7 @@
|
||||
m-0
|
||||
text-base
|
||||
font-semibold
|
||||
text-gray-700
|
||||
text-body
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
@@ -121,8 +121,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex justify-center p-5 text-gray-400">
|
||||
<label class="text-base text-gray-500 cursor-pointer">
|
||||
<div v-else class="flex justify-center p-5 text-subtle">
|
||||
<label class="text-base text-muted cursor-pointer">
|
||||
{{ $t('general.no_tax_found') }}
|
||||
</label>
|
||||
</div>
|
||||
@@ -140,7 +140,7 @@
|
||||
h-10
|
||||
px-2
|
||||
py-3
|
||||
bg-gray-200
|
||||
bg-surface-muted
|
||||
border-none
|
||||
outline-hidden
|
||||
"
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<label class="flex text-gray-800 font-medium text-sm mb-2">
|
||||
<label class="flex text-heading font-medium text-sm mb-2">
|
||||
{{ $t('general.select_template') }}
|
||||
<span class="text-sm text-red-500"> *</span>
|
||||
</label>
|
||||
<BaseButton
|
||||
type="button"
|
||||
class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"
|
||||
class="flex justify-center w-full text-sm lg:w-auto hover:bg-surface-muted"
|
||||
variant="gray"
|
||||
@click="openTemplateModal"
|
||||
>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="onCancel"
|
||||
/>
|
||||
</div>
|
||||
@@ -58,7 +58,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeCategoryModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -53,7 +53,7 @@
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-gray-200 border-solid
|
||||
border-t border-line-default border-solid
|
||||
"
|
||||
>
|
||||
<BaseButton
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeCompanyModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -98,7 +98,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
|
||||
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
|
||||
<div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
variant="primary-outline"
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeCustomerModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -131,7 +131,7 @@
|
||||
<BaseTab :title="$t('customers.portal_access')">
|
||||
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-muted">
|
||||
{{ $t('customers.portal_access_text') }}
|
||||
</p>
|
||||
|
||||
@@ -168,7 +168,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
@@ -194,7 +194,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowConfirmPassword = !isShowConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
@@ -423,7 +423,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
{{ modalStore.title }}
|
||||
</h6>
|
||||
<p
|
||||
class="mt-2 text-sm leading-snug text-gray-500"
|
||||
class="mt-2 text-sm leading-snug text-muted"
|
||||
style="max-width: 680px"
|
||||
>
|
||||
{{
|
||||
@@ -38,7 +38,7 @@
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
|
||||
<div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
variant="primary-outline"
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeExchangeRateModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -151,7 +151,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeDiskModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -21,7 +21,7 @@
|
||||
>
|
||||
<template #default="slotProps">
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-solid border-gray-200"
|
||||
class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ $t('members.invite_member') }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end p-4 border-t border-gray-200">
|
||||
<div class="flex justify-end p-4 border-t border-line-default">
|
||||
<BaseButton
|
||||
variant="primary-outline"
|
||||
class="mr-3"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeItemModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeItemUnitModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -37,7 +37,7 @@
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-gray-200 border-solid
|
||||
border-t border-line-default border-solid
|
||||
"
|
||||
>
|
||||
<BaseButton
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeTestModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
variant="primary-outline"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeNoteModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -75,7 +75,7 @@ _ />
|
||||
justify-end
|
||||
px-4
|
||||
py-4
|
||||
border-t border-solid border-gray-200
|
||||
border-t border-solid border-line-default
|
||||
"
|
||||
>
|
||||
<BaseButton
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closePaymentModeModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -30,7 +30,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
variant="primary-outline"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeRolesModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -36,7 +36,7 @@
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
text-gray-800
|
||||
text-heading
|
||||
px-4
|
||||
md:px-8
|
||||
py-1.5
|
||||
@@ -50,7 +50,7 @@
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
text-gray-300
|
||||
text-subtle
|
||||
px-4
|
||||
md:px-8
|
||||
py-1.5
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 py-3">
|
||||
<div class="border-t border-line-default py-3">
|
||||
<div
|
||||
class="
|
||||
grid grid-cols-1
|
||||
@@ -89,7 +89,7 @@
|
||||
:key="gIndex"
|
||||
class="flex flex-col space-y-1"
|
||||
>
|
||||
<p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
|
||||
<p class="text-sm text-muted border-b border-line-default pb-1 mb-2">
|
||||
{{ gIndex }}
|
||||
</p>
|
||||
<div
|
||||
@@ -122,7 +122,7 @@
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-solid border-gray-200
|
||||
border-t border-solid border-line-default
|
||||
"
|
||||
>
|
||||
<BaseButton
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ modalTitle }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
relative
|
||||
flex flex-col
|
||||
m-2
|
||||
border border-gray-200 border-solid
|
||||
border border-line-default border-solid
|
||||
cursor-pointer
|
||||
hover:border-primary-300
|
||||
"
|
||||
@@ -46,11 +46,11 @@
|
||||
/>
|
||||
<span
|
||||
:class="[
|
||||
'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
|
||||
'w-full p-1 bg-surface-muted text-sm text-center absolute bottom-0 left-0',
|
||||
{
|
||||
'text-primary-500 bg-primary-100':
|
||||
selectedTemplate === template.name,
|
||||
'text-gray-600': selectedTemplate != template.name,
|
||||
'text-body': selectedTemplate != template.name,
|
||||
},
|
||||
]"
|
||||
>
|
||||
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
|
||||
<div class="z-0 flex justify-end p-4 border-t border-line-default border-solid">
|
||||
<BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
|
||||
{{ $t('general.cancel') }}
|
||||
</BaseButton>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeSendEstimateModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -87,7 +87,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
@@ -112,7 +112,7 @@
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||
<div class="my-6 mx-4 border border-line-default relative">
|
||||
<BaseButton
|
||||
class="absolute top-4 right-4"
|
||||
:disabled="isLoading"
|
||||
@@ -131,7 +131,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
{{ modalTitle }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeSendInvoiceModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
@@ -120,7 +120,7 @@
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||
<div class="my-6 mx-4 border border-line-default relative">
|
||||
<BaseButton
|
||||
class="absolute top-4 right-4"
|
||||
:disabled="isLoading"
|
||||
@@ -139,7 +139,7 @@
|
||||
></iframe>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
{{ modalTitle }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeSendPaymentModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
@@ -120,7 +120,7 @@
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<div class="my-6 mx-4 border border-gray-200 relative">
|
||||
<div class="my-6 mx-4 border border-line-default relative">
|
||||
<BaseButton
|
||||
class="absolute top-4 right-4"
|
||||
:disabled="isLoading"
|
||||
@@ -139,7 +139,7 @@
|
||||
></iframe>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeTaxTypeModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -106,7 +106,7 @@
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-solid border-gray-200
|
||||
border-t border-solid border-line-default
|
||||
"
|
||||
>
|
||||
<BaseButton
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<div class="flex flex-col">
|
||||
{{ modalStore.title }}
|
||||
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
<p class="text-sm text-muted mt-1">
|
||||
{{ modalStore.content }}
|
||||
</p>
|
||||
</div>
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-gray-500 cursor-pointer"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -88,7 +88,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
|
||||
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3 text-sm"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-gray-500 cursor-pointer"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeCustomFieldModal"
|
||||
/>
|
||||
</div>
|
||||
@@ -123,7 +123,7 @@
|
||||
class="ml-1 cursor-pointer"
|
||||
:class="
|
||||
customFieldStore.currentCustomField.in_use
|
||||
? 'text-gray-300'
|
||||
? 'text-subtle'
|
||||
: 'text-red-300'
|
||||
"
|
||||
@click="removeOption(index)"
|
||||
@@ -179,7 +179,7 @@
|
||||
flex
|
||||
justify-end
|
||||
p-4
|
||||
border-t border-solid border-gray-200
|
||||
border-t border-solid border-line-default
|
||||
"
|
||||
>
|
||||
<BaseButton
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||
</div>
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||
</div>
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
</div>
|
||||
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||
</div>
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -134,7 +134,7 @@
|
||||
<BaseSwitch v-model="set_as_default" class="flex" />
|
||||
</div>
|
||||
<div class="ml-4 right">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
|
||||
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
|
||||
{{ $t('settings.disk.is_default') }}
|
||||
</p>
|
||||
</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-surface-tertiary">
|
||||
<NotificationRoot />
|
||||
|
||||
<div
|
||||
@@ -12,7 +12,7 @@
|
||||
col-span-12
|
||||
p-4
|
||||
mx-auto
|
||||
text-gray-900
|
||||
text-heading
|
||||
md:p-8 md:col-span-6
|
||||
lg:col-span-4
|
||||
flex-2
|
||||
@@ -41,7 +41,7 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-relaxed
|
||||
text-left text-gray-400
|
||||
text-left text-subtle
|
||||
md:pt-40
|
||||
"
|
||||
>
|
||||
|
||||
@@ -47,16 +47,16 @@
|
||||
overflow-visible
|
||||
text-sm
|
||||
ease-linear
|
||||
bg-white
|
||||
bg-surface
|
||||
border-0
|
||||
rounded
|
||||
cursor-pointer
|
||||
md:hidden md:ml-0
|
||||
hover:bg-gray-100
|
||||
hover:bg-hover-strong
|
||||
"
|
||||
@click.prevent="onToggle"
|
||||
>
|
||||
<BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-gray-500" />
|
||||
<BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-muted" />
|
||||
</div>
|
||||
|
||||
<ul class="flex float-right h-8 m-0 list-none md:h-9">
|
||||
@@ -81,7 +81,7 @@
|
||||
md:h-9 md:w-9
|
||||
"
|
||||
>
|
||||
<BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600" />
|
||||
<BaseIcon name="PlusIcon" class="w-5 h-5 text-body" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="DocumentTextIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('invoices.new_invoice') }}
|
||||
@@ -103,7 +103,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="DocumentIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('estimates.new_estimate') }}
|
||||
@@ -116,7 +116,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="UserIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('customers.new_customer') }}
|
||||
@@ -148,11 +148,30 @@
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<div class="px-3 py-2">
|
||||
<div class="flex items-center justify-between rounded-lg bg-surface-secondary p-1">
|
||||
<button
|
||||
v-for="opt in themeOptions"
|
||||
:key="opt.value"
|
||||
:class="[
|
||||
'flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors',
|
||||
currentTheme === opt.value
|
||||
? 'bg-surface text-heading shadow-sm'
|
||||
: 'text-muted hover:text-body',
|
||||
]"
|
||||
@click.stop="setTheme(opt.value)"
|
||||
>
|
||||
<BaseIcon :name="opt.icon" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-link to="/admin/user-settings">
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon
|
||||
name="CogIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('navigation.settings') }}
|
||||
@@ -162,7 +181,7 @@
|
||||
<BaseDropdownItem @click="logout">
|
||||
<BaseIcon
|
||||
name="ArrowRightOnRectangleIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ $t('navigation.logout') }}
|
||||
@@ -176,7 +195,7 @@
|
||||
<script setup>
|
||||
import { useAuthStore } from '@/scripts/admin/stores/auth'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { useUserStore } from '@/scripts/admin/stores/user'
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
|
||||
@@ -228,4 +247,35 @@ async function logout() {
|
||||
function onToggle() {
|
||||
globalStore.setSidebarVisibility(true)
|
||||
}
|
||||
|
||||
const themeOptions = [
|
||||
{ value: 'light', icon: 'SunIcon' },
|
||||
{ value: 'dark', icon: 'MoonIcon' },
|
||||
{ value: 'system', icon: 'ComputerDesktopIcon' },
|
||||
]
|
||||
|
||||
const currentTheme = ref(localStorage.getItem('theme') || 'system')
|
||||
|
||||
function applyTheme(theme) {
|
||||
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-theme')
|
||||
}
|
||||
}
|
||||
|
||||
function setTheme(theme) {
|
||||
currentTheme.value = theme
|
||||
localStorage.setItem('theme', theme)
|
||||
applyTheme(theme)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
applyTheme(currentTheme.value)
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (currentTheme.value === 'system') {
|
||||
applyTheme('system')
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
|
||||
<div class="relative flex flex-col flex-1 w-full max-w-xs bg-surface">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
@@ -78,7 +78,7 @@
|
||||
>
|
||||
<div
|
||||
v-if="menu[0] && menu[0].group_label"
|
||||
class="px-4 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
|
||||
class="px-4 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
|
||||
>
|
||||
{{ $t(menu[0].group_label) }}
|
||||
</div>
|
||||
@@ -89,7 +89,7 @@
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-600 bg-primary-50 font-semibold'
|
||||
: 'text-gray-600 hover:bg-gray-50',
|
||||
: 'text-body hover:bg-hover',
|
||||
'cursor-pointer mx-3 px-3 py-2.5 flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
|
||||
]"
|
||||
@click="globalStore.setSidebarVisibility(false)"
|
||||
@@ -99,7 +99,7 @@
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-500'
|
||||
: 'text-gray-400',
|
||||
: 'text-subtle',
|
||||
'mr-3 shrink-0 h-5 w-5',
|
||||
]"
|
||||
@click="globalStore.setSidebarVisibility(false)"
|
||||
@@ -124,8 +124,8 @@
|
||||
h-screen
|
||||
pb-32
|
||||
overflow-y-auto
|
||||
bg-white
|
||||
border-r border-gray-200 border-solid
|
||||
bg-surface
|
||||
border-r border-line-default border-solid
|
||||
xl:w-64
|
||||
md:fixed md:flex md:flex-col md:inset-y-0
|
||||
pt-16
|
||||
@@ -138,7 +138,7 @@
|
||||
>
|
||||
<div
|
||||
v-if="menu[0] && menu[0].group_label"
|
||||
class="px-6 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
|
||||
class="px-6 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
|
||||
>
|
||||
{{ $t(menu[0].group_label) }}
|
||||
</div>
|
||||
@@ -149,7 +149,7 @@
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-600 bg-primary-50 font-semibold'
|
||||
: 'text-gray-600 hover:bg-gray-50',
|
||||
: 'text-body hover:bg-hover',
|
||||
'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
|
||||
]"
|
||||
>
|
||||
@@ -158,7 +158,7 @@
|
||||
:class="[
|
||||
hasActiveUrl(item.link)
|
||||
? 'text-primary-500'
|
||||
: 'text-gray-400 group-hover:text-gray-600',
|
||||
: 'text-subtle group-hover:text-body',
|
||||
'mr-3 shrink-0 h-5 w-5',
|
||||
]"
|
||||
/>
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
<div class="text-center mb-8">
|
||||
<BaseIcon
|
||||
name="BuildingOfficeIcon"
|
||||
class="w-16 h-16 mx-auto text-gray-300 mb-4"
|
||||
class="w-16 h-16 mx-auto text-subtle mb-4"
|
||||
/>
|
||||
<h1 class="text-2xl font-semibold text-gray-900">
|
||||
<h1 class="text-2xl font-semibold text-heading">
|
||||
{{ $t('general.welcome') }}, {{ userStore.currentUser.name }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
<p class="mt-2 text-sm text-muted">
|
||||
{{ $t('general.no_company_description') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -17,7 +17,7 @@
|
||||
<!-- Pending Invitations -->
|
||||
<div v-if="invitationStore.pendingInvitations.length > 0">
|
||||
<h2
|
||||
class="text-sm font-semibold uppercase tracking-wide text-gray-400 mb-3"
|
||||
class="text-sm font-semibold uppercase tracking-wide text-subtle mb-3"
|
||||
>
|
||||
{{ $t('members.pending_invitations') }}
|
||||
</h2>
|
||||
@@ -25,13 +25,13 @@
|
||||
<div
|
||||
v-for="invitation in invitationStore.pendingInvitations"
|
||||
:key="invitation.id"
|
||||
class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"
|
||||
class="flex items-center justify-between p-4 bg-surface rounded-lg border border-line-default"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-gray-900">
|
||||
<p class="font-medium text-heading">
|
||||
{{ invitation.company?.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-muted">
|
||||
{{ invitation.role?.title }} ·
|
||||
{{ $t('members.invited_by') }}:
|
||||
{{ invitation.invited_by?.name }}
|
||||
|
||||
@@ -41,13 +41,13 @@
|
||||
<base-dropdown width-class="w-48" margin-class="mt-1">
|
||||
<template #activator>
|
||||
<div class="flex items-center justify-center">
|
||||
<EllipsisHorizontalIcon class="w-6 h-6 text-gray-600" />
|
||||
<EllipsisHorizontalIcon class="w-6 h-6 text-body" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<base-dropdown-item>
|
||||
<document-text-icon
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
New Invoice
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
<base-dropdown-item>
|
||||
<document-icon
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
New Estimate
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
<base-dropdown-item>
|
||||
<user-icon
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
New Customer
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
key: 'name',
|
||||
label: 'Name',
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{ key: 'age', label: 'Age' },
|
||||
{ key: 'image', label: 'Image' },
|
||||
@@ -131,7 +131,7 @@ export default {
|
||||
key: 'name',
|
||||
label: 'Name',
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{ key: 'price', label: 'Price' },
|
||||
{ key: 'created_at', label: 'Created At' },
|
||||
|
||||
@@ -19,11 +19,11 @@
|
||||
<BaseCard>
|
||||
<template #header>
|
||||
<div class="flex items-center">
|
||||
<BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-gray-400" />
|
||||
<span class="font-medium text-gray-700">{{ $t('general.app_version') }}</span>
|
||||
<BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-subtle" />
|
||||
<span class="font-medium text-body">{{ $t('general.app_version') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-2xl font-semibold text-heading">
|
||||
{{ data.app_version }}
|
||||
</p>
|
||||
</BaseCard>
|
||||
@@ -32,11 +32,11 @@
|
||||
<BaseCard>
|
||||
<template #header>
|
||||
<div class="flex items-center">
|
||||
<BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-gray-400" />
|
||||
<span class="font-medium text-gray-700">PHP</span>
|
||||
<BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-subtle" />
|
||||
<span class="font-medium text-body">PHP</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-2xl font-semibold text-heading">
|
||||
{{ data.php_version }}
|
||||
</p>
|
||||
</BaseCard>
|
||||
@@ -45,14 +45,14 @@
|
||||
<BaseCard>
|
||||
<template #header>
|
||||
<div class="flex items-center">
|
||||
<BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-gray-400" />
|
||||
<span class="font-medium text-gray-700">{{ $t('general.database') }}</span>
|
||||
<BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-subtle" />
|
||||
<span class="font-medium text-body">{{ $t('general.database') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-2xl font-semibold text-heading">
|
||||
{{ data.database?.driver?.toUpperCase() }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
<p class="text-sm text-muted mt-1">
|
||||
{{ data.database?.version }}
|
||||
</p>
|
||||
</BaseCard>
|
||||
@@ -61,11 +61,11 @@
|
||||
<BaseCard>
|
||||
<template #header>
|
||||
<div class="flex items-center">
|
||||
<BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-gray-400" />
|
||||
<span class="font-medium text-gray-700">{{ $t('navigation.companies') }}</span>
|
||||
<BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-subtle" />
|
||||
<span class="font-medium text-body">{{ $t('navigation.companies') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-2xl font-semibold text-heading">
|
||||
{{ data.counts?.companies }}
|
||||
</p>
|
||||
</BaseCard>
|
||||
@@ -74,11 +74,11 @@
|
||||
<BaseCard>
|
||||
<template #header>
|
||||
<div class="flex items-center">
|
||||
<BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-gray-400" />
|
||||
<span class="font-medium text-gray-700">{{ $t('navigation.all_users') }}</span>
|
||||
<BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-subtle" />
|
||||
<span class="font-medium text-body">{{ $t('navigation.all_users') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text-2xl font-semibold text-gray-900">
|
||||
<p class="text-2xl font-semibold text-heading">
|
||||
{{ data.counts?.users }}
|
||||
</p>
|
||||
</BaseCard>
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
|
||||
<BaseDivider class="my-6" />
|
||||
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">
|
||||
<h3 class="text-lg font-medium text-heading mb-4">
|
||||
{{ $t('administration.companies.address') }}
|
||||
</h3>
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
:title="$t('administration.companies.no_companies')"
|
||||
:description="$t('administration.companies.list_description')"
|
||||
>
|
||||
<BaseIcon name="BuildingOfficeIcon" class="mt-5 mb-4 h-16 w-16 text-gray-300" />
|
||||
<BaseIcon name="BuildingOfficeIcon" class="mt-5 mb-4 h-16 w-16 text-subtle" />
|
||||
</BaseEmptyPlaceholder>
|
||||
|
||||
<div v-show="!showEmptyScreen" class="relative table-container">
|
||||
@@ -70,12 +70,12 @@
|
||||
|
||||
<template #cell-owner="{ row }">
|
||||
<span v-if="row.data.owner">{{ row.data.owner.name }}</span>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
<span v-else class="text-subtle">-</span>
|
||||
</template>
|
||||
|
||||
<template #cell-owner_email="{ row }">
|
||||
<span v-if="row.data.owner">{{ row.data.owner.email }}</span>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
<span v-else class="text-subtle">-</span>
|
||||
</template>
|
||||
|
||||
<template #cell-actions="{ row }">
|
||||
@@ -113,7 +113,7 @@ const companyTableColumns = computed(() => {
|
||||
key: 'name',
|
||||
label: t('administration.companies.company_name'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{
|
||||
key: 'owner',
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex gap-8">
|
||||
<div class="hidden mt-1 xl:block min-w-[240px]">
|
||||
<BaseList>
|
||||
<BaseListItem
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
|
||||
<div v-if="userData" class="mt-6 text-sm text-gray-500">
|
||||
<div v-if="userData" class="mt-6 text-sm text-muted">
|
||||
<p>
|
||||
<strong>{{ $t('administration.users.role') }}:</strong>
|
||||
{{ userData.role }}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
>
|
||||
<BaseIcon
|
||||
name="UsersIcon"
|
||||
class="mt-5 mb-4 h-16 w-16 text-gray-300"
|
||||
class="mt-5 mb-4 h-16 w-16 text-subtle"
|
||||
/>
|
||||
</BaseEmptyPlaceholder>
|
||||
|
||||
@@ -107,18 +107,18 @@
|
||||
<span
|
||||
v-for="company in row.data.companies.slice(0, 3)"
|
||||
:key="company.id"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-body"
|
||||
>
|
||||
{{ company.name }}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.data.companies.length > 3"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-muted"
|
||||
>
|
||||
+{{ row.data.companies.length - 3 }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
<span v-else class="text-subtle">-</span>
|
||||
</template>
|
||||
|
||||
<template #cell-actions="{ row }">
|
||||
@@ -158,7 +158,7 @@ const userTableColumns = computed(() => {
|
||||
key: 'name',
|
||||
label: t('users.name'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
@@ -232,7 +232,7 @@ function getRoleBadgeClass(role) {
|
||||
case 'admin':
|
||||
return 'bg-blue-100 text-blue-800'
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
return 'bg-surface-tertiary text-heading'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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-body"
|
||||
>
|
||||
{{ $t('general.back_to_login') }}
|
||||
</router-link>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
@@ -43,7 +43,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-body"
|
||||
>
|
||||
{{ $t('login.forgot_password') }}
|
||||
</router-link>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div class="flex items-center justify-center min-h-screen bg-surface-secondary">
|
||||
<div class="w-full max-w-md p-8">
|
||||
<!-- Logo -->
|
||||
<div class="mb-8 text-center">
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="text-center">
|
||||
<p class="text-gray-500">Loading invitation details...</p>
|
||||
<p class="text-muted">Loading invitation details...</p>
|
||||
</div>
|
||||
|
||||
<!-- Invalid/Expired -->
|
||||
@@ -25,10 +25,10 @@
|
||||
name="ExclamationCircleIcon"
|
||||
class="w-16 h-16 mx-auto text-red-400 mb-4"
|
||||
/>
|
||||
<h1 class="text-xl font-semibold text-gray-900 mb-2">
|
||||
<h1 class="text-xl font-semibold text-heading mb-2">
|
||||
Invalid Invitation
|
||||
</h1>
|
||||
<p class="text-gray-500">{{ error }}</p>
|
||||
<p class="text-muted">{{ error }}</p>
|
||||
<router-link to="/login" class="text-primary-500 mt-4 inline-block">
|
||||
Go to Login
|
||||
</router-link>
|
||||
@@ -37,10 +37,10 @@
|
||||
<!-- Registration Form -->
|
||||
<div v-else>
|
||||
<div class="text-center mb-6">
|
||||
<h1 class="text-2xl font-semibold text-gray-900">
|
||||
<h1 class="text-2xl font-semibold text-heading">
|
||||
Create Your Account
|
||||
</h1>
|
||||
<p class="text-gray-500 mt-2">
|
||||
<p class="text-muted mt-2">
|
||||
You've been invited to join
|
||||
<strong>{{ invitationDetails.company_name }}</strong> as
|
||||
<strong>{{ invitationDetails.role_name }}</strong>
|
||||
@@ -112,7 +112,7 @@
|
||||
</BaseCard>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<router-link to="/login" class="text-sm text-gray-500 hover:text-primary-500">
|
||||
<router-link to="/login" class="text-sm text-muted hover:text-primary-500">
|
||||
Already have an account? Log in
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
@@ -184,7 +184,7 @@
|
||||
|
||||
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-muted">
|
||||
{{ $t('customers.portal_access_text') }}
|
||||
</p>
|
||||
|
||||
@@ -224,7 +224,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
@@ -251,7 +251,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowConfirmPassword = !isShowConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -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-body" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@@ -158,7 +158,7 @@
|
||||
<BaseText
|
||||
:text="row.data.contact_name ? row.data.contact_name : ''"
|
||||
tag="span"
|
||||
class="text-xs text-gray-400"
|
||||
class="text-xs text-subtle"
|
||||
/>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -247,13 +247,13 @@ const customerColumns = computed(() => {
|
||||
key: 'status',
|
||||
thClass: 'extra w-10 pr-0',
|
||||
sortable: false,
|
||||
tdClass: 'font-medium text-gray-900 pr-0',
|
||||
tdClass: 'font-medium text-heading pr-0',
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: t('customers.name'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{ key: 'phone', label: t('customers.phone') },
|
||||
{ key: 'due_amount', label: t('customers.amount_due') },
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
:to="`/admin/estimates/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem class="">
|
||||
<BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="DocumentIcon" class="mr-3 text-body" />
|
||||
{{ $t('estimates.new_estimate') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
@@ -45,7 +45,7 @@
|
||||
:to="`/admin/invoices/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="DocumentTextIcon" class="mr-3 text-body" />
|
||||
{{ $t('invoices.new_invoice') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
@@ -55,7 +55,7 @@
|
||||
:to="`/admin/payments/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="CreditCardIcon" class="mr-3 text-body" />
|
||||
{{ $t('payments.new_payment') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
@@ -65,7 +65,7 @@
|
||||
:to="`/admin/expenses/create?customer=${$route.params.id}`"
|
||||
>
|
||||
<BaseDropdownItem>
|
||||
<BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="CalculatorIcon" class="mr-3 text-body" />
|
||||
{{ $t('expenses.new_expense') }}
|
||||
</BaseDropdownItem>
|
||||
</router-link>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
|
||||
<div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-line-default">
|
||||
<!-- Basic Info -->
|
||||
<BaseHeading>
|
||||
{{ $t('customers.basic_info') }}
|
||||
@@ -92,12 +92,12 @@
|
||||
>
|
||||
<p
|
||||
v-if="field.type === 'Switch'"
|
||||
class="text-sm font-bold leading-5 text-black non-italic"
|
||||
class="text-sm font-bold leading-5 text-heading non-italic"
|
||||
>
|
||||
<span v-if="field.default_answer === 1"> {{ $t('general.yes') }} </span>
|
||||
<span v-else> {{ $t('general.no') }} </span>
|
||||
</p>
|
||||
<p v-else class="text-sm font-bold leading-5 text-black non-italic">
|
||||
<p v-else class="text-sm font-bold leading-5 text-heading non-italic">
|
||||
{{ field.default_answer }}
|
||||
</p>
|
||||
</BaseDescriptionListItem>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
pt-16
|
||||
pb-[6.6rem]
|
||||
ml-56
|
||||
bg-white
|
||||
bg-surface
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
@@ -23,7 +23,7 @@
|
||||
px-4
|
||||
pt-8
|
||||
pb-2
|
||||
border border-gray-200 border-solid
|
||||
border border-line-default border-solid
|
||||
height-full
|
||||
"
|
||||
>
|
||||
@@ -35,7 +35,7 @@
|
||||
variant="gray"
|
||||
@input="onSearch()"
|
||||
>
|
||||
<BaseIcon name="MagnifyingGlassIcon" class="text-gray-500" />
|
||||
<BaseIcon name="MagnifyingGlassIcon" class="text-muted" />
|
||||
</BaseInput>
|
||||
|
||||
<div class="flex mb-6 ml-3" role="group" aria-label="First group">
|
||||
@@ -58,7 +58,7 @@
|
||||
pb-2
|
||||
mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
border-b border-line-default border-solid
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@@ -111,7 +111,7 @@
|
||||
class="
|
||||
h-full
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
border-l border-line-default border-solid
|
||||
sidebar
|
||||
base-scroll
|
||||
"
|
||||
@@ -122,9 +122,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-l-transparent',
|
||||
'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
|
||||
'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
|
||||
hasActiveUrl(customer.id),
|
||||
},
|
||||
]"
|
||||
@@ -139,7 +139,7 @@
|
||||
not-italic
|
||||
font-normal
|
||||
leading-5
|
||||
text-black
|
||||
text-heading
|
||||
capitalize
|
||||
truncate
|
||||
"
|
||||
@@ -154,7 +154,7 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-600
|
||||
text-body
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
@@ -173,7 +173,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-body"
|
||||
>
|
||||
{{ $t('customers.no_matching_customers') }}
|
||||
</p>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<div
|
||||
v-if="dashboardStore.isDashboardDataLoaded"
|
||||
class="grid grid-cols-10 mt-8 bg-white rounded-xl shadow-sm border border-gray-100"
|
||||
class="grid grid-cols-10 mt-8 bg-surface rounded-xl shadow border border-line-light"
|
||||
>
|
||||
<!-- Chart -->
|
||||
<div
|
||||
@@ -50,7 +50,7 @@
|
||||
grid grid-cols-3
|
||||
col-span-10
|
||||
text-center
|
||||
border-t border-l border-gray-200 border-solid
|
||||
border-t border-l border-line-default border-solid
|
||||
lg:border-t-0 lg:text-right lg:col-span-3
|
||||
xl:col-span-2
|
||||
lg:grid-cols-1
|
||||
@@ -116,7 +116,7 @@
|
||||
class="
|
||||
col-span-3
|
||||
p-6
|
||||
border-t border-gray-200 border-solid
|
||||
border-t border-line-default border-solid
|
||||
lg:col-span-1
|
||||
"
|
||||
>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BaseContentPlaceholders
|
||||
class="grid grid-cols-10 mt-8 bg-white rounded shadow"
|
||||
class="grid grid-cols-10 mt-8 bg-surface rounded shadow"
|
||||
>
|
||||
<!-- Chart -->
|
||||
<div
|
||||
@@ -27,7 +27,7 @@
|
||||
grid grid-cols-3
|
||||
col-span-10
|
||||
text-center
|
||||
border-t border-l border-gray-200 border-solid
|
||||
border-t border-l border-line-default border-solid
|
||||
lg:border-t-0 lg:text-right lg:col-span-3
|
||||
xl:col-span-2
|
||||
lg:grid-cols-1
|
||||
@@ -76,7 +76,7 @@
|
||||
justify-center
|
||||
col-span-3
|
||||
p-6
|
||||
border-t border-gray-200 border-solid
|
||||
border-t border-line-default border-solid
|
||||
lg:justify-end lg:items-end lg:col-span-1
|
||||
"
|
||||
>
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
flex
|
||||
justify-between
|
||||
p-5
|
||||
bg-white
|
||||
bg-surface
|
||||
rounded-xl
|
||||
shadow-sm
|
||||
border border-gray-100
|
||||
shadow
|
||||
border border-line-light
|
||||
hover:shadow-md
|
||||
transition-shadow
|
||||
xl:p-6
|
||||
@@ -19,10 +19,10 @@
|
||||
:to="route"
|
||||
>
|
||||
<div>
|
||||
<span class="text-2xl font-bold leading-tight text-gray-900 xl:text-3xl">
|
||||
<span class="text-2xl font-bold leading-tight text-heading xl:text-3xl">
|
||||
<slot />
|
||||
</span>
|
||||
<span class="block mt-1 text-sm font-medium leading-tight text-gray-500 xl:text-base">
|
||||
<span class="block mt-1 text-sm font-medium leading-tight text-muted xl:text-base">
|
||||
{{ label }}
|
||||
</span>
|
||||
</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-surface rounded shadow lg:col-span-3 xl:p-4"
|
||||
>
|
||||
<div>
|
||||
<BaseContentPlaceholdersText
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
justify-between
|
||||
w-full
|
||||
p-3
|
||||
bg-white
|
||||
bg-surface
|
||||
rounded
|
||||
shadow
|
||||
lg:col-span-2
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
class="due-invoices"
|
||||
>
|
||||
<div class="relative z-10 flex items-center justify-between mb-3">
|
||||
<h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
|
||||
<h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
|
||||
{{ $t('dashboard.recent_invoices_card.title') }}
|
||||
</h6>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
class="recent-estimates"
|
||||
>
|
||||
<div class="relative z-10 flex items-center justify-between mb-3">
|
||||
<h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
|
||||
<h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
|
||||
{{ $t('dashboard.recent_estimate_card.title') }}
|
||||
</h6>
|
||||
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
h-10
|
||||
mt-5
|
||||
list-none
|
||||
border-b-2 border-gray-200 border-solid
|
||||
border-b-2 border-line-default border-solid
|
||||
"
|
||||
>
|
||||
<!-- Tabs -->
|
||||
@@ -163,7 +163,7 @@
|
||||
</template>
|
||||
|
||||
<BaseDropdownItem @click="removeMultipleEstimates">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-body" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@@ -298,13 +298,13 @@ const estimateColumns = computed(() => {
|
||||
key: 'checkbox',
|
||||
thClass: 'extra w-10 pr-0',
|
||||
sortable: false,
|
||||
tdClass: 'font-medium text-gray-900 pr-0',
|
||||
tdClass: 'font-medium text-heading pr-0',
|
||||
},
|
||||
{
|
||||
key: 'estimate_date',
|
||||
label: t('estimates.date'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-500',
|
||||
tdClass: 'font-medium text-muted',
|
||||
},
|
||||
{ key: 'estimate_number', label: t('estimates.number', 2) },
|
||||
{ key: 'name', label: t('estimates.customer') },
|
||||
@@ -312,7 +312,7 @@ const estimateColumns = computed(() => {
|
||||
{
|
||||
key: 'total',
|
||||
label: t('estimates.total'),
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
pt-16
|
||||
pb-[6.4rem]
|
||||
ml-56
|
||||
bg-white
|
||||
bg-surface
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
@@ -60,7 +60,7 @@
|
||||
px-4
|
||||
pt-8
|
||||
pb-2
|
||||
border border-gray-200 border-solid
|
||||
border border-line-default border-solid
|
||||
height-full
|
||||
"
|
||||
>
|
||||
@@ -73,7 +73,7 @@
|
||||
@input="onSearched()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon name="MagnifyingGlassIcon" class="text-gray-400" />
|
||||
<BaseIcon name="MagnifyingGlassIcon" class="text-subtle" />
|
||||
</template>
|
||||
</BaseInput>
|
||||
</div>
|
||||
@@ -98,7 +98,7 @@
|
||||
pb-2
|
||||
mb-1 mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
border-b border-line-default border-solid
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@@ -159,7 +159,7 @@
|
||||
class="
|
||||
h-full
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
border-l border-line-default border-solid
|
||||
base-scroll
|
||||
"
|
||||
>
|
||||
@@ -169,9 +169,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-l-transparent',
|
||||
'flex justify-between side-estimate p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
|
||||
'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
|
||||
hasActiveUrl(estimate.id),
|
||||
},
|
||||
]"
|
||||
@@ -187,7 +187,7 @@
|
||||
not-italic
|
||||
font-normal
|
||||
leading-5
|
||||
text-black
|
||||
text-heading
|
||||
capitalize
|
||||
truncate
|
||||
"
|
||||
@@ -201,7 +201,7 @@
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-600
|
||||
text-body
|
||||
"
|
||||
>
|
||||
{{ estimate.estimate_number }}
|
||||
@@ -226,7 +226,7 @@
|
||||
not-italic
|
||||
font-semibold
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
text-right text-heading
|
||||
"
|
||||
/>
|
||||
|
||||
@@ -236,7 +236,7 @@
|
||||
not-italic
|
||||
font-normal
|
||||
leading-5
|
||||
text-right text-gray-600
|
||||
text-right text-body
|
||||
est-date
|
||||
"
|
||||
>
|
||||
@@ -250,7 +250,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-body"
|
||||
>
|
||||
{{ $t('estimates.no_matching_estimates') }}
|
||||
</p>
|
||||
@@ -267,7 +267,7 @@
|
||||
flex-1
|
||||
border border-gray-400 border-solid
|
||||
rounded-md
|
||||
bg-white
|
||||
bg-surface
|
||||
frame-style
|
||||
"
|
||||
/>
|
||||
|
||||
@@ -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-body" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@@ -275,7 +275,7 @@ const expenseColumns = computed(() => {
|
||||
{
|
||||
key: 'status',
|
||||
thClass: 'extra w-10',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
placeholderClass: 'w-10',
|
||||
sortable: false,
|
||||
},
|
||||
@@ -283,13 +283,13 @@ const expenseColumns = computed(() => {
|
||||
key: 'expense_date',
|
||||
label: t('expenses.date'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{
|
||||
key: 'expense_number',
|
||||
label: t('expenses.expense_number'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
|
||||
@@ -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-line-default lg:gap-24 sm:gap-4"
|
||||
>
|
||||
<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-line-default lg:gap-24 sm:gap-4"
|
||||
>
|
||||
<div class="col-span-2 text-sm">
|
||||
{{ index }}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
grid grid-flow-row grid-cols-3
|
||||
lg:gap-24
|
||||
sm:gap-4
|
||||
border border-gray-200
|
||||
border border-line-default
|
||||
"
|
||||
>
|
||||
<BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
|
||||
@@ -29,7 +29,7 @@
|
||||
<div
|
||||
v-for="(permission, index) in permissions"
|
||||
:key="index"
|
||||
class="border border-gray-200"
|
||||
class="border border-line-default"
|
||||
>
|
||||
<div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
|
||||
<div class="col-span-2 p-3">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<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"
|
||||
step-container="w-full p-8 mb-8 bg-surface border border-line-default border-solid rounded md:w-full"
|
||||
>
|
||||
<component
|
||||
:is="databaseData.database_connection"
|
||||
|
||||
@@ -18,16 +18,16 @@
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 mb-0 text-sm text-gray-600">{{ $t('wizard.verify_domain.notes.notes') }}</p>
|
||||
<ul class="w-full text-gray-600 list-disc list-inside">
|
||||
<p class="mt-4 mb-0 text-sm text-body">{{ $t('wizard.verify_domain.notes.notes') }}</p>
|
||||
<ul class="w-full text-body list-disc list-inside">
|
||||
<li class="text-sm leading-8">
|
||||
{{ $t('wizard.verify_domain.notes.not_contain') }}
|
||||
<b class="inline-block px-1 bg-gray-100 rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
|
||||
<b class="inline-block px-1 bg-gray-100 rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
|
||||
<b class="inline-block px-1 bg-surface-tertiary rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
|
||||
<b class="inline-block px-1 bg-surface-tertiary rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
|
||||
</li>
|
||||
<li class="text-sm leading-8">
|
||||
{{ $t('wizard.verify_domain.notes.if_you') }}
|
||||
<b class="inline-block px-1 bg-gray-100">localhost:8080</b>
|
||||
<b class="inline-block px-1 bg-surface-tertiary">localhost:8080</b>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
@@ -95,7 +95,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowConfirmPassword = !isShowConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<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"
|
||||
step-container="bg-surface border border-line-default 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,7 @@
|
||||
<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"
|
||||
step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
|
||||
>
|
||||
<form action="" @submit.prevent="next">
|
||||
<div>
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -161,7 +161,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
||||
class="mr-1 text-gray-500 cursor-pointer"
|
||||
class="mr-1 text-muted cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
h-10
|
||||
mt-5
|
||||
list-none
|
||||
border-b-2 border-gray-200 border-solid
|
||||
border-b-2 border-line-default border-solid
|
||||
"
|
||||
>
|
||||
<!-- Tabs -->
|
||||
@@ -161,7 +161,7 @@
|
||||
</template>
|
||||
|
||||
<BaseDropdownItem @click="removeMultipleInvoices">
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
|
||||
<BaseIcon name="TrashIcon" class="mr-3 text-body" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@@ -341,7 +341,7 @@ const invoiceColumns = computed(() => {
|
||||
{
|
||||
key: 'checkbox',
|
||||
thClass: 'extra w-10',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
placeholderClass: 'w-10',
|
||||
sortable: false,
|
||||
},
|
||||
@@ -361,7 +361,7 @@ const invoiceColumns = computed(() => {
|
||||
{
|
||||
key: 'total',
|
||||
label: t('invoices.total'),
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
@@ -295,7 +295,7 @@ onSearched = debounce(onSearched, 500)
|
||||
pt-16
|
||||
pb-[6.4rem]
|
||||
ml-56
|
||||
bg-white
|
||||
bg-surface
|
||||
xl:ml-64
|
||||
w-88
|
||||
xl:block
|
||||
@@ -309,7 +309,7 @@ onSearched = debounce(onSearched, 500)
|
||||
px-4
|
||||
pt-8
|
||||
pb-2
|
||||
border border-gray-200 border-solid
|
||||
border border-line-default border-solid
|
||||
height-full
|
||||
"
|
||||
>
|
||||
@@ -322,7 +322,7 @@ onSearched = debounce(onSearched, 500)
|
||||
@input="onSearched()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
|
||||
<BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
|
||||
</template>
|
||||
</BaseInput>
|
||||
</div>
|
||||
@@ -341,7 +341,7 @@ onSearched = debounce(onSearched, 500)
|
||||
pb-2
|
||||
mb-1 mb-2
|
||||
text-sm
|
||||
border-b border-gray-200 border-solid
|
||||
border-b border-line-default border-solid
|
||||
"
|
||||
>
|
||||
{{ $t('general.sort_by') }}
|
||||
@@ -402,7 +402,7 @@ onSearched = debounce(onSearched, 500)
|
||||
class="
|
||||
h-full
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
border-l border-line-default border-solid
|
||||
base-scroll
|
||||
"
|
||||
>
|
||||
@@ -412,9 +412,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-l-transparent',
|
||||
'flex justify-between side-invoice p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
|
||||
{
|
||||
'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
|
||||
'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
|
||||
hasActiveUrl(invoice.id),
|
||||
},
|
||||
]"
|
||||
@@ -430,7 +430,7 @@ onSearched = debounce(onSearched, 500)
|
||||
not-italic
|
||||
font-normal
|
||||
leading-5
|
||||
text-black
|
||||
text-heading
|
||||
capitalize
|
||||
truncate
|
||||
"
|
||||
@@ -444,7 +444,7 @@ onSearched = debounce(onSearched, 500)
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-gray-600
|
||||
text-body
|
||||
"
|
||||
>
|
||||
{{ invoice.invoice_number }}
|
||||
@@ -465,7 +465,7 @@ onSearched = debounce(onSearched, 500)
|
||||
not-italic
|
||||
font-semibold
|
||||
leading-8
|
||||
text-right text-gray-900
|
||||
text-right text-heading
|
||||
block
|
||||
"
|
||||
:amount="invoice.total"
|
||||
@@ -477,7 +477,7 @@ onSearched = debounce(onSearched, 500)
|
||||
not-italic
|
||||
font-normal
|
||||
leading-5
|
||||
text-right text-gray-600
|
||||
text-right text-body
|
||||
est-date
|
||||
"
|
||||
>
|
||||
@@ -491,7 +491,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-body"
|
||||
>
|
||||
{{ $t('invoices.no_matching_invoices') }}
|
||||
</p>
|
||||
@@ -507,7 +507,7 @@ onSearched = debounce(onSearched, 500)
|
||||
class="
|
||||
flex-1
|
||||
border border-gray-400 border-solid
|
||||
bg-white
|
||||
bg-surface
|
||||
rounded-md
|
||||
frame-style
|
||||
"
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
items-center
|
||||
justify-end
|
||||
h-5
|
||||
border-gray-200 border-solid
|
||||
border-line-default border-solid
|
||||
"
|
||||
>
|
||||
<BaseDropdown v-if="itemStore.selectedItems.length">
|
||||
@@ -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-body" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@@ -237,7 +237,7 @@ const itemColumns = computed(() => {
|
||||
{
|
||||
key: 'status',
|
||||
thClass: 'extra w-10',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
placeholderClass: 'w-10',
|
||||
sortable: false,
|
||||
},
|
||||
@@ -245,7 +245,7 @@ const itemColumns = computed(() => {
|
||||
key: 'name',
|
||||
label: t('items.name'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{ key: 'unit_name', label: t('items.unit') },
|
||||
{ key: 'price', label: t('items.price') },
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
items-center
|
||||
justify-end
|
||||
h-5
|
||||
border-gray-200 border-solid
|
||||
border-line-default border-solid
|
||||
"
|
||||
>
|
||||
<BaseDropdown v-if="usersStore.selectedUsers.length">
|
||||
@@ -122,7 +122,7 @@
|
||||
</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-body" />
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
@@ -191,21 +191,21 @@
|
||||
v-if="userStore.currentUser.is_owner && usersStore.pendingInvitations.length > 0"
|
||||
class="mt-8"
|
||||
>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">
|
||||
<h3 class="text-lg font-medium text-heading mb-4">
|
||||
{{ $t('members.pending_invitations') }}
|
||||
</h3>
|
||||
<BaseCard>
|
||||
<div class="divide-y divide-gray-200">
|
||||
<div class="divide-y divide-line-default">
|
||||
<div
|
||||
v-for="invitation in usersStore.pendingInvitations"
|
||||
:key="invitation.id"
|
||||
class="flex items-center justify-between px-6 py-4"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
<p class="text-sm font-medium text-heading">
|
||||
{{ invitation.email }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-muted">
|
||||
{{ invitation.role?.title }} ·
|
||||
{{ $t('members.invited_by') }}: {{ invitation.invited_by?.name }}
|
||||
</p>
|
||||
@@ -269,14 +269,14 @@ const userTableColumns = computed(() => {
|
||||
{
|
||||
key: 'status',
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: t('members.name'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
tdClass: 'font-medium text-heading',
|
||||
},
|
||||
{ key: 'email', label: 'Email' },
|
||||
{
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mt-24">
|
||||
<label class="flex items-center justify-center text-gray-500">
|
||||
<label class="flex items-center justify-center text-muted">
|
||||
{{ $t('modules.no_modules_installed') }}
|
||||
</label>
|
||||
</div>
|
||||
@@ -61,10 +61,10 @@
|
||||
</div>
|
||||
|
||||
<BaseCard v-else class="mt-6">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
<h6 class="text-heading text-lg font-medium">
|
||||
{{ $t('modules.connect_installation') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
<p class="mt-1 text-sm text-muted">
|
||||
{{
|
||||
$t('modules.api_token_description', {
|
||||
url: globalStore.config.base_url.replace(/^http:\/\//, ''),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<ModulePlaceholder v-if="isFetchingInitialData" />
|
||||
<BasePage v-else class="bg-white">
|
||||
<BasePage v-else class="bg-surface">
|
||||
<BasePageHeader :title="moduleData.name">
|
||||
<BaseBreadcrumb>
|
||||
<BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
|
||||
@@ -30,7 +30,7 @@
|
||||
<button
|
||||
v-if="thumbnail && videoUrl"
|
||||
:class="[
|
||||
'relative md:h-24 lg:h-36 rounded hover:bg-gray-50',
|
||||
'relative md:h-24 lg:h-36 rounded hover:bg-hover',
|
||||
{
|
||||
'outline-hidden ring-3 ring-offset-1 ring-primary-500':
|
||||
displayVideo,
|
||||
@@ -64,7 +64,7 @@
|
||||
id="tabs-1-tab-1"
|
||||
:key="ssIndx"
|
||||
:class="[
|
||||
'relative md:h-24 lg:h-36 rounded hover:bg-gray-50',
|
||||
'relative md:h-24 lg:h-36 rounded hover:bg-hover',
|
||||
{
|
||||
'outline-hidden ring-3 ring-offset-1 ring-primary-500':
|
||||
displayImage === screenshot.url,
|
||||
@@ -108,7 +108,7 @@
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="aspect-w-4 aspect-h-3 rounded-lg bg-gray-100 overflow-hidden"
|
||||
class="aspect-w-4 aspect-h-3 rounded-lg bg-surface-tertiary overflow-hidden"
|
||||
>
|
||||
<img
|
||||
:src="displayImage"
|
||||
@@ -146,7 +146,7 @@
|
||||
text-2xl
|
||||
font-extrabold
|
||||
tracking-tight
|
||||
text-gray-900
|
||||
text-heading
|
||||
sm:text-3xl
|
||||
"
|
||||
>
|
||||
@@ -159,7 +159,7 @@
|
||||
|
||||
<p
|
||||
v-if="moduleData.latest_module_version"
|
||||
class="text-sm text-gray-500 mt-2"
|
||||
class="text-sm text-muted mt-2"
|
||||
>
|
||||
{{ $t('modules.version') }}
|
||||
{{ moduleVersion }} ({{ $t('modules.last_updated') }}
|
||||
@@ -170,7 +170,7 @@
|
||||
|
||||
<!-- Module Description -->
|
||||
<div
|
||||
class="prose prose-sm max-w-none text-gray-500 text-sm my-10"
|
||||
class="prose prose-sm max-w-none text-muted text-sm my-10"
|
||||
v-html="moduleData.long_description"
|
||||
/>
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<div v-if="!moduleData.purchased">
|
||||
<RadioGroup v-model="selectedPlan">
|
||||
<RadioGroupLabel class="sr-only"> Pricing plans </RadioGroupLabel>
|
||||
<div class="relative bg-white rounded-md -space-y-px">
|
||||
<div class="relative bg-surface rounded-md -space-y-px">
|
||||
<RadioGroupOption
|
||||
v-for="(size, sizeIdx) in modulePrice"
|
||||
:key="size.name"
|
||||
@@ -194,7 +194,7 @@
|
||||
: '',
|
||||
checked
|
||||
? 'bg-primary-50 border-primary-200 z-10'
|
||||
: 'border-gray-200',
|
||||
: 'border-line-default',
|
||||
'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-hidden',
|
||||
]"
|
||||
>
|
||||
@@ -203,18 +203,18 @@
|
||||
:class="[
|
||||
checked
|
||||
? 'bg-primary-600 border-transparent'
|
||||
: 'bg-white border-gray-300',
|
||||
: 'bg-surface border-line-strong',
|
||||
active ? 'ring-2 ring-offset-2 ring-primary-500' : '',
|
||||
'h-4 w-4 rounded-full border flex items-center justify-center',
|
||||
]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="rounded-full bg-white w-1.5 h-1.5" />
|
||||
<span class="rounded-full bg-surface w-1.5 h-1.5" />
|
||||
</span>
|
||||
<RadioGroupLabel
|
||||
as="span"
|
||||
:class="[
|
||||
checked ? 'text-primary-900' : 'text-gray-900',
|
||||
checked ? 'text-primary-900' : 'text-heading',
|
||||
'ml-3 font-medium',
|
||||
]"
|
||||
>
|
||||
@@ -226,7 +226,7 @@
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
checked ? 'text-primary-900' : 'text-gray-900',
|
||||
checked ? 'text-primary-900' : 'text-heading',
|
||||
'font-medium',
|
||||
]"
|
||||
>
|
||||
@@ -328,18 +328,18 @@
|
||||
<div class="mt-10"></div>
|
||||
|
||||
<!-- HighLights -->
|
||||
<div class="border-t border-gray-200 mt-10 pt-10">
|
||||
<h3 class="text-sm font-medium text-gray-900">
|
||||
<div class="border-t border-line-default mt-10 pt-10">
|
||||
<h3 class="text-sm font-medium text-heading">
|
||||
{{ $t('modules.what_you_get') }}
|
||||
</h3>
|
||||
<div class="mt-4 prose prose-sm max-w-none text-gray-500">
|
||||
<div class="mt-4 prose prose-sm max-w-none text-muted">
|
||||
<div
|
||||
class="prose prose-sm max-w-none text-gray-500 text-sm"
|
||||
class="prose prose-sm max-w-none text-muted text-sm"
|
||||
v-html="moduleData.highlights"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 mt-10 pt-10">
|
||||
<div class="border-t border-line-default mt-10 pt-10">
|
||||
<div
|
||||
v-for="(link, key) in moduleData.links"
|
||||
:key="key"
|
||||
@@ -352,7 +352,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Installation Steps -->
|
||||
<div v-if="isInstalling" class="border-t border-gray-200 mt-10 pt-10">
|
||||
<div v-if="isInstalling" class="border-t border-line-default mt-10 pt-10">
|
||||
<ul class="w-full p-0 list-none">
|
||||
<li
|
||||
v-for="step in installationSteps"
|
||||
@@ -362,7 +362,7 @@
|
||||
justify-between
|
||||
w-full
|
||||
py-3
|
||||
border-b border-gray-200 border-solid
|
||||
border-b border-line-default border-solid
|
||||
last:border-b-0
|
||||
"
|
||||
>
|
||||
@@ -370,7 +370,7 @@
|
||||
{{ $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-muted">
|
||||
{{ step.time }}
|
||||
</span>
|
||||
<span
|
||||
@@ -386,8 +386,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Social Share -->
|
||||
<!-- <div class="border-t border-gray-200 mt-10 pt-10">
|
||||
<h3 class="text-sm font-medium text-gray-900">Share</h3>
|
||||
<!-- <div class="border-t border-line-default mt-10 pt-10">
|
||||
<h3 class="text-sm font-medium text-heading">Share</h3>
|
||||
<ul role="list" class="flex items-center space-x-6 mt-4">
|
||||
<li>
|
||||
<a
|
||||
@@ -398,8 +398,8 @@
|
||||
justify-center
|
||||
w-6
|
||||
h-6
|
||||
text-gray-400
|
||||
hover:text-gray-500
|
||||
text-subtle
|
||||
hover:text-muted
|
||||
"
|
||||
>
|
||||
<span class="sr-only">Share on Facebook</span>
|
||||
@@ -426,8 +426,8 @@
|
||||
justify-center
|
||||
w-6
|
||||
h-6
|
||||
text-gray-400
|
||||
hover:text-gray-500
|
||||
text-subtle
|
||||
hover:text-muted
|
||||
"
|
||||
>
|
||||
<span class="sr-only">Share on Instagram</span>
|
||||
@@ -454,8 +454,8 @@
|
||||
justify-center
|
||||
w-6
|
||||
h-6
|
||||
text-gray-400
|
||||
hover:text-gray-500
|
||||
text-subtle
|
||||
hover:text-muted
|
||||
"
|
||||
>
|
||||
<span class="sr-only">Share on Twitter</span>
|
||||
@@ -485,13 +485,13 @@
|
||||
"
|
||||
>
|
||||
<TabGroup as="div">
|
||||
<TabList class="-mb-px flex space-x-8 border-b border-gray-200">
|
||||
<TabList class="-mb-px flex space-x-8 border-b border-line-default">
|
||||
<Tab v-slot="{ selected }" as="template">
|
||||
<button
|
||||
:class="[
|
||||
selected
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
|
||||
: 'border-transparent text-body hover:text-heading hover:border-line-strong',
|
||||
'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
|
||||
]"
|
||||
>
|
||||
@@ -503,7 +503,7 @@
|
||||
:class="[
|
||||
selected
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
|
||||
: 'border-transparent text-body hover:text-heading hover:border-line-strong',
|
||||
'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
|
||||
]"
|
||||
>
|
||||
@@ -515,7 +515,7 @@
|
||||
:class="[
|
||||
selected
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
|
||||
: 'border-transparent text-body hover:text-heading hover:border-line-strong',
|
||||
'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
|
||||
]"
|
||||
>
|
||||
@@ -531,7 +531,7 @@
|
||||
<div
|
||||
v-for="(review, reviewIdx) in moduleData.reviews"
|
||||
:key="reviewIdx"
|
||||
class="flex text-sm text-gray-500 space-x-4"
|
||||
class="flex text-sm text-muted space-x-4"
|
||||
>
|
||||
<div class="flex-none py-10">
|
||||
<span
|
||||
@@ -542,7 +542,7 @@
|
||||
h-12
|
||||
w-12
|
||||
rounded-full
|
||||
bg-gray-500
|
||||
bg-surface-secondary0
|
||||
"
|
||||
>
|
||||
<span
|
||||
@@ -559,11 +559,11 @@
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
reviewIdx === 0 ? '' : 'border-t border-gray-200',
|
||||
reviewIdx === 0 ? '' : 'border-t border-line-default',
|
||||
'py-10',
|
||||
]"
|
||||
>
|
||||
<h3 class="font-medium text-gray-900">
|
||||
<h3 class="font-medium text-heading">
|
||||
{{ review.customer.name }}
|
||||
</h3>
|
||||
<p>
|
||||
@@ -575,28 +575,28 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-4 prose prose-sm max-w-none text-gray-500"
|
||||
class="mt-4 prose prose-sm max-w-none text-muted"
|
||||
v-html="review.feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex w-full items-center justify-center">
|
||||
<p class="text-gray-500 mt-10 text-sm">
|
||||
<p class="text-muted mt-10 text-sm">
|
||||
{{ $t('modules.no_reviews_found') }}
|
||||
</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<!-- FAQs -->
|
||||
<TabPanel as="dl" class="text-sm text-gray-500">
|
||||
<TabPanel as="dl" class="text-sm text-muted">
|
||||
<h3 class="sr-only">Frequently Asked Questions</h3>
|
||||
|
||||
<template v-for="faq in moduleData.faq" :key="faq.question">
|
||||
<dt class="mt-10 font-medium text-gray-900">
|
||||
<dt class="mt-10 font-medium text-heading">
|
||||
{{ faq.question }}
|
||||
</dt>
|
||||
<dd class="mt-2 prose prose-sm max-w-none text-gray-500">
|
||||
<dd class="mt-2 prose prose-sm max-w-none text-muted">
|
||||
<p>{{ faq.answer }}</p>
|
||||
</dd>
|
||||
</template>
|
||||
@@ -607,7 +607,7 @@
|
||||
<h3 class="sr-only">License</h3>
|
||||
|
||||
<div
|
||||
class="prose prose-sm max-w-none text-gray-500"
|
||||
class="prose prose-sm max-w-none text-muted"
|
||||
v-html="moduleData.license"
|
||||
/>
|
||||
</TabPanel>
|
||||
@@ -622,7 +622,7 @@
|
||||
class="mt-24 sm:mt-32 lg:max-w-none"
|
||||
>
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<h2 class="text-lg font-medium text-gray-900">
|
||||
<h2 class="text-lg font-medium text-heading">
|
||||
{{ $t('modules.other_modules') }}
|
||||
</h2>
|
||||
<a
|
||||
@@ -955,7 +955,7 @@ function statusClass(step) {
|
||||
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return 'text-primary-800 bg-gray-200'
|
||||
return 'text-primary-800 bg-surface-muted'
|
||||
case 'finished':
|
||||
return 'text-teal-500 bg-teal-100'
|
||||
case 'running':
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user