add dark mode in est,inv,pay,rec view&create page (#1201)

* add dark mode in est,inv,pay,rec view&create page

* fix dark issue in itemRow and total taxes

---------

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

resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue

@@ -1,5 +1,13 @@
 <template>
-  <tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
+  <tr
+    class="
+      box-border
+      bg-white
+      border border-gray-200 border-solid
+      rounded-b
+      dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+      "
+    >
     <td colspan="5" class="p-0 text-left align-top">
       <table class="w-full">
         <colgroup>
@@ -130,7 +138,7 @@
                 <div class="flex items-center justify-center w-6 h-10 mx-2">
                   <BaseIcon
                     v-if="showRemoveButton"
-                    class="h-5 text-gray-700 cursor-pointer"
+                    class="h-5 dark:text-red-400 cursor-pointer"
                     name="TrashIcon"
                     @click="store.removeItem(index)"
                   />

resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue

@@ -1,155 +1,113 @@
 <template>
-  <table class="text-center item-table min-w-full">
-    <colgroup>
-      <col style="width: 40%; min-width: 280px" />
-      <col style="width: 10%; min-width: 120px" />
-      <col style="width: 15%; min-width: 120px" />
-      <col
-        v-if="store[storeProp].discount_per_item === 'YES'"
-        style="width: 15%; min-width: 160px"
-      />
-      <col style="width: 15%; min-width: 120px" />
-    </colgroup>
-    <thead class="bg-white border border-gray-200 border-solid">
-      <tr>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pl-7">
-            {{ $tc('items.item', 2) }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-right text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.quantity') }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.price') }}
-          </span>
-        </th>
-        <th
+  <div class="relative" >
+    <BaseDarkHighlight class="z-[-1]" />
+    <table class="text-center item-table min-w-full">
+      <colgroup>
+        <col style="width: 40%; min-width: 280px" />
+        <col style="width: 10%; min-width: 120px" />
+        <col style="width: 15%; min-width: 120px" />
+        <col
           v-if="store[storeProp].discount_per_item === 'YES'"
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.discount') }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-right text-gray-700
-            border-t border-b border-gray-200 border-solid
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pr-10 column-heading">
-            {{ $t('invoices.item.amount') }}
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <draggable
-      v-model="store[storeProp].items"
-      item-key="id"
-      tag="tbody"
-      handle=".handle"
-    >
-      <template #item="{ element, index }">
-        <Item
-          :key="element.id"
-          :index="index"
-          :item-data="element"
-          :loading="isLoading"
-          :currency="defaultCurrency"
-          :item-validation-scope="itemValidationScope"
-          :invoice-items="store[storeProp].items"
-          :store="store"
-          :store-prop="storeProp"
+          style="width: 15%; min-width: 160px"
         />
-      </template>
-    </draggable>
-  </table>
+        <col style="width: 15%; min-width: 120px" />
+      </colgroup>
+      <thead
+        class="
+          bg-white
+          border border-gray-200 border-solid
+          dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+          "
+        >
+        <tr>
+          <th class="text-left" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pl-7">
+              {{ $tc('items.item', 2) }}
+            </span>
+          </th>
+          <th class="text-right" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.quantity') }}
+            </span>
+          </th>
+          <th class="text-left" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.price') }}
+            </span>
+          </th>
+          <th
+            v-if="store[storeProp].discount_per_item_enabled"
+            class="text-left"
+            :class="theadClass"
+          >
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.discount') }}
+            </span>
+          </th>
+          <th class="text-right" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pr-10 column-heading">
+              {{ $t('invoices.item.amount') }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <draggable
+        v-model="store[storeProp].items"
+        item-key="id"
+        tag="tbody"
+        handle=".handle"
+      >
+        <template #item="{ element, index }">
+          <Item
+            :key="element.id"
+            :index="index"
+            :item-data="element"
+            :loading="isLoading"
+            :currency="defaultCurrency"
+            :item-validation-scope="itemValidationScope"
+            :invoice-items="store[storeProp].items"
+            :store="store"
+            :store-prop="storeProp"
+          />
+        </template>
+      </draggable>
+    </table>
 
-  <div
-    class="
-      flex
-      items-center
-      justify-center
-      w-full
-      px-6
-      py-3
-      text-base
-      border border-t-0 border-gray-200 border-solid
-      cursor-pointer
-      text-primary-400
-      hover:bg-primary-100
-    "
-    @click="store.addItem"
-  >
-    <BaseIcon name="PlusCircleIcon" class="mr-2" />
-    {{ $t('general.add_new_item') }}
+    <div
+      class="
+        flex
+        items-center
+        justify-center
+        w-full
+        px-6
+        py-3
+        text-base
+        border border-t-0 border-gray-200 border-solid
+        cursor-pointer
+        text-primary-400
+        hover:bg-primary-100
+        dark:bg-gray-900/50 dark:border-white/10 dark:hover:bg-gray-900/80
+      "
+      @click="store.addItem"
+    >
+      <BaseIcon name="PlusCircleIcon" class="mr-2" />
+      {{ $t('general.add_new_item') }}
+    </div>
   </div>
 </template>
 
@@ -180,6 +138,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  theadClass: {
+    type: String,
+    default: `px-5 py-3 text-sm not-italic font-medium leading-5
+              text-gray-700 border-t border-b border-gray-200 border-solid dark:text-white dark:border-white/10`
+  },
 })
 
 const companyStore = useCompanyStore()

resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue

@@ -6,6 +6,7 @@
       mt-6
       bg-white
       border border-gray-200 border-solid
+      dark:bg-gray-800/50 dark:border-white/10
       rounded
       md:min-w-[390px]
       min-w-[300px]
@@ -192,6 +193,7 @@
         pt-2
         mt-5
         border-t border-gray-200 border-solid
+        dark:border-gray-600
       "
     >
       <BaseContentPlaceholders v-if="isLoading">
@@ -199,7 +201,7 @@
       </BaseContentPlaceholders>
       <label
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase dark:text-gray-400"
         >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
       >
 

resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue

@@ -17,7 +17,7 @@
 
       <BaseIcon
         name="TrashIcon"
-        class="h-5 ml-2 cursor-pointer"
+        class="h-5 ml-2 cursor-pointer dark:text-red-400"
         @click="$emit('remove', tax.id)"
       />
     </label>

resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue

@@ -44,7 +44,7 @@
             >
               <!-- Tax Search Input  -->
 
-              <div class="relative bg-white">
+              <div class="relative bg-white dark:bg-gray-800">
                 <div class="relative p-4">
                   <BaseInput
                     v-model="textSearch"
@@ -65,13 +65,14 @@
                     list
                     max-h-36
                     border-t border-gray-200
+                    dark:border-gray-600
                   "
                 >
                   <div
                     v-for="(taxType, index) in filteredTaxType"
                     :key="index"
                     :class="{
-                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
+                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none dark:bg-gray-900':
                         taxes.find((val) => {
                           return val.tax_type_id === taxType.id
                         }),
@@ -84,6 +85,7 @@
                       cursor-pointer
                       hover:bg-gray-100 hover:cursor-pointer
                       last:border-b-0
+                      dark:border-gray-600 dark:hover:bg-gray-700/20
                     "
                     @click="selectTaxType(taxType, close)"
                   >
@@ -140,6 +142,10 @@
                   bg-gray-200
                   border-none
                   outline-none
+                  dark:bg-gray-600/70
+                  dark:backdrop-blur-xl
+                  dark:shadow-glass
+                  dark:hover:bg-gray-600/80
                 "
                 @click="openTaxTypeModal"
               >