fix padding issue

* add dark mode in dashboard stats & chart

* fix indentation on dashboard chart

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>

app/Http/Controllers/V1/Admin/Customer/CustomerStatsController.php

@@ -103,6 +103,7 @@ class CustomerStatsController extends Controller
         )
             ->whereCompany()
             ->whereCustomer($customer->id)
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->sum('total');
         $totalReceipts = Payment::whereBetween(
             'payment_date',

app/Http/Controllers/V1/Admin/Dashboard/DashboardController.php

@@ -104,6 +104,7 @@ class DashboardController extends Controller
             'invoice_date',
             [$startDate->format('Y-m-d'), $start->format('Y-m-d')]
         )
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->whereCompany()
             ->sum('base_total');
 
@@ -141,6 +142,7 @@ class DashboardController extends Controller
         $recent_due_invoices = Invoice::with('customer')
             ->whereCompany()
             ->where('base_due_amount', '>', 0)
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->take(5)
             ->latest()
             ->get();

app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php

@@ -24,6 +24,7 @@ class InvoicesController extends Controller
         $limit = $request->has('limit') ? $request->limit : 10;
 
         $invoices = Invoice::whereCompany()
+            ->whereTabFilters($request->tab_status)
             ->join('customers', 'customers.id', '=', 'invoices.customer_id')
             ->applyFilters($request->all())
             ->select('invoices.*', 'customers.name')

app/Http/Requests/CompaniesRequest.php

@@ -3,7 +3,6 @@
 namespace Crater\Http\Requests;
 
 use Illuminate\Foundation\Http\FormRequest;
-use Illuminate\Support\Str;
 use Illuminate\Validation\Rule;
 
 class CompaniesRequest extends FormRequest
@@ -34,6 +33,10 @@ class CompaniesRequest extends FormRequest
             'currency' => [
                 'required'
             ],
+            'slug' => [
+                'required',
+                Rule::unique('companies')
+            ],
             'address.name' => [
                 'nullable',
             ],
@@ -68,11 +71,11 @@ class CompaniesRequest extends FormRequest
     {
         return collect($this->validated())
             ->only([
-                'name'
+                'name',
+                'slug'
             ])
             ->merge([
-                'owner_id' => $this->user()->id,
-                'slug' => Str::slug($this->name)
+                'owner_id' => $this->user()->id
             ])
             ->toArray();
     }

app/Http/Requests/CompanyRequest.php

@@ -30,7 +30,8 @@ class CompanyRequest extends FormRequest
                 Rule::unique('companies')->ignore($this->header('company'), 'id'),
             ],
             'slug' => [
-                'nullable'
+                'required',
+                Rule::unique('companies')->ignore($this->header('company'), 'id'),
             ],
             'address.country_id' => [
                 'required',

app/Http/Resources/EstimateResource.php

@@ -23,7 +23,7 @@ class EstimateResource extends JsonResource
             'reference_number' => $this->reference_number,
             'tax_per_item' => $this->tax_per_item,
             'discount_per_item' => $this->discount_per_item,
-            'notes' => $this->getNotes(),
+            'notes' => $this->notes,
             'discount' => $this->discount,
             'discount_type' => $this->discount_type,
             'discount_val' => $this->discount_val,

app/Http/Resources/PaymentResource.php

@@ -18,7 +18,7 @@ class PaymentResource extends JsonResource
             'id' => $this->id,
             'payment_number' => $this->payment_number,
             'payment_date' => $this->payment_date,
-            'notes' => $this->getNotes(),
+            'notes' => $this->notes,
             'amount' => $this->amount,
             'unique_hash' => $this->unique_hash,
             'invoice_id' => $this->invoice_id,

app/Models/Company.php

@@ -217,7 +217,7 @@ class Company extends Model implements HasMedia
             'estimate_billing_address_format' => $billingAddressFormat,
             'payment_company_address_format' => $companyAddressFormat,
             'payment_from_customer_address_format' => $paymentFromCustomerAddress,
-            'currency' => request()->currency ?? 13,
+            'currency' => request()->currency ?? 1,
             'time_zone' => 'Asia/Kolkata',
             'language' => 'en',
             'fiscal_year' => '1-12',

app/Models/Estimate.php

@@ -483,7 +483,8 @@ class Estimate extends Model implements HasMedia
             '{ESTIMATE_DATE}' => $this->formattedEstimateDate,
             '{ESTIMATE_EXPIRY_DATE}' => $this->formattedExpiryDate,
             '{ESTIMATE_NUMBER}' => $this->estimate_number,
-            '{ESTIMATE_REF_NUMBER}' => $this->reference_number,
+            '{PDF_LINK}' => $this->estimatePdfUrl,
+            '{TOTAL_AMOUNT}' => format_money_pdf($this->total, $this->customer->currency)
         ];
     }
 

app/Models/Expense.php

@@ -240,7 +240,7 @@ class Expense extends Model implements HasMedia
         }
 
         if ($request->hasFile('attachment_receipt')) {
-            $expense->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts');
+            $expense->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts', 'local');
         }
 
         if ($request->customFields) {
@@ -262,12 +262,12 @@ class Expense extends Model implements HasMedia
             ExchangeRateLog::addExchangeRateLog($this);
         }
 
-        if (isset($request->is_attachment_receipt_removed) && (bool) $request->is_attachment_receipt_removed) {
+        if (isset($request->is_attachment_receipt_removed) && $request->is_attachment_receipt_removed == "true") {
             $this->clearMediaCollection('receipts');
         }
         if ($request->hasFile('attachment_receipt')) {
             $this->clearMediaCollection('receipts');
-            $this->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts');
+            $this->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts', 'local');
         }
 
         if ($request->customFields) {

app/Models/Invoice.php

@@ -187,16 +187,6 @@ class Invoice extends Model implements HasMedia
         return Carbon::parse($this->invoice_date)->format($dateFormat);
     }
 
-    public function scopeWhereStatus($query, $status)
-    {
-        return $query->where('invoices.status', $status);
-    }
-
-    public function scopeWherePaidStatus($query, $status)
-    {
-        return $query->where('invoices.paid_status', $status);
-    }
-
     public function scopeWhereDueStatus($query, $status)
     {
         return $query->whereIn('invoices.paid_status', [
@@ -234,6 +224,40 @@ class Invoice extends Model implements HasMedia
         $query->orderBy($orderByField, $orderBy);
     }
 
+    public function scopeWhereStatus($query, $status)
+    {
+        return $query->where('invoices.status', $status);
+    }
+
+    public function scopeWherePaidStatus($query, $status)
+    {
+        return $query->where('invoices.paid_status', $status);
+    }
+
+    public function scopeWhereTabFilters($query, $status)
+    {
+        if ($status == "DRAFT") {
+            return $query->where('invoices.status', $status);
+        }
+
+        if ($status == "SENT") {
+            return $query->whereIn('invoices.status', [
+                self::STATUS_SENT,
+                self::STATUS_VIEWED,
+                self::STATUS_COMPLETED
+            ]);
+        }
+
+        if ($status == 'DUE') {
+            return $query->whereIn('invoices.paid_status', [
+                self::STATUS_UNPAID,
+                self::STATUS_PARTIALLY_PAID,
+            ]);
+        }
+
+        return ;
+    }
+
     public function scopeApplyFilters($query, array $filters)
     {
         $filters = collect($filters);
@@ -249,17 +273,11 @@ class Invoice extends Model implements HasMedia
                 $filters->get('status') == self::STATUS_PAID
             ) {
                 $query->wherePaidStatus($filters->get('status'));
-            } elseif ($filters->get('status') == 'DUE') {
-                $query->whereDueStatus($filters->get('status'));
             } else {
                 $query->whereStatus($filters->get('status'));
             }
         }
 
-        if ($filters->get('paid_status')) {
-            $query->wherePaidStatus($filters->get('status'));
-        }
-
         if ($filters->get('invoice_id')) {
             $query->whereInvoice($filters->get('invoice_id'));
         }
@@ -651,7 +669,9 @@ class Invoice extends Model implements HasMedia
             '{INVOICE_DATE}' => $this->formattedInvoiceDate,
             '{INVOICE_DUE_DATE}' => $this->formattedDueDate,
             '{INVOICE_NUMBER}' => $this->invoice_number,
-            '{INVOICE_REF_NUMBER}' => $this->reference_number,
+            '{PDF_LINK}' => $this->invoicePdfUrl,
+            '{DUE_AMOUNT}' => format_money_pdf($this->due_amount, $this->customer->currency),
+            '{TOTAL_AMOUNT}' => format_money_pdf($this->total, $this->customer->currency)
         ];
     }
 

app/Models/Payment.php

@@ -435,7 +435,8 @@ class Payment extends Model implements HasMedia
             '{PAYMENT_DATE}' => $this->formattedPaymentDate,
             '{PAYMENT_MODE}' => $this->paymentMethod ? $this->paymentMethod->name : null,
             '{PAYMENT_NUMBER}' => $this->payment_number,
-            '{PAYMENT_AMOUNT}' => $this->reference_number,
+            '{PDF_LINK}' => $this->paymentPdfUrl,
+            '{PAYMENT_AMOUNT}' => format_money_pdf($this->amount, $this->customer->currency)
         ];
     }
 

package.json

@@ -27,7 +27,7 @@
     "vite": "^2.6.1"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.4.0",
+    "@headlessui/vue": "^1.5.0",
     "@heroicons/vue": "^1.0.1",
     "@popperjs/core": "^2.9.2",
     "@stripe/stripe-js": "^1.21.2",
@@ -48,7 +48,8 @@
     "mini-svg-data-uri": "^1.3.3",
     "moment": "^2.29.1",
     "pinia": "^2.0.4",
-    "v-money3": "^3.13.5",
+    "v-calendar": "3.0.0-alpha.8",
+    "v-money3": "3.16.1",
     "v-tooltip": "^4.0.0-alpha.1",
     "vue": "^3.2.0-beta.5",
     "vue-flatpickr-component": "^9.0.3",

resources/scripts/admin/components/charts/LineChart.vue

@@ -6,8 +6,17 @@
 
 <script setup>
 import Chart from 'chart.js'
-import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  watchEffect,
+  inject,
+  watch,
+} from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
 
 const utils = inject('utils')
 
@@ -44,9 +53,11 @@ const props = defineProps({
   },
 })
 
+const isDarkModeOn = document.documentElement.classList.contains('dark')
 let myLineChart = null
 const graph = ref(null)
 const companyStore = useCompanyStore()
+const globalStore = useGlobalStore()
 const defaultCurrency = computed(() => {
   return companyStore.selectedCompanyCurrency
 })
@@ -60,6 +71,14 @@ watchEffect(() => {
   }
 })
 
+watch(
+  () => globalStore.isDarkModeOn,
+  () => {
+    myLineChart.reset()
+    updateColors()
+  }
+)
+
 onMounted(() => {
   let context = graph.value.getContext('2d')
   let options = reactive({
@@ -81,6 +100,8 @@ onMounted(() => {
     },
   })
 
+  const salesColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
+
   let data = reactive({
     labels: props.labels,
     datasets: [
@@ -89,16 +110,16 @@ onMounted(() => {
         fill: false,
         lineTension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
-        borderColor: '#040405',
+        borderColor: salesColor,
         borderCapStyle: 'butt',
         borderDash: [],
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
-        pointBorderColor: '#040405',
+        pointBorderColor: salesColor,
         pointBackgroundColor: '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
-        pointHoverBackgroundColor: '#040405',
+        pointHoverBackgroundColor: salesColor,
         pointHoverBorderColor: 'rgba(220,220,220,1)',
         pointHoverBorderWidth: 2,
         pointRadius: 4,
@@ -194,4 +215,12 @@ function update() {
     lazy: true,
   })
 }
+
+function updateColors() {
+  const newColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
+
+  myLineChart.data.datasets[0].borderColor = newColor
+  myLineChart.data.datasets[0].pointBorderColor = newColor
+  myLineChart.data.datasets[0].pointHoverBackgroundColor = newColor
+}
 </script>

resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue

@@ -50,21 +50,11 @@
           </BaseInputGroup>
         </template>
       </ValidateEach>
-      <div
-        slot="footer"
-        class="
-          z-0
-          flex
-          justify-end
-          mt-4
-          pt-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton :loading="isSaving" variant="primary" type="submit">
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseCard>
 </template>

resources/scripts/admin/components/custom-fields/CreateCustomFields.vue

@@ -64,7 +64,7 @@ function mergeExistingValues() {
   if (props.isEdit) {
     props.store[props.storeProp].fields.forEach((field) => {
       const existingIndex = props.store[props.storeProp].customFields.findIndex(
-        (f) => f.id === field.custom_field_id
+        (f) => f.id == field.custom_field_id
       )
 
       if (existingIndex > -1) {

resources/scripts/admin/components/custom-fields/types/DateTimeType.vue

@@ -9,7 +9,7 @@ import { computed } from 'vue'
 const props = defineProps({
   modelValue: {
     type: String,
-    default: moment().format('YYYY-MM-DD hh:MM'),
+    default: moment().format('YYYY-MM-DD HH:mm'),
   },
 })
 

resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue

@@ -7,11 +7,12 @@
     <!-- edit customField  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_CUSTOM_FIELDS)"
+      v-slot="slotProps"
       @click="editCustomField(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -19,11 +20,12 @@
     <!-- delete customField  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_CUSTOM_FIELDS)"
+      v-slot="slotProps"
       @click="removeCustomField(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue

@@ -12,10 +12,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_CUSTOMER)"
       :to="`/admin/customers/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -29,10 +29,10 @@
       "
       :to="`customers/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -41,11 +41,12 @@
     <!-- Delete Customer  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_CUSTOMER)"
+      v-slot="slotProps"
       @click="removeCustomer(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue

@@ -10,11 +10,12 @@
     <!-- Copy PDF url  -->
     <BaseDropdownItem
       v-if="route.name === 'estimates.view'"
+      v-slot="slotProps"
       @click="copyPdfUrl"
     >
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -24,10 +25,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_ESTIMATE)"
       :to="`/admin/estimates/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -36,11 +37,12 @@
     <!-- Delete Estimate  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_ESTIMATE)"
+      v-slot="slotProps"
       @click="removeEstimate(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
@@ -53,10 +55,10 @@
       "
       :to="`estimates/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -65,11 +67,12 @@
     <!-- Convert into Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
+      v-slot="slotProps"
       @click="convertInToinvoice(row.id)"
     >
       <BaseIcon
         name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.convert_to_invoice') }}
     </BaseDropdownItem>
@@ -81,11 +84,12 @@
         route.name !== 'estimates.view' &&
         userStore.hasAbilities(abilities.SEND_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="onMarkAsSent(row.id)"
     >
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.mark_as_sent') }}
     </BaseDropdownItem>
@@ -97,20 +101,21 @@
         route.name !== 'estimates.view' &&
         userStore.hasAbilities(abilities.SEND_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="sendEstimate(row)"
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.send_estimate') }}
     </BaseDropdownItem>
 
     <!-- Resend Estimate -->
-    <BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
+    <BaseDropdownItem v-if="canResendEstimate(row)" v-slot="slotProps"  @click="sendEstimate(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.resend_estimate') }}
     </BaseDropdownItem>
@@ -121,11 +126,12 @@
         row.status !== 'ACCEPTED' &&
         userStore.hasAbilities(abilities.EDIT_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="onMarkAsAccepted(row.id)"
     >
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.mark_as_accepted') }}
     </BaseDropdownItem>
@@ -136,11 +142,12 @@
         row.status !== 'REJECTED' &&
         userStore.hasAbilities(abilities.EDIT_ESTIMATE)
       "
+      v-slot="slotProps"
       @click="onMarkAsRejected(row.id)"
     >
       <BaseIcon
         name="XCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('estimates.mark_as_rejected') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue

@@ -13,11 +13,12 @@
     <!-- edit expenseCategory  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
+      v-slot="slotProps"
       @click="editExpenseCategory(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -25,11 +26,12 @@
     <!-- delete expenseCategory  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
+      v-slot="slotProps"
       @click="removeExpenseCategory(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue

@@ -12,10 +12,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
       :to="`/admin/expenses/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -24,11 +24,12 @@
     <!-- delete expense  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
+      v-slot="slotProps"
       @click="removeExpense(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue

@@ -12,20 +12,20 @@
       v-if="userStore.hasAbilities(abilities.EDIT_INVOICE)"
       :to="`/admin/invoices/${row.id}/edit`"
     >
-      <BaseDropdownItem v-show="row.allow_edit">
+      <BaseDropdownItem v-show="row.allow_edit" v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Copy PDF url  -->
-    <BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
+    <BaseDropdownItem v-if="route.name === 'invoices.view'" v-slot="slotProps" @click="copyPdfUrl">
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -38,29 +38,29 @@
       "
       :to="`/admin/invoices/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Send Invoice Mail  -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
+    <BaseDropdownItem v-if="canSendInvoice(row)" v-slot="slotProps" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.send_invoice') }}
     </BaseDropdownItem>
 
     <!-- Resend Invoice -->
-    <BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
+    <BaseDropdownItem v-if="canReSendInvoice(row)" v-slot="slotProps" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.resend_invoice') }}
     </BaseDropdownItem>
@@ -69,20 +69,21 @@
     <router-link :to="`/admin/payments/${row.id}/create`">
       <BaseDropdownItem
         v-if="row.status == 'SENT' && route.name !== 'invoices.view'"
+        v-slot="slotProps"
       >
         <BaseIcon
           name="CreditCardIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('invoices.record_payment') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Mark as sent Invoice -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
+    <BaseDropdownItem v-if="canSendInvoice(row)" v-slot="slotProps" @click="onMarkAsSent(row.id)">
       <BaseIcon
         name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.mark_as_sent') }}
     </BaseDropdownItem>
@@ -90,11 +91,12 @@
     <!-- Clone Invoice into new invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
+      v-slot="slotProps"
       @click="cloneInvoiceData(row)"
     >
       <BaseIcon
         name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('invoices.clone_invoice') }}
     </BaseDropdownItem>
@@ -102,11 +104,12 @@
     <!--  Delete Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_INVOICE)"
+      v-slot="slotProps"
       @click="removeInvoice(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue

@@ -12,11 +12,8 @@
       v-if="userStore.hasAbilities(abilities.EDIT_ITEM)"
       :to="`/admin/items/${row.id}/edit`"
     >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
-        />
+      <BaseDropdownItem v-slot="slotProps">
+        <BaseIcon name="PencilIcon" :class="slotProps.class" />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
@@ -24,12 +21,10 @@
     <!-- delete item  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_ITEM)"
+      v-slot="slotProps"
       @click="removeItem(row.id)"
     >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
-      />
+      <BaseIcon name="TrashIcon" :class="slotProps.class" />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
   </BaseDropdown>

resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue

@@ -10,11 +10,12 @@
     <!-- edit note  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
+      v-slot="slotProps"
       @click="editNote(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -22,11 +23,12 @@
     <!-- delete note  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
+      v-slot="slotProps"
       @click="removeNote(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue

@@ -8,30 +8,31 @@
     </template>
 
     <!-- Copy pdf url  -->
-    <BaseDropdown-item
+    <BaseDropdownItem
       v-if="
         route.name === 'payments.view' &&
         userStore.hasAbilities(abilities.VIEW_PAYMENT)
       "
+      v-slot="slotProps"
       class="rounded-md"
       @click="copyPdfUrl"
     >
       <BaseIcon
         name="LinkIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.copy_pdf_url') }}
-    </BaseDropdown-item>
+    </BaseDropdownItem>
 
     <!-- edit payment  -->
     <router-link
       v-if="userStore.hasAbilities(abilities.EDIT_PAYMENT)"
       :to="`/admin/payments/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -45,10 +46,10 @@
       "
       :to="`/admin/payments/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -61,11 +62,12 @@
         route.name !== 'payments.view' &&
         userStore.hasAbilities(abilities.SEND_PAYMENT)
       "
+      v-slot="slotProps"
       @click="sendPayment(row)"
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('payments.send_payment') }}
     </BaseDropdownItem>
@@ -73,11 +75,12 @@
     <!-- delete payment  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_PAYMENT)"
+      v-slot="slotProps"
       @click="removePayment(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue

@@ -8,19 +8,19 @@
     </template>
 
     <!-- edit paymentMode  -->
-    <BaseDropdownItem @click="editPaymentMode(row.id)">
+    <BaseDropdownItem v-slot="slotProps"  @click="editPaymentMode(row.id)">
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
 
     <!-- delete paymentMode  -->
-    <BaseDropdownItem @click="removePaymentMode(row.id)">
+    <BaseDropdownItem v-slot="slotProps"  @click="removePaymentMode(row.id)">
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue

@@ -15,10 +15,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_RECURRING_INVOICE)"
       :to="`/admin/recurring-invoices/${row.id}/edit`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -32,10 +32,10 @@
       "
       :to="`recurring-invoices/${row.id}/view`"
     >
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="EyeIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -44,11 +44,12 @@
     <!-- Delete Recurring Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_RECURRING_INVOICE)"
+      v-slot="slotProps"
       @click="removeMultipleRecurringInvoices(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue

@@ -10,11 +10,12 @@
     <!-- edit role  -->
     <BaseDropdownItem
       v-if="userStore.currentUser.is_owner"
+      v-slot="slotProps"
       @click="editRole(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -22,11 +23,12 @@
     <!-- delete role  -->
     <BaseDropdownItem
       v-if="userStore.currentUser.is_owner"
+      v-slot="slotProps"
       @click="removeRole(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue

@@ -10,11 +10,12 @@
     <!-- edit tax-type  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_TAX_TYPE)"
+      v-slot="slotProps"
       @click="editTaxType(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -22,11 +23,12 @@
     <!-- delete tax-type  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_TAX_TYPE)"
+      v-slot="slotProps"
       @click="removeTaxType(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue

@@ -9,20 +9,20 @@
 
     <!-- edit user  -->
     <router-link :to="`/admin/users/${row.id}/edit`">
-      <BaseDropdownItem>
+      <BaseDropdownItem v-slot="slotProps">
         <BaseIcon
           name="PencilIcon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+          :class="slotProps.class"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- delete user  -->
-    <BaseDropdownItem @click="removeUser(row.id)">
+    <BaseDropdownItem v-slot="slotProps" @click="removeUser(row.id)">
       <BaseIcon
         name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        :class="slotProps.class"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/modal-components/BackupModal.vue

@@ -57,9 +57,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.create') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CategoryModal.vue

@@ -47,15 +47,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -80,7 +72,7 @@
           </template>
           {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CompanyModal.vue

@@ -48,6 +48,24 @@
             />
           </BaseInputGroup>
 
+          <BaseInputGroup
+            :label="$tc('settings.company_info.company_slug')"
+            :help-text="$t('settings.company_info.company_slug_help_text')"
+            :error="
+              v$.newCompanyForm.slug.$error &&
+              v$.newCompanyForm.slug.$errors[0].$message
+            "
+            :content-loading="isFetchingInitialData"
+            required
+          >
+            <BaseInput
+              v-model="newCompanyForm.slug"
+              :invalid="v$.newCompanyForm.slug.$error"
+              :content-loading="isFetchingInitialData"
+              @input="v$.newCompanyForm.slug.$touch()"
+            />
+          </BaseInputGroup>
+
           <BaseInputGroup
             :content-loading="isFetchingInitialData"
             :label="$tc('settings.company_info.country')"
@@ -98,7 +116,7 @@
         </BaseInputGrid>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+       <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -123,14 +141,14 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>
 
 <script setup>
 import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onMounted, ref, reactive } from 'vue'
+import { computed, onMounted, ref, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
@@ -152,6 +170,7 @@ let companyLogoName = ref(null)
 
 const newCompanyForm = reactive({
   name: null,
+  slug: null,
   currency: '',
   address: {
     country_id: null,
@@ -162,6 +181,9 @@ const modalActive = computed(() => {
   return modalStore.active && modalStore.componentName === 'CompanyModal'
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   newCompanyForm: {
     name: {
@@ -171,6 +193,17 @@ const rules = {
         minLength(3)
       ),
     },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
+    },
     address: {
       country_id: {
         required: helpers.withMessage(t('validation.required'), required),
@@ -243,6 +276,7 @@ async function submitCompanyData() {
 
 function resetNewCompanyForm() {
   newCompanyForm.name = ''
+  newCompanyForm.slug = ''
   newCompanyForm.currency = ''
   newCompanyForm.address.country_id = ''
 
@@ -257,4 +291,24 @@ function closeCompanyModal() {
     v$.value.$reset()
   }, 300)
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => newCompanyForm.name,
+  (currentValue) => {
+    newCompanyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>

resources/scripts/admin/components/modal-components/CustomerModal.vue

@@ -425,9 +425,7 @@
         </BaseTabGroup>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -447,7 +445,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue

@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -63,7 +63,7 @@
           </template>
           {{ $t('general.delete') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue

@@ -150,9 +150,7 @@
           @Remove="removeUsedSelectedCurrencies"
         />
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -179,7 +177,7 @@
             exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/FileDiskModal.vue

@@ -20,15 +20,7 @@
         @submit="createNewDisk"
       >
         <template #default="slotProps">
-          <div
-            class="
-              z-0
-              flex
-              justify-end
-              p-4
-              border-t border-solid border-gray-light
-            "
-          >
+          <BaseModalFooter>
             <BaseButton
               class="mr-3 text-sm"
               variant="primary-outline"
@@ -52,7 +44,7 @@
 
               {{ $t('general.save') }}
             </BaseButton>
-          </div>
+          </BaseModalFooter>
         </template>
       </component>
     </div>

resources/scripts/admin/components/modal-components/ItemModal.vue

@@ -89,9 +89,7 @@
             </BaseInputGroup>
           </BaseInputGrid>
         </div>
-        <div
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-        >
+        <BaseModalFooter>
           <BaseButton
             class="mr-3"
             variant="primary-outline"
@@ -111,7 +109,7 @@
             </template>
             {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
           </BaseButton>
-        </div>
+        </BaseModalFooter>
       </form>
     </div>
   </BaseModal>

resources/scripts/admin/components/modal-components/ItemUnitModal.vue

@@ -31,15 +31,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -66,7 +58,7 @@
             itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/MailTestModal.vue

@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+     <BaseModalFooter>
         <BaseButton
           variant="primary-outline"
           type="button"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/NoteModal.vue

@@ -63,16 +63,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          px-4
-          py-4
-          border-t border-solid border-gray-light
-        "
-      >
+     <BaseModalFooter>
         <BaseButton
           class="mr-2"
           variant="primary-outline"
@@ -93,7 +84,7 @@
           </template>
           {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/PaymentModeModal.vue

@@ -29,9 +29,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           variant="primary-outline"
           class="mr-3"
@@ -56,7 +54,7 @@
               : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/RolesModal.vue

@@ -72,7 +72,7 @@
         </div>
       </div>
 
-      <div class="border-t border-gray-200 py-3">
+      <div class="border-t border-gray-200 dark:border-gray-600 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-gray-500 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
               {{ gIndex }}
             </p>
             <div
@@ -116,15 +116,7 @@
           </span>
         </div>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -144,7 +136,7 @@
           </template>
           {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SelectTemplateModal.vue

@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+    <BaseModalFooter>
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>
@@ -80,7 +80,7 @@
         </template>
         {{ $t('general.choose') }}
       </BaseButton>
-    </div>
+    </BaseModalFooter>
   </BaseModal>
 </template>
 

resources/scripts/admin/components/modal-components/SendEstimateModal.vue

@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -85,7 +83,7 @@
           <BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -106,9 +104,7 @@
         ></iframe>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -127,7 +123,7 @@
           <BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SendInvoiceModal.vue

@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -140,7 +136,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SendPaymentModal.vue

@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -140,7 +136,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/TaxTypeModal.vue

@@ -90,15 +90,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -122,7 +114,7 @@
           </template>
           {{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/TaxationAddressModal.vue

@@ -87,9 +87,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -109,7 +107,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue

@@ -172,15 +172,7 @@
         </div>
       </div>
 
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border-gray-light border-modal-bg
-        "
-      >
+      <BaseModalFooter>
         <BaseButton
           class="mr-3"
           type="button"
@@ -207,7 +199,7 @@
             !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue

@@ -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-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue

@@ -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-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/LocalDisk.vue

@@ -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-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/S3Disk.vue

@@ -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-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/layouts/partials/TheSiteHeader.vue

@@ -15,8 +15,17 @@
       bg-gradient-to-r
       from-primary-500
       to-primary-400
+      dark:from-gray-700/70 dark:to-gray-800/70
+      bg-primary-500
+      dark:bg-transparent
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
     "
   >
+    <BaseDarkHighlight />
+
     <router-link
       to="/admin/dashboard"
       class="
@@ -53,6 +62,7 @@
         cursor-pointer
         md:hidden md:ml-0
         hover:bg-gray-100
+        dark:bg-gray-800 dark:border-gray-500 dark:border
       "
       @click.prevent="onToggle"
     >
@@ -64,7 +74,7 @@
         v-if="hasCreateAbilities"
         class="relative hidden float-left m-0 md:block"
       >
-        <BaseDropdown width-class="w-48">
+        <BaseDropdown width-class="w-48" >
           <template #activator>
             <div
               class="
@@ -78,19 +88,21 @@
                 bg-white
                 rounded
                 md:h-9 md:w-9
+                dark:bg-gray-700 dark:border-gray-500 dark:border
               "
             >
-              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600" />
+              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600 dark:text-white" />
             </div>
           </template>
 
           <router-link to="/admin/invoices/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentTextIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('invoices.new_invoice') }}
@@ -99,10 +111,11 @@
           <router-link to="/admin/estimates/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('estimates.new_estimate') }}
@@ -112,10 +125,11 @@
           <router-link to="/admin/customers/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="UserIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('customers.new_customer') }}
@@ -148,20 +162,20 @@
           </template>
 
           <router-link to="/admin/settings/account-settings">
-            <BaseDropdownItem>
+            <BaseDropdownItem v-slot="slotProps">
               <BaseIcon
                 name="CogIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('navigation.settings') }}
             </BaseDropdownItem>
           </router-link>
 
-          <BaseDropdownItem @click="logout">
+          <BaseDropdownItem v-slot="slotProps" @click="logout">
             <BaseIcon
               name="LogoutIcon"
-              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+              :class="slotProps.class"
               aria-hidden="true"
             />
             {{ $t('navigation.logout') }}

resources/scripts/admin/layouts/partials/TheSiteSidebar.vue

@@ -15,7 +15,9 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900/90"
+        />
       </TransitionChild>
 
       <TransitionChild
@@ -27,7 +29,9 @@
         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-white dark:bg-gray-800"
+        >
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -40,18 +44,17 @@
             <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
                 class="
-                  flex
-                  items-center
-                  justify-center
-                  w-10
-                  h-10
-                  ml-1
-                  rounded-full
-                  focus:outline-none
-                  focus:ring-2
-                  focus:ring-inset
-                  focus:ring-white
-                "
+                flex
+                items-center
+                justify-center
+                w-10
+                h-10
+                ml-1
+                rounded-full
+                focus:outline-none
+                focus:ring-2
+                focus:ring-inset
+                focus:ring-white"
                 @click="globalStore.setSidebarVisibility(false)"
               >
                 <span class="sr-only">Close sidebar</span>
@@ -82,8 +85,8 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-primary-500 bg-gray-100 '
-                    : 'text-black',
+                    ? 'text-primary-500 border-primary-500 bg-gray-100 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700  dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
+                    : 'text-black dark:text-gray-300',
                   'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -100,6 +103,10 @@
                 />
                 {{ $t(item.title) }}
               </router-link>
+              <LightDarkSwitch
+                :show-label="false"
+                class="absolute right-6 top-6 !w-auto"
+              />
             </nav>
           </div>
         </div>
@@ -113,17 +120,16 @@
   <!-- DESKTOP MENU -->
   <div
     class="
-      hidden
-      w-56
-      h-screen
-      pb-32
-      overflow-y-auto
-      bg-white
-      border-r border-gray-200 border-solid
-      xl:w-64
-      md:fixed md:flex md:flex-col md:inset-y-0
-      pt-16
-    "
+    hidden
+    w-56
+    h-screen
+    bg-white
+    border-r border-gray-200 border-solid
+    xl:w-64
+    md:fixed md:flex md:flex-col md:inset-y-0
+    pt-16
+    dark:border-gray-800
+    dark:bg-gray-800/80"
   >
     <div
       v-for="menu in globalStore.menuGroups"
@@ -136,8 +142,8 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-primary-500 bg-gray-100 '
-            : 'text-black',
+            ? 'text-primary-500 border-primary-500 bg-gray-100 dark:border-primary-400 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700 dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
+            : 'text-black dark:hover:bg-transparent dark:hover:text-white dark:text-gray-300',
           'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid border-transparent text-sm not-italic font-medium',
         ]"
       >
@@ -145,8 +151,8 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black',
+              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
+              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
         />
@@ -154,6 +160,9 @@
         {{ $t(item.title) }}
       </router-link>
     </div>
+    <LightDarkSwitch
+      class="absolute bottom-0 py-4 border-t border-gray-200 dark:border-gray-700"
+    />
   </div>
 </template>
 
@@ -169,6 +178,7 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()

resources/scripts/admin/stores/company.js

@@ -184,6 +184,20 @@ export const useCompanyStore = (useWindow = false) => {
       setDefaultCurrency(data) {
         this.defaultCurrency = data.currency
       },
+
+      checkCompanyHasCurrencyTransactions() {
+        return new Promise((resolve, reject) => {
+          axios
+            .get(`/api/v1/company/has-transactions`)
+            .then((response) => {
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
     },
   })()
 }

resources/scripts/admin/stores/global.js

@@ -34,6 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
+      isDarkModeOn: false,
 
       downloadReport: null,
     }),
@@ -70,8 +71,8 @@ export const useGlobalStore = (useWindow = false) => {
               moduleStore.apiToken = response.data.global_settings.api_token
               moduleStore.enableModules = response.data.modules
 
-                // company store
-                companyStore.companies = response.data.companies
+              // company store
+              companyStore.companies = response.data.companies
               companyStore.selectedCompany = response.data.current_company
               companyStore.setSelectedCompany(response.data.current_company)
               companyStore.selectedCompanySettings =

resources/scripts/admin/views/dashboard/DashboardChart.vue

@@ -2,8 +2,23 @@
   <div>
     <div
       v-if="dashboardStore.isDashboardDataLoaded"
-      class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+      class="
+        grid
+        grid-cols-10
+        mt-8
+        bg-white
+        rounded shadow
+        dark:text-white
+        dark:backdrop-blur-xl
+        dark:shadow-glass
+        dark:border
+        dark:bg-opacity-70
+        dark:border-white/10
+        dark:bg-gray-800
+        relative
+      "
     >
+      <BaseDarkHighlight />
       <!-- Chart -->
       <div
         class="
@@ -54,6 +69,7 @@
           lg:border-t-0 lg:text-right lg:col-span-3
           xl:col-span-2
           lg:grid-cols-1
+          dark:border-white/10
         "
       >
         <div class="p-6">
@@ -96,15 +112,7 @@
           </span>
           <br />
           <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-red-400
-            "
+            class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-red-400"
           >
             <BaseFormatMoney
               :amount="dashboardStore.totalExpenses"
@@ -116,8 +124,10 @@
           class="
             col-span-3
             p-6
-            border-t border-gray-200 border-solid
+            border-t
+            border-gray-200 border-solid
             lg:col-span-1
+            dark:border-white/10
           "
         >
           <span class="text-xs leading-5 lg:text-sm">
@@ -132,7 +142,7 @@
               font-semibold
               leading-8
               lg:text-2xl
-              text-primary-500
+              text-primary-500 dark:text-primary-400
             "
           >
             <BaseFormatMoney

resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue

@@ -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-white rounded shadow dark:bg-gray-800"
   >
     <!-- Chart -->
     <div
@@ -29,6 +29,7 @@
         text-center
         border-t border-l border-gray-200 border-solid
         lg:border-t-0 lg:text-right lg:col-span-3
+        dark:border-gray-600
         xl:col-span-2
         lg:grid-cols-1
       "
@@ -77,6 +78,7 @@
           col-span-3
           p-6
           border-t border-gray-200 border-solid
+          dark:border-gray-600
           lg:justify-end lg:items-end lg:col-span-1
         "
       >

resources/scripts/admin/views/dashboard/DashboardStatsItem.vue

@@ -12,18 +12,24 @@
       hover:bg-gray-50
       xl:p-4
       lg:col-span-2
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
+      dark:bg-gray-800/70
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
         {{ label }}
       </span>
     </div>
+    <BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
     <div class="flex items-center">
       <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
     </div>

resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
+    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
   >
     <div>
       <BaseContentPlaceholdersText

resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue

@@ -12,6 +12,7 @@
       shadow
       lg:col-span-2
       xl:p-4
+      dark:bg-gray-800
     "
   >
     <div>

resources/scripts/admin/views/estimates/Index.vue

@@ -130,6 +130,7 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->

resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue

@@ -32,6 +32,8 @@
           :content-loading="isLoading"
           :calendar-button="true"
           calendar-button-icon="calendar"
+          :show-extra-options="true"
+          :source-date="estimateStore.newEstimate.estimate_date"
         />
       </BaseInputGroup>
 

resources/scripts/admin/views/installation/Step7CompanyInfo.vue

@@ -34,6 +34,24 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('wizard.company_slug')"
+          :help-text="$t('wizard.company_slug_help_text')"
+          :error="
+            v$.companyForm.slug.$error &&
+            v$.companyForm.slug.$errors[0].$message
+          "
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.companyForm.slug.$error"
+            type="text"
+            name="slug"
+            @input="v$.companyForm.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup
           :label="$t('wizard.country')"
           :error="
@@ -57,9 +75,7 @@
             track-by="name"
           />
         </BaseInputGroup>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
         <BaseInputGroup :label="$t('wizard.state')">
           <BaseInput
             v-model="companyForm.address.state"
@@ -144,9 +160,9 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue'
+import { ref, computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { required, maxLength, helpers } from '@vuelidate/validators'
+import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
@@ -162,6 +178,7 @@ let logoFileName = ref(null)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   address: {
     address_street_1: '',
     address_street_2: '',
@@ -188,10 +205,28 @@ onMounted(async () => {
   })?.id
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   companyForm: {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
     },
     address: {
       country_id: {
@@ -249,4 +284,24 @@ async function next() {
     emit('next', 7)
   }
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => companyForm.name,
+  (currentValue) => {
+    companyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>

resources/scripts/admin/views/invoices/Index.vue

@@ -56,7 +56,7 @@
         <BaseMultiselect
           v-model="filters.status"
           :groups="true"
-          :options="status"
+          :options="invoiceStatus"
           searchable
           :placeholder="$t('general.select_a_status')"
           @update:modelValue="setActiveTab"
@@ -127,14 +127,31 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
-          <BaseTab :title="$t('general.all')" filter="" />
-          <BaseTab :title="$t('general.draft')" filter="DRAFT" />
-          <BaseTab :title="$t('general.sent')" filter="SENT" />
-          <BaseTab :title="$t('general.due')" filter="DUE" />
+        <BaseTabGroup
+          class="-mb-5"
+          :selected-index="selectedIndex"
+          @change="changeTabStatus"
+        >
+          <BaseTab
+            :title="invoiceTabStatus[0].title"
+            :tab-status="invoiceTabStatus[0].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[1].title"
+            :tab-status="invoiceTabStatus[1].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[2].title"
+            :tab-status="invoiceTabStatus[2].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[3].title"
+            :tab-status="invoiceTabStatus[3].value"
+          />
         </BaseTabGroup>
 
         <BaseDropdown
@@ -289,10 +306,10 @@ const utils = inject('$utils')
 const table = ref(null)
 const showFilters = ref(false)
 
-const status = ref([
+const invoiceStatus = ref([
   {
     label: 'Status',
-    options: ['DRAFT', 'DUE', 'SENT', 'VIEWED', 'COMPLETED'],
+    options: ['DRAFT', 'SENT', 'VIEWED', 'COMPLETED'],
   },
   {
     label: 'Paid Status',
@@ -300,10 +317,29 @@ const status = ref([
   },
   ,
 ])
+
+const invoiceTabStatus = {
+  0: {
+    title: t('general.all'),
+    value: '',
+  },
+  1: {
+    title: t('general.draft'),
+    value: 'DRAFT',
+  },
+  2: {
+    title: t('general.sent'),
+    value: 'SENT',
+  },
+  3: {
+    title: t('general.due'),
+    value: 'DUE',
+  },
+}
 const isRequestOngoing = ref(true)
-const activeTab = ref('general.draft')
 const router = useRouter()
 const userStore = useUserStore()
+const selectedIndex = ref(0)
 
 let filters = reactive({
   customer_id: '',
@@ -311,6 +347,7 @@ let filters = reactive({
   from_date: '',
   to_date: '',
   invoice_number: '',
+  tab_status: '',
 })
 
 const showEmptyScreen = computed(
@@ -401,6 +438,7 @@ async function fetchData({ page, filter, sort }) {
     from_date: filters.from_date,
     to_date: filters.to_date,
     invoice_number: filters.invoice_number,
+    tab_status: filters.tab_status,
     orderByField: sort.fieldName || 'created_at',
     orderBy: sort.order || 'desc',
     page,
@@ -423,29 +461,9 @@ async function fetchData({ page, filter, sort }) {
   }
 }
 
-function setStatusFilter(val) {
-  if (activeTab.value == val.title) {
-    return true
-  }
-
-  activeTab.value = val.title
-
-  switch (val.title) {
-    case t('general.draft'):
-      filters.status = 'DRAFT'
-      break
-    case t('general.sent'):
-      filters.status = 'SENT'
-      break
-
-    case t('general.due'):
-      filters.status = 'DUE'
-      break
-
-    default:
-      filters.status = ''
-      break
-  }
+function changeTabStatus(val, index) {
+  filters.tab_status = val['tab-status']
+  selectedIndex.value = index
 }
 
 function setFilters() {
@@ -463,8 +481,6 @@ function clearFilter() {
   filters.from_date = ''
   filters.to_date = ''
   filters.invoice_number = ''
-
-  activeTab.value = t('general.all')
 }
 
 async function removeMultipleInvoices() {
@@ -505,39 +521,21 @@ function toggleFilter() {
 function setActiveTab(val) {
   switch (val) {
     case 'DRAFT':
-      activeTab.value = t('general.draft')
+      selectedIndex.value = 1
       break
+
     case 'SENT':
-      activeTab.value = t('general.sent')
-      break
-
-    case 'DUE':
-      activeTab.value = t('general.due')
-      break
-
+    case 'VIEWED':
     case 'COMPLETED':
-      activeTab.value = t('invoices.completed')
-      break
-
     case 'PAID':
-      activeTab.value = t('invoices.paid')
+      selectedIndex.value = 2
       break
 
     case 'UNPAID':
-      activeTab.value = t('invoices.unpaid')
-      break
-
     case 'PARTIALLY_PAID':
-      activeTab.value = t('invoices.partially_paid')
-      break
-
-    case 'VIEWED':
-      activeTab.value = t('invoices.viewed')
-      break
-
-    default:
-      activeTab.value = t('general.all')
+      selectedIndex.value = 3
       break
   }
+  filters.tab_status = invoiceTabStatus[selectedIndex.value].value
 }
 </script>

resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue

@@ -32,6 +32,8 @@
           :content-loading="isLoading"
           :calendar-button="true"
           calendar-button-icon="calendar"
+          :show-extra-options="true"
+          :source-date="invoiceStore.newInvoice.invoice_date"
         />
       </BaseInputGroup>
 

resources/scripts/admin/views/payments/Create.vue

@@ -82,9 +82,9 @@
             required
           >
             <BaseCustomerSelectInput
+              v-if="!isLoadingContent"
               v-model="paymentStore.currentPayment.customer_id"
               :content-loading="isLoadingContent"
-              v-if="!isLoadingContent"
               :invalid="v$.currentPayment.customer_id.$error"
               :placeholder="$t('customers.select_a_customer')"
               show-action
@@ -423,7 +423,7 @@ function onCustomerChange(customer_id) {
   if (customer_id) {
     let data = {
       customer_id: customer_id,
-      status: 'DUE',
+      tab_status: 'DUE',
       limit: 'all',
     }
 
@@ -446,7 +446,11 @@ function onCustomerChange(customer_id) {
           paymentStore.currentPayment.selectedCustomer = res2.data.data
           paymentStore.currentPayment.customer = res2.data.data
           paymentStore.currentPayment.currency = res2.data.data.currency
-          if(isEdit.value && !customerStore.editCustomer && paymentStore.currentPayment.customer_id) {
+          if (
+            isEdit.value &&
+            !customerStore.editCustomer &&
+            paymentStore.currentPayment.customer_id
+          ) {
             customerStore.editCustomer = res2.data.data
           }
         }

resources/scripts/admin/views/recurring-invoices/Index.vue

@@ -121,6 +121,7 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->

resources/scripts/admin/views/settings/BackupSetting.vue

@@ -51,14 +51,14 @@
             </div>
           </template>
 
-          <BaseDropdownItem @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudDownloadIcon" class="mr-3 text-gray-600" />
+          <BaseDropdownItem v-slot="slotProps" @click="onDownloadBckup(row.data)">
+            <BaseIcon name="CloudDownloadIcon" :class="slotProps.class" />
 
             {{ $t('general.download') }}
           </BaseDropdownItem>
 
-          <BaseDropdownItem @click="onRemoveBackup(row.data)">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+          <BaseDropdownItem v-slot="slotProps" @click="onRemoveBackup(row.data)">
+            <BaseIcon name="TrashIcon" :class="slotProps.class" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

resources/scripts/admin/views/settings/CompanyInfoSettings.vue

@@ -28,6 +28,19 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('settings.company_info.company_slug')"
+          :help-text="$t('settings.company_info.company_slug_help_text')"
+          :error="v$.slug.$error && v$.slug.$errors[0].$message"
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.slug.$error"
+            @blur="v$.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup :label="$tc('settings.company_info.phone')">
           <BaseInput v-model="companyForm.address.phone" />
         </BaseInputGroup>
@@ -160,6 +173,7 @@ let isSaving = ref(false)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   logo: null,
   address: {
     address_street_1: '',
@@ -193,7 +207,14 @@ const rules = computed(() => {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
       minLength: helpers.withMessage(
-        t('validation.name_min_length'),
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
         minLength(3)
       ),
     },

resources/scripts/admin/views/settings/FileDiskSetting.vue

@@ -45,27 +45,30 @@
 
           <BaseDropdownItem
             v-if="!row.data.set_as_default"
+            v-slot="slotProps"
             @click="setDefaultDiskData(row.data.id)"
           >
-            <BaseIcon class="mr-3 tetx-gray-600" name="CheckCircleIcon" />
+            <BaseIcon :class="slotProps.class" name="CheckCircleIcon" />
 
             {{ $t('settings.disk.set_default_disk') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem
             v-if="row.data.type !== 'SYSTEM'"
+            v-slot="slotProps"
             @click="openEditDiskModal(row.data)"
           >
-            <BaseIcon name="PencilIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="PencilIcon" :class="slotProps.class" />
 
             {{ $t('general.edit') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem
             v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
+            v-slot="slotProps"
             @click="removeDisk(row.data.id)"
           >
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" :class="slotProps.class" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

resources/scripts/admin/views/settings/PreferencesSetting.vue

@@ -8,7 +8,11 @@
         <BaseInputGroup
           :content-loading="isFetchingInitialData"
           :label="$tc('settings.preferences.currency')"
-          :help-text="$t('settings.preferences.company_currency_unchangeable')"
+          :help-text="
+            isCurrencyDisabled
+              ? $t('settings.preferences.company_currency_unchangeable')
+              : ''
+          "
           :error="v$.currency.$error && v$.currency.$errors[0].$message"
           required
         >
@@ -21,7 +25,7 @@
             :searchable="true"
             track-by="name"
             :invalid="v$.currency.$error"
-            disabled
+            :disabled="isCurrencyDisabled"
             class="w-full"
           >
           </BaseMultiselect>
@@ -187,6 +191,7 @@ const { t, tm } = useI18n()
 let isSaving = ref(false)
 let isDataSaving = ref(false)
 let isFetchingInitialData = ref(false)
+let isCurrencyDisabled = ref(true)
 
 const settingsForm = reactive({ ...companyStore.selectedCompanySettings })
 
@@ -282,10 +287,14 @@ setInitialData()
 async function setInitialData() {
   isFetchingInitialData.value = true
   Promise.all([
+    companyStore.checkCompanyHasCurrencyTransactions(),
     globalStore.fetchCurrencies(),
     globalStore.fetchDateFormats(),
     globalStore.fetchTimeZones(),
   ]).then(([res1]) => {
+    if (res1.data?.has_transactions == false) {
+      isCurrencyDisabled.value = false
+    }
     isFetchingInitialData.value = false
   })
 }

resources/scripts/components/CompanySwitcher.vue

@@ -1,21 +1,23 @@
 <template>
-  <div ref="companySwitchBar" class="relative rounded">
+  <div ref="companySwitchBar" class="relative rounded dark:text-white">
     <CompanyModal />
 
     <div
       class="
-        flex
-        items-center
-        justify-center
-        px-3
-        h-8
-        md:h-9
-        ml-2
-        text-sm text-white
-        bg-white
-        rounded
-        cursor-pointer
-        bg-opacity-20
+      flex
+      items-center
+      justify-center
+      px-3
+      h-8
+      md:h-9
+      ml-2
+      text-sm
+      text-white
+      bg-white
+      rounded
+      cursor-pointer
+      bg-opacity-20
+      dark:bg-gray-700
       "
       @click="isShow = !isShow"
     >
@@ -38,28 +40,42 @@
     >
       <div
         v-if="isShow"
-        class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
+        class="
+        absolute
+        right-0
+        mt-2
+        bg-white
+        rounded-md
+        shadow-lg
+        dark:border
+        dark:border-white/10
+        dark:text-white
+        dark:bg-gray-800/[.95]
+        dark:shadow-glass
+        dark:backdrop-blur-xl
+        "
       >
+        <BaseDarkHighlight class="z-[-1] top-0 left-0" />
         <div
           class="
-            overflow-y-auto
-            scrollbar-thin scrollbar-thumb-rounded-full
-            w-[250px]
-            max-h-[350px]
-            scrollbar-thumb-gray-300 scrollbar-track-gray-10
-            pb-4
+          overflow-y-auto
+          scrollbar-thin
+          scrollbar-thumb-rounded-full
+          w-[250px] max-h-[350px]
+          scrollbar-thumb-gray-300
+          scrollbar-track-gray-10
+          pb-4
           "
         >
           <label
             class="
-              px-3
-              py-2
-              text-xs
-              font-semibold
-              text-gray-400
-              mb-0.5
-              block
-              uppercase
+            px-3
+            py-2
+            text-xs
+            font-semibold
+            text-gray-400
+            mb-0.5
+            block uppercase
             "
           >
             {{ $t('company_switcher.label') }}
@@ -68,13 +84,13 @@
           <div
             v-if="companyStore.companies.length < 1"
             class="
-              flex flex-col
-              items-center
-              justify-center
-              p-2
-              px-3
-              mt-4
-              text-base text-gray-400
+            flex flex-col
+            items-center
+            justify-center
+            p-2
+            px-3
+            mt-4
+            text-base text-gray-400
             "
           >
             <BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
@@ -86,14 +102,17 @@
                 v-for="(company, index) in companyStore.companies"
                 :key="index"
                 class="
-                  p-2
-                  px-3
-                  rounded-md
-                  cursor-pointer
-                  hover:bg-gray-100 hover:text-primary-500
+                p-2
+                px-3
+                rounded-md
+                cursor-pointer
+                hover:bg-gray-100 hover:text-primary-500
+                dark:hover:bg-gray-700
+                text-gray-900
+                dark:text-white
                 "
                 :class="{
-                  'bg-gray-100 text-primary-500':
+                  'bg-gray-100 text-primary-500 dark:bg-gray-700':
                     companyStore.selectedCompany.id === company.id,
                 }"
                 @click="changeCompany(company)"
@@ -101,18 +120,19 @@
                 <div class="flex items-center">
                   <span
                     class="
-                      flex
-                      items-center
-                      justify-center
-                      mr-3
-                      overflow-hidden
-                      text-base
-                      font-semibold
-                      bg-gray-200
-                      rounded-md
-                      w-9
-                      h-9
-                      text-primary-500
+                    flex
+                    items-center
+                    justify-center
+                    mr-3
+                    overflow-hidden
+                    text-sm
+                    font-semibold
+                    bg-gray-200
+                    rounded-md
+                    w-9
+                    h-9
+                    text-primary-500
+                    dark:bg-gray-900
                     "
                   >
                     <span v-if="!company.logo">
@@ -136,15 +156,17 @@
         <div
           v-if="userStore.currentUser.is_owner"
           class="
-            flex
-            items-center
-            justify-center
-            p-4
-            pl-3
-            border-t-2 border-gray-100
-            cursor-pointer
-            text-primary-400
-            hover:text-primary-500
+          flex
+          items-center
+          justify-center
+          p-4
+          pl-3
+          border-t-2
+          border-gray-100
+          cursor-pointer
+          text-primary-400
+          hover:text-primary-500
+          dark:border-gray-600
           "
           @click="addNewCompany"
         >

resources/scripts/components/GlobalSearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="searchBar" class="hidden rounded md:block relative">
+  <div ref="searchBar" class="hidden rounded md:block relative dark:text-white">
     <div>
       <BaseInput
         v-model="name"
@@ -41,6 +41,11 @@
           w-[300px]
           h-[200px]
           right-0
+          dark:border-white/10
+          dark:text-white
+          dark:bg-gray-800/[.95]
+          dark:shadow-glass
+          dark:backdrop-blur-xl
         "
       >
         <div
@@ -68,7 +73,7 @@
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/customers/${customer.id}/view` }"
@@ -87,6 +92,7 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
+                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -116,7 +122,7 @@
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/users/${user.id}/edit` }"
@@ -135,6 +141,7 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
+                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(user.name) }}

resources/scripts/components/InvoiceInformationCard.vue

@@ -1,33 +1,40 @@
 <template>
-  <div class="bg-white shadow overflow-hidden rounded-lg mt-6">
+  <div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
     <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900">
+      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
         {{ $t('invoices.invoice_information') }}
       </h3>
     </div>
-    <div v-if="invoice" class="border-t border-gray-200 px-4 py-5 sm:p-0">
-      <dl class="sm:divide-y sm:divide-gray-200">
+    <div v-if="invoice"
+      class="
+        border-t
+        border-gray-200
+        px-4 py-5 sm:p-0
+        dark:border-gray-600
+      "
+    >
+      <dl class="sm:divide-y sm:divide-gray-200 sm:dark:divide-gray-500">
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
             {{ $t('general.from') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             {{ invoice.company.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
             {{ $t('general.to') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             {{ invoice.customer.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 capitalize">
+          <dt class="text-sm font-medium text-gray-500 capitalize dark:dark:text-gray-400">
             {{ $t('invoices.paid_status').toLowerCase() }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             <BaseInvoiceStatusBadge
               :status="invoice.paid_status"
               class="px-3 py-1"
@@ -37,10 +44,10 @@
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">
+          <dt class="text-sm font-medium text-gray-500 dark:dark:text-gray-400">
             {{ $t('invoices.total') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100">
             <BaseFormatMoney
               :currency="invoice.currency"
               :amount="invoice.total"

resources/scripts/components/LightDarkSwitcher.vue

@@ -0,0 +1,101 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<script lang="ts" setup>
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
+import { computed, ref } from 'vue'
+defineProps({
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const globalStore = useGlobalStore()
+
+const enabled = ref(
+  localStorage.getItem('theme') === 'dark' ||
+    document.documentElement.classList.contains('dark')
+)
+
+globalStore.isDarkModeOn = enabled
+
+function onChange(val) {
+  if (val) {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.setProperty('color-scheme', 'dark')
+    globalStore.isDarkModeOn = true
+  } else {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.setProperty('color-scheme', 'light')
+    globalStore.isDarkModeOn = false
+  }
+}
+</script>
+
+<template>
+  <div class="w-full flex justify-center">
+    <SwitchGroup
+      as="div"
+      class="flex items-center"
+      :class="vertical ? 'flex-col justify-center' : 'flex-row'"
+    >
+      <Switch
+        v-model="enabled"
+        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
+        :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
+        @update:modelValue="onChange"
+      >
+        <span class="sr-only">Use setting</span>
+        <span
+          class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+          :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
+        >
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-0 ease-out duration-100'
+                : 'opacity-100 ease-in duration-200',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-yellow-500" name="SunIcon" />
+          </span>
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-100 ease-in duration-200'
+                : 'opacity-0 ease-out duration-100',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-primary-500" name="MoonIcon" />
+          </span>
+        </span>
+      </Switch>
+      <SwitchLabel
+        v-if="showLabel"
+        as="span"
+        class="cursor-pointer"
+        :class="vertical ? 'px-1 text-center mt-2' : 'ml-3'"
+      >
+        <span
+          v-if="enabled"
+          class="text-sm font-medium text-gray-500 dark:text-gray-400"
+        >
+          Dark Mode
+        </span>
+        <span v-else class="text-sm font-medium text-gray-500">
+          Light Mode
+        </span>
+      </SwitchLabel>
+    </SwitchGroup>
+  </div>
+</template>

resources/scripts/components/base-select/BaseMultiselect.vue

@@ -437,21 +437,22 @@ export default {
       required: false,
       default: () => ({
         container:
-          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
+          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
         containerDisabled:
-          'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
+          'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
         containerOpen: '',
         containerOpenTop: '',
         containerActive: 'ring-1 ring-primary-400 border-primary-400',
         containerInvalid:
-          'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
-        containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
+          'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-500 dark:ring-red-500 dark:focus:ring-red-500 dark:focus:border-red-500',
+        containerInvalidActive:
+          'ring-1 border-red-500 ring-red-500 dark:ring-1 dark:border-red-500 dark:ring-red-500',
         singleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
         multipleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
         search:
-          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
+          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5 border-transparent focus:border-transparent focus:ring-0 dark:bg-gray-700 dark:text-white',
         tags: 'grow shrink flex flex-wrap mt-1 pl-2',
         tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
         tagDisabled: 'pr-2 !bg-gray-400 text-white',
@@ -461,12 +462,12 @@ export default {
           'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
         tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
         tagsSearch:
-          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
+          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
         tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
         placeholder:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 sm:text-sm dark:text-gray-500',
         caret:
-          'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
+          'bg-multiselect-caret-black dark:bg-multiselect-caret-white bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform dark:text-white',
         caretOpen: 'rotate-180 pointer-events-auto',
         clear:
           'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
@@ -475,7 +476,7 @@ export default {
         spinner:
           'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
         dropdown:
-          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white flex flex-col rounded-md',
+          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white dark:border-gray-600 flex flex-col rounded-md dark:bg-gray-800 dark:shadow-glass',
         dropdownTop:
           '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
         dropdownHidden: 'hidden',
@@ -483,7 +484,7 @@ export default {
         optionsTop: 'flex-col-reverse',
         group: 'p-0 m-0',
         groupLabel:
-          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 dark:bg-gray-700 dark:text-gray-400 cursor-default leading-normal',
         groupLabelPointable: 'cursor-pointer',
         groupLabelPointed: 'bg-gray-300 text-gray-700',
         groupLabelSelected: 'bg-primary-600 text-white',
@@ -493,15 +494,18 @@ export default {
           'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
         groupOptions: 'p-0 m-0',
         option:
-          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
-        optionPointed: 'text-gray-800 bg-gray-100',
+          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3 dark:text-gray-200',
+        optionPointed:
+          'text-gray-800 bg-gray-100 dark:text-white dark:bg-gray-700/30',
         optionSelected: 'text-white bg-primary-500',
-        optionDisabled: 'text-gray-300 cursor-not-allowed',
+        optionDisabled: 'text-gray-300 cursor-not-allowed dark:text-gray-400',
         optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
         optionSelectedDisabled:
           'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
-        noOptions: 'py-2 px-3 text-gray-600 bg-white',
-        noResults: 'py-2 px-3 text-gray-600 bg-white',
+        noOptions:
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
+        noResults:
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
         fakeInput:
           'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
         spacer: 'h-9 py-px box-content',

resources/scripts/components/base/BaseBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
+    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset dark:text-gray-400">
       <slot />
     </ol>
   </nav>

resources/scripts/components/base/BaseBreadcrumbItem.vue

@@ -8,7 +8,9 @@
         font-medium
         leading-5
         text-gray-900
+        dark:text-gray-400
         outline-none
+        dark:focus:ring-offset-gray-900
         focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
       "
       :to="to"

resources/scripts/components/base/BaseButton.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+
 const props = defineProps({
   contentLoading: {
     type: Boolean,
@@ -9,7 +10,7 @@ const props = defineProps({
   defaultClass: {
     type: String,
     default:
-      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
   },
   tag: {
     type: String,
@@ -27,6 +28,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  loadingRight: {
+    type: Boolean,
+    default: false,
+  },
   size: {
     type: String,
     default: 'md',
@@ -81,17 +86,17 @@ const placeHolderSize = computed(() => {
 
 const variantClass = computed(() => {
   return {
-    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
+    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
       props.variant === 'primary',
     'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
       props.variant === 'secondary',
-    'border-transparent  border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
+    'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
       props.variant == 'primary-outline',
-    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
+    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
       props.variant == 'white',
     'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
       props.variant === 'danger',
-    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
+    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
       props.variant === 'gray',
   }
 })
@@ -124,6 +129,13 @@ const iconRightClass = computed(() => {
     'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
   }
 })
+
+const buttonDisabledClass = computed(() => {
+  if (props.disabled || props.loading)
+    return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
+
+  return ''
+})
 </script>
 
 <template>
@@ -141,15 +153,17 @@ const iconRightClass = computed(() => {
   <BaseCustomTag
     v-else
     :tag="tag"
-    :disabled="disabled"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
+    :disabled="disabled || loading"
+    :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
   >
-    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
+    <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
 
-    <slot v-else name="left" :class="iconLeftClass"></slot>
+    <slot v-else name="left" :class="iconLeftClass" />
 
     <slot />
 
-    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
+    <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
+
+    <slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
   </BaseCustomTag>
 </template>

resources/scripts/components/base/BaseCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <div
+    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
+  >
+    <BaseDarkHighlight class="z-[-1] mt-10" />
+
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"

resources/scripts/components/base/BaseContentPlaceholders.vue

@@ -39,6 +39,8 @@ $base-content-placeholders-border-radius: 6px !default;
 $base-content-placeholders-line-height: 15px !default;
 $base-content-placeholders-spacing: 10px !default;
 
+$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
+$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
 // Animations
 @keyframes vueContentPlaceholdersAnimation {
   0% {
@@ -57,6 +59,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+
   .base-content-placeholders-is-rounded & {
     border-radius: $base-content-placeholders-border-radius;
   }
@@ -86,6 +92,15 @@ $base-content-placeholders-spacing: 10px !default;
     animation-name: vueContentPlaceholdersAnimation;
     animation-timing-function: linear;
   }
+
+  .dark .base-content-placeholders-is-animated &::before {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
 }
 
 @mixin base-content-placeholders-spacing {
@@ -156,6 +171,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+  
   .base-content-placeholders-is-animated &::before {
     content: '';
     position: absolute;
@@ -177,6 +196,14 @@ $base-content-placeholders-spacing: 10px !default;
     animation-timing-function: linear;
   }
 
+    .dark .base-content-placeholders-is-animated &::before {
+      background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
   // @include base-content-placeholders-spacing;
 }
 

resources/scripts/components/base/BaseCustomInput.vue

@@ -126,7 +126,7 @@ onMounted(() => {
 })
 
 const value = computed({
-  get: () => props.modelValue,
+  get: () => (props.modelValue ? props.modelValue : ''),
   set: (value) => {
     emit('update:modelValue', value)
   },
@@ -195,7 +195,9 @@ async function getFields() {
           { label: 'Date', value: 'INVOICE_DATE' },
           { label: 'Due Date', value: 'INVOICE_DUE_DATE' },
           { label: 'Number', value: 'INVOICE_NUMBER' },
-          { label: 'Ref Number', value: 'INVOICE_REF_NUMBER' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
+          { label: 'Due Amount', value: 'DUE_AMOUNT' },
+          { label: 'Total Amount', value: 'TOTAL_AMOUNT' },
           ...invoiceFields.value.map((i) => ({
             label: i.label,
             value: i.slug,
@@ -211,7 +213,8 @@ async function getFields() {
           { label: 'Date', value: 'ESTIMATE_DATE' },
           { label: 'Expiry Date', value: 'ESTIMATE_EXPIRY_DATE' },
           { label: 'Number', value: 'ESTIMATE_NUMBER' },
-          { label: 'Ref Number', value: 'ESTIMATE_REF_NUMBER' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
+          { label: 'Total Amount', value: 'TOTAL_AMOUNT' },
           ...estimateFields.value.map((i) => ({
             label: i.label,
             value: i.slug,
@@ -228,6 +231,7 @@ async function getFields() {
           { label: 'Number', value: 'PAYMENT_NUMBER' },
           { label: 'Mode', value: 'PAYMENT_MODE' },
           { label: 'Amount', value: 'PAYMENT_AMOUNT' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
           ...paymentFields.value.map((i) => ({
             label: i.label,
             value: i.slug,

resources/scripts/components/base/BaseDarkHighlight.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="
+      hidden
+      top-0
+      w-full
+      absolute
+      ml-auto
+      mr-auto
+      left-0
+      right-0
+      text-center
+      h-full
+      rounded-full
+      bg-highlight/[.10]
+      blur-2xl
+      dark:block
+      z-[-1]
+    "
+  />
+</template>

resources/scripts/components/base/BaseDatePicker.vue

@@ -7,52 +7,108 @@
     />
   </BaseContentPlaceholders>
 
-  <div v-else :class="computedContainerClass" class="relative flex flex-row">
-    <svg
-      v-if="showCalendarIcon && !hasIconSlot"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-      class="
-        absolute
-        w-4
-        h-4
-        mx-2
-        my-2.5
-        text-sm
-        not-italic
-        font-black
-        text-gray-400
-        cursor-pointer
-      "
-      @click="onClickDp"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
-
-    <slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
-
-    <FlatPickr
-      ref="dp"
+  <div v-else :class="computedContainerClass">
+    <date-picker
+      ref="vCalendar"
       v-model="date"
-      v-bind="$attrs"
-      :disabled="disabled"
-      :config="config"
-      :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
-    />
+      :mode="mode"
+      :is24hr="time24hr"
+      class="w-full"
+      color="indigo"
+      :input-debounce="500"
+      :update-on-input="false"
+      :is-range="false"
+      trim-weeks
+      :is-required="isRequired"
+      :popover="{
+        visibility: disabled ? 'hidden' : 'focus',
+        showDelay: 0,
+        hideDelay: 1,
+      }"
+      :attributes="attrs"
+      :model-config="config"
+      :masks="masks"
+      :locale="global.locale"
+    >
+      <template
+        #default="{ inputValue, inputEvents, togglePopover, hidePopover }"
+      >
+        <!-- calendar icon -->
+        <svg
+          v-if="showCalendarIcon && !hasIconSlot"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="
+            absolute
+            w-4
+            h-4
+            mx-2
+            my-2.5
+            text-sm
+            not-italic
+            font-black
+            text-gray-400
+            cursor-pointer
+          "
+          @click="togglePopover()"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+
+        <slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
+
+        <input
+          :value="inputValue"
+          :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
+          readonly
+          v-on="inputEvents"
+          @blur="hidePopover()"
+        />
+      </template>
+
+      <template v-if="showExtraOptions" #footer>
+        <div
+          class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
+        >
+          <button type="button" class="extra-button" @click="moveToDate(sourceDate)">
+            {{ global.t('date_picker.same_day') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(7)">
+            {{ global.t('date_picker.within_7_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(15)">
+            {{ global.t('date_picker.within_15_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(30)">
+            {{ global.t('date_picker.within_30_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(45)">
+            {{ global.t('date_picker.within_45_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(60)">
+            {{ global.t('date_picker.within_60_days') }}
+          </button>
+        </div>
+      </template>
+    </date-picker>
   </div>
 </template>
 
 <script type="text/babel" setup>
-import FlatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
+import { Calendar, DatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
 import { computed, reactive, watch, ref, useSlots } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const dp = ref(null)
+import moment from 'moment'
 
 const props = defineProps({
   modelValue: {
@@ -90,36 +146,31 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   time24hr: {
     type: Boolean,
     default: false,
   },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  showExtraOptions: {
+    type: Boolean,
+    default: false,
+  },
+  sourceDate: {
+    type: [String, Date],
+    default: () => new Date(),
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
-
 const slots = useSlots()
-
 const companyStore = useCompanyStore()
-
-let config = reactive({
-  altInput: true,
-  enableTime: props.enableTime,
-  time_24hr: props.time24hr,
-})
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-const carbonFormat = computed(() => {
-  return companyStore.selectedCompanySettings?.carbon_date_format
-})
+const { global } = window.i18n
+const vCalendar = ref(null)
 
 const hasIconSlot = computed(() => {
   return !!slots.icon
@@ -135,7 +186,6 @@ const inputInvalidClass = computed(() => {
   if (props.invalid) {
     return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
   }
-
   return ''
 })
 
@@ -143,35 +193,97 @@ const inputDisabledClass = computed(() => {
   if (props.disabled) {
     return 'border border-solid rounded-md outline-none input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-200 text-gray-600 border-gray-200'
   }
-
   return ''
 })
 
-function onClickDp(params) {
-  dp.value.fp.open()
+// to convert YYYY-MM-DD | YYYY-MM-DD HH:mm format
+function convertYMDFormat(date) {
+  let format = props.enableTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'
+  return date ? moment(date).format(format) : date
 }
 
-watch(
-  () => props.enableTime,
-  (val) => {
-    if (props.enableTime) {
-      config.enableTime = props.enableTime
-    }
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
   },
-  { immediate: true }
-)
+})
+
+const mode = computed(() => {
+  return props.enableTime ? 'dateTime' : 'date'
+})
+
+const config = reactive({
+  type: 'string',
+  mask: 'YYYY-MM-DD', // Uses 'iso' if missing
+  //timeAdjust: '00:00:00',
+})
+
+const masks = reactive({
+  input: null,
+  inputDateTime: null,
+  inputDateTime24hr: null,
+})
+
+const attrs = reactive([
+  {
+    dates: new Date(),
+    highlight: {
+      fillMode: 'outline',
+    },
+    /* popover: {
+      label: 'Today Date',
+      visibility: 'hover',
+    }, */
+  },
+])
+
+const carbonFormat = computed(() => {
+  return companyStore.selectedCompanySettings?.moment_date_format
+})
 
 watch(
   () => carbonFormat,
   () => {
     if (!props.enableTime) {
-      config.altFormat = carbonFormat.value ? carbonFormat.value : 'd M Y'
+      masks.input = carbonFormat.value ? carbonFormat.value : 'DD MMM YYYY'
+      config.mask = 'YYYY-MM-DD'
     } else {
-      config.altFormat = carbonFormat.value
-        ? `${carbonFormat.value} H:i `
-        : 'd M Y H:i'
+      let timeFormat = 'HH:mm'
+      if (props.time24hr) {
+        masks.inputDateTime24hr = carbonFormat.value
+          ? `${carbonFormat.value} ${timeFormat}`
+          : `DD MMM YYYY ${timeFormat}`
+      } else {
+        masks.inputDateTime = carbonFormat.value
+          ? `${carbonFormat.value} ${timeFormat}`
+          : `DD MMM YYYY ${timeFormat}`
+      }
+      config.mask = `YYYY-MM-DD ${timeFormat}`
     }
   },
   { immediate: true }
 )
+
+async function moveToDate(_date) {
+  const calendar = vCalendar.value
+  _date = _date ? _date : convertYMDFormat(new Date())
+  date.value = _date
+  // await calendar.move(_date)
+  calendar.hidePopover()
+}
+
+async function withInDays(noOfDays) {
+  if (!noOfDays) return false
+
+  let newDate = moment(props.sourceDate).add(noOfDays, 'days').toDate()
+  newDate = convertYMDFormat(newDate)
+  moveToDate(newDate)
+}
 </script>
+
+<style scoped>
+.extra-button {
+  @apply bg-primary-500 text-white text-sm font-semibold px-2 py-1 rounded hover:bg-primary-700;
+}
+</style>

resources/scripts/components/base/BaseDialog.vue

@@ -30,8 +30,13 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
+          >
+           <BaseDarkHighlight
+            class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
+            :class="dialogSizeClasses"
           />
+          </DialogOverlay>
         </TransitionChild>
 
         <!-- This element is to trick the browser into centering the modal contents. -->
@@ -64,6 +69,11 @@
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
+              dark:backdrop-blur-xl
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800
             "
             :class="dialogSizeClasses"
           >
@@ -80,31 +90,31 @@
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100': dialogStore.variant === 'primary',
-                  'bg-red-100': dialogStore.variant === 'danger',
+                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
+                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600"
+                  class="w-6 h-6 text-green-600 dark:text-white"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600"
+                  class="w-6 h-6 text-red-600 dark:text-white"
                   aria-hidden="true"
                 />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <DialogTitle
                   as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900"
+                  class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {{ dialogStore.message }}
                   </p>
                 </div>

resources/scripts/components/base/BaseDropdown.vue

@@ -69,7 +69,8 @@ const props = defineProps({
 })
 
 const containerClasses = computed(() => {
-  const baseClass = `origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
+  const baseClass = `dark:border dark:border-white/10 dark:text-white dark:bg-gray-800 dark:shadow-glass
+  origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
   return `${baseClass} ${props.containerClass}`
 })
 

resources/scripts/components/base/BaseDropdownItem.vue

@@ -2,16 +2,20 @@
   <MenuItem v-slot="{ active }" v-bind="$attrs">
     <a
       href="#"
+      class="group flex items-center px-4 py-2 text-sm font-normal"
       :class="[
-        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-        'group flex items-center px-4 py-2 text-sm font-normal',
+        active
+          ? 'bg-gray-100 text-gray-900 dark:text-white dark:bg-gray-700'
+          : 'text-gray-700 dark:text-gray-200',
       ]"
     >
-      <slot :active="active" />
+      <slot :active="active" :class="defaultIconClass" />
     </a>
   </MenuItem>
 </template>
 
 <script setup>
 import { MenuItem } from '@headlessui/vue'
+const defaultIconClass =
+  'w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white'
 </script>

resources/scripts/components/base/BaseEstimateStatusBadge.vue

@@ -18,17 +18,17 @@ const props = defineProps({
 const badgeColorClasses = computed(() => {
   switch (props.status) {
     case 'DRAFT':
-      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center '
+      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
     case 'SENT':
-      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
     case 'VIEWED':
-      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
     case 'EXPIRED':
-      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center'
+      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
     case 'ACCEPTED':
-      return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm  text-green-800 uppercase font-normal text-center'
+      return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
     case 'REJECTED':
-      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center'
+      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-purple-400 dark:text-purple-400'
     default:
       return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
   }

resources/scripts/components/base/BaseFileUploader.vue

@@ -21,6 +21,7 @@
       group
       min-h-[100px]
       bg-gray-50
+      dark:bg-gray-700 dark:border-gray-600
     "
     :class="avatar ? 'w-32 h-32' : 'w-full'"
   >
@@ -49,7 +50,7 @@
 
       <a
         href="#"
-        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
+        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group dark:bg-gray-900"
         @click.prevent.stop="onBrowse"
       >
         <BaseIcon
@@ -95,7 +96,7 @@
 
     <div
       v-else-if="localFiles.length && avatar && !multiple"
-      class="flex w-full h-full border border-gray-200 rounded"
+      class="flex w-full h-full border border-gray-200 rounded dark:border-gray-600"
     >
       <img
         v-if="localFiles[0].image"
@@ -169,10 +170,11 @@
           -right-3
           group
           hover:border-gray-300
+          dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
       </a>
     </div>
 
@@ -195,6 +197,7 @@
           hover:border-gray-500
           relative
           max-w-md
+          dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -270,6 +273,7 @@
             -right-3
             group
             hover:border-gray-300
+            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
@@ -293,6 +297,7 @@
           hover:border-gray-500
           relative
           max-w-md
+          dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -368,10 +373,11 @@
             -right-3
             group
             hover:border-gray-300
+            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
         </a>
       </a>
     </div>

resources/scripts/components/base/BaseFilterWrapper.vue

@@ -7,7 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
+    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
       <slot name="filter-header" />
 
       <label
@@ -20,6 +20,7 @@
           hover:text-gray-700
           top-2.5
           right-3.5
+          dark:text-gray-300
         "
         @click="$emit('clear')"
       >

resources/scripts/components/base/BaseInput.vue

@@ -65,6 +65,7 @@
         rounded-l-md
         bg-gray-50
         sm:text-sm
+        dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
       "
     >
       {{ addon }}
@@ -82,7 +83,7 @@
         pointer-events-none
       "
     >
-      <span class="text-gray-500 sm:text-sm">
+      <span class="text-gray-500 dark:text-white sm:text-sm ">
         {{ inlineAddon }}
       </span>
     </div>
@@ -199,7 +200,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black  dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
   },
   iconLeftClass: {
     type: String,
@@ -250,7 +251,8 @@ const inputAddonClass = computed(() => {
 
 const inputInvalidClass = computed(() => {
   if (props.invalid) {
-    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
+    return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500  focus:border-red-500  dark:focus:border-red-500  '
+
   }
 
   return 'focus:ring-primary-400 focus:border-primary-400'
@@ -258,7 +260,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
+    return `border-gray-100 bg-gray-100 !text-gray-400 dark:!text-gray-200   ring-gray-200 focus:ring-gray-200 focus:border-gray-100 dark:opacity-25 `
   }
 
   return ''

resources/scripts/components/base/BaseInvoiceStatusBadge.vue

@@ -20,25 +20,25 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'DRAFT':
-          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center'
+          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
         case 'SENT':
-          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-lime-200 dark:text-yellow-200'
         case 'VIEWED':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
         case 'COMPLETED':
-          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
         case 'DUE':
-          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
         case 'OVERDUE':
-          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
         case 'UNPAID':
-          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
+          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
         case 'PAID':
-          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center'
+          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
         default:
-          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
+          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-502 dark:text-gray-200'
       }
     })
     return { badgeColorClasses }

resources/scripts/components/base/BaseModal.vue

@@ -29,8 +29,21 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
-            />
+              class="
+              fixed
+              inset-0
+              transition-opacity
+              bg-gray-700
+              bg-opacity-25
+              dark:backdrop-blur-sm
+              dark:bg-gray-900/80
+              "
+            >
+              <BaseDarkHighlight
+                class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
+                :class="modalSize"
+              />
+            </DialogOverlay>
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
@@ -61,7 +74,11 @@
               my-4
               ${modalSize}
               sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800/90
+              border-t-8 border-solid rounded shadow-xl border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"
@@ -74,6 +91,8 @@
                   text-lg
                   font-medium
                   text-black
+                  dark:text-white
+                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >

resources/scripts/components/base/BaseModalFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="
+      z-0
+      flex
+      justify-end
+      p-4
+      border-t border-gray-200 border-solid
+      dark:border-gray-600
+    "
+  >
+    <slot />
+  </div>
+</template>

resources/scripts/components/base/BasePageHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-wrap justify-between">
     <div>
-      <h3 class="text-2xl font-bold text-left text-black">
+      <h3 class="text-2xl font-bold text-left text-black dark:text-white">
         {{ title }}
       </h3>
       <slot />

resources/scripts/components/base/BasePaidStatusBadge.vue

@@ -24,15 +24,15 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'PAID':
-          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
+          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-indigo-400 dark:text-indigo-400'
         case 'UNPAID':
-          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
+          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-orange-300 dark:text-orange-300'
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
+          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
         case 'OVERDUE':
-          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
+          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
         default:
-          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
+          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-300 dark:text-gray-300'
       }
     })
     return { badgeColorClasses }