diff --git a/.github/workflows/laravel.yml b/.github/workflows/laravel.yml
index f525cf2f..f8796138 100644
--- a/.github/workflows/laravel.yml
+++ b/.github/workflows/laravel.yml
@@ -1,4 +1,4 @@
-name: Laravel App Deployment
+name: Loger Demo Deployment
 
 on:
   push:
diff --git a/README.md b/README.md
index c1e7586a..9e2fd14d 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,8 @@
 	</strong>
 </p>
 
+![example workflow](https://github.com/jesusantguerrero/atmosphere/actions/workflows/laravel.yml/badge.svg)
+
 
 ![image](https://user-images.githubusercontent.com/17421742/212417292-19f319c5-1cf4-48a8-ba40-1e9b040e820f.png)
 
diff --git a/resources/js/Pages/Journal/Accounts/Index.vue b/resources/js/Pages/Journal/Accounts/Index.vue
deleted file mode 100644
index 8672c396..00000000
--- a/resources/js/Pages/Journal/Accounts/Index.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<script setup>
-import { format as formatDate } from "date-fns";
-import AppLayout from "@/Components/templates/AppLayout.vue";
-import IconAdd from "@/Components/icons/IconAdd.vue";
-import cols from "./cols";
-import AccountModal from "@/Components/shared/AccountModal.vue";
-import {
-  ElTabs,
-  ElTabPane,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-} from "element-plus";
-import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
-import { AtButton } from "atmosphere-ui";
-import { onMounted, ref, computed } from "vue";
-
-import AtTable from "@/Components/AtTable.vue";
-import AppButton from "@/Components/shared/AppButton.vue";
-
-import AccountingSectionNav from "../Partials/AccountingSectionNav.vue";
-
-const props = defineProps({
-  accounts: {
-    type: Array,
-  },
-  categories: {
-    type: Array,
-  },
-});
-
-const selectedAccount = ref(null);
-const searchText = ref("");
-const activeName = ref([]);
-const activeAccountSection = ref("");
-const accountsCategories = ref([]);
-
-onMounted(() => {
-  getAccounts();
-});
-
-const formatDateFilter = (date) => {
-  return formatDate(date, "YYYY-MM-DD");
-};
-
-const section = computed(() => {
-  return "accounts";
-});
-
-const mainCategories = computed(() => {
-  return props.categories.map((group) => {
-    group.name.replace(/[d]/i);
-    return group;
-  });
-});
-
-const getAccounts = () => {
-  accountsCategories.value = props.categories;
-  activeAccountSection.value =
-    mainCategories.value && mainCategories.value.length ? mainCategories.value[0].id : "";
-};
-
-const editAccount = () => {};
-
-const rowClick = (command, service) => {
-  switch (command) {
-    case "edit":
-      editAccount(service);
-      break;
-    default:
-      break;
-  }
-};
-
-const isAccountModalOpen = ref(false);
-const accountToEdit = ref({});
-const openAccountModal = (account = {}) => {
-  accountToEdit.value = account;
-  isAccountModalOpen.value = true;
-};
-</script>
-
-<template>
-  <AppLayout title="Cuentas">
-    <template #header>
-      <AccountingSectionNav>
-        <template #actions>
-          <AppButton @click="isAccountModalOpen = true" variant="inverse">
-            <IconAdd />
-          </AppButton>
-        </template>
-      </AccountingSectionNav>
-    </template>
-
-    <div class="w-full py-10 mx-auto sm:px-6 lg:px-8">
-      <div class="w-full px-5 py-5 bg-white rounded-md shadow-md">
-        <ElTabs v-model="activeAccountSection">
-          <ElTabPane
-            :label="`${category.alias || category.name} (${
-              category.subcategories.length
-            })`"
-            :title="`${category.alias || category.name} (${category.number})`"
-            :name="category.id"
-            v-for="category in mainCategories"
-            :key="category.id"
-            class="w-full bg-white"
-          >
-            <!-- subCategories -->
-            <template v-if="category.subcategories.length">
-              <Disclosure
-                v-for="subCategory in category.subcategories"
-                :key="subCategory.id"
-              >
-                <DisclosureButton
-                  class="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-blue-900 bg-blue-100 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75"
-                  v-slot="{ open }"
-                >
-                  <span class="text-lg font-bold">
-                    {{ subCategory.number }} - {{ subCategory.alias || subCategory.name }}
-                  </span>
-
-                  <i
-                    class="fa fa-chevron-down"
-                    :class="open ? 'transform rotate-180' : ''"
-                  />
-                </DisclosureButton>
-                <DisclosurePanel class="font-bold text-gray-500">
-                  <!-- accounts  -->
-                  <AtTable
-                    :cols="cols(' ')"
-                    :tableData="subCategory.accounts"
-                    :empty-text="'No hay cuentas en esta categoria'"
-                    hide-headers
-                  >
-                    <template v-slot:name="{ scope: { row } }">
-                      <div>
-                        <div class="font-bold">{{ row.alias || row.name }}</div>
-                        <div class="italic font-normal" v-if="row.last_transaction_date">
-                          Last transaction on: {{ row.last_transaction_date.date }}
-                        </div>
-                      </div>
-                    </template>
-                    <template v-slot:actions="{ scope: { row } }">
-                      <button @click="openAccountModal(row)">Edit</button>
-                    </template>
-                  </AtTable>
-                  <!-- accounts  -->
-                </DisclosurePanel>
-              </Disclosure>
-            </template>
-            <!-- subCategories -->
-          </ElTabPane>
-        </ElTabs>
-      </div>
-
-      <AccountModal
-        v-if="isAccountModalOpen"
-        :show="isAccountModalOpen"
-        :max-width="modalMaxWidth"
-        :form-data="accountToEdit"
-        @close="isAccountModalOpen = false"
-      />
-    </div>
-  </AppLayout>
-</template>
-
-<style lang="scss" scoped>
-.body-section {
-  background: white;
-  padding: 15px;
-}
-
-.el-table th {
-  font-weight: bolder;
-  color: #222 !important;
-}
-
-.section-actions {
-  display: flex;
-
-  .app-search__container {
-    width: 80%;
-    margin-right: 15px;
-  }
-
-  .action-buttons {
-    width: 20%;
-    display: flex;
-
-    button {
-      margin-left: auto;
-    }
-  }
-}
-</style>
diff --git a/resources/js/Pages/Journal/Accounts/cols.ts b/resources/js/Pages/Journal/Accounts/cols.ts
deleted file mode 100644
index 8670a5f6..00000000
--- a/resources/js/Pages/Journal/Accounts/cols.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export default name => {
-    return [
-      {
-        label: name || "Account Name",
-        name: "display_id",
-        width: 200,
-        type: "custom",
-        render(row) {
-          return `${row.number} - ${row.alias || row.name}`
-        }
-      },
-      {
-        label: "",
-        name: "display_id",
-        width: 300
-      },
-      {
-        label: "",
-        name: "description"
-      },
-      {
-        label: "",
-        name: "actions",
-        width: 300,
-        type: "custom"
-      }
-    ];
-  };
diff --git a/resources/js/Pages/Journal/Invoices/Create.vue b/resources/js/Pages/Journal/Invoices/Create.vue
deleted file mode 100644
index 15d14144..00000000
--- a/resources/js/Pages/Journal/Invoices/Create.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8">
-    <InvoiceTemplate
-      ref="InvoiceTemplateForm"
-      :is-editing="true"
-      :clients="clients"
-      :products="products"
-      :invoice-data="invoice"
-      :available-taxes="availableTaxes"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { provide, ref } from "vue";
-import InvoiceTemplate from "./Partials/InvoiceTemplate.vue";
-
-const props = defineProps([
-  "invoice",
-  "clients",
-  "products",
-  "categories",
-  "availableTaxes",
-]);
-
-const InvoiceTemplateForm = ref();
-const saveForm = (isApplied: boolean) => {
-  InvoiceTemplateForm.value.saveForm(isApplied);
-};
-
-provide("categories", props.categories);
-</script>
diff --git a/resources/js/Pages/Journal/Invoices/Edit.vue b/resources/js/Pages/Journal/Invoices/Edit.vue
deleted file mode 100644
index aeff86fc..00000000
--- a/resources/js/Pages/Journal/Invoices/Edit.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <AppLayout title="Factura">
-    <template #header>
-      <AccountingSectionNav>
-        <template #actions>
-          <AppButton @click="saveForm(true)" variant="inverse">
-            {{ $t("save invoice") }}
-          </AppButton>
-        </template>
-      </AccountingSectionNav>
-    </template>
-
-    <div class="py-10 mx-auto sm:px-6 lg:px-8">
-      <InvoiceTemplate
-        ref="InvoiceTemplateForm"
-        :is-editing="true"
-        :type="type"
-        :clients="clients"
-        :products="products"
-        :invoice-data="invoice"
-        :available-taxes="availableTaxes"
-      />
-    </div>
-  </AppLayout>
-</template>
-
-<script setup lang="ts">
-import { provide, ref } from "vue";
-
-import AppLayout from "@/Components/templates/AppLayout.vue";
-import InvoiceTemplate from "./Partials/InvoiceTemplate.vue";
-import AccountingSectionNav from "../Partials/AccountingSectionNav.vue";
-import AppButton from "../../../Components/shared/AppButton.vue";
-
-const props = defineProps([
-  "invoice",
-  "clients",
-  "products",
-  "categories",
-  "availableTaxes",
-  "type",
-]);
-
-const InvoiceTemplateForm = ref();
-const saveForm = (isApplied: boolean) => {
-  InvoiceTemplateForm.value.saveForm(isApplied);
-};
-
-provide("categories", props.categories);
-</script>
diff --git a/resources/js/Pages/Journal/Invoices/Index.vue b/resources/js/Pages/Journal/Invoices/Index.vue
deleted file mode 100644
index 03e62fd8..00000000
--- a/resources/js/Pages/Journal/Invoices/Index.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script lang="ts" setup>
-import { reactive, computed, watch, toRefs } from "vue";
-import { AtButton, AtDatePager, AtBackgroundIconCard } from "atmosphere-ui";
-import { router } from "@inertiajs/vue3";
-
-import AppLayout from "@/Components/templates/AppLayout.vue";
-import InvoiceTable from "@/Components/templates/InvoiceTable";
-import AccountingSectionNav from "../Partials/AccountingSectionNav.vue";
-import { useServerSearch } from "@/utils/useServerSearch";
-import { formatMoney } from "@/utils";
-
-const props = defineProps({
-  invoices: {
-    type: Array,
-  },
-  type: {
-    type: String,
-  },
-  paid: Number,
-  outstanding: Number,
-  total: Number,
-  serverSearchOptions: Object,
-});
-
-const state = reactive({
-  sectionName: computed(() => {
-    return `${props.type.toLowerCase()}s`;
-  }),
-});
-
-const filters = reactive({
-  client_id: null,
-});
-
-watch(
-  () => filters,
-  () => {
-    const selectedFilters = Object.entries(filters).reduce(
-      (acc, [filterName, filter]) => {
-        acc[filterName] = filter?.id;
-        return acc;
-      },
-      {}
-    );
-    router.get(
-      location.pathname,
-      {
-        filters: selectedFilters,
-      },
-      { preserveState: true }
-    );
-  },
-  { deep: true }
-);
-
-const { serverSearchOptions } = toRefs(props);
-const { executeSearchWithDelay, updateSearch, state: pageState } = useServerSearch(
-  serverSearchOptions,
-  (urlParams: string) => {
-    updateSearch(`${location.pathname}?${urlParams}`);
-  },
-  {
-    manual: true,
-  }
-);
-</script>
-
-<template>
-  <AppLayout title="Transaccciones">
-    <template #header>
-      <AccountingSectionNav>
-        <template #actions>
-          <p>Total: {{ invoices.data.length }}</p>
-          <AtButton
-            @click="router.visit(`/${state.sectionName}/create`)"
-            variant="inverse"
-            >Imprimir</AtButton
-          >
-          <AtButton
-            @click="router.visit(`/${state.sectionName}/create`)"
-            variant="inverse"
-            >Filtros</AtButton
-          >
-          <AtDatePager
-            class="w-full h-12 border-none bg-base-lvl-1 text-body"
-            v-model:startDate="pageState.dates.startDate"
-            v-model:endDate="pageState.dates.endDate"
-            @change="executeSearchWithDelay()"
-            controlsClass="bg-transparent text-body hover:bg-base-lvl-1"
-            next-mode="month"
-          />
-        </template>
-      </AccountingSectionNav>
-    </template>
-
-    <div class="py-10 mx-auto sm:px-6 lg:px-8">
-      <section class="flex space-x-4">
-        <AtBackgroundIconCard
-          class="w-full bg-white border h-28 text-body-1"
-          :title="$t('Paid')"
-          :value="formatMoney(paid ?? 0)"
-        />
-        <AtBackgroundIconCard
-          class="w-full bg-white border h-28 text-body-1"
-          :title="$t('Pending balance')"
-          :value="formatMoney(outstanding ?? 0)"
-        />
-        <AtBackgroundIconCard
-          class="w-full bg-white border h-28 text-body-1"
-          :title="$t('Total')"
-          :value="formatMoney(total || 0)"
-        />
-      </section>
-      <InvoiceTable :invoice-data="invoices.data" class="mt-10 bg-base-lvl-3" />
-    </div>
-  </AppLayout>
-</template>
-
-<style lang="scss" scoped>
-.body-section {
-  background: white;
-  padding: 15px;
-}
-
-.el-table th {
-  font-weight: bolder;
-  color: #222 !important;
-}
-
-.section-actions {
-  display: flex;
-
-  .app-search__container {
-    width: 80%;
-    margin-right: 15px;
-  }
-
-  .action-buttons {
-    width: 20%;
-    display: flex;
-
-    button {
-      margin-left: auto;
-    }
-  }
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/InvoiceEmail.vue b/resources/js/Pages/Journal/Invoices/Partials/InvoiceEmail.vue
deleted file mode 100644
index 197433e4..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/InvoiceEmail.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <el-dialog title="Send Email" :visible.sync="isVisible.value">
-    <div class="">
-      <div class="row">
-        <div class="col-md-12 text-left">
-          <div class="invoice-form-row form-group">
-            <label for="recipient">To: </label>
-            <input
-              type="text"
-              class="form-control"
-              name="recipient"
-              id="recipient"
-              v-model="formData.recipients[0]"
-            />
-          </div>
-        </div>
-
-        <div class="col-md-12 text-left">
-          <div class="invoice-form-row form-group">
-            <label for="subject">Subject: </label>
-            <input
-              type="text"
-              class="form-control"
-              name="subject"
-              id="subject"
-              v-model="formData.subject"
-            />
-          </div>
-        </div>
-
-        <div class="col-md-12 text-left">
-          <div class="invoide-form-row form-group">
-            <label for="">Message</label>
-            <textarea
-              class="form-control"
-              v-model="formData.message"
-              cols="3"
-              rows="3"
-            >
-            </textarea>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <span slot="footer" class="dialog-footer">
-      <el-button class="danger" @click="isVisible.value = false"
-        >Cancel</el-button
-      >
-      <el-button type="primary" v-if="formData.id" @click="deletePayment"
-        >Delete</el-button
-      >
-      <el-button type="success" v-else @click="sendEmail"
-        >Send Email</el-button
-      >
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  props: {
-    isVisible: Object,
-    invoice: [Object, null],
-    endpoint: {
-      type: String,
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      formData: {
-        attach_pdf: false,
-        message: "HI",
-        recipients: ["jesusant.guerrero@gmail.com"],
-        subject: "Invoice #1 from InCode"
-      }
-    };
-  },
-
-  watch: {
-    invoice: {
-      handler(invoice) {
-        if (invoice && invoice.client) {
-          this.formData.recipients = [invoice.client.email];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-
-  methods: {
-    sendEmail() {
-      if (!this.formData.recipients[0]) {
-        this.$notify({
-          type: "error",
-          message: "should specify a recipient"
-        });
-        return;
-      }
-
-      const formData = { ...this.formData };
-
-      this.$http
-        .post(this.endpoint, formData)
-        .then(() => {
-          this.$emit("sent");
-          this.resetForm(true);
-        })
-        .catch(err => {
-          this.$notify({
-            type: "error",
-            message: err.response
-              ? err.response.data.status.message
-              : "Ha ocurrido un error"
-          });
-        });
-    },
-
-    resetForm(shouldClose) {
-      this.formData = {
-        attach_pdf: false,
-        message: "",
-        recipients: [""],
-        subject: ""
-      };
-      if (shouldClose) {
-        this.isVisible.value = false;
-      }
-    }
-  }
-};
-</script>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/InvoiceGrid.vue b/resources/js/Pages/Journal/Invoices/Partials/InvoiceGrid.vue
deleted file mode 100644
index b1f8cf97..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/InvoiceGrid.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<script lang="ts" setup>
-// @ts-ignore
-import { AtInput, AtSimpleSelect } from "atmosphere-ui";
-import { computed, reactive, toRefs, onMounted } from "vue";
-// @ts-ignore
-import IconTrash from "@/Components/icons/IconTrash.vue";
-import BaseTable from "@/Components/AtTable.vue";
-import cols from "./cols";
-
-const props = defineProps({
-  tableData: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  availableTaxes: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  products: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  resourceUrl: {
-    type: String,
-    default: "/services?filter[name]=%${query}%&relationships=stock",
-  },
-  isEditing: {
-    type: Boolean,
-    default: true,
-  },
-  taxes: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  hiddenCols: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-});
-
-const emit = defineEmits(["taxes-updated", "deleted"]);
-
-const state = reactive({
-  cleaveOptions: {
-    percent: {
-      numericOnly: true,
-      blocks: [3],
-    },
-    money: {
-      decimal: ".",
-      thousands: ",",
-      precision: 2,
-      masked: false,
-    },
-  },
-  services: [],
-  isLoading: false,
-  rowToAdd: {},
-  addMode: false,
-  renderedCols: computed(() => {
-    return props.isEditing
-      ? cols
-      : cols.filter((col) => col.name !== "actions" && col.label);
-  }),
-});
-
-const addRow = () => {
-  const itemTaxes = state.rowToAdd.taxes?.length ? state.rowToAdd.taxes : [];
-  if (props.isEditing && (!props.tableData.length || props.tableData.at(-1).concept))
-    props.tableData.push({
-      product_name: state.rowToAdd?.name,
-      concept: state.rowToAdd?.name,
-      product_id: state.rowToAdd.id,
-      quantity: 1,
-      discount: 0,
-      price: state.rowToAdd.price?.value || 0,
-      amount: 0,
-      taxes: [...itemTaxes, { id: "new" }],
-    });
-};
-
-const removeRow = (index: number, row: any) => {
-  const isConfirmed = confirm("Do you want to delete this?");
-  if (!isConfirmed) {
-    return;
-  }
-  const deleted = { ...row };
-  props.tableData.splice(index, 1);
-  emit("deleted", deleted);
-};
-
-const setTax = (rowIndex: number, taxIndex: number, taxName: string) => {
-  const itemRow: any = props.tableData[rowIndex];
-  const tax = props.availableTaxes.find(
-    (availableTax: any) => taxName == availableTax.name
-  );
-  itemRow.taxes[taxIndex] = tax;
-  emit("taxes-updated", { rowIndex, taxes: itemRow.taxes });
-};
-
-const removeTax = (rowIndex: number, taxIndex: number) => {
-  const itemRow: any = props.tableData[rowIndex];
-  if (itemRow.taxes.length > 1) {
-    const taxes = itemRow.taxes.filter((_tax: any, index: number) => index !== taxIndex);
-    emit("taxes-updated", { rowIndex, taxes });
-  }
-};
-
-onMounted(() => {
-  addRow();
-});
-
-const { renderedCols, cleaveOptions } = toRefs(state);
-</script>
-
-<template>
-  <div class="w-full text-sm">
-    <slot name="prepend" />
-    <BaseTable
-      :hidden-cols="hiddenCols"
-      :cols="renderedCols"
-      :table-data="tableData"
-      :hide-empty-text="true"
-    >
-      <template v-slot:concept="{ scope: { row, col } }">
-        <slot name="concept" :row="row" :col="col">
-          <div class="py-2 d-flex">
-            <AtInput
-              name=""
-              v-model="row.concept"
-              class="border-none form-control hover:border"
-              rounded
-              v-if="isEditing"
-            />
-            <span v-if="col?.render && !isEditing" v-html="col?.render(row)" />
-            <span v-else> {{ row.concept }}</span>
-          </div>
-        </slot>
-      </template>
-
-      <template v-slot:quantity="{ scope }" v-if="isEditing">
-        <AtInput
-          name=""
-          min="1"
-          type="number"
-          v-model="scope.row.quantity"
-          class="text-right border-none form-control hover:border"
-          rounded
-        />
-      </template>
-
-      <template v-slot:discount="{ scope }" v-if="isEditing">
-        <AtInput
-          class="text-right form-control"
-          type="number"
-          max="100"
-          min="0"
-          rounded
-          :options="cleaveOptions.percent"
-          v-model="scope.row.discount"
-        />
-      </template>
-
-      <template v-slot:price="{ scope }" v-if="isEditing">
-        <div class="space-y-2">
-          <AtInput
-            v-model="scope.row.price"
-            number-format
-            rounded
-            class="text-right border-none hover:border"
-          />
-        </div>
-      </template>
-
-      <template v-slot:taxes="{ scope }" v-if="isEditing">
-        <div
-          class="flex items-center w-full mx-auto"
-          v-for="(tax, index) in scope.row.taxes"
-          :key="`tax-${index}`"
-        >
-          <AtSimpleSelect
-            :options="availableTaxes"
-            v-model="scope.row.taxes[index].tax_id"
-            v-model:selected="scope.row.taxes[index]"
-            @update:model-value="setTax(scope.$index, index, $event)"
-            placeholder="Tax"
-            option-template="${name} - ${rate}%"
-            label="name"
-            key-track="id"
-            class="w-full"
-          />
-          {{ tax.name }}
-          <button
-            class="h-10 px-2 mt-auto ml-2 transition border focus:outline-none hover:text-gray-900 hover:bg-gray-200"
-            @click="removeTax(scope.$index, index)"
-          >
-            <IconTrash class="w-4 h-4 text-gray-400" />
-          </button>
-        </div>
-      </template>
-
-      <template v-slot:actions="{ scope }" v-if="isEditing">
-        <button
-          @click="removeRow(scope.$index, scope.row)"
-          class="invoice-grid__remove-row"
-        >
-          <IconTrash class="w-4 h-4 text-gray-400" />
-        </button>
-      </template>
-
-      <!-- table slots -->
-      <template v-slot:append v-if="isEditing">
-        <button @click="addRow()" class="invoice-grid__add-row">Add Row</button>
-      </template>
-    </BaseTable>
-  </div>
-</template>
->
-
-<style lang="scss">
-.el-table,
-.el-table__body-wrapper {
-  overflow: visible;
-
-  td {
-    padding: 0 0 0 0 !important;
-  }
-
-  .form-control,
-  td {
-    border: none;
-    background: transparent;
-    font-size: 13px;
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-  }
-}
-.el-table__append-wrapper {
-  overflow: visible;
-}
-</style>
-
-<style lang="scss" scoped>
-.invoice-grid {
-  &__add-row {
-    width: 100%;
-    height: 34px;
-    color: dodgerblue;
-    background: white;
-    border: none;
-    font-weight: bolder;
-    transition: all ease 0.3s;
-
-    &:hover {
-      font-size: 1.1em;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &__remove-row {
-    background: transparent;
-    color: red;
-    border: none;
-  }
-}
-
-.service-select {
-  display: grid;
-  grid-template-columns: 95% 5%;
-  padding: 12px 10px;
-  overflow: visible;
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/InvoiceModal.vue b/resources/js/Pages/Journal/Invoices/Partials/InvoiceModal.vue
deleted file mode 100644
index 52a22ede..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/InvoiceModal.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<script setup lang="ts">
-import { AtButton, AtField, AtInput, AtSimpleSelect } from "atmosphere-ui";
-import { format as formatDate, parseISO } from "date-fns";
-import { ElDatePicker, ElDialog, ElNotification } from "element-plus";
-import { ref, watch, computed } from "vue";
-
-import AppButton from "@/Components/shared/AppButton.vue";
-
-import { paymentMethods } from "@/Modules/loans/constants";
-import AppFormField from "@/Components/shared/AppFormField.vue";
-import { useForm } from "@inertiajs/vue3";
-import { useI18n } from "vue-i18n";
-import { useResponsive } from "@/utils/useResponsive";
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean;
-    invoiceData?: IInvoice;
-    due: number;
-    endpoint?: string;
-    title: string;
-    hideClientOptions?: boolean;
-    clientId: string;
-    rentId: string;
-    type: string;
-  }>(),
-  {
-    type: "expense",
-    title: "Crear factura",
-    due: 0,
-  }
-);
-
-const emit = defineEmits(["update:modelValue", "saved"]);
-
-const formData = useForm({
-  concept: "",
-  description: "",
-  total: 0,
-  due_date: new Date(),
-});
-
-watch(
-  () => props.invoiceData,
-  (data) => {
-    formData.concept = data?.concept;
-    formData.total = data?.total;
-    formData.due_date = parseISO(data?.due_date);
-    formData.description = data?.description;
-  },
-  {
-    immediate: true,
-  }
-);
-
-const isLoading = ref(false);
-
-const { t } = useI18n();
-function onSubmit() {
-  if (isLoading.value) return;
-  if (!+formData.total) {
-    ElNotification({
-      type: "error",
-      message: t("should specify an amount"),
-    });
-    return;
-  }
-
-  const data = {
-    ...formData.data(),
-    due_date: formatDate(formData.due_date || new Date(), "yyyy-MM-dd"),
-  };
-
-  isLoading.value = true;
-  const url = `/rents/${props.invoiceData.invoiceable_id}/invoices/${props.invoiceData?.id}/simple-update`;
-
-  axios
-    .put(url, data)
-    .then(() => {
-      resetForm(true);
-      emit("saved");
-    })
-    .catch((err: any) => {
-      ElNotification({
-        type: "error",
-        message: err.response ? err.response.data.status.message : "Ha ocurrido un error",
-      });
-    })
-    .finally(() => {
-      isLoading.value = false;
-    });
-}
-
-function resetForm(shouldClose = false) {
-  formData.reset();
-  if (shouldClose) {
-    emitChange(false);
-  }
-}
-
-function emitChange(value: boolean) {
-  emit("update:modelValue", value);
-}
-
-const modalTitle = computed(() => {
-  return props.invoiceData?.id ? "Edit invoice" : "Create invoice";
-});
-
-const { isMobile } = useResponsive();
-</script>
-
-<template>
-  <ElDialog
-    :model-value="modelValue"
-    class="overflow-hidden"
-    :fullscreen="isMobile"
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <template #header>
-      <header
-        class="border-b -mx-6 -mt-6 -mr-10 bg-secondary/80 text-white py-4 px-4 flex items-center justify-between"
-      >
-        <h4 class="font-bold text-xl">{{ $t(modalTitle) }}</h4>
-        <button class="hover:text-danger" @click="close()">
-          <IMdiClose />
-        </button>
-      </header>
-    </template>
-    <div class="-mt-10">
-      <section class="flex space-x-4">
-        <AtField class="w-full text-left" label="Concepto">
-          <AtInput
-            type="text"
-            class="form-control"
-            name="invoice-description"
-            id="invoice-description"
-            v-model="formData.concept"
-            rounded
-          />
-        </AtField>
-      </section>
-
-      <section>
-        <section class="flex space-x-4">
-          <AppFormField label="Fecha limite" class="w-6/12">
-            <ElDatePicker
-              v-model="formData.due_date"
-              size="large"
-              class="w-full"
-              rounded
-            />
-          </AppFormField>
-
-          <AppFormField class="w-6/12 text-left" label="Monto Recibido">
-            <AtInput
-              class="form-control"
-              number-format
-              v-model="formData.total"
-              rounded
-              required
-            >
-            </AtInput>
-          </AppFormField>
-
-          <AppFormField
-            label="Metodo de pago"
-            class="w-full ml-4"
-            v-if="formData.is_paid"
-          >
-            <AtSimpleSelect
-              v-model="formData.payment_method_id"
-              v-model:selected="formData.paymentMethod"
-              :options="paymentMethods"
-              placeholder="Seleccione metodo de pago"
-              class="w-full"
-              label="name"
-              key-track="id"
-            />
-          </AppFormField>
-        </section>
-      </section>
-
-      <AppFormField class="w-full text-left" :label="$t('Description')">
-        <textarea
-          class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:border-gray-400"
-          v-model="formData.description"
-          cols="3"
-          rows="3"
-        />
-      </AppFormField>
-    </div>
-
-    <template #footer>
-      <div class="space-x-2 flex justify-end">
-        <AtButton
-          :disabled="isLoading"
-          @click="emitChange(false)"
-          class="bg-white border rounded-md text-gray"
-        >
-          Cancel
-        </AtButton>
-        <AppButton
-          :processing="isLoading"
-          :disabled="isLoading || !formData.total"
-          :title="!formData.total && 'Debe ingresar un monto mayor a 0 para guardar'"
-          variant="secondary"
-          @click="onSubmit()"
-        >
-          Guardar
-        </AppButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTemplate.vue b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTemplate.vue
deleted file mode 100644
index 5154c98f..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTemplate.vue
+++ /dev/null
@@ -1,588 +0,0 @@
-<script lang="ts" setup>
-import { format as formatDate } from "date-fns";
-import parseISO from "date-fns/esm/fp/parseISO/index.js";
-import { useForm, router } from "@inertiajs/vue3";
-import { AtInput, AtField, AtFieldCheck } from "atmosphere-ui";
-import { computed, reactive, toRefs, watch, toRaw } from "vue";
-
-import AppButton from "@/Components/shared/AppButton.vue";
-import InvoiceTotals from "./InvoiceTotals.vue";
-import InvoiceGrid from "./InvoiceGrid.vue";
-
-import { usePaymentModal } from "@/Modules/transactions/usePaymentModal";
-import {
-  ElCollapse,
-  ElCollapseItem,
-  ElDatePicker,
-  ElMessageBox,
-  ElNotification,
-} from "element-plus";
-import { IPayment } from "@/Modules/loans/loanEntity";
-import AccountSelect from "@/Components/shared/Selects/AccountSelect.vue";
-import BaseSelect from "@/Components/shared/BaseSelect.vue";
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: "INVOICE",
-  },
-  user: Object,
-  products: Array,
-  clients: Array,
-  invoiceData: [Object, null],
-  availableTaxes: [Array, null],
-  isEditing: Boolean,
-});
-
-const labels = {
-  expense: {
-    contact: "Proveedor",
-    documentNumber: "Bill Number",
-    orderNumber: "P.O/S.O Number",
-  },
-  invoice: {
-    contact: "Cliente",
-    documentNumber: "No. factura",
-    orderNumber: "No. Orden",
-  },
-};
-
-const getLabel = (key: string) => labels[props.type.toLowerCase()][key];
-
-const state: any = reactive({
-  totalValues: {},
-  totals: {
-    subtotalField: "subtotal",
-    totalField: "amount",
-    discountField: "discountTotal",
-    subtotalFormula(row: Record<string, number>) {
-      return row.quantity * row.price;
-    },
-    totalFormula(row: Record<string, number>) {
-      return row.quantity * row.price;
-    },
-    discountFormula(row: Record<string, number>) {
-      return row.quantity * row.price;
-    },
-  },
-  invoice: useForm({
-    id: null,
-    number: null,
-    concept: null,
-    date: new Date(),
-    due_date: new Date(),
-    client: null,
-    client_id: null,
-    footer: null,
-    notes: null,
-    payments: [],
-    debt: 0,
-    status: "DRAFT",
-    created_at: null,
-    updated_at: null,
-    taxes_included: false,
-  }),
-  selectedPayment: null,
-  isPaymentDialogVisible: false,
-  modals: {
-    email: {
-      value: false,
-    },
-  },
-  activeSections: [],
-  tableData: [],
-  imageUrl: "",
-  isDraft: computed(() => {
-    return !state.invoice.status || state.invoice.status.toLowerCase() == "draft";
-  }),
-  section: computed(() => {
-    return props.type.toLowerCase();
-  }),
-});
-
-const setInvoiceData = (data: Record<string, any>) => {
-  if (data) {
-    data.date = parseISO(data.date) || new Date();
-    data.due_date = parseISO(data.due_date) || new Date();
-
-    Object.keys(data).forEach((key) => {
-      state.invoice[key] = data[key];
-    });
-
-    state.tableData =
-      data.lines
-        .sort((a, b) => (a.index > b.index ? 1 : -1))
-        .map((line) => {
-          const itemTaxes = line.taxes?.length ? toRaw(line.taxes) : [];
-          line.taxes = [...itemTaxes, { id: "new" }];
-          return line;
-        }) || [];
-  }
-};
-
-watch(
-  () => props.invoiceData,
-  (invoiceData) => {
-    setInvoiceData(invoiceData);
-  },
-  { immediate: true }
-);
-
-const { openModal } = usePaymentModal();
-const editPayment = (payment: IPayment) => {
-  openModal({
-    data: {
-      title: `Pagar ${invoice.concept}`,
-      payment: payment,
-      endpoint: `/invoices/${payment.payable_id}/payment/${payment.id}`,
-      due: payment.amount,
-      account_id: payment.account_id,
-      defaultConcept: payment.concept,
-    },
-  });
-};
-
-const removePayment = async (payment: Record<string, string>) => {
-  const isConfirmed = await ElMessageBox.confirm(
-    `Estas seguro de eliminar el pago ${payment.concept}?`,
-    "Eliminar pago"
-  );
-
-  if (!isConfirmed) return;
-  router.delete(`/payments/${payment.id}`, {
-    onSuccess() {
-      ElNotification({
-        message: `Pago ${payment.due_date} borrada con exito`,
-        title: "Pago eliminada",
-        type: "success",
-      });
-    },
-  });
-};
-
-const setRequestData = (data: Record<string, any>): Record<string, any> => {
-  const requestData = {
-    ...data,
-    items: state.tableData
-      .map((item, index) => {
-        item.index = index;
-        item.quantity = parseFloat(item.quantity);
-        item.price = parseFloat(item.price);
-        return item;
-      })
-      .filter((item) => item.concept),
-  };
-  requestData.date = formatDate(data.date || new Date(), "yyyy-MM-dd");
-  requestData.due_date = formatDate(data.due_date || requestData.date, "yyyy-MM-dd");
-
-  const type = props.type != "INVOICE" ? "EXPENSE" : props.type;
-  requestData.resource_type_id = type;
-  requestData.type = type;
-  requestData.concept = requestData.concept || state.section;
-
-  requestData.total = state.totalValues.total;
-  requestData.discount = state.totalValues.discountTotal;
-  requestData.subtotal = state.totalValues.subtotal;
-  requestData.taxes = state.totalValues.taxes;
-  delete requestData.lines;
-  delete requestData.paymentDocs;
-  delete requestData.client;
-
-  return requestData;
-};
-
-const sendRequest = (
-  method: string,
-  url: string,
-  formData: Record<string, any>,
-  message: string
-) => {
-  return router[method](url, formData, {
-    onSuccess() {
-      const section = formData.type == "EXPENSE" ? "bills" : "invoices";
-      router.replace(`/${section}/${formData.id}`);
-    },
-  });
-};
-
-const saveForm = (status: number) => {
-  const formData = setRequestData({
-    ...state.invoice,
-    type: props.type,
-  });
-  if (status) {
-    formData.status = 2;
-  }
-  let message = "Invoice created";
-  let method = "post";
-  let url = `/invoices`;
-
-  if (state.invoice.id) {
-    url = `/invoices/${state.invoice.id}`;
-    message = "Invoice updated";
-    method = "put";
-  }
-
-  sendRequest(method, url, formData, message);
-};
-
-const cloneInvoice = (status: number) => {
-  const formData = setRequestData(state.invoice);
-  if (status) {
-    formData.status = 2;
-  }
-
-  let message = "Invoice created";
-  let method = "post";
-  let url = `/invoices/${state.invoice.id}/clone`;
-
-  sendRequest(method, url, formData, message)
-    .then((invoice) => {
-      getInvoice(invoice.id);
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-};
-
-const handleImageChange = (file: File) => {
-  state.imageUrl = URL.createObjectURL(file.raw);
-  state.invoice.logo = file;
-};
-
-const onTaxesUpdated = ({ rowIndex, taxes }: { rowIndex: number; taxes: any[] }) => {
-  state.tableData[rowIndex].taxes = taxes;
-};
-
-const { invoice, totals, tableData, totalValues, isPaymentDialogVisible } = toRefs(state);
-
-defineExpose({
-  saveForm,
-  cloneInvoice,
-});
-</script>
-
-<template>
-  <section class="w-full py-2 rounded-md section">
-    <div class="section-body relative">
-      <div class="invoice-body">
-        <ElCollapse v-model="activeSections" class="w-full">
-          <ElCollapseItem
-            :title="$t('Logo, concept and description')"
-            name="header"
-            :expanded="true"
-          >
-            <div class="invoice-header-details">
-              <el-upload
-                class="avatar-uploader"
-                :v-model="invoice.logo"
-                :show-file-list="false"
-                :on-change="handleImageChange"
-                :auto-upload="false"
-              >
-                <img v-if="state.imageUrl" :src="state.imageUrl" class="avatar" />
-                <IMdiPlus v-else class="avatar-uploader-icon" />
-              </el-upload>
-
-              <div class="space-y-4 invoice-details">
-                <div class="form-group">
-                  <AtInput
-                    type="text"
-                    class="form-control"
-                    name="invoice-description"
-                    id="invoice-description"
-                    v-model="invoice.description"
-                    rounded
-                  >
-                    <template #prefix>
-                      <div
-                        class="h-full flex items-center capitalize text-normal font-bold text-primary"
-                      >
-                        <span>
-                          {{ $t("description") }}
-                        </span>
-                      </div>
-                    </template>
-                  </AtInput>
-                </div>
-                <div class="form-group">
-                  <AtInput
-                    type="text"
-                    class="form-control"
-                    name="invoice-description"
-                    id="invoice-description"
-                    v-model="invoice.concept"
-                    rounded
-                  >
-                    <template #prefix>
-                      <div
-                        class="h-full flex items-center capitalize text-normal font-bold text-primary"
-                      >
-                        <span>
-                          {{ $t("concept") }}
-                        </span>
-                      </div>
-                    </template>
-                  </AtInput>
-                </div>
-              </div>
-            </div>
-          </ElCollapseItem>
-        </ElCollapse>
-
-        <div class="flex space-x-4">
-          <div class="w-6/12 text-left">
-            <AtField :label="getLabel('contact')">
-              <BaseSelect
-                v-model="invoice.client"
-                @update:model-value="invoice.client_id = $event.id"
-                endpoint="/api/clients"
-                placeholder="Selecciona cliente"
-                label="display_name"
-                track-by="id"
-              />
-            </AtField>
-            <div v-if="invoice.client">
-              <p>
-                {{ invoice.client.fullName }}
-              </p>
-              <p v-if="invoice.client.country">{{ invoice.client.country }}</p>
-              <p v-if="invoice.client.tax_number">
-                <strong>CIF/NIF:</strong> <span>{{ invoice.client.tax_number }}</span>
-              </p>
-              <p>
-                {{ invoice.client.email }}
-              </p>
-            </div>
-            <AtField label="Cuenta" class="w-full">
-              <AccountSelect
-                endpoint="/api/accounts"
-                v-model="invoice.account"
-                @update:model-value="invoice.account_id = $event.id"
-                class="md:w-full"
-              />
-            </AtField>
-          </div>
-
-          <div class="flex justify-between w-6/12 space-x-4 text-left">
-            <div class="w-full">
-              <AtField label="Fecha" class="flex flex-col">
-                <ElDatePicker
-                  v-if="invoice.date"
-                  v-model="invoice.date"
-                  size="large"
-                  id="invoice-date"
-                  type="date"
-                  title="seleccione una fecha"
-                  placeholder="selecciona una fecha"
-                />
-              </AtField>
-
-              <AtField label="Fecha Limite" class="mt-2 flex flex-col">
-                <ElDatePicker
-                  v-if="invoice.due_date"
-                  v-model="invoice.due_date"
-                  size="large"
-                  id="invoice-due-date"
-                  type="date"
-                  title="seleccione una fecha"
-                  placeholder="selecciona una fecha"
-                />
-              </AtField>
-            </div>
-
-            <div class="w-full">
-              <AtField :label="getLabel('documentNumber')">
-                <AtInput
-                  v-model="invoice.number"
-                  type="text"
-                  name="invoice-number"
-                  id="invoice-number"
-                  class="border-gray-100"
-                  rounded
-                />
-              </AtField>
-              <AtField :label="getLabel('orderNumber')" class="mt-2">
-                <AtInput
-                  v-model="invoice.order_number"
-                  type="text"
-                  name="invoice-order-number"
-                  id="invoice-order-number"
-                  class="border-gray-100"
-                  rounded
-                />
-              </AtField>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <InvoiceGrid
-        :tableData="tableData"
-        :products="products"
-        :taxes="taxes"
-        :is-editing="isEditing"
-        :available-taxes="availableTaxes"
-        @taxes-updated="onTaxesUpdated"
-        class="mt-10"
-      />
-      <div class="totals-container">
-        <div>
-          <AtFieldCheck label="Taxes included" v-model="invoice.taxes_included" />
-        </div>
-        <InvoiceTotals
-          :tableData="tableData"
-          :subtotal-field="totals.subtotalField"
-          :discount-field="totals.discountField"
-          :payments="invoice.payments"
-          :total-values="totalValues"
-          :total-field="totals.totalField"
-          :subtotalFormula="totals.subtotalFormula"
-          :discountFormula="totals.discountFormula"
-          :totalFormula="totals.totalFormula"
-          :invoice-taxes="invoiceTaxes"
-          :is-tax-included="invoice.taxes_included"
-          @edit-payment="editPayment"
-          @delete-payment="removePayment"
-        >
-          <template v-slot:add-payment v-if="!state.isDraft">
-            <div>
-              <AppButton class="w-full" @click="isPaymentDialogVisible = true">
-                Add Payment
-              </AppButton>
-            </div>
-          </template>
-        </InvoiceTotals>
-      </div>
-      <div class="flex text-left invoice-footer-details" v-if="invoice.id">
-        <div class="w-full">
-          <label for=""> Footer </label>
-          <textarea
-            name=""
-            class="w-full border border-gray-200 rounded-md focus:outline-none focus:border-gray-400"
-            id=""
-            cols="30"
-            rows="5"
-            v-model="invoice.footer"
-          ></textarea>
-        </div>
-
-        <div class="w-full">
-          <label for="" class="block"> Notes </label>
-          <textarea
-            name=""
-            class="w-full border border-gray-200 rounded-md focus:outline-none focus:border-gray-400"
-            id=""
-            cols="30"
-            rows="5"
-            v-model="invoice.notes"
-          ></textarea>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-.totals-container {
-  background: white;
-  display: flex;
-  justify-content: flex-end;
-  margin-right: 20px;
-}
-
-.invoice-title {
-  padding-left: 15px;
-}
-
-.section-body {
-  padding: 0 15px;
-}
-
-.invoice-actions {
-  margin-bottom: 15px;
-
-  .btn {
-    height: 38px;
-  }
-
-  [class*="col-md"] {
-    padding: 0 0 0 0;
-
-    &:first-child {
-      padding-left: 15px;
-    }
-
-    &:last-child {
-      padding-right: 15px;
-    }
-  }
-
-  .btn,
-  button,
-  input {
-    border-radius: 0 0 0 0 !important;
-  }
-
-  .btn-primary {
-    background: dodgerblue;
-  }
-}
-
-.invoice-form-row {
-  display: inline-grid;
-  width: 100%;
-  grid-column-gap: 0;
-  grid-template-columns: 20% 80%;
-
-  label {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.invoice-header-container {
-  position: inherit;
-}
-
-.invoice-header-details,
-.invoice-footer-details {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  grid-column-gap: 15px;
-  padding: 0 15px;
-}
-
-.el-collapse {
-  margin-bottom: 15px;
-}
-
-section {
-  padding-bottom: 25px;
-  background: white;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalItem.vue b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalItem.vue
deleted file mode 100644
index 7d0533cb..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalItem.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-
-const props = defineProps<{
-  label: string;
-  value: string | number;
-  vertical?: boolean;
-  valueSize: "sm" | "md" | "lg";
-}>();
-
-const valueSizes = {
-  md: "text-md",
-  sm: "text-sm",
-  lg: "text-xl",
-};
-
-const valueStyles = computed(() => {
-  return valueSizes[props.valueSize] ?? valueSizes.md;
-});
-</script>
-
-<template>
-  <p class="grid px-2 total-labels" :class="[vertical ? 'grid-cols-1' : 'grid-cols-2']">
-    <span class="label">{{ label }}:</span>
-    <span class="value" :class="valueStyles">{{ value }}</span>
-  </p>
-</template>
-
-<style lang="scss">
-.total-labels {
-  color: #909399;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
-  grid-column-gap: 5px;
-
-  &.payment-label {
-    cursor: pointer;
-    @apply text-green-500;
-  }
-
-  .value {
-    text-align: right;
-    color: #666;
-    font-weight: bold;
-  }
-
-  .label {
-    text-align: right;
-    margin-right: 10px;
-  }
-}
-
-.total-remark {
-  font-size: 16px;
-  margin: 10px 0;
-
-  .value {
-    border-top: 1px solid #666;
-  }
-}
-
-.invoice-totals {
-  margin-top: 1rem;
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalPayment.vue b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalPayment.vue
deleted file mode 100644
index 37ccdf46..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalPayment.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-/* eslint-disable vue/valid-v-on */
-<script lang="ts" setup>
-import { formatMoney, formatDate } from "@/utils";
-
-defineProps<{
-  payment: {
-    amount: number;
-    payment_date: string;
-  };
-}>();
-
-const emit = defineEmits(["edit-payment", "delete-payment"]);
-</script>
-
-<template>
-  <i
-    class="text-green-500 total-labels payment-label group"
-    @click.stop="$emit('edit-payment', payment)"
-  >
-    <p class="flex label">Pagado en {{ formatDate(payment.payment_date) }}</p>
-    <p class="flex items-center justify-end text-right value">
-      - {{ formatMoney(payment.amount) }}
-      <button
-        class="hidden text-gray hover:text-success group-hover:flex"
-        @click.stop="$emit('edit-payment', payment)"
-      >
-        <IMdiEdit class="ml-2" />
-      </button>
-      <button
-        class="hidden text-gray hover:text-error group-hover:flex"
-        @click.stop="$emit('delete-payment', payment)"
-      >
-        <IMdiTrash class="ml-2" />
-      </button>
-    </p>
-  </i>
-</template>
-
-<style lang="scss" scoped>
-.total-labels {
-  color: #909399;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-column-gap: 5px;
-
-  &.payment-label {
-    cursor: pointer;
-    @apply text-green-500;
-  }
-
-  .value {
-    text-align: right;
-    color: #666;
-    font-weight: bold;
-  }
-
-  .label {
-    text-align: right;
-    margin-right: 10px;
-  }
-}
-
-.total-remark {
-  font-size: 16px;
-  margin: 10px 0;
-
-  .value {
-    border-top: 1px solid #666;
-  }
-}
-
-.invoice-totals {
-  margin-top: 1rem;
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotals.vue b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotals.vue
deleted file mode 100644
index 617fbfb5..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotals.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-/* eslint-disable vue/valid-v-on */
-<script lang="ts" setup>
-import { formatMoney, formatDate } from "@/utils";
-import { computed, reactive, watch, toRefs } from "vue";
-import ExactMath from "exact-math";
-import InvoiceTotalItem from "./InvoiceTotalItem.vue";
-
-const props = defineProps({
-  tableData: {
-    type: Array,
-    required: true,
-  },
-  subtotalField: {
-    type: String,
-    required: true,
-  },
-  discountField: {
-    type: String,
-    required: true,
-  },
-  payments: {
-    type: Array,
-  },
-  totalField: {
-    type: String,
-    required: true,
-  },
-  totalValues: {
-    type: Object,
-    required: true,
-  },
-  isTaxIncluded: {
-    type: Boolean,
-    default: false,
-  },
-  hidePayments: {
-    type: Boolean,
-    default: false,
-  },
-  hideDebt: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["edit-payment", "delete-payment"]);
-
-const getRowTaxes = (row: Record<string, string>, taxFields: string[]) => {
-  const taxes = {};
-  taxFields.forEach((taxField) => {
-    taxes[taxField] = row[taxField];
-  });
-  return taxes;
-};
-
-const calculateTaxableAmount = (amount, taxRate) => {
-  return ExactMath.formula(`(${amount} / ((100 + ${taxRate}) / 100))`);
-};
-
-const calculateRowTaxes = (
-  rowTotal: number,
-  taxes: Record<string, any>,
-  total: Record<string, any>
-) => {
-  let taxesRowTotal = 0;
-  let rowSubtotal = 0;
-  taxes.forEach((tax: Record<string, any>) => {
-    const taxLabel = `${tax.label || tax.name} ${tax?.rate}%`;
-    if (taxLabel && tax.rate) {
-      const taxableTotal = props.isTaxIncluded
-        ? calculateTaxableAmount(rowTotal, tax.rate)
-        : rowTotal;
-      const rowTax =
-        tax.rate > 100
-          ? tax.rate * tax.type
-          : ExactMath.formula(`${taxableTotal} * (${tax.rate} / ${100})`) *
-            (tax.type ?? 1);
-      total.taxes[taxLabel] = (total.taxes[taxLabel] || 0) + (rowTax || 0);
-      total.taxesTotal += rowTax;
-      taxesRowTotal += rowTax;
-      rowSubtotal += taxableTotal;
-    }
-  });
-
-  return {
-    taxesRowTotal,
-    rowSubtotal,
-  };
-};
-
-const state = reactive({
-  totals: computed(() => {
-    const totals = props.tableData.reduce(
-      (total: Record<string, any>, row: Record<string, any>) => {
-        const rowTotal = row[props.totalField];
-        const { rowSubtotal, taxesRowTotal } = calculateRowTaxes(
-          rowTotal,
-          row.taxes ?? [],
-          total
-        );
-
-        const subtotal = rowSubtotal || rowTotal;
-        total.subtotal += subtotal;
-        total.discountTotal += Number(row[props.discountField]);
-        total.total += ExactMath.add(subtotal ?? 0, taxesRowTotal ?? 0);
-        total.taxesTotal += taxesRowTotal;
-
-        return total;
-      },
-      {
-        total: 0,
-        discountTotal: 0,
-        subtotal: 0,
-        taxesTotal: 0,
-        taxes: {},
-      }
-    );
-
-    return totals;
-  }),
-  hasTaxes: computed(() => {
-    return Object.keys(state.totals.taxes).length > 0;
-  }),
-
-  paymentTotal: computed(() => {
-    if (props.payments && props.payments.length) {
-      return props.payments.reduce((total, payment) => {
-        return (total += parseFloat(payment.amount));
-      }, 0);
-    }
-    return 0;
-  }),
-
-  debt: computed(() => {
-    return state.totals.total - state.paymentTotal;
-  }),
-});
-
-watch(
-  () => state.totals,
-  () => {
-    if (state.totals && Object.keys(state.totals).length) {
-      Object.keys(state.totals).forEach((key) => {
-        props.totalValues[key] = state.totals[key];
-      });
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
-
-const { totals, debt, hasTaxes } = toRefs(state);
-</script>
-
-<template>
-  <div class="invoice-totals">
-    <InvoiceTotalItem :label="$t('subtotal')" :value="formatMoney(totals.subtotal)" />
-    <template v-if="hasTaxes">
-      <InvoiceTotalItem
-        v-for="(tax, taxName) in totals.taxes"
-        :label="taxName"
-        :value="formatMoney(tax)"
-      />
-    </template>
-
-    <slot name="discount">
-      <InvoiceTotalItem :label="$t('discount')" :value="formatMoney(totals.discount)" />
-    </slot>
-    <slot name="total" :label="$t('total')" :value="formatMoney(totals.total)">
-      <InvoiceTotalItem :label="$t('total')" :value="formatMoney(totals.total)" />
-    </slot>
-
-    <div v-if="payments && payments.length && !hidePayments">
-      <InvoiceTotalPayment
-        class="text-green-500 total-labels payment-label group"
-        v-for="payment in payments"
-        :key="payment.id"
-        :payment="payment"
-        @click.stop="$emit('edit-payment', payment)"
-      />
-    </div>
-
-    <slot name="debt" v-if="!hideDebt">
-      <InvoiceTotalItem
-        class="total-remark"
-        :label="$t('debt')"
-        :value="formatMoney(debt)"
-      />
-    </slot>
-
-    <slot name="add-payment" v-if="debt" :slot-scope:scope="{ debt }"> </slot>
-  </div>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/PropertyChargeModal.vue b/resources/js/Pages/Journal/Invoices/Partials/PropertyChargeModal.vue
deleted file mode 100644
index f0fc1d11..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/PropertyChargeModal.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<script setup lang="ts">
-import { AtButton, AtField, AtInput, AtSimpleSelect } from "atmosphere-ui";
-import { format as formatDate } from "date-fns";
-import { ElDatePicker, ElDialog, ElNotification } from "element-plus";
-import { ref, watch, computed } from "vue";
-
-import AppButton from "@/Components/shared/AppButton.vue";
-import BaseSelect from "@/Components/shared/BaseSelect.vue";
-
-import { MathHelper } from "@/Modules/loans/mathHelper";
-import { paymentMethods } from "@/Modules/loans/constants";
-import AppFormField from "@/Components/shared/AppFormField.vue";
-import { IClient, IClientSaved } from "@/Modules/clients/clientEntity";
-import { useResponsive } from "@/utils/useResponsive";
-import { IProperty, IRent } from "@/Modules/properties/propertyEntity";
-
-const defaultFormData = {
-  amount: 0,
-  account_id: "",
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean;
-    defaultConcept: string;
-    defaultAmount: number;
-    payment?: Record<string, any>;
-    due: number;
-    endpoint?: string;
-    title: string;
-    hideClientOptions?: boolean;
-    clientId: string;
-    rentId: string;
-    propertyId: string;
-    type: string;
-    property?: IProperty;
-    rent?: IRent;
-  }>(),
-  {
-    type: "expense",
-    title: "Crear factura",
-    due: 0,
-  }
-);
-
-const emit = defineEmits(["update:modelValue", "saved"]);
-
-const formData = ref(generatePaymentData());
-
-const setFormData = () => {
-  formData.value = generatePaymentData();
-};
-
-function generatePaymentData() {
-  return {
-    ...defaultFormData,
-    concept: props.defaultConcept,
-    amount: props.due ?? 0,
-    payment_method_id: paymentMethods[0].id,
-    paymentMethod: paymentMethods[0],
-    date: new Date(),
-    is_paid_expense: false,
-  };
-}
-
-watch(
-  () => props.defaultConcept,
-  (defaultConcept) => {
-    formData.value.concept = defaultConcept;
-  },
-  {
-    immediate: true,
-  }
-);
-
-watch(
-  () => props.due,
-  (due) => {
-    if (!formData.value.id) {
-      formData.value.amount = due;
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-watch(
-  props.payment,
-  (payment) => {
-    if (payment) {
-      setFormData();
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
-
-const rentsUrl = computed(() => {
-  return `/api/rents?filter[property_id]=${formData.value.property?.id}`;
-});
-
-const setRent = (rent: IRent) => {
-  axios.get(rentsUrl).then(({ data }) => {
-    if (data.length) {
-      formData.value.rent = data.at(-1);
-    } else {
-      formData.value.rent = null;
-    }
-  });
-};
-
-const isLoading = ref(false);
-const endpoints: Record<string, string> = {
-  expense: "/properties/:property_id/transactions/expense",
-  fee: "/rents/:rents_id/transactions/fee",
-};
-function onSubmit() {
-  if (isLoading.value) return;
-  if (!formData.value.amount) {
-    ElNotification({
-      type: "error",
-      message: "should specify an amount",
-    });
-    return;
-  }
-
-  const data = {
-    date: formatDate(formData.value.date || new Date(), "yyyy-MM-dd"),
-    amount: formData.value.amount,
-    concept: formData.value.concept,
-    account_id: formData.value.account_id,
-    client_id: formData.value.client?.id ?? props.clientId,
-    property_id: formData.value.property?.id ?? props.propertyId,
-    rent_id: formData.value.rent?.id ?? props.rentId,
-    details: formData.value.notes,
-    is_paid_expense: formData.value.is_paid_expense,
-  };
-
-  isLoading.value = true;
-  const endpoint = endpoints[props.type] ?? endpoints.expense;
-  const url = endpoint
-    .replace(":property_id", data.property_id)
-    .replace(":rents_id", data.rent_id);
-
-
-  axios
-    .post(url, data)
-    .then(() => {
-      resetForm(true);
-      emit("saved");
-    })
-    .catch((err) => {
-      ElNotification({
-        type: "error",
-        message: err.response ? err.response.data.status.message : "Ha ocurrido un error",
-      });
-    })
-    .finally(() => {
-      isLoading.value = false;
-    });
-}
-
-function resetForm(shouldClose) {
-  formData.value = {
-    ...defaultFormData,
-    concept: props.defaultConcept,
-  };
-  if (shouldClose) {
-    emitChange(false);
-  }
-}
-
-function emitChange(value) {
-  emit("update:modelValue", value);
-}
-
-const { isMobile } = useResponsive();
-
-const propertyLabel = (property: IProperty) => {
-  return `${property.name} [${property?.units?.length}] (${property.address}) `;
-};
-</script>
-
-<template>
-  <ElDialog
-    @open="setFormData()"
-    :model-value="modelValue"
-    :fullscreen="isMobile"
-    class="overflow-hidden"
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <template #header>
-      <header
-        class="border-b -mx-6 -mt-6 -mr-10 bg-secondary/80 text-white py-4 px-4 flex items-center justify-between"
-      >
-        <h4 class="font-bold text-xl">{{ title ?? defaultConcept }}</h4>
-        <button class="hover:text-danger" @click="close()">
-          <IMdiClose />
-        </button>
-      </header>
-    </template>
-    <div class="-mt-10">
-      <section class="flex space-x-4">
-        <AtField class="w-full text-left" label="Concepto">
-          <AtInput
-            type="text"
-            class="form-control"
-            name="invoice-description"
-            id="invoice-description"
-            v-model="formData.concept"
-            rounded
-          />
-        </AtField>
-      </section>
-
-      <section>
-        <section class="flex space-x-4">
-          <AppFormField label="Fecha limite" class="w-6/12">
-            <ElDatePicker v-model="formData.date" size="large" class="w-full" rounded />
-          </AppFormField>
-
-          <AppFormField class="w-6/12 text-left" label="Monto">
-
-            <AtInput
-              class="form-control"
-              number-format
-              v-model="formData.amount"
-              rounded
-              required
-            >
-              <template #suffix>
-                <button
-                  class="w-32 px-2 transition"
-                  :class="[
-                    formData.is_paid_expense
-                      ? 'bg-success text-white font-bold'
-                      : 'bg-base-lvl-2 text-body-1',
-                  ]"
-                  @click.stop="formData.is_paid_expense = !formData.is_paid_expense"
-                >
-                  {{ formData.is_paid_expense ? "Pagado" : "No Pagado" }}
-                </button>
-              </template>
-            </AtInput>
-          </AppFormField>
-
-          <AppFormField
-            label="Metodo de pago"
-            class="w-full ml-4"
-            v-if="formData.is_paid_expense"
-          >
-            <AtSimpleSelect
-              v-model="formData.payment_method_id"
-              v-model:selected="formData.paymentMethod"
-              :options="paymentMethods"
-              placeholder="Seleccione metodo de pago"
-              class="w-full"
-              label="name"
-              key-track="id"
-            />
-          </AppFormField>
-        </section>
-      </section>
-
-      <section class="mt-4 flex space-x-4" v-if="!hideClientOptions">
-        <AppFormField :label="$t('property')">
-          <BaseSelect
-            v-model="formData.property"
-            endpoint="/api/properties"
-            placeholder="Selecciona la propiedad"
-            label="name"
-            track-by="id"
-            :custom-label="propertyLabel"
-          />
-        </AppFormField>
-        <AppFormField label="Inquilino">
-          <BaseSelect
-            v-model="formData.rent"
-            :endpoint="rentsUrl"
-            placeholder="Selecciona el contrato"
-            label="client_name"
-            track-by="id"
-            @update:model-value="setRent"
-          />
-        </AppFormField>
-      </section>
-
-      <AppFormField class="w-full text-left" label="Notes">
-        <textarea
-          class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:border-gray-400"
-          v-model="formData.notes"
-          cols="3"
-          rows="3"
-        />
-      </AppFormField>
-    </div>
-
-    <template #footer>
-      <div class="space-x-2 flex justify-end">
-        <AtButton
-          :disabled="isLoading"
-          @click="emitChange(false)"
-          class="bg-white border rounded-md text-gray"
-        >
-          Cancel
-        </AtButton>
-        <AppButton
-          :processing="isLoading"
-          :disabled="isLoading || !formData.amount"
-          :title="!formData.amount && 'Debe ingresar un monto mayor a 0 para guardar'"
-          variant="secondary"
-          @click="onSubmit()"
-        >
-          Guardar
-        </AppButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/SignatureModal.vue b/resources/js/Pages/Journal/Invoices/Partials/SignatureModal.vue
deleted file mode 100644
index 67a220b8..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/SignatureModal.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { watch, computed, ref, nextTick } from "vue";
-import SignaturePad from "./SignaturePad.vue";
-import DialogModal from "@/Components/DialogModal.vue";
-import { useForm } from "@inertiajs/vue3";
-import AppButton from "@/Components/shared/AppButton.vue";
-import { ElNotification } from "element-plus";
-
-const emit = defineEmits(["update:is-open", "saved"]);
-const { isOpen, signatures, entity, endpoint } = defineProps<{
-  isOpen: boolean;
-  endpoint: string;
-  signatures: Record<string, string>[];
-  entity: Record<string, any>;
-  title: string;
-}>();
-
-const formData = useForm({
-  text: "",
-  file: "",
-});
-
-const signatureRef = ref();
-const isModalOpen = computed({
-  get() {
-    return isOpen;
-  },
-  set(value: boolean) {
-    emit("update:is-open", value);
-  },
-});
-
-const currentSignature = computed(() => {
-  return signatures?.find((signature) => signature.user_id == entity.user_id);
-});
-
-watch(
-  () => isOpen,
-  () => {
-    if (isOpen) {
-      formData.text = currentSignature.value.text;
-      nextTick(() => {
-        signatureRef?.value?.focus();
-      });
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-const onSubmit = () => {
-  if (formData.processing || !endpoint || currentSignature.value) return;
-
-  formData.post(endpoint, {
-    onSuccess() {
-      formData.reset();
-    },
-    onError(err) {
-      ElNotification({
-        type: "error",
-        message: err?.response
-          ? err?.response.data.status.message
-          : "Ha ocurrido un error",
-      });
-    },
-  });
-};
-</script>
-
-<template>
-  <DialogModal
-    :show="isModalOpen"
-    :closeable="true"
-    @close="isModalOpen = false"
-    title="Sign Proposal"
-  >
-    <template #header>
-      <span class="text-xl font-bold text-blue-500"> {{ title }}</span>
-    </template>
-
-    <template #content>
-      <div class="modal-body">
-        <div class="w-full px-5 py-2 border">
-          <h4 class="font-bold capitalize">{{ $t("your signature") }}</h4>
-          <SignaturePad
-            ref="signatureRef"
-            v-model="formData.text"
-            :editable="true"
-            :disabled="currentSignature"
-          />
-        </div>
-      </div>
-    </template>
-
-    <template #footer>
-      <div class="space-x-2 dialog-footer">
-        <AppButton
-          variant="primary"
-          @click="onSubmit"
-          :processing="formData.processing"
-          :disabled="disabled"
-        >
-          {{ $t("confirm signature") }}
-        </AppButton>
-      </div>
-    </template>
-  </DialogModal>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/SignaturePad.vue b/resources/js/Pages/Journal/Invoices/Partials/SignaturePad.vue
deleted file mode 100644
index f83b16a0..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/SignaturePad.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <!-- <sec
-  class="mx-auto mb-2 font-serif border-b-2 cursor-pointer invoice__signature w-96"
-/> -->
-  <section v-if="!editable">
-    <p class="relative h-12 text-6xl border-b signature__input pt-auto firma">
-      {{ currentSignature?.text }}
-    </p>
-    <article class="justify-center w-full text-center capitalize">
-      <div class="font-bold">{{ label }}</div>
-      <div>{{ $t("signature") }}</div>
-    </article>
-  </section>
-  <section v-else class="relative py-2">
-    <i class="absolute text-blue-300 fa fa-times -left-2 bottom-3"></i>
-    <i class="absolute text-blue-300 fa fa-photos -left-2 bottom-3"></i>
-    <button class=""></button>
-    <input
-      class="w-full px-2 text-6xl text-gray-700 border-b signature__input pt-auto firma focus:outline-none"
-      spellcheck="false"
-      ref="input"
-      :disabled="disabled"
-      :value="modelValue"
-      @input="$emit('update:modelValue', $event?.target?.value)"
-    />
-  </section>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from "vue";
-
-const props = defineProps<{
-  signatures: Record<string, string>[];
-  entity: { user_id: number };
-  label?: string;
-  disabled?: boolean;
-  editable?: boolean;
-  modelValue: string;
-}>();
-
-const emits = defineEmits(["update:modelValue"]);
-const input = ref();
-const focus = () => {
-  input.value?.focus();
-};
-
-defineExpose({
-  focus,
-});
-const currentSignature = computed(() => {
-  return props.signatures?.find((signature) => signature.user_id == props.entity.user_id);
-});
-</script>
-
-<style>
-.firma {
-  font-family: "Tangerine", cursive;
-}
-
-@media print {
-  .firma {
-    font-family: "Tangerine", cursive;
-    font-size: 16px;
-  }
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/Partials/cols.ts b/resources/js/Pages/Journal/Invoices/Partials/cols.ts
deleted file mode 100644
index 0b0121bb..00000000
--- a/resources/js/Pages/Journal/Invoices/Partials/cols.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { formatDate, formatMoney } from "@/utils";
-interface ITableItem {
-  name: string;
-  label: string;
-  class: string;
-  headerClass: string;
-  render?: Function
-}
-
-export default [
-  {
-    label: "Descripción",
-    name: "concept",
-    class: "text-left",
-    headerClass: 'text-left',
-    render(row: any) {
-      const date = row.concept?.slice(-10);
-      const dateString = formatDate(date, 'dd MMMM') ?? ''
-      const concept = dateString ? row.concept?.slice(0, -10) : row.concept
-      return `${concept} ${dateString}`
-    }
-  },
-  {
-    label: "Cant.",
-    name: "quantity",
-    width: "100",
-    class: "text-right text-normal",
-    headerClass: 'text-right'
-  },
-  {
-    label: "Descuento",
-    name: "discount",
-    width: "100",
-    class: "text-right",
-    headerClass: 'text-right'
-  },
-  {
-    label: "Monto",
-    name: "price",
-    width: 120,
-    class: "text-right",
-    headerClass: 'text-right'
-  },
-  {
-    label: "Descuento de abogado",
-    name: "taxes",
-    width: 190,
-    class: "text-center",
-    headerClass: 'text-center',
-    render(row: any) {
-      return row.taxes?.map((row: any) => `${formatMoney(row.amount)} ${!row.isFixed &&  '(' + row.rate + '%)'}`).join(', ')
-    }
-  },
-  {
-    label: "Total",
-    name: "amount",
-    width: 100,
-    type: "calc",
-    class: "text-right pr-5 font-bold",
-    align: 'right',
-    headerClass: 'text-right pr-5',
-    render(row: any) {
-      const discount = Number(row.discount ?? 0);
-      row.subtotal = row.quantity * row.price;
-      row.discountTotal = (row.subtotal * discount) / 100;
-      const amount = row.subtotal - row.discountTotal;
-      row.amount = amount;
-      return formatMoney(amount, "DOP", { hideSymbol: true });
-    }
-  }, {
-    name: 'actions'
-  }
-];
diff --git a/resources/js/Pages/Journal/Invoices/Preview.vue b/resources/js/Pages/Journal/Invoices/Preview.vue
deleted file mode 100644
index 005f3ccb..00000000
--- a/resources/js/Pages/Journal/Invoices/Preview.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import InvoiceSimple from "./printTemplates/Simple.vue";
-
-import { onMounted } from "vue";
-import { IInvoiceWithRelations } from "@/Modules/invoicing/entities";
-import ReportSimple from "./printTemplates/ReportSimple.vue";
-
-interface IReport {
-  title: string;
-  description: string;
-  startDate: Date;
-  endDate: Date;
-  type: string;
-  content: Record<string, any>[];
-}
-
-withDefaults(
-  defineProps<{
-    user: Record<string, string>;
-    invoice: IInvoiceWithRelations;
-    businessData: Record<string, string>;
-    type: string;
-    invoiceTemplate: string;
-    report?: IReport;
-  }>(),
-  {
-    invoiceTemplate: "invoice-simple",
-  }
-);
-
-onMounted(() => {
-  // print();
-  // close();
-});
-</script>
-
-<template>
-  <div class="preview-container">
-    <InvoiceSimple
-      :user="user"
-      :type="type"
-      :business-data="businessData"
-      :invoice-data="invoice"
-      id="invoice-content"
-    />
-  </div>
-  <div class="preview-container" v-if="report">
-    <ReportSimple
-      :report-name="report.title"
-      :description="report.description"
-      :start-date="report.startDate"
-      :end-date="report.endDate"
-      :content="report.content"
-      :business-data="businessData"
-    />
-  </div>
-</template>
-
-<style lang="scss">
-body {
-  background: #333 !important;
-}
-
-.preview-container {
-  background: #333 !important;
-  .simple-template {
-    background-color: #333;
-  }
-  .section-body {
-    background: white;
-    max-width: 210mm;
-    min-height: 265mm;
-    width: 100%;
-    height: auto;
-    display: block;
-    font-size: 12px;
-  }
-
-  tbody,
-  .client-card {
-    font-size: 12px;
-  }
-}
-
-@media print {
-  body {
-    background: white !important;
-  }
-
-  .preview-container {
-    background: white !important;
-    .simple-template {
-      background-color: white;
-    }
-    .section-body {
-      background: white;
-    }
-  }
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/See.vue b/resources/js/Pages/Journal/Invoices/See.vue
deleted file mode 100644
index bd5e33cb..00000000
--- a/resources/js/Pages/Journal/Invoices/See.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { Link, router } from "@inertiajs/vue3";
-// @ts-ignore
-import { AtField } from "atmosphere-ui";
-import { getStatus, getStatusColor, getStatusIcon } from "@/Modules/invoicing/constants";
-
-import AccountingSectionNav from "@/Pages/Journal/Partials/AccountingSectionNav.vue";
-import InvoiceSimple from "./printTemplates/Simple.vue";
-import AppLayout from "@/Components/templates/AppLayout.vue";
-
-import { ref } from "vue";
-
-defineProps({
-  invoice: {
-    type: Object,
-    required: true,
-  },
-  businessData: {
-    type: Object,
-    required: true,
-  },
-  type: {
-    type: String,
-    required: true,
-  },
-  user: {
-    type: Object,
-  },
-  invoiceTemplate: {
-    type: String,
-    default: "invoice-simple",
-  },
-});
-
-const isModalPrintOpen = ref(false);
-const print = () => {
-  const modalInvoice = document.getElementById("invoice-content");
-  const cloned = modalInvoice?.cloneNode(true);
-  let section = document.getElementById("print");
-  isModalPrintOpen.value = true;
-
-  if (!section) {
-    section = document.createElement("div");
-    section.id = "print";
-    document.body.appendChild(section);
-  }
-
-  section.innerHTML = "";
-  if (cloned) {
-    section.appendChild(cloned);
-    window.print();
-  }
-  // isModalPrintOpen.value = true;
-};
-</script>
-
-<template>
-  <AppLayout :title="invoice.concept">
-    {{ invoice }}
-  </AppLayout>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/Show.vue b/resources/js/Pages/Journal/Invoices/Show.vue
deleted file mode 100644
index 29d5f500..00000000
--- a/resources/js/Pages/Journal/Invoices/Show.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import { Link, router } from "@inertiajs/vue3";
-// @ts-ignore
-import { AtField } from "atmosphere-ui";
-import { getStatus, getStatusColor, getStatusIcon } from "@/Modules/invoicing/constants";
-
-import AccountingSectionNav from "@/Pages/Journal/Partials/AccountingSectionNav.vue";
-import InvoiceSimple from "./printTemplates/Index.vue";
-import AppLayout from "@/Components/templates/AppLayout.vue";
-import InvoicePaymentOptions from "@/Components/templates/InvoicePaymentOptions.vue";
-import AppButton from "@/Components/shared/AppButton.vue";
-
-import { formatDate, formatMoney } from "@/utils";
-import { getInvoiceTypeUrl } from "./utils";
-import { ref } from "vue";
-import { IInvoiceWithRelations } from "@/Modules/invoicing/entities";
-import SignatureModal from "./Partials/SignatureModal.vue";
-import { useToggleModal } from "@/Modules/_app/useToggleModal";
-
-withDefaults(defineProps<{
-  user: Record<string, string>
-  invoice: IInvoiceWithRelations;
-  businessData: Record<string,string>;
-  type: string;
-  invoiceTemplate: string
-}>(), {
-  invoiceTemplate: 'invoice-simple'
-});
-
-
-const isModalPrintOpen = ref(false);
-const print = () => {
-  const modalInvoice = document.getElementById("invoice-content")
-  const cloned = modalInvoice?.cloneNode(true)
-  let section = document.getElementById("print")
-  isModalPrintOpen.value = true;
-
-  if (!section) {
-     section  = document.createElement("div")
-     section.id = "print"
-     document.body.appendChild(section)
-  }
-
-  section.innerHTML = "";
-  if (cloned) {
-    section.appendChild(cloned);
-    window.print();
-  }
-}
-
-const { isOpen, openModal, data, closeModal } = useToggleModal('signature-modal')
-</script>
-
-
-<template>
-  <AppLayout :title="invoice.concept">
-    <template #header>
-      <AccountingSectionNav>
-        <template #actions>
-          <AppButton @click="router.visit(getInvoiceTypeUrl(invoice))"
-            variant="inverse"
-            v-if="false">
-            {{ $t("edit invoice") }}
-          </AppButton>
-          <AppButton variant="neutral" @click="print()">
-            <IMdiPrinter />
-          </AppButton>
-          <InvoicePaymentOptions :invoice="invoice" class="py-2" />
-        </template>
-      </AccountingSectionNav>
-    </template>
-
-    <div class="py-10 mx-auto space-y-4 max-w-7xl sm:px-6 lg:px-8">
-        <div class="flex justify-between px-5 py-1 border rounded-md space bg-base-lvl-3">
-          <section class="flex space-x-4">
-            <AtField label="Estatus">
-                <p class="font-bold text-md" :class="getStatusColor(invoice.status)">
-                  <i :class="getStatusIcon(invoice.status)" />
-                  {{ getStatus(invoice.status) }}
-                </p>
-            </AtField>
-            <AtField label="Cliente">
-                <p class="font-bold text-primary text-md">
-                  {{ invoice.client.display_name }}
-                </p>
-            </AtField>
-          </section>
-
-          <section class="flex space-x-4">
-            <AtField label="Monto Adeudado">
-                <p class="text-md">
-                  {{ formatMoney(invoice.debt) }}
-                </p>
-            </AtField>
-            <AtField label="Fecha limite">
-                <p class="font-bold text-md text-primary">
-                  {{ formatDate(invoice.due_date) }}
-                </p>
-            </AtField>
-          </section>
-        </div>
-
-        <div class="flex justify-between px-5 py-1 border rounded-md space bg-base-lvl-3">
-          <section>
-            Detalles de creacion
-            <Link :href="`/transactions/${invoice.transaction?.id}`" class="underline cursor-pointer text-primary underline-offset-1">Asiento Contable</Link>
-          </section>
-          <section>
-            Detalles de cobro
-            <p>
-              <span>Deuda: {{ formatMoney(invoice.debt) }} — Recibir pago manual </span>
-              <div v-for="payment in invoice.payments">
-                Recibido en {{ payment.date }}
-              </div>
-            </p>
-          </section>
-        </div>
-
-        <InvoiceSimple
-          :user="user"
-          :imageUrl="$page.props.user.current_team?.profile_photo_url"
-          :type="type"
-          :business-data="businessData"
-          :invoice-data="invoice"
-          id="invoice-content"
-          @signature-clicked="openModal({
-            data: {
-              signatures: invoice.signatures,
-              entity: invoice,
-            },
-            isOpen: true,
-          })"
-        />
-
-        <SignatureModal
-            v-if="isOpen"
-            v-model:is-open="isOpen"
-            v-bind="data"
-            :endpoint="`/invoices/${invoice.id}/sign`"
-            @saved="closeModal"
-        />
-    </div>
-  </AppLayout>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/BusinessCard.vue b/resources/js/Pages/Journal/Invoices/printTemplates/BusinessCard.vue
deleted file mode 100644
index 1020a4d3..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/BusinessCard.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="">
-    <p class="font-bold capitalize" v-if="label">{{ label }}:</p>
-    <section class="text-body">
-      <div>{{ business.business_name }}</div>
-      <div v-if="businessAddress" class="address-details">{{ businessAddress }}</div>
-      <div v-if="businessPhone">{{ businessPhone }}</div>
-      <div v-if="businessEmail">{{ businessEmail }}</div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-
-const props = defineProps<{
-  business: Record<string, string>;
-  label?: string;
-}>();
-
-const businessAddress = computed(() => {
-  return [
-    props.business.business_street,
-    props.business.business_city,
-    props.business.business_state,
-    props.business.business_country,
-  ]
-    .filter((value) => value)
-    .join(", ");
-});
-const businessPhone = computed(() => {
-  return props.business.business_phone;
-});
-const businessEmail = computed(() => {
-  return props.business.business_email;
-});
-</script>
-
-<style>
-.address-details {
-  max-width: 220px;
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/Index.vue b/resources/js/Pages/Journal/Invoices/printTemplates/Index.vue
deleted file mode 100644
index 816048a3..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/Index.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts" setup>
-import { IClient } from "@/Modules/clients/clientEntity";
-import { IInvoice } from "@/Modules/invoicing/entities";
-import { computed, inject, ref } from "vue";
-import Simple from "./Simple.vue";
-import SimpleMultiTheme from "./SimpleMultiTheme.vue";
-import { getInvoiceLayout } from "./index";
-
-defineEmits(["signature-clicked"]);
-withDefaults(
-  defineProps<{
-    imageUrl: string;
-    type: string;
-    user: Record<string, string>;
-    businessData: Record<string, string>;
-    products?: Record<string, string>[];
-    clients?: IClient[];
-    invoiceData: IInvoice;
-  }>(),
-  {
-    type: "INVOICE",
-    imageUrl: "/logo.png",
-  }
-);
-
-const appProfileName = inject("appProfileName", ref());
-const BaseInvoice = computed(() => {
-  const templates = {
-    renting: Simple,
-    store: SimpleMultiTheme,
-    school: SimpleMultiTheme,
-  };
-
-  return templates[appProfileName.value ?? "renting"] ?? "renting";
-});
-
-const layoutTheme = computed(() => {
-  return getInvoiceLayout(appProfileName.value ?? "renting");
-});
-</script>
-
-<template>
-  <BaseInvoice
-    v-bind="$props"
-    :layout-theme="layoutTheme"
-    @signature-clicked="$emit('signature-clicked')"
-  />
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceClientCard.vue b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceClientCard.vue
deleted file mode 100644
index db9c0bb1..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceClientCard.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="client-card">
-    <p class="font-bold capitalize">{{ label }}</p>
-    <section class="text-body min-w-fit">
-      <div class="whitespace-nowrap">
-        {{ client.display_name }}
-        <span v-if="client.cellphone">- {{ client.cellphone || "000-000-0000" }}</span>
-      </div>
-      <div v-if="client.address || client.address_details">
-        {{ client.address || client.address_details }}
-      </div>
-      <div v-if="client.email">{{ client.email }}</div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps<{
-  client: Record<string, string>;
-  label?: string;
-}>();
-</script>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceDetails.vue b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceDetails.vue
deleted file mode 100644
index 6eab3e06..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceDetails.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  isReverse?: boolean;
-  invoiceTitle: string;
-  invoiceNumber: string;
-  invoiceDate: string;
-  invoiceDueDate?: string;
-  invoiceTitleClass: string;
-}>();
-</script>
-
-<template>
-  <article class="flex w-full">
-    <section class="text-left">
-      <h4 class="text-2xl font-bold uppercase" :class="invoiceTitleClass">
-        {{ invoiceTitle }}
-      </h4>
-      <p>
-        <span class="font-bold capitalize">{{ $t("invoice number") }} </span>
-        {{ invoiceNumber }}
-      </p>
-      <p>
-        <span class="font-bold capitalize">{{ $t("date") }} </span>
-        {{ invoiceDate }}
-      </p>
-      <p v-if="invoiceDueDate">
-        <span class="font-bold">{{ $t("due date") }} </span>
-        {{ invoiceDueDate }}
-      </p>
-    </section>
-  </article>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceHeader.vue b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceHeader.vue
deleted file mode 100644
index de869389..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceHeader.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import BusinessCard from "./BusinessCard.vue";
-import InvoiceDetails from "./InvoiceDetails.vue";
-
-const sizes = {
-  sm: "h-16 w-16",
-  md: "h-36 w-36",
-  lg: "h-36 w-36",
-};
-
-const { invoiceTitle = "invoice", logoSize = "md", logoPosition = "left" } = defineProps<{
-  logoUrl: string;
-  logoOnly?: boolean;
-  logoSize: "sm" | "md" | "lg";
-  logoPosition: "left" | "right";
-  displayCompanyInfo: boolean;
-  businessData: Record<string, string>;
-  invoiceTitle: string;
-  invoiceNumber: string;
-  invoiceDate: string;
-  invoiceDueDate?: string;
-  invoiceTitleClass: string;
-  hideInvoiceDetails?: boolean;
-}>();
-
-const logoStyles = computed(() => {
-  return sizes[logoSize];
-});
-
-const isReverse = computed(() => {
-  return logoPosition == "right";
-});
-</script>
-
-<template>
-  <header class="pt-4 text-sm print:pt-0 invoice__header">
-    <section
-      class="flex w-full px-4 invoice-details"
-      :class="[
-        isReverse && !hideInvoiceDetails && 'flex-row-reverse',
-        isReverse && hideInvoiceDetails ? 'justify-end' : 'justify-between',
-      ]"
-    >
-      <article
-        class="flex items-center"
-        :class="[isReverse && hideInvoiceDetails ? 'w-fit' : 'w-full']"
-      >
-        <img :src="logoUrl" v-if="logoUrl" class="rounded-md" :class="[logoStyles]" />
-        <BusinessCard
-          :business="businessData"
-          class="w-full text-left"
-          v-if="displayCompanyInfo && !logoOnly"
-        />
-      </article>
-
-      <InvoiceDetails
-        class="mt-4"
-        :class="[!isReverse ? 'justify-end' : 'justify-between']"
-        v-if="!hideInvoiceDetails"
-        :is-reverse="isReverse"
-        :invoice-title-class="invoiceTitleClass"
-        :invoice-title="invoiceTitle"
-        :invoice-number="invoiceNumber"
-        :invoice-date="invoiceDate"
-        :invoice-due-date="invoiceDueDate"
-      />
-    </section>
-  </header>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceSubHeader.vue b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceSubHeader.vue
deleted file mode 100644
index ac254f14..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceSubHeader.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import BusinessCard from "./BusinessCard.vue";
-import ClientCard from "./InvoiceClientCard.vue";
-import InvoiceTotalItem from "../Partials/InvoiceTotalItem.vue";
-import InvoiceDetails from "./InvoiceDetails.vue";
-
-interface SubHeaderCard {
-  type: "ContactInfo" | "TotalInfo" | "BusinessInfo";
-}
-
-const componentTypes = {
-  ContactInfo: ClientCard,
-  BusinessInfo: BusinessCard,
-  InvoiceTotalItem,
-  InvoiceDetails,
-};
-
-defineProps<{
-  cards: SubHeaderCard[];
-}>();
-
-const getComponent = (typeName: string) => {
-  return componentTypes[typeName];
-};
-</script>
-
-<template>
-  <section class="flex justify-between pt-4 text-sm print:pt-0">
-    <component
-      :is="getComponent(card.type)"
-      v-for="(card, index) in cards"
-      v-bind="card"
-      :key="index"
-    />
-  </section>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/ReportSimple.vue b/resources/js/Pages/Journal/Invoices/printTemplates/ReportSimple.vue
deleted file mode 100644
index 6b274e20..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/ReportSimple.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import AtTable from "@/Components/shared/BaseTable.vue";
-import BusinessCard from "./BusinessCard.vue";
-import cols from "./cols";
-
-withDefaults(
-  defineProps<{
-    reportName: string;
-    description: string;
-    startDate: Date;
-    endDate: Date;
-    content: any;
-    imageUrl: string;
-    businessData: Record<string, string>;
-  }>(),
-  {
-    imageUrl: "/logo.png",
-  }
-);
-</script>
-
-<template>
-  <section class="section-body">
-    <header class="pt-5 px-5 flex justify-between">
-      <article>
-        <h1 class="text-2xl font-bold text-primary mt-4">{{ reportName }}</h1>
-        <h3 class="text-lg text-body-1 font-bold">{{ description }}</h3>
-        <h4 class="mt-4">
-          <span class="capitalize"> {{ $t("from") }} {{ startDate }} </span>
-          <span class="capitalize ml-2"> {{ $t("to") }} {{ endDate }} </span>
-        </h4>
-      </article>
-      <article class="flex items-center flex-col w-72">
-        <img :src="imageUrl" v-if="imageUrl" class="w-24 rounded-md" />
-        <BusinessCard :business="businessData" class="w-full text-left" />
-      </article>
-    </header>
-
-    <main>
-      <AtTable v-if="content.type == 'table'" :table-data="content.data" :cols="cols" />
-    </main>
-  </section>
-</template>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/Simple.vue b/resources/js/Pages/Journal/Invoices/printTemplates/Simple.vue
deleted file mode 100644
index c69d6702..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/Simple.vue
+++ /dev/null
@@ -1,410 +0,0 @@
-<script lang="ts" setup>
-import { toDate, differenceInDays } from "date-fns";
-import { reactive, computed, watch, toRefs } from "vue";
-import { parseISO } from "date-fns";
-import { router } from "@inertiajs/vue3";
-
-import InvoiceTotals from "../Partials/InvoiceTotals.vue";
-import InvoiceGrid from "../Partials/InvoiceGrid.vue";
-import ClientCard from "./InvoiceClientCard.vue";
-import BusinessCard from "./BusinessCard.vue";
-
-import { IClient } from "@/Modules/clients/clientEntity";
-import { formatDate } from "@/utils";
-import { IInvoice, ILineItem } from "@/Modules/invoicing/entities";
-import { ElMessageBox, ElNotification } from "element-plus";
-import { usePaymentModal } from "@/Modules/transactions/usePaymentModal";
-import { IPayment } from "@/Modules/loans/loanEntity";
-
-interface InvoiceLayoutTheme {
-  headerLogoPosition: "left" | "right";
-}
-
-const props = withDefaults(
-  defineProps<{
-    imageUrl: string;
-    type: string;
-    user: Record<string, string>;
-    businessData: Record<string, string>;
-    products?: Record<string, string>[];
-    clients?: IClient[];
-    invoiceData: IInvoice;
-    layoutTheme: InvoiceLayoutTheme;
-  }>(),
-  {
-    type: "INVOICE",
-    imageUrl: "/logo.png",
-    layoutTheme: () => ({
-      headerLogoPosition: "left",
-    }),
-  }
-);
-
-const state: any = reactive({
-  totalValues: {},
-  totals: {
-    subtotalField: "subtotal",
-    totalField: "amount",
-    discountField: "discountTotal",
-    subtotalFormula(row: ILineItem) {
-      return row.quantity * row.price;
-    },
-    totalFormula(row: ILineItem) {
-      return row.quantity * row.price;
-    },
-    discountFormula(row: ILineItem) {
-      return row.quantity * row.price;
-    },
-  },
-  invoice: {},
-  selectedPayment: null,
-  isPaymentDialogVisible: false,
-  modals: {
-    email: {
-      value: false,
-    },
-  },
-  tableData: [],
-  client: null,
-  imageUrl: "",
-  dueDays: computed(() => {
-    return differenceInDays(state.invoice.due_date, state.invoice.date);
-  }),
-});
-
-const setInvoiceData = (data: Record<string, any>) => {
-  if (data) {
-    data.date = toDate(parseISO(data.date) || new Date());
-    data.due_date = toDate(parseISO(data.due_date) || new Date());
-    state.invoice = data;
-    state.client = data.client;
-    state.tableData =
-      data.lines.sort((a: Record<string, string>, b: Record<string, string>) =>
-        a.index > b.index ? 1 : -1
-      ) || [];
-  }
-};
-
-watch(
-  () => props.invoiceData,
-  (data) => {
-    if (data) {
-      setInvoiceData(data);
-    }
-  },
-  { immediate: true }
-);
-
-const { tableData, client, invoice, totals, totalValues, dueDays } = toRefs(state);
-
-const { openModal } = usePaymentModal();
-const editPayment = (payment: IPayment) => {
-  const url =
-    props.invoiceData.invoiceable_type === "App\\Domains\\Properties\\Models\\Rent"
-      ? `/rents/${props.invoiceData.invoiceable_id}/invoices/${payment.payable_id}/payments/${payment.id}`
-      : `/invoices/${payment.payable_id}/payments/${payment.id}`;
-
-  openModal({
-    data: {
-      title: `Pagar ${props.invoiceData.concept}`,
-      payment: payment,
-      endpoint: url,
-      due: payment.amount,
-      account_id: payment.account_id,
-      defaultConcept: payment.concept,
-    },
-  });
-};
-
-const removePayment = async (payment: Record<string, string>) => {
-  const isConfirmed = await ElMessageBox.confirm(
-    `Estas seguro de eliminar el pago ${payment.concept}?`,
-    "Eliminar pago"
-  );
-
-  if (!isConfirmed) return;
-  router.delete(`/payments/${payment.id}`, {
-    onSuccess() {
-      ElNotification({
-        message: `Pago ${payment.due_date} borrada con exito`,
-        title: "Pago eliminada",
-        type: "success",
-      });
-    },
-  });
-};
-
-const hideLogo = computed(() => {
-  return Boolean(Number(props.businessData.invoice_hide_company_logo));
-});
-</script>
-
-<template>
-  <section class="relative w-full rounded-md simple-template">
-    <div class="relative section-body">
-      <header class="pt-4 text-sm print:pt-0 invoice__header">
-        <section class="flex justify-between w-full px-4 invoice-details">
-          <article class="flex items-center w-full">
-            <img
-              :src="imageUrl"
-              v-if="imageUrl && !hideLogo"
-              class="w-40 rounded-md mr-2"
-            />
-            <BusinessCard :business="businessData" class="w-full text-left" />
-          </article>
-
-          <article class="w-full text-right">
-            <h4 class="px-5 text-2xl font-bold text-primary">
-              Factura {{ invoice.series }}-{{ invoice.number }}
-            </h4>
-            <h5 class="text-md">
-              <span class="font-bold">Concepto:</span> {{ invoice.concept }}
-            </h5>
-            <p>
-              <span class="font-bold">Fecha</span>
-              {{ formatDate(invoice.date) }}
-            </p>
-            <p>
-              <span class="font-bold">Fecha Limite</span>
-              {{ formatDate(invoice.due_date) }}
-            </p>
-          </article>
-        </section>
-
-        <section class="flex px-4 space-x-4">
-          <ClientCard class="w-8/12 text-left" label="Cliente" :client="client" />
-        </section>
-      </header>
-
-      <InvoiceGrid
-        :tableData="tableData"
-        :is-editing="false"
-        :hidden-cols="['quantity', 'discount']"
-        class="w-full mt-5 main-grid"
-      >
-        <template #prepend>
-          <div class="py-1 text-base font-bold text-center text-body-1">
-            {{ invoice.concept }} {{ invoice.description }}
-          </div>
-        </template>
-      </InvoiceGrid>
-
-      <div class="flex justify-end px-4 mt-5 text-gray-600">
-        <InvoiceTotals
-          :tableData="tableData"
-          :subtotal-field="totals.subtotalField"
-          :discount-field="totals.discountField"
-          :payments="invoice.payments"
-          :total-values="totalValues"
-          :total-field="totals.totalField"
-          :subtotalFormula="totals.subtotalFormula"
-          :discountFormula="totals.discountFormula"
-          :totalFormula="totals.totalFormula"
-          @edit-payment="editPayment"
-          @delete-payment="removePayment"
-        />
-      </div>
-
-      <div
-        class="flex text-sm text-center invoice-footer-details mt-14"
-        v-if="invoice.id"
-      >
-        <div class="w-full text-gray-600">
-          <p class="font-bold text-gray-600">Gracias por su preferencia!</p>
-          <div class="mt-5 font-bold text-gray-600" v-if="invoice.type == 'INVOICE'">
-            Terminos y condiciones
-          </div>
-          <div v-if="invoice.type == 'INVOICE'">
-            El pago debe ser dentro de {{ dueDays }} dias
-          </div>
-        </div>
-
-        <section class="flex flex-col items-end justify-center w-full text-right">
-          <div class="mx-auto mb-2 font-serif border-b-2 invoice__signature w-96" />
-          <article class="justify-center w-full text-center">
-            <div class="font-bold">{{ user?.name }}</div>
-            <div>Firma</div>
-          </article>
-        </section>
-      </div>
-
-      <span class="mt-8 stamp is-approved" v-if="invoice.debt == 0">Pagado</span>
-    </div>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-.totals-container {
-  background: white;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.invoice-title {
-  padding-left: 15px;
-}
-
-.section-body {
-  padding: 0 15px;
-}
-
-.invoice-actions {
-  margin-bottom: 15px;
-
-  .btn {
-    height: 38px;
-  }
-
-  [class*="col-md"] {
-    padding: 0 0 0 0;
-
-    &:first-child {
-      padding-left: 15px;
-    }
-
-    &:last-child {
-      padding-right: 15px;
-    }
-  }
-
-  .btn,
-  button,
-  input {
-    border-radius: 0 0 0 0 !important;
-  }
-
-  .btn-primary {
-    background: dodgerblue;
-  }
-}
-
-.main-grid {
-  thead th {
-    @apply text-white;
-  }
-  .el-table__body-wrapper td {
-    font-size: 0.8em !important;
-  }
-}
-
-.invoice-totals {
-  font-size: 12px;
-
-  &__add-payment {
-    width: 100%;
-    height: 34px;
-    background: dodgerblue;
-    color: white;
-    border: none;
-    font-weight: bolder;
-    transition: all ease 0.3s;
-
-    &:hover {
-      font-size: 1.01em;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.invoice-form-row {
-  display: inline-grid;
-  width: 100%;
-  grid-column-gap: 0;
-  grid-template-columns: 20% 80%;
-
-  label {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.invoice-header-container {
-  position: inherit;
-}
-
-.invoice-footer-details {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  grid-column-gap: 15px;
-  padding: 0 15px;
-}
-
-.el-collapse {
-  margin-bottom: 15px;
-}
-
-.simple-template {
-  padding-bottom: 25px;
-  background: white;
-}
-</style>
-
-<style lang="scss">
-.main-grid {
-  .el-table__body-wrapper td {
-    font-size: 1em !important;
-  }
-}
-
-.stamp {
-  transform: rotate(12deg);
-  color: #555;
-  font-size: 2rem;
-  font-weight: 700;
-  border: 0.25rem solid #555;
-  display: inline-block;
-  padding: 0.25rem 1rem;
-  text-transform: uppercase;
-  border-radius: 1rem;
-  font-family: "Courier";
-  mask-image: url("/grunge.png");
-  -webkit-mask-image: url("/grunge.png");
-  mask-size: 944px 604px;
-  -webkit-mask-size: 944px 604px;
-  mix-blend-mode: multiply;
-  position: absolute;
-  top: 120px;
-  right: 25px;
-}
-
-.is-approved {
-  color: #0a9928;
-  border: 0.5rem solid #0a9928;
-  mask-position: 13rem 6rem;
-  -webkit-mask-position: 13rem 6rem;
-  transform: rotate(-14deg);
-  font-size: 2rem;
-  border-radius: 0;
-}
-
-.is-draft {
-  color: #c4c4c4;
-  border: 1rem double #c4c4c4;
-  transform: rotate(-5deg);
-  font-size: 1.5rem;
-  font-family: "Open sans", Helvetica, Arial, sans-serif;
-  border-radius: 0;
-  padding: 0.5rem;
-}
-
-@media print {
-  .section-body {
-    width: 100%;
-    display: block;
-    font-size: 12px;
-  }
-  @page {
-    marks: cross;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-
-  tbody,
-  .client-card {
-    font-size: 12px;
-  }
-} ;
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/SimpleMultiTheme.vue b/resources/js/Pages/Journal/Invoices/printTemplates/SimpleMultiTheme.vue
deleted file mode 100644
index ba614aab..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/SimpleMultiTheme.vue
+++ /dev/null
@@ -1,537 +0,0 @@
-<script lang="ts" setup>
-import { toDate, differenceInDays } from "date-fns";
-import { reactive, computed, watch, toRefs, onMounted, useCssVars, ref } from "vue";
-import { parseISO } from "date-fns";
-import { router } from "@inertiajs/vue3";
-
-import InvoiceTotals from "../Partials/InvoiceTotals.vue";
-import InvoiceGrid from "../Partials/InvoiceGrid.vue";
-
-import { IClient } from "@/Modules/clients/clientEntity";
-import { formatDate, formatMoney } from "@/utils";
-import { IInvoice, ILineItem } from "@/Modules/invoicing/entities";
-import { ElMessageBox, ElNotification } from "element-plus";
-import { usePaymentModal } from "@/Modules/transactions/usePaymentModal";
-import { IPayment } from "@/Modules/loans/loanEntity";
-import InvoiceHeader from "./InvoiceHeader.vue";
-import InvoiceSubHeader from "./InvoiceSubHeader.vue";
-import { useI18n } from "vue-i18n";
-import SignaturePad from "../Partials/SignaturePad.vue";
-
-interface InvoiceLayoutTheme {
-  headerLogoPosition: "left" | "right";
-  headerLogoSize?: "sm" | "md" | "lg";
-  headerLogoOnly?: boolean;
-  headerHideInvoiceDetails?: boolean;
-  subheaderCards: string[];
-  accentColor: string;
-  accentColorBackground: string;
-  tableHeaderCellDivider?: boolean;
-  tableHeaderCellAlign?: "center" | "left" | "right";
-}
-
-defineEmits(["signature-clicked"]);
-
-const props = withDefaults(
-  defineProps<{
-    imageUrl: string;
-    type: string;
-    user: Record<string, string>;
-    businessData: Record<string, string>;
-    products?: Record<string, string>[];
-    clients?: IClient[];
-    invoiceData: IInvoice;
-    layoutTheme: InvoiceLayoutTheme;
-  }>(),
-  {
-    type: "INVOICE",
-    imageUrl: "/logo.png",
-    layoutTheme: () => ({
-      headerLogoPosition: "left",
-      subheaderCards: ["contactInfo", "businessInfo"],
-      accentColor: "text-pink-400",
-      accentColorBackground: "text-white bg-pink-400",
-    }),
-  }
-);
-
-const state: any = reactive({
-  totalValues: {},
-  totals: {
-    subtotalField: "subtotal",
-    totalField: "amount",
-    discountField: "discountTotal",
-    subtotalFormula(row: ILineItem) {
-      return row.quantity * row.price;
-    },
-    totalFormula(row: ILineItem) {
-      return row.quantity * row.price;
-    },
-    discountFormula(row: ILineItem) {
-      return row.quantity * row.price;
-    },
-  },
-  invoice: {},
-  selectedPayment: null,
-  isPaymentDialogVisible: false,
-  modals: {
-    email: {
-      value: false,
-    },
-  },
-  tableData: [],
-  client: null,
-  imageUrl: "",
-  dueDays: computed(() => {
-    return differenceInDays(state.invoice.due_date, state.invoice.date);
-  }),
-});
-
-const setInvoiceData = (data: Record<string, any>) => {
-  if (data) {
-    data.date = toDate(parseISO(data.date) || new Date());
-    data.due_date = toDate(parseISO(data.due_date) || new Date());
-    state.invoice = data;
-    state.client = data.client;
-    state.tableData =
-      data.lines.sort((a: Record<string, string>, b: Record<string, string>) =>
-        a.index > b.index ? 1 : -1
-      ) || [];
-  }
-};
-
-watch(
-  () => props.invoiceData,
-  (data) => {
-    if (data) {
-      setInvoiceData(data);
-    }
-  },
-  { immediate: true }
-);
-
-const { tableData, invoice, totals, totalValues, dueDays } = toRefs(state);
-
-const { t } = useI18n();
-const availableCards = computed(() => {
-  return {
-    contactInfo: {
-      type: "ContactInfo",
-      client: state?.client,
-      label: t("invoice to"),
-      class: "invoice-secondary-text w-fit w-full",
-    },
-    businessInfo: {
-      type: "BusinessInfo",
-      business: props.businessData,
-      label: t("invoice from"),
-      class: "invoice-secondary-text",
-    },
-    totalDue: {
-      type: "InvoiceTotalItem",
-      label: t("total due"),
-      value: formatMoney(invoice.value.debt),
-      class: "invoice-accent-text capitalize",
-      vertical: true,
-      valueSize: "lg",
-    },
-    invoiceDetails: {
-      type: "InvoiceDetails",
-      logoUrl: props.imageUrl,
-      invoiceDate: formatDate(invoice.value.date),
-      logoPosition: props.layoutTheme.headerLogoPosition,
-      hideInvoiceDetails: props.layoutTheme.headerHideInvoiceDetails,
-      invoiceNumber: invoice.value.number,
-      displayCompanyInfo: true,
-      invoiceTitle: t("invoice"),
-      invoiceTitleClass: "invoice-accent-text",
-      class: "pt-0 mt-0",
-    },
-  };
-});
-const visibleHeaderCards = computed(() => {
-  return props.layoutTheme.subheaderCards
-    .map((name: string) => availableCards.value[name])
-    .filter((value) => value);
-});
-
-const { openModal } = usePaymentModal();
-const editPayment = (payment: IPayment) => {
-  const url =
-    props.invoiceData.invoiceable_type === "App\\Domains\\Properties\\Models\\Rent"
-      ? `/rents/${props.invoiceData.invoiceable_id}/invoices/${payment.payable_id}/payments/${payment.id}`
-      : `/invoices/${payment.payable_id}/payments/${payment.id}`;
-
-  openModal({
-    data: {
-      title: `Pagar ${props.invoiceData.concept}`,
-      payment: payment,
-      endpoint: url,
-      due: payment.amount,
-      account_id: payment.account_id,
-      defaultConcept: payment.concept,
-    },
-  });
-};
-
-const removePayment = async (payment: Record<string, string>) => {
-  const isConfirmed = await ElMessageBox.confirm(
-    `Estas seguro de eliminar el pago ${payment.concept}?`,
-    "Eliminar pago"
-  );
-
-  if (!isConfirmed) return;
-  router.delete(`/payments/${payment.id}`, {
-    onSuccess() {
-      ElNotification({
-        message: `Pago ${payment.due_date} borrada con exito`,
-        title: "Pago eliminada",
-        type: "success",
-      });
-    },
-  });
-};
-
-const invoiceTemplateRef = ref();
-onMounted(() => {
-  invoiceTemplateRef.value.style?.setProperty(
-    "--invoice-accent-color",
-    props.layoutTheme.accentColor
-  );
-  invoiceTemplateRef.value.style?.setProperty(
-    "--invoice-table-header-cell-align",
-    props.layoutTheme.tableHeaderCellAlign
-  );
-});
-</script>
-
-<template>
-  <section
-    class="relative w-full rounded-md simple-template shein-store-invoice"
-    ref="invoiceTemplateRef"
-  >
-    <div class="relative section-body">
-      <InvoiceHeader
-        :logo-url="imageUrl"
-        :logo-size="layoutTheme.headerLogoSize"
-        :logo-only="layoutTheme.headerLogoOnly"
-        :business-data="businessData"
-        :invoice-date="formatDate(invoice.date)"
-        :logo-position="layoutTheme.headerLogoPosition"
-        :hide-invoice-details="layoutTheme.headerHideInvoiceDetails"
-        :invoice-number="invoice.number"
-        :display-company-info="true"
-        :invoice-title="$t('invoice')"
-        invoice-title-class="invoice-accent-text"
-        class="px-5"
-      />
-
-      <InvoiceSubHeader class="px-10" :cards="visibleHeaderCards" />
-
-      <InvoiceGrid
-        :tableData="tableData"
-        :is-editing="false"
-        :hidden-cols="['taxes']"
-        class="w-full pb-4 mt-5 border-b main-grid"
-        :class="{
-          'header-cell-dividers': layoutTheme.tableHeaderCellDivider,
-          'header-cell-align': layoutTheme.tableHeaderCellAlign,
-        }"
-      >
-        <template v-slot:concept="{ row, col }">
-          <div class="flex px-5 py-1 text-base font-bold text-body-1">
-            <div
-              class="flex items-center justify-center mr-4 overflow-hidden font-bold text-gray-400 border border-gray-300 rounded-md w-14 h-14 bg-gray-50"
-            >
-              <img
-                :src="row.product_image"
-                alt=""
-                v-if="row.product_image"
-                style="
-                  min-width: 100%;
-                  min-height: 100%;
-                  object-fit: cover;
-                  object-position: top;
-                "
-              />
-              <i class="text-xl fa fa-images" v-else />
-            </div>
-
-            <span>
-              {{ row.concept }}
-            </span>
-          </div>
-        </template>
-      </InvoiceGrid>
-
-      <div class="flex justify-end px-4 text-gray-600">
-        <InvoiceTotals
-          :tableData="tableData"
-          :subtotal-field="totals.subtotalField"
-          :discount-field="totals.discountField"
-          :payments="invoice.payments"
-          :total-values="totalValues"
-          :total-field="totals.totalField"
-          :subtotalFormula="totals.subtotalFormula"
-          :discountFormula="totals.discountFormula"
-          :totalFormula="totals.totalFormula"
-          :hide-debt="true"
-          :hide-payments="true"
-          :hide-separators="true"
-          total-class="bg"
-          @edit-payment="editPayment"
-          @delete-payment="removePayment"
-        >
-          <template v-slot:total="{ value, label }">
-            <section
-              class="grid grid-cols-2 gap-2 px-2 py-1.5 font-bold divide-x rounded-sm invoice-accent-background"
-            >
-              <span class="py-1 uppercase">
-                {{ label }}
-              </span>
-              <span class="py-1 pl-4">
-                {{ value }}
-              </span>
-            </section>
-          </template>
-        </InvoiceTotals>
-      </div>
-
-      <div class="flex text-sm text-center px-14 mt-14" v-if="invoice.id">
-        <section class="w-6/12 text-left text-gray-600">
-          <p class="font-bold text-gray-600">Gracias por su preferencia!</p>
-          <div class="mt-5 font-bold text-gray-600" v-if="invoice.type == 'INVOICE'">
-            Terminos y condiciones
-          </div>
-          <p class="mb-2 whitespace-pre-line w-full">
-            {{ businessData.invoice_payment_instructions }}
-          </p>
-          <div v-if="invoice.type == 'INVOICE'">
-            El pago debe ser dentro de {{ dueDays }} dias
-          </div>
-        </section>
-
-        <section
-          class="flex flex-col items-end justify-center w-6/12 text-right cursor-pointer"
-        >
-          <section
-            @click="$emit('signature-clicked')"
-            class="px-2 pt-5 transition rounded-md hover:bg-base-lvl-2 w-full"
-          >
-            <SignaturePad
-              :signatures="invoice.signatures"
-              :entity="invoice"
-              :label="user?.name"
-            />
-          </section>
-        </section>
-      </div>
-
-      <span class="mt-8 stamp is-approved" v-if="invoice.debt == 0">{{
-        $t("paid")
-      }}</span>
-    </div>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-.totals-container {
-  background: white;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.invoice-title {
-  padding-left: 15px;
-}
-
-.invoice-actions {
-  margin-bottom: 15px;
-
-  .btn {
-    height: 38px;
-  }
-
-  [class*="col-md"] {
-    padding: 0 0 0 0;
-
-    &:first-child {
-      padding-left: 15px;
-    }
-
-    &:last-child {
-      padding-right: 15px;
-    }
-  }
-
-  .btn,
-  button,
-  input {
-    border-radius: 0 0 0 0 !important;
-  }
-
-  .btn-primary {
-    background: dodgerblue;
-  }
-}
-
-.main-grid {
-  thead th {
-    @apply text-white;
-  }
-  .el-table__body-wrapper td {
-    font-size: 0.8em !important;
-  }
-}
-
-.invoice-totals {
-  font-size: 12px;
-
-  &__add-payment {
-    width: 100%;
-    height: 34px;
-    background: dodgerblue;
-    color: white;
-    border: none;
-    font-weight: bolder;
-    transition: all ease 0.3s;
-
-    &:hover {
-      font-size: 1.01em;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.invoice-form-row {
-  display: inline-grid;
-  width: 100%;
-  grid-column-gap: 0;
-  grid-template-columns: 20% 80%;
-
-  label {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.invoice-header-container {
-  position: inherit;
-}
-
-.el-collapse {
-  margin-bottom: 15px;
-}
-
-.simple-template {
-  padding-bottom: 25px;
-  background: white;
-}
-</style>
-
-<style lang="scss">
-:root {
-  --invoice-accent-color: #333;
-  --invoice-table-header-cell-align: "center";
-}
-
-.invoice-accent-background {
-  background-color: var(--invoice-accent-color);
-  color: white;
-}
-
-.invoice-accent-text {
-  color: var(--invoice-accent-color);
-}
-
-.main-grid {
-  .el-table__body-wrapper td {
-    font-size: 1em !important;
-  }
-
-  &.header-cell-align {
-    thead th {
-      text-align: var(--invoice-table-header-cell-align) !important;
-    }
-  }
-
-  &.header-cell-dividers {
-    thead th {
-      border-left: 2px solid white;
-      border-right: 2px solid white;
-    }
-  }
-}
-
-.stamp {
-  transform: rotate(12deg);
-  color: #555;
-  font-size: 2rem;
-  font-weight: 700;
-  border: 0.25rem solid #555;
-  display: inline-block;
-  padding: 0.25rem 1rem;
-  text-transform: uppercase;
-  border-radius: 1rem;
-  font-family: "Courier";
-  mask-image: url("/grunge.png");
-  -webkit-mask-image: url("/grunge.png");
-  mask-size: 944px 604px;
-  -webkit-mask-size: 944px 604px;
-  mix-blend-mode: multiply;
-  position: absolute;
-  top: 120px;
-  right: 25px;
-}
-
-.is-approved {
-  color: #0a9928;
-  border: 0.5rem solid #0a9928;
-  mask-position: 13rem 6rem;
-  -webkit-mask-position: 13rem 6rem;
-  transform: rotate(-14deg);
-  font-size: 2rem;
-  border-radius: 0;
-}
-
-.is-draft {
-  color: #c4c4c4;
-  border: 1rem double #c4c4c4;
-  transform: rotate(-5deg);
-  font-size: 1.5rem;
-  font-family: "Open sans", Helvetica, Arial, sans-serif;
-  border-radius: 0;
-  padding: 0.5rem;
-}
-.shein-store-invoice {
-  thead,
-  thead th {
-    @extend .invoice-accent-background !optional;
-  }
-}
-
-@media print {
-  .section-body {
-    width: 100%;
-    display: block;
-    font-size: 12px;
-    max-width: 210mm;
-    width: 510mm;
-    min-height: 265mm;
-    height: auto;
-  }
-  @page {
-    marks: cross;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-
-  tbody,
-  .client-card {
-    font-size: 12px;
-  }
-}
-</style>
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/cols.ts b/resources/js/Pages/Journal/Invoices/printTemplates/cols.ts
deleted file mode 100644
index f77db643..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/cols.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { formatDate, formatMoney } from "@/utils";
-
-export default [
-  {
-    label: "Unidad",
-    name: "unit_name",
-    class: "text-left",
-    headerClass: 'text-left',
-  },
-  {
-    label: "Estado / Cliente",
-    name: "client_name",
-    class: "text-right text-normal",
-    headerClass: 'text-right'
-  }
-];
diff --git a/resources/js/Pages/Journal/Invoices/printTemplates/index.ts b/resources/js/Pages/Journal/Invoices/printTemplates/index.ts
deleted file mode 100644
index cce5e022..00000000
--- a/resources/js/Pages/Journal/Invoices/printTemplates/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-const invoiceLayouts = {
-  store: {
-    headerLogoPosition: "left",
-    accentColor: "rgb(244 114 182)",
-    secondaryColor: "rgb(147 51 234)",
-    subheaderCards: ["contactInfo", "businessInfo"],
-  },
-  school: {
-    headerLogoPosition: "right",
-    accentColor: "#0A1B6A",
-    secondaryColor: "#E60C15",
-    subheaderCards: ["contactInfo", "totalDue"],
-  },
-  freelanceBlack: {
-    headerLogoPosition: "right",
-    accentColor: "#293379",
-    secondaryColor: "rgb(37 99 235)",
-    subheaderCards: ["contactInfo", "totalDue"],
-  },
-  premium: {
-    headerLogoPosition: "left",
-    headerHideInvoiceDetails: true,
-    accentColor: "rgb(59 130 246)",
-    secondaryColor: "rgb(51 65 85)",
-    subheaderCards: ["contactInfo", "invoiceDetails"],
-    tableHeaderCellDivider: true,
-    tableHeaderCellAlign: "center",
-  },
-  premiumLeft: {
-    headerLogoPosition: "right",
-    headerLogoSize: "sm",
-    headerLogoOnly: true,
-    headerHideInvoiceDetails: true,
-    accentColor: "rgb(59 130 246)",
-    secondaryColor: "rgb(51 65 85)",
-    subheaderCards: ["invoiceDetails", "contactInfo"],
-    tableHeaderCellDivider: true,
-    tableHeaderCellAlign: "center",
-    lineItemImage: false,
-  }
-}
-
-export const getInvoiceLayout = (layoutName: string) => {
-  const appProfileToInvoiceTemplate = {
-    school: 'school',
-    store: 'store'
-  }
-  return invoiceLayouts[appProfileToInvoiceTemplate[layoutName]] ?? invoiceLayouts.store;
-}
diff --git a/resources/js/Pages/Journal/Invoices/utils.ts b/resources/js/Pages/Journal/Invoices/utils.ts
deleted file mode 100644
index 0dba77d4..00000000
--- a/resources/js/Pages/Journal/Invoices/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const getInvoiceTypeUrl = (invoice) => {
-  const section = invoice.type == 'EXPENSE' ? 'bills' : 'invoices'
-  return `/${section}/${invoice.id}/edit`;
-}
-
-
diff --git a/resources/js/Pages/Journal/Partials/AccountingSectionNav.vue b/resources/js/Pages/Journal/Partials/AccountingSectionNav.vue
deleted file mode 100644
index 8c4465bc..00000000
--- a/resources/js/Pages/Journal/Partials/AccountingSectionNav.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { getSectionMenu, MODULES } from "@/Modules/_app";
-import { computed } from "vue";
-import SectionNav from "@/Components/SectionNav.vue";
-
-const menu = computed(() => {
-  return getSectionMenu(MODULES.ACCOUNTING);
-});
-</script>
-
-<template>
-  <SectionNav :sections="menu">
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </SectionNav>
-</template>
diff --git a/resources/js/Pages/Journal/Payments/Index.vue b/resources/js/Pages/Journal/Payments/Index.vue
deleted file mode 100644
index b82129a4..00000000
--- a/resources/js/Pages/Journal/Payments/Index.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<script setup lang="ts">
-// @ts-ignore
-import { AtButton, AtBackgroundIconCard, AtDatePager } from "atmosphere-ui";
-import AppLayout from "@/Components/templates/AppLayout.vue";
-import { toRefs, ref } from "vue";
-
-import cols from "./cols";
-import AtTable from "@/Components/shared/BaseTable.vue";
-import { formatMoney, formatDate } from "@/utils";
-import { useServerSearch } from "@/utils/useServerSearch";
-import AccountSelect from "@/Components/shared/Selects/AccountSelect.vue";
-import { IPayment } from "@/Modules/loans/loanEntity";
-import { IServerSearchData } from "@/utils/useServerSearch";
-import { IPaginatedData } from "@/utils/constants";
-
-const props = defineProps<{
-  payments: IPaginatedData<IPayment>;
-  income: number;
-  outgoing: number;
-  total: number;
-  serverSearchOptions: IServerSearchData;
-}>();
-
-const { serverSearchOptions } = toRefs(props);
-const { executeSearchWithDelay, updateSearch, state: pageState } = useServerSearch(
-  serverSearchOptions,
-  (urlParams: string) => {
-    updateSearch(`${location.pathname}?${urlParams}`);
-  },
-  {
-    manual: true,
-  }
-);
-
-const filters = ref({
-  account: "",
-});
-
-const onAccountChange = (account: Record<string, any>) => {
-  pageState.filters.account = account.id;
-  executeSearchWithDelay();
-};
-
-const setDirection = (direction: string | null) => {
-  pageState.filters.direction = direction;
-  executeSearchWithDelay();
-};
-</script>
-
-<template>
-  <AppLayout :title="$t('Payments')">
-    <template #header>
-      <div class="flex justify-end items-center px-5 py-1">
-        <section class="flex items-center space-x-2">
-          <div class="text-right space-x-2">
-            <AccountSelect
-              endpoint="/api/accounts"
-              v-model="filters.account"
-              @update:model-value="onAccountChange"
-            />
-          </div>
-          <AtDatePager
-            class="w-full h-12 border-none bg-base-lvl-1 text-body"
-            v-model:startDate="pageState.dates.startDate"
-            v-model:endDate="pageState.dates.endDate"
-            @change="executeSearchWithDelay()"
-            controlsClass="bg-transparent text-body hover:bg-base-lvl-1"
-            next-mode="month"
-          />
-        </section>
-      </div>
-    </template>
-    <div class="mx-auto py-10 sm:px-6 lg:px-8">
-      <section class="flex space-x-4">
-        <AtBackgroundIconCard
-          class="w-full bg-white border h-28 text-body-1"
-          :title="$t('Incoming')"
-          :value="formatMoney(income ?? 0)"
-          @click="setDirection('debit')"
-        />
-        <AtBackgroundIconCard
-          class="w-full bg-white border h-28 text-body-1 cursor-pointer"
-          :title="$t('Outgoing')"
-          :value="formatMoney(outgoing ?? 0)"
-          @click="setDirection('credit')"
-        />
-        <AtBackgroundIconCard
-          class="w-full bg-white border h-28 text-body-1"
-          :title="$t('Month Balance')"
-          :value="formatMoney(total || 0)"
-          @click="setDirection(null)"
-        />
-      </section>
-
-      <div class="mt-5 rounded-md bg-white">
-        <div class="w-full">
-          <AtTable :cols="cols" :tableData="payments.data" :show-prepend="true">
-            <!-- Table Data -->
-            <template v-slot:date="{ scope: { row } }">
-              <div>
-                <div class="font-bold text-blue-400">{{ formatDate(row.date) }}</div>
-              </div>
-            </template>
-
-            <template v-slot:concept="{ scope: { row } }">
-              <div
-                class="border-dashed border-b border-blue-400 text-blue-400 cursor-pointer capitalize text-md"
-              >
-                {{ row.concept }} {{ row.id }}
-                <span class="font-bold text-gray-300">
-                  {{ row.series }} #{{ row.number }}
-                </span>
-              </div>
-            </template>
-
-            <template v-slot:status="{ scope: { row } }">
-              <div class="font-bold capitalize">
-                {{ row.status }}
-              </div>
-            </template>
-
-            <template v-slot:total="{ scope: { row } }">
-              <div class="font-bold">
-                {{ formatMoney(row.amount) }}
-              </div>
-            </template>
-
-            <template v-slot:debt="{ scope: { row } }">
-              <div
-                class="font-bold"
-                :class="[row.debt > 0 ? 'text-red-500' : 'text-green-500']"
-              >
-                {{ formatMoney(row.debt) }}
-              </div>
-            </template>
-
-            <template v-slot:actions="{ scope: { row } }">
-              <div class="space-x-2 flex">
-                <AtButton
-                  @click="$inertia.visit(`payments/${row.id}/edit`)"
-                  class="rounded-full text-gray-400 hover:text-green-400 w-8 h-8"
-                >
-                  <i class="fa fa-edit"></i>
-                </AtButton>
-                <AtButton class="rounded-full text-gray-400 hover:text-red-400 w-8 h-8">
-                  <i class="fa fa-trash"></i>
-                </AtButton>
-              </div>
-            </template>
-            <!-- / Table data-->
-          </AtTable>
-        </div>
-      </div>
-    </div>
-  </AppLayout>
-</template>
-
-<style lang="scss" scoped>
-.body-section {
-  background: white;
-  padding: 15px;
-}
-
-.el-table th {
-  font-weight: bolder;
-  color: #222 !important;
-}
-
-.section-actions {
-  display: flex;
-
-  .app-search__container {
-    width: 80%;
-    margin-right: 15px;
-  }
-
-  .action-buttons {
-    width: 20%;
-    display: flex;
-
-    button {
-      margin-left: auto;
-    }
-  }
-}
-</style>
diff --git a/resources/js/Pages/Journal/Payments/cols.ts b/resources/js/Pages/Journal/Payments/cols.ts
deleted file mode 100644
index db220012..00000000
--- a/resources/js/Pages/Journal/Payments/cols.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export default [
-    {
-        label: "Date",
-        name: "payment_date",
-        width: 120,
-    },
-    {
-        label: "Concept",
-        name: "concept",
-        minWidth: 380,
-    },
-    {
-        label: "Cuenta",
-        name: "account",
-        align: 'center',
-        class: 'text-center',
-        width: 300,
-        render(row: Record<string, any>) {
-          return row.account?.alias ?? row.account?.name ?? "--"
-        }
-    },
-    {
-        label: "Client",
-        name: "client_name",
-        align: 'center',
-        class: 'text-center',
-        width: 300,
-        render(row: Record<string, any>) {
-          return row.payable?.client?.display_name ?? "--"
-        }
-    },
-    {
-        label: "Total",
-        name: "total",
-        type: 'money',
-        width: 130,
-    },
-    {
-        label: "",
-        name: "actions",
-        type: "custom",
-    },
-];
diff --git a/resources/js/Pages/Journal/Statements/Index.vue b/resources/js/Pages/Journal/Statements/Index.vue
index b439d8bc..8768709b 100644
--- a/resources/js/Pages/Journal/Statements/Index.vue
+++ b/resources/js/Pages/Journal/Statements/Index.vue
@@ -10,7 +10,7 @@ defineProps({
 </script>
 
 <template>
-  <AppLayout title="Reportes">
+  <AppLayout title="$t('Reports')">
     <div class="w-full py-10 mx-auto mt-8 sm:px-6 lg:px-8 print:w-[210mm] print">
       <div
         class="w-full px-5 py-5 mb-10 bg-white rounded-md shadow-md print:w-[210mm] print"
diff --git a/resources/js/Pages/Journal/Transactions/Index.vue b/resources/js/Pages/Journal/Transactions/Index.vue
deleted file mode 100644
index 20ba268f..00000000
--- a/resources/js/Pages/Journal/Transactions/Index.vue
+++ /dev/null
@@ -1,273 +0,0 @@
-<template>
-  <AppLayout>
-    <div class="w-full py-10 mx-auto sm:px-6 lg:px-8">
-      <div
-        class="flex items-center justify-between py-2 mb-10 border-4 border-white rounded-md bg-gray-50"
-      >
-        <div class="px-5 font-bold text-gray-600">Transactions</div>
-
-        <div
-          class="flex space-x-2 overflow-hidden font-bold text-gray-500 rounded-t-lg max-w-min"
-        >
-          <AppButton @click="toggleShowAdd(true, true)" class="w-32">
-            Add Income
-          </AppButton>
-          <AppButton @click="toggleShowAdd(false, true)" class="w-36">
-            Add Expense
-          </AppButton>
-        </div>
-      </div>
-
-      <div class="w-full rounded-md bg-base-lvl-3">
-        <AtTable
-          :cols="cols"
-          :tableData="transactions.data"
-          :show-prepend="true"
-          class="text-gray-500"
-        >
-          <!-- Quick Add -->
-          <template #prepend>
-            <div class="grid grid-cols-6 px-2 py-2 bg-white" v-if="showAdd">
-              <div class="w-full px-2 overflow-hidden">
-                <input
-                  type="date"
-                  class="w-full border-gray-200 rounded-md"
-                  v-model="formData.date"
-                />
-              </div>
-              <div class="w-full px-2 overflow-hidden">
-                <input
-                  type="text"
-                  class="w-full border-gray-200 rounded-md"
-                  v-model="formData.description"
-                />
-              </div>
-              <div class="w-full px-1">
-                <jet-select
-                  v-model="formData.account_id"
-                  v-model:selected="formData.account"
-                  :options="categories"
-                  placeholder="Pick an account"
-                  class="w-full"
-                  group-label="name"
-                  group-items="accounts"
-                  label="name"
-                  key-track="id"
-                >
-                </jet-select>
-              </div>
-              <div class="w-full px-1">
-                <jet-select
-                  v-model="formData.category_id"
-                  v-model:selected="formData.category"
-                  :options="categories"
-                  placeholder="Pick a category"
-                  class="w-full"
-                  group-label="name"
-                  group-items="accounts"
-                  label="name"
-                  key-track="id"
-                >
-                </jet-select>
-              </div>
-              <div class="w-full">
-                <input
-                  type="number"
-                  class="w-full border-gray-200 rounded-md"
-                  v-model="formData.total"
-                />
-              </div>
-              <div class="flex w-full px-5 space-x-2 text-center">
-                <at-button
-                  class="w-full text-white bg-gray-400"
-                  @click="toggleShowAdd(false, false)"
-                  title="cancel"
-                >
-                  <i class="fa fa-trash"></i>
-                </at-button>
-                <at-button
-                  class="w-full text-white bg-green-400"
-                  @click="saveQuickTransaction()"
-                  title="save transaction"
-                >
-                  <i class="fa fa-save"></i>
-                </at-button>
-              </div>
-            </div>
-          </template>
-          <!-- /Quick Add -->
-
-          <!-- Table Data -->
-          <template v-slot:name="{ scope }">
-            <div>
-              <div class="font-bold">{{ scope.row.name }}</div>
-              <div class="italic font-normal" v-if="scope.row.last_transaction_date">
-                Last transaction on: {{ scope.row.last_transaction_date.date }}
-              </div>
-            </div>
-          </template>
-
-          <template v-slot:description="{ scope: { row } }">
-            <span
-              class="font-bold text-blue-400 border-b border-blue-400 border-dashed cursor-pointer"
-            >
-              {{ row.description }} #{{ row.number }}
-            </span>
-          </template>
-
-          <template v-slot:account="{ scope: { row } }">
-            <div class="font-bold">{{ row }}</div>
-          </template>
-
-          <template v-slot:category="{ scope: { row } }">
-            <div>{{ row.category ? row.category.name : "" }}</div>
-          </template>
-
-          <template v-slot:total="{ scope: { row } }">
-            <div
-              class="font-bold"
-              :class="{
-                'text-red-500': row.direction == 'WITHDRAW',
-                'text-green-500': row.direction == 'DEPOSIT',
-              }"
-            >
-              {{ formatMoney(row.total) }}
-            </div>
-          </template>
-
-          <template v-slot:actions="{ scope: { row } }">
-            <div class="space-x-2 w-14">
-              <button><i class="fa fa-edit"></i></button>
-              <button>
-                <i class="fa fa-trash" @click="removeTransaction(row.id)"></i>
-              </button>
-            </div>
-          </template>
-          <!-- / Table data-->
-        </AtTable>
-      </div>
-    </div>
-  </AppLayout>
-</template>
-
-<script lang="ts" setup>
-import { formatMoney } from "@/utils";
-import { format } from "date-fns";
-import cols from "./cols";
-import { ElNotification } from "element-plus";
-
-import AppLayout from "@/Components/templates/AppLayout.vue";
-import AppButton from "@/Components/shared/AppButton.vue";
-import AtTable from "@/Components/shared/BaseTable.vue";
-
-const props = defineProps({
-  transactions: {
-    type: Array,
-  },
-  categories: {
-    type: Array,
-  },
-});
-
-const isAccountDialogVisible = false;
-const selectedAccount = null;
-const showAdd = false;
-const isIncome = false;
-const isLoading = false;
-const formData = {};
-const searchText = "";
-const activeName = [];
-const activeAccountSection = "";
-const accountsCategories = [];
-const section = "accounts";
-
-function toggleShowAdd(isIncome = true, show = null) {
-  this.showAdd = show == null ? !this.showAdd : show;
-  this.formData.date = format(new Date(), "yyyy-MM-dd");
-  this.isIncome = isIncome;
-}
-
-function rowClick(command, service) {
-  switch (command) {
-    case "edit":
-      this.editAccount(service);
-      break;
-    default:
-      break;
-  }
-}
-
-function setRequestData(data) {
-  const requestData = {
-    ...data,
-  };
-  requestData.direction = this.isIncome ? "DEPOSIT" : "WITHDRAW";
-  requestData.resource_type_id = "MANUAL";
-  return requestData;
-}
-
-function saveQuickTransaction() {
-  if (this.isLoading) {
-    return;
-  }
-
-  const formData = this.setRequestData(this.formData);
-  this.isLoading = true;
-  if (!formData.description || !formData.account_id || !formData.category_id) {
-    ElNotification({
-      message: "All fields are required",
-      title: "Fill the fields",
-      type: "info",
-    });
-    this.isLoading = false;
-    return;
-  }
-  axios.post("/transactions", formData).then(() => {
-    this.toggleShowAdd(false, false);
-    this.isLoading = false;
-    this.$inertia.reload();
-  });
-}
-
-function removeTransaction(id) {
-  if (this.isLoading) {
-    return;
-  }
-  this.isLoading = true;
-  this.$inertia.delete(`/transactions/${id}`, {
-    onSuccess() {
-      this.$inertia.reload();
-    },
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-.body-section {
-  background: white;
-  padding: 15px;
-}
-
-.el-table th {
-  font-weight: bolder;
-  color: #222 !important;
-}
-
-.section-actions {
-  display: flex;
-
-  .app-search__container {
-    width: 80%;
-    margin-right: 15px;
-  }
-
-  .action-buttons {
-    width: 20%;
-    display: flex;
-
-    button {
-      margin-left: auto;
-    }
-  }
-}
-</style>
diff --git a/resources/js/Pages/Journal/Transactions/cols.ts b/resources/js/Pages/Journal/Transactions/cols.ts
deleted file mode 100644
index c7066586..00000000
--- a/resources/js/Pages/Journal/Transactions/cols.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export default [
-    {
-        label: "Description",
-        name: "description",
-        width: 300,
-    },
-    {
-        label: "Account",
-        name: "account.name",
-    },
-    {
-        label: "Category",
-        name: "category",
-    },
-    {
-        label: "Date",
-        name: "date",
-        width: 200,
-    },
-    {
-        label: "Amount",
-        name: "total",
-    },
-    {
-        label: "",
-        name: "actions",
-        width: 300,
-        type: "custom",
-    },
-];