@winchsa/ui 0.1.0

package/dist/components/icons/StartMarker.vue.d.ts

@@ -0,0 +1,17 @@
+declare const locale: import("vue").WritableComputedRef<string, string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    locale: typeof locale;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/icons/WorkerIcon.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg
+    width="12"
+    height="16"
+    viewBox="0 0 12 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_4001_12981)">
+      <mask
+        id="mask0_4001_12981"
+        style="mask-type:luminance"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="12"
+        height="16"
+      >
+        <path d="M11.4117 0.930664H0.59375V15.0697H11.4117V0.930664Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_4001_12981)">
+        <path d="M1.23239 15.0695C1.21613 15.0595 1.19908 15.0508 1.18139 15.0435C1.06768 15.0152 0.961872 14.9615 0.871932 14.8863C0.781992 14.8112 0.710259 14.7167 0.66213 14.6098C0.614001 14.503 0.590729 14.3866 0.594064 14.2695C0.597399 14.1523 0.627256 14.0375 0.681387 13.9335C1.00439 13.2245 1.33339 12.5175 1.65939 11.8105L2.74839 9.44754C2.77239 9.39454 2.79439 9.34054 2.80639 9.31254C2.66803 9.26481 2.53417 9.20491 2.40639 9.13354C2.33873 9.08317 2.28491 9.01652 2.24994 8.93976C2.21497 8.863 2.19999 8.77865 2.20639 8.69454C2.20639 7.37388 2.20639 6.0532 2.20639 4.73254C2.20143 4.65473 2.21306 4.57676 2.24053 4.50379C2.268 4.43082 2.31066 4.36453 2.3657 4.3093C2.42073 4.25408 2.48688 4.21118 2.55975 4.18347C2.63263 4.15575 2.71056 4.14384 2.78839 4.14854C3.46539 4.14854 4.14239 4.14854 4.81939 4.14854C4.90554 4.14186 4.99201 4.15663 5.07106 4.19153C5.15011 4.22643 5.21928 4.28038 5.27239 4.34854C5.29927 4.38496 5.33546 4.41347 5.37717 4.43106C5.41887 4.44866 5.46454 4.45469 5.50939 4.44854C6.42672 4.45587 7.34372 4.46421 8.26039 4.47354C8.40239 4.47354 8.54539 4.47354 8.68639 4.48354C8.82685 4.48948 8.96012 4.54729 9.06043 4.6458C9.16073 4.74431 9.22093 4.87652 9.22939 5.01685C9.23785 5.15719 9.19397 5.29568 9.10623 5.40553C9.01848 5.51538 8.89312 5.58878 8.75439 5.61154C8.57394 5.6291 8.39246 5.63344 8.21139 5.62454C7.31405 5.61788 6.41672 5.60988 5.51939 5.60054C5.48639 5.60054 5.45339 5.60054 5.40539 5.60754V5.75754C5.40539 6.61154 5.40539 7.46554 5.40539 8.32054C5.40837 8.40612 5.43655 8.48891 5.48639 8.55854C5.92839 9.15854 6.37439 9.75588 6.82439 10.3505C6.89236 10.4355 6.92782 10.5418 6.92439 10.6505C6.92439 11.6375 6.92439 12.6235 6.92439 13.6105C6.93799 13.8112 6.87446 14.0095 6.74677 14.1649C6.61908 14.3202 6.43688 14.421 6.23739 14.4465C6.12739 14.4596 6.01588 14.4489 5.91037 14.4152C5.80486 14.3814 5.7078 14.3255 5.62574 14.2511C5.54367 14.1767 5.47851 14.0856 5.43463 13.9839C5.39075 13.8822 5.36919 13.7723 5.37139 13.6615C5.36672 12.8469 5.36672 12.0319 5.37139 11.2165C5.37576 11.0752 5.32888 10.937 5.23939 10.8275C4.94639 10.4475 4.66239 10.0605 4.36239 9.65954C4.33139 9.72154 4.30639 9.76554 4.28539 9.81154C3.57939 11.3425 2.86939 12.8715 2.17239 14.4065C2.12058 14.5591 2.03479 14.6978 1.9215 14.8123C1.8082 14.9269 1.67036 15.0141 1.51839 15.0675L1.23239 15.0695Z" fill="#2A2A2A" />
+        <path d="M11.4163 6.58548C11.3743 6.596 11.3315 6.60302 11.2883 6.60648H7.17032C7.14132 6.60648 7.11231 6.60648 7.07031 6.60148V6.02748H7.22432C7.69032 6.03348 8.15531 6.04348 8.62431 6.04448C8.83179 6.04943 9.03566 5.98972 9.20767 5.87361C9.37969 5.7575 9.51131 5.59075 9.5843 5.39648C9.65407 5.21152 9.6661 5.00975 9.61879 4.81781C9.57148 4.62588 9.46704 4.45282 9.31931 4.32148C9.13978 4.15797 8.90512 4.06832 8.66231 4.07048C8.20131 4.07048 7.74132 4.05848 7.28032 4.05348H7.07031V2.32748H8.35831C8.35831 2.60681 8.35831 2.88514 8.35831 3.16248C8.35831 3.40948 8.41531 3.46748 8.65831 3.46848H9.82031C10.0543 3.46848 10.1133 3.40848 10.1133 3.16848C10.1133 2.88948 10.1133 2.61148 10.1133 2.31348H11.4133L11.4163 6.58548Z" fill="#2A2A2A" />
+        <path d="M4.98674 2.19366C4.98595 2.44241 4.9115 2.68535 4.77276 2.89183C4.63403 3.0983 4.43725 3.25904 4.20724 3.35378C3.97724 3.44852 3.72432 3.473 3.48042 3.42413C3.23652 3.37526 3.01255 3.25524 2.8368 3.0792C2.66105 2.90317 2.54138 2.67902 2.49289 2.43504C2.44441 2.19106 2.46929 1.93818 2.56439 1.70833C2.65949 1.47848 2.82055 1.28194 3.02725 1.14354C3.23394 1.00514 3.47699 0.93106 3.72574 0.930664C4.06012 0.931984 4.3804 1.06554 4.61666 1.30217C4.85291 1.5388 4.98595 1.85928 4.98674 2.19366Z" fill="#2A2A2A" />
+        <path d="M9.69425 2.32568H8.78125V3.04468H9.69425V2.32568Z" fill="#2A2A2A" />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_4001_12981">
+        <rect
+          width="10.818"
+          height="14.139"
+          fill="white"
+          transform="translate(0.59375 0.930664)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

package/dist/components/icons/WorkerIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/loading/LoadingBar.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from "vue";
+import { VOverlay, VProgressCircular } from "vuetify/components";
+const props = defineProps({
+  isLoading: { type: Boolean, required: true }
+});
+const isLoadingVisible = computed(() => props.isLoading);
+</script>
+
+<template>
+  <VOverlay
+    v-model="isLoadingVisible"
+    contained
+    persistent
+    class="align-center background-loading justify-center text-center w-100 h-100"
+  >
+    <div class="text-center">
+      <VProgressCircular indeterminate />
+    </div>
+  </VOverlay>
+</template>
+
+<style>
+.background-loading {
+  background: rgb(var(--v-loading-background)) !important;
+  border: 1px solid rgb(var(--v-theme-gray-200)) !important;
+}
+.background-loading .v-overlay__scrim {
+  background: none !important;
+}
+</style>

package/dist/components/loading/LoadingBar.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    isLoading: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/loading/LoadingDialog.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+import { VDialog, VCardItem, VProgressLinear } from "vuetify/components";
+import AppCard from "../core/cards/AppCard.vue";
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  title: { type: String, required: true },
+  logoSrc: { type: String, required: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const loading = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  }
+});
+</script>
+
+<template>
+  <VDialog v-model="loading" persistent width="450">
+    <AppCard class="pa-5">
+      <VCardItem class="pa-5">
+        <div class="text-center mt-4">
+          <img :src="logoSrc" class="mb-4">
+          <h3 class="mb-5">
+            {{ title }}
+          </h3>
+        </div>
+
+        <div class="mt-5">
+          <VProgressLinear
+            indeterminate
+            color="primary"
+          />
+        </div>
+      </VCardItem>
+    </AppCard>
+  </VDialog>
+</template>

package/dist/components/loading/LoadingDialog.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    modelValue: boolean;
+    title: string;
+    logoSrc: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/loading/LoadingItem.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from "vue";
+import { VProgressCircular } from "vuetify/components";
+const props = defineProps({
+  size: { type: Number, required: false, default: 25 },
+  direction: { type: String, required: false, default: "start" }
+});
+const isLoading = defineModel({ type: Boolean, ...{ default: true } });
+const overlayClass = computed(() => {
+  return {
+    "loading-overlay": true,
+    "loading-center": props.direction === "center",
+    "loading-start": props.direction === "start",
+    "loading-end": props.direction === "end"
+  };
+});
+</script>
+
+<template>
+  <div class="loading-item-wrapper">
+    <div class="content-wrapper" :class="{ 'content-hidden': isLoading }">
+      <slot />
+    </div>
+    <div v-if="isLoading" :class="overlayClass">
+      <VProgressCircular
+        indeterminate
+        :size="size"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-item-wrapper {
+  position: relative;
+  display: block;
+}
+
+.content-wrapper {
+  position: relative;
+  z-index: 1;
+  transition: opacity 0.2s ease;
+}
+.content-wrapper.content-hidden {
+  opacity: 0;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  z-index: 2;
+  align-items: center;
+}
+.loading-overlay.loading-center {
+  justify-content: center;
+}
+.loading-overlay.loading-start {
+  justify-content: flex-start;
+  padding: 8px;
+}
+.loading-overlay.loading-end {
+  justify-content: flex-end;
+  padding: 8px;
+}
+</style>

package/dist/components/loading/LoadingItem.vue.d.ts

@@ -0,0 +1,47 @@
+import { VProgressCircular } from 'vuetify/components';
+type __VLS_Props = {
+    size?: number;
+    direction?: 'center' | 'start' | 'end';
+};
+declare const isLoading: import("vue").ModelRef<boolean, string, boolean, boolean>;
+declare const overlayClass: import("vue").ComputedRef<{
+    'loading-overlay': boolean;
+    'loading-center': boolean;
+    'loading-start': boolean;
+    'loading-end': boolean;
+}>;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+    VProgressCircular: typeof VProgressCircular;
+    isLoading: typeof isLoading;
+    overlayClass: typeof overlayClass;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: number;
+    direction: "center" | "start" | "end";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: number;
+    direction: "center" | "start" | "end";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/table/DataTable.vue

@@ -0,0 +1,319 @@
+<script setup>
+import { VCol, VRow, VCardText, VDivider, VProgressCircular, VIcon, VSpacer } from "vuetify/components";
+import { VDataTableServer } from "vuetify/labs/VDataTable";
+import { useQuery } from "@tanstack/vue-query";
+import { useRoute, useRouter } from "vue-router";
+import { computed, reactive, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import AppCard from "../core/cards/AppCard.vue";
+import { responseAlert } from "../../utils/toaster";
+import { buildQueryString } from "../../utils/queryParams";
+import { client } from "../../utils/client";
+import { formatDate } from "../../utils/formatters";
+import { useTableFilters, usePagination } from "../../composables/use-table-filters";
+import { useIsMobile } from "../../composables/use-is-mobile";
+import BaseButton from "../forms/BaseButton.vue";
+import AppSelect from "../core/app-form-elements/AppSelect.vue";
+import FilterGenerator from "./FilterGenerator.vue";
+import TablePagination from "./TablePagination.vue";
+const { t } = useI18n();
+const { showValidationAlert } = responseAlert();
+const pageSizeOptions = [
+  { value: 30, title: "30" },
+  { value: 60, title: "60" },
+  { value: 90, title: "90" },
+  { value: 120, title: "120" }
+];
+const props = defineProps({
+  headers: { type: Array, required: true, default: () => [] },
+  formFilters: { type: Array, required: false, default: () => [] },
+  url: { type: String, required: false, default: "" },
+  queryParams: { type: Object, required: false, default: () => ({}) },
+  enableButtons: { type: Boolean, required: false, default: false },
+  enableButtonsFilter: { type: Boolean, required: false, default: true },
+  secondaryStyle: { type: Boolean, required: false },
+  replaceNullWithDash: { type: Boolean, required: false, default: true },
+  withoutQueryParams: { type: Boolean, required: false, default: false }
+});
+const route = useRoute();
+const router = useRouter();
+const { processedFormFilters, filters, urlQueryParams } = useTableFilters({
+  formFilters: computed(() => props.formFilters),
+  syncFiltersWithUrl: !props.withoutQueryParams
+});
+const { currentPage, itemsPerPage } = usePagination({
+  syncFiltersWithUrl: !props.withoutQueryParams,
+  defaultValues: {
+    pageSize: pageSizeOptions[0].value
+  }
+});
+const errors = reactive({ data: [] });
+const totals = ref({});
+const pagination = ref({
+  to: 1,
+  from: 1,
+  total: 1,
+  count: 1,
+  per_page: 1,
+  current_page: 1,
+  last_page: 1
+});
+const queryParamsString = computed(() => buildQueryString({
+  ...props.queryParams,
+  ...urlQueryParams.value,
+  page: currentPage.value,
+  pages_count: itemsPerPage.value
+}));
+const queryKey = computed(() => ["table-data", props.url, queryParamsString.value]);
+const { data, error: tableError, isLoading, refetch: refresh } = useQuery({
+  queryKey,
+  queryFn: async () => {
+    const response = await client.get(`${props.url}?${queryParamsString.value}`);
+    pagination.value = response.pagination;
+    totals.value = response.totals ?? {};
+    errors.data = [];
+    return response;
+  },
+  select: ({ data: data2, ...rest }) => {
+    return {
+      rows: props.replaceNullWithDash ? data2.map((item) => replaceItemNullWithDash(item)) : data2,
+      ...rest
+    };
+  }
+});
+function reset() {
+  const defaults = {};
+  processedFormFilters.value.forEach((filter) => {
+    defaults[filter.name] = null;
+  });
+  router.replace({ path: route.path, query: props.withoutQueryParams ? {} : props.queryParams }).finally(() => {
+    filters.value = defaults;
+    currentPage.value = 1;
+    itemsPerPage.value = pageSizeOptions[0].value;
+  });
+}
+function replaceItemNullWithDash(item) {
+  if (Array.isArray(item)) {
+    return item.map(replaceItemNullWithDash);
+  }
+  if (typeof item === "object") {
+    return Object.fromEntries(
+      Object.entries(item).map(([key, value]) => [
+        key,
+        value === null ? "-" : typeof value === "object" ? replaceItemNullWithDash(value) : value
+      ])
+    );
+  }
+  return item;
+}
+const hasFilters = computed(() => processedFormFilters.value.length > 0);
+const headers = computed(() => props.headers.map((header) => ({
+  ...header,
+  title: t(header.title),
+  sortable: false
+})));
+watch(tableError, (data2) => {
+  if (data2) {
+    errors.data = data2.response?._data?.status.errors_list;
+    showValidationAlert(data2);
+  }
+});
+defineExpose({
+  filterQueryString: queryParamsString,
+  isLoading,
+  filters,
+  refresh,
+  totals
+});
+</script>
+
+<template>
+  <section>
+    <VRow>
+      <VCol cols="12">
+        <AppCard
+          :style="{
+  overflow: useIsMobile().value ? 'auto !important' : 'inherit !important'
+}"
+          style="z-index: unset !important;"
+          :is-loading="isLoading && secondaryStyle"
+        >
+          <template v-if="enableButtons" #append>
+            <slot name="buttons" />
+          </template>
+          <!-- filters -->
+          <VCardText v-if="hasFilters" class="pt-0">
+            <slot name="filters">
+              <FilterGenerator
+                v-model="filters"
+                :forms="processedFormFilters"
+                :errors="errors.data"
+              />
+            </slot>
+          </VCardText>
+
+          <VDivider v-if="hasFilters" />
+
+          <!-- options and buttons -->
+          <VCardText v-if="enableButtonsFilter" class="d-flex flex-wrap py-4 gap-4">
+            <!-- Page Size options -->
+            <div class="me-3 d-flex gap-3">
+              <AppSelect
+                hide-details
+                :model-value="itemsPerPage"
+                :items="pageSizeOptions"
+                style="width: 6.25rem"
+                @update:model-value="val => itemsPerPage = Number(val)"
+              />
+            </div>
+
+            <VSpacer />
+
+            <!-- buttons -->
+            <div class="d-flex align-center table-buttons">
+              <slot name="buttons-action" />
+
+              <BaseButton
+                size="38"
+                color="secondary"
+                class="ms-2"
+                @click="reset"
+              >
+                <VIcon
+                  icon="tabler-filter-x"
+                  size="22"
+                />
+              </BaseButton>
+
+              <BaseButton
+                size="38"
+                color="secondary"
+                class="ms-2"
+                @click="refresh"
+              >
+                <VIcon
+                  icon="tabler-refresh"
+                  size="22"
+                />
+              </BaseButton>
+            </div>
+          </VCardText>
+
+          <VDivider v-if="enableButtonsFilter" />
+
+          <div :class="[!useIsMobile().value || 'overflow-auto app-h-fit', {
+  'secondary-table': secondaryStyle,
+  'responsive-table': useIsMobile().value
+}]">
+            <!-- table -->
+            <VDataTableServer
+              :class="{
+  'mt-5 px-5': secondaryStyle
+}"
+              :items="data?.rows"
+              :items-length="data?.pagination.total ?? 0"
+              :headers="headers"
+              :loading="isLoading"
+              :no-data-text="t('no_data')"
+              :fixed-header="useIsMobile().value"
+            >
+              <!-- columns -->
+              <template v-for="(_, name) in $slots" #[name]="slotProps">
+                <slot :name="name" v-bind="slotProps || {}" />
+              </template>
+
+              <template #item.index="{ index }">
+                {{ (data?.pagination.total ?? 0) - index - (data?.pagination.from ?? 0) + 1 }}
+              </template>
+
+              <template #item.created_at="{ item }">
+                <div class="d-flex text-pre-line">
+                  {{ formatDate(item.raw?.created_at) }}
+                </div>
+              </template>
+
+              <template #loader />
+
+              <!-- loading -->
+              <template #loading>
+                <div class="text-center">
+                  <VProgressCircular indeterminate />
+                </div>
+              </template>
+
+              <!-- pagination -->
+              <template #bottom>
+                <slot name="inside-bottom" :totals="data?.totals" />
+                <TablePagination v-model="currentPage" :pagination="pagination" />
+              </template>
+            </VDataTableServer>
+          </div>
+        </AppCard>
+      </VCol>
+    </VRow>
+  </section>
+</template>
+
+<style scoped>
+:deep(.v-table) .v-table__wrapper > table > tbody > tr > td,
+:deep(.v-table) .v-table__wrapper > table > tbody > tr > th {
+  border-bottom: 8px solid rgba(var(--v-table-divider)) !important;
+}
+
+:deep(.v-table__wrapper) {
+  overflow: inherit !important;
+}
+
+:deep(table) tr th {
+  position: sticky !important;
+  position: -webkit-sticky;
+  top: 70px;
+  z-index: 10;
+  padding-bottom: 0.75rem;
+}
+
+.table-buttons .v-btn .v-btn__overlay {
+  display: none !important;
+}
+.table-buttons .v-btn:hover {
+  background-color: rgba(var(--v-theme-secondary), 0.82) !important;
+  color: rgb(var(--v-theme-on-secondary)) !important;
+}
+
+.secondary-table :deep(table) {
+  width: 100% !important;
+  border-collapse: collapse !important;
+  border-spacing: 0 !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  border-collapse: collapse !important;
+  font-size: 13px !important;
+}
+.secondary-table :deep(table) th {
+  padding: 14px 16px !important;
+  height: fit-content !important;
+  top: 80px !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  background-color: rgb(var(--v-theme-gray-200)) !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+.secondary-table :deep(table) td {
+  padding: 16px !important;
+  height: auto !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+.secondary-table :deep(.v-table) .v-table__wrapper > table > tbody > tr > td,
+.secondary-table :deep(.v-table) .v-table__wrapper > table > tbody > tr > th {
+  border-bottom: 1px solid rgba(var(--v-theme-silver)) !important;
+}
+
+:deep(.v-overlay) {
+  z-index: 500 !important;
+}
+
+.responsive-table :deep(table) th {
+  position: unset !important;
+  top: 0 !important;
+  z-index: 10 !important;
+}
+</style>