diff --git a/app/Console/Commands/FixLiabilitiesSpent.php b/app/Console/Commands/FixLiabilitiesSpent.php
new file mode 100644
index 00000000..43b1da49
--- /dev/null
+++ b/app/Console/Commands/FixLiabilitiesSpent.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Console\Commands;
+
+use DateTime;
+use App\Models\Team;
+use Illuminate\Console\Command;
+
+use App\Domains\Transaction\Services\TransactionService;
+
+class FixLiabilitiesSpent extends Command
+{
+
+    protected $signature = 'app:fix-liabilities-spent {teamId}';
+
+
+    protected $description = 'change counter account for liability transactions';
+
+    public function handle(TransactionService $transactionService)
+    {
+
+       $transactions = $transactionService->getCreditCardSpentTransactions($this->argument('teamId'));
+       dd($transactions->sum('total'));
+       foreach ($transactions as $transaction) {
+        $transactions->id;
+       }
+    }
+}
diff --git a/app/Domains/AppCore/Policies/FinanceAccountPolicy.php b/app/Domains/AppCore/Policies/FinanceAccountPolicy.php
index ca2115f1..6e6b0d2c 100644
--- a/app/Domains/AppCore/Policies/FinanceAccountPolicy.php
+++ b/app/Domains/AppCore/Policies/FinanceAccountPolicy.php
@@ -8,9 +8,9 @@
 
 class FinanceAccountPolicy
 {
-    public function show(User $user, Account $account)
+    public function show(User $user)
     {
-        return $user->current_team_id === $account->team_id
+        return $user->current_team_id
         ? Response::allow()
         : Response::deny('You do not own this account.');
     }
diff --git a/app/Domains/Journal/Actions/AccountStatementShow.php b/app/Domains/Journal/Actions/AccountStatementShow.php
index e5ccfa1a..4e7a6c0e 100644
--- a/app/Domains/Journal/Actions/AccountStatementShow.php
+++ b/app/Domains/Journal/Actions/AccountStatementShow.php
@@ -4,19 +4,20 @@
 
 use Illuminate\Foundation\Auth\User;
 use Illuminate\Support\Facades\Gate;
-use Insane\Journal\Contracts\AccountStatementShows;
-use Insane\Journal\Helpers\ReportHelper;
 use Insane\Journal\Models\Core\Account;
+use Insane\Journal\Helpers\ReportHelper;
+use Insane\Journal\Contracts\AccountStatementShows;
 
 class AccountStatementShow implements AccountStatementShows
 {
     public function show(User $user, string $reportName, ?int $accountId): array
     {
         $this->validate($user);
+        $filters= [
+            'account_id' => $accountId
+        ];
 
-        return ReportHelper::getGeneralLedger($user->current_team_id, $reportName, [
-            'account_id' => $accountId,
-        ]);
+        return ReportHelper::getGeneralLedger($user->current_team_id, $reportName, $filters);
     }
 
     public function validate(mixed $user)
diff --git a/app/Domains/Transaction/Services/TransactionService.php b/app/Domains/Transaction/Services/TransactionService.php
index 7e0cd347..8f5b4bf6 100644
--- a/app/Domains/Transaction/Services/TransactionService.php
+++ b/app/Domains/Transaction/Services/TransactionService.php
@@ -244,7 +244,6 @@ public static function getNetWorth($teamId, $startDate, $endDate)
         ", [
             'teamId' => $teamId,
             'monthDate' => $endDate
-            // 'detailTypes' => implode(',', AccountDetailType::ALL)
         ]);
     }
 
@@ -432,4 +431,37 @@ public static function getBareSplits($teamId, $options)
             ->whereBetween('date', [$options['startDate'], $options['endDate']])
             ->when(isset($options['limit']), fn ($query) => $query->limit($options['limit']));
     }
+
+    public function getCreditCardSpentTransactions(int $teamId) {
+        return  DB::table(DB::raw('categories g'))
+        ->selectRaw('SUM(transaction_lines.amount * transaction_lines.type) as total,
+          accounts.id account_id,
+          date_format(transactions.date, "%Y-%m-01") as date,
+          accounts.display_id account_display_id,
+          accounts.name account_name,
+          accounts.alias account_alias,
+          categories.name,
+          categories.id,
+          categories.display_id,
+          categories.alias,
+          g.display_id groupName,
+          g.alias groupAlias,
+          MONTH(transactions.date) as months'
+        )
+        ->groupByRaw('transactions.id')
+        ->join('categories', 'g.id', '=', 'categories.parent_id')
+        ->join('accounts', 'accounts.category_id', '=', 'categories.id')
+        ->join('transaction_lines', 'transaction_lines.account_id', '=', 'accounts.id')
+        ->join('transactions', fn ($q)=> $q->on('transactions.id',  'transaction_lines.transaction_id'))
+        ->orderByRaw('g.index,categories.index, accounts.index,accounts.number')
+        ->where(fn ($q) => $q->where([
+            'transactions.status' => Transaction::STATUS_VERIFIED,
+            'accounts.team_id' => $teamId
+          ])->orWhereNull('transactions.status')
+        )
+        ->where([
+            'g.display_id' => 'liabilities',
+          ])
+        ->get();
+      }
 }
diff --git a/components.d.ts b/components.d.ts
index c48e99ae..d237a09e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -30,6 +30,7 @@ declare module 'vue' {
     IMdiMinus: typeof import('~icons/mdi/minus')['default']
     IMdiPencil: typeof import('~icons/mdi/pencil')['default']
     IMdiPlus: typeof import('~icons/mdi/plus')['default']
+    IMdiPrinter: typeof import('~icons/mdi/printer')['default']
     IMdiSearch: typeof import('~icons/mdi/search')['default']
     IMdiSort: typeof import('~icons/mdi/sort')['default']
     IMdiStar: typeof import('~icons/mdi/star')['default']
diff --git a/package.json b/package.json
index efd00591..3be3e462 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "engines": {
-        "node": "^18.x"
+        "node": ">=18"
     },
     "scripts": {
         "dev": "vite",
diff --git a/resources/js/Pages/Journal/Accounts/Index.vue b/resources/js/Pages/Journal/Accounts/Index.vue
new file mode 100644
index 00000000..8672c396
--- /dev/null
+++ b/resources/js/Pages/Journal/Accounts/Index.vue
@@ -0,0 +1,195 @@
+<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
new file mode 100644
index 00000000..8670a5f6
--- /dev/null
+++ b/resources/js/Pages/Journal/Accounts/cols.ts
@@ -0,0 +1,28 @@
+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
new file mode 100644
index 00000000..15d14144
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Create.vue
@@ -0,0 +1,32 @@
+<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
new file mode 100644
index 00000000..aeff86fc
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Edit.vue
@@ -0,0 +1,50 @@
+<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
new file mode 100644
index 00000000..03e62fd8
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Index.vue
@@ -0,0 +1,147 @@
+<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
new file mode 100644
index 00000000..197433e4
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/InvoiceEmail.vue
@@ -0,0 +1,135 @@
+<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
new file mode 100644
index 00000000..b1f8cf97
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/InvoiceGrid.vue
@@ -0,0 +1,289 @@
+<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
new file mode 100644
index 00000000..52a22ede
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/InvoiceModal.vue
@@ -0,0 +1,214 @@
+<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
new file mode 100644
index 00000000..5154c98f
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTemplate.vue
@@ -0,0 +1,588 @@
+<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
new file mode 100644
index 00000000..7d0533cb
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalItem.vue
@@ -0,0 +1,65 @@
+<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
new file mode 100644
index 00000000..37ccdf46
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotalPayment.vue
@@ -0,0 +1,77 @@
+/* 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
new file mode 100644
index 00000000..617fbfb5
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/InvoiceTotals.vue
@@ -0,0 +1,195 @@
+/* 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
new file mode 100644
index 00000000..f0fc1d11
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/PropertyChargeModal.vue
@@ -0,0 +1,322 @@
+<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
new file mode 100644
index 00000000..67a220b8
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/SignatureModal.vue
@@ -0,0 +1,109 @@
+<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
new file mode 100644
index 00000000..f83b16a0
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/SignaturePad.vue
@@ -0,0 +1,66 @@
+<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
new file mode 100644
index 00000000..0b0121bb
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Partials/cols.ts
@@ -0,0 +1,73 @@
+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
new file mode 100644
index 00000000..005f3ccb
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Preview.vue
@@ -0,0 +1,100 @@
+<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
new file mode 100644
index 00000000..bd5e33cb
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/See.vue
@@ -0,0 +1,61 @@
+<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
new file mode 100644
index 00000000..29d5f500
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/Show.vue
@@ -0,0 +1,144 @@
+<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
new file mode 100644
index 00000000..1020a4d3
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/BusinessCard.vue
@@ -0,0 +1,43 @@
+<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
new file mode 100644
index 00000000..816048a3
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/Index.vue
@@ -0,0 +1,48 @@
+<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
new file mode 100644
index 00000000..db9c0bb1
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceClientCard.vue
@@ -0,0 +1,22 @@
+<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
new file mode 100644
index 00000000..6eab3e06
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceDetails.vue
@@ -0,0 +1,32 @@
+<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
new file mode 100644
index 00000000..de869389
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceHeader.vue
@@ -0,0 +1,70 @@
+<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
new file mode 100644
index 00000000..ac254f14
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/InvoiceSubHeader.vue
@@ -0,0 +1,36 @@
+<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
new file mode 100644
index 00000000..6b274e20
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/ReportSimple.vue
@@ -0,0 +1,43 @@
+<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
new file mode 100644
index 00000000..c69d6702
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/Simple.vue
@@ -0,0 +1,410 @@
+<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
new file mode 100644
index 00000000..ba614aab
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/SimpleMultiTheme.vue
@@ -0,0 +1,537 @@
+<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
new file mode 100644
index 00000000..f77db643
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/cols.ts
@@ -0,0 +1,16 @@
+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
new file mode 100644
index 00000000..cce5e022
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/printTemplates/index.ts
@@ -0,0 +1,49 @@
+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
new file mode 100644
index 00000000..0dba77d4
--- /dev/null
+++ b/resources/js/Pages/Journal/Invoices/utils.ts
@@ -0,0 +1,6 @@
+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
new file mode 100644
index 00000000..8c4465bc
--- /dev/null
+++ b/resources/js/Pages/Journal/Partials/AccountingSectionNav.vue
@@ -0,0 +1,17 @@
+<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
new file mode 100644
index 00000000..b82129a4
--- /dev/null
+++ b/resources/js/Pages/Journal/Payments/Index.vue
@@ -0,0 +1,186 @@
+<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
new file mode 100644
index 00000000..db220012
--- /dev/null
+++ b/resources/js/Pages/Journal/Payments/cols.ts
@@ -0,0 +1,43 @@
+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/Category.vue b/resources/js/Pages/Journal/Statements/Category.vue
new file mode 100644
index 00000000..c3a505e5
--- /dev/null
+++ b/resources/js/Pages/Journal/Statements/Category.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { reactive, computed, toRefs, ref, capitalize, watch } from "vue";
+import { router } from "@inertiajs/vue3";
+
+import { formatMoney } from "@/utils";
+import AppLayout from "@/Components/templates/AppLayout.vue";
+import { useServerSearch } from "@/composables/useServerSearchV2";
+import { usePrint } from "@/utils/usePrint";
+
+const props = defineProps({
+  categoryType: {
+    type: String,
+    default: "income",
+  },
+  categories: {
+    type: Array,
+  },
+  accounts: {
+    type: Array,
+  },
+  serverSearchOptions: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+
+const sectionTitle = computed(() => {
+  return `${capitalize(props.categoryType)} - Statement`;
+});
+
+const state = reactive({
+  isSummary: true,
+  isTransferModalOpen: false,
+  ledger: computed(() => {
+    return props.categories.ledgers;
+  }),
+  categoriesTotal: computed(() => {
+    return Object.values(props.categories.ledgers).reduce((total, category) => {
+      return total + parseFloat(category?.total || 0);
+    }, 0);
+  }),
+  transferAccount: null,
+});
+
+const lastParent = ref(null);
+const hasHeader = (category: Record<string, any>) => {
+  const parent = category.category;
+  if (parent && (!lastParent.value || lastParent.value.id !== parent.id)) {
+    lastParent.value = parent;
+    return true;
+  } else {
+    return false;
+  }
+};
+
+const { isSummary, ledger, categoriesTotal } = toRefs(state);
+
+const { serverSearchOptions } = toRefs(props);
+const { executeSearch, state: searchState } = useServerSearch(serverSearchOptions, {
+  manual: false,
+  defaultDates: false,
+});
+const filters = reactive({
+  property: null,
+  account: null,
+});
+
+const { customPrint } = usePrint("report");
+</script>
+
+<template>
+  <AppLayout :title="sectionTitle">
+    <template #header>
+      <div class="flex items-center justify-end py-1 mx-5 rounded-md">
+        <div class="flex space-x-2 font-bold text-gray-500 rounded-t-lg max-w-min">
+          <ElDatePicker
+            :model-value="[searchState.dates.startDate, searchState.dates.endDate]"
+            type="daterange"
+            unlink-panels
+            range-separator="To"
+            start-placeholder="Start date"
+            end-placeholder="End date"
+            size="large"
+            @update:model-value="
+              (event) => {
+                searchState.dates.startDate = event[0];
+                searchState.dates.endDate = event[1];
+              }
+            "
+          />
+          <BaseSelect
+            endpoint="/api/properties"
+            v-model="filters.property"
+            @update:model-value="searchState.filters.property = $event.id"
+            label="name"
+            track-by="id"
+            class="md:w-[200px]"
+            placeholder="Propiedad o Dueño"
+          />
+          <AccountSelect
+            endpoint="/api/accounts"
+            v-model="filters.account"
+            @update:mode-value="searchState.filters.account = $event.id"
+            class="md:w-[200px]"
+            multiple
+          />
+          <AppButton @click="executeSearch()"> Generar Reporte </AppButton>
+          <AppButton variant="neutral" @click="customPrint()">
+            <IMdiPrinter />
+          </AppButton>
+        </div>
+      </div>
+    </template>
+
+    <div
+      class="w-full py-10 mx-auto mt-16 mb-32 bg-white rounded-md shadow-md printable sm:px-6 lg:px-8 print:shadow-none print:w-screen print:absolute print:mt-0"
+      id="report"
+    >
+      <header class="text-center text-gray-500">
+        <h4 class="text-3xl font-bold capitalize">{{ sectionTitle }}</h4>
+        <h5 class="font-bold">Neatforms</h5>
+        <p>From date to date</p>
+      </header>
+
+      <div class="flex items-center justify-end space-x-2 print:hidden">
+        <section class="flex space-x-2">
+          <AppButton variant="secondary" @click="isSummary = true"> Summary </AppButton>
+          <AppButton variant="secondary" @click="isSummary = false"> Details </AppButton>
+        </section>
+      </div>
+      <div class="mt-10 items" :class="{ 'divide-y': isSummary }">
+        <div v-for="group in ledger" :key="group.id" class="py-2">
+          <div
+            v-if="hasHeader(group)"
+            class="w-full px-5 py-2 mt-5 font-bold bg-gray-200"
+          >
+            {{ group.alias ?? group.name }}
+            {{ group?.total }}
+          </div>
+          <div class="divide-y" v-if="!isSummary">
+            <div class="px-5 py-2 font-semibold bg-gray-100">
+              {{ group.alias ?? group.name }}
+            </div>
+            <article class="w-full px-5" v-for="categories in group.categories">
+              <header class="flex justify-between py-2">
+                <span class="font-semibold text-blue-500">
+                  {{ categories.alias ?? categories.name }}
+                </span>
+                <div class="space-x-4">
+                  <span class="font-bold text-success">
+                    {{ formatMoney(categories.income) }}</span
+                  >
+                  <span class="font-bold text-error">
+                    {{ formatMoney(categories.outcome) }}</span
+                  >
+                  <span> {{ formatMoney(categories?.total) }}</span>
+                  <!-- <AtButton @click="setPayment(account)"> Pay </AtButton> -->
+                </div>
+              </header>
+              <section>
+                <article class="w-full px-5" v-for="account in categories.accounts">
+                  <header class="flex justify-between py-2">
+                    <span class="font-semibold text-blue-500">
+                      {{ account.alias ?? account.name }}
+                    </span>
+                    <div class="space-x-4">
+                      <span class="font-bold text-success">
+                        {{ formatMoney(account.income) }}</span
+                      >
+                      <span class="font-bold text-error">
+                        {{ formatMoney(account.outcome) }}</span
+                      >
+                      <span> {{ formatMoney(account?.total) }}</span>
+                      <!-- <AtButton @click="setPayment(account)"> Pay </AtButton> -->
+                    </div>
+                  </header>
+                </article>
+              </section>
+            </article>
+          </div>
+          <div class="flex justify-between px-5 py-2" :class="{ 'border-t': !isSummary }">
+            <span class="font-bold"> {{ group.alias ?? group.name }} </span>
+            <div class="flex space-x-4">
+              <span class="font-bold text-success"> {{ formatMoney(group.income) }}</span>
+              <span class="font-bold text-error"> {{ formatMoney(group.outcome) }}</span>
+              <span class="font-bold"> {{ formatMoney(group?.total) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-between py-5 text-xl capitalize">
+          <span class="font-bold"> Total {{ categoryType }}s </span>
+          <section class="space-x-2">
+            <span v-if="categoryType == 'balance-sheet'">
+              {{ formatMoney(ledger.assets?.total) }} =
+              {{ formatMoney(ledger.liabilities?.total) }} +
+              {{ formatMoney(ledger.equity?.total) }}
+            </span>
+          </section>
+        </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/Statements/Index.vue b/resources/js/Pages/Journal/Statements/Index.vue
new file mode 100644
index 00000000..b439d8bc
--- /dev/null
+++ b/resources/js/Pages/Journal/Statements/Index.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import AppLayout from "@/Components/templates/AppLayout.vue";
+import { Link } from "@inertiajs/vue3";
+
+defineProps({
+  categories: {
+    type: Array,
+  },
+});
+</script>
+
+<template>
+  <AppLayout title="Reportes">
+    <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"
+      >
+        <div
+          class="mt-10 divide-y divide-base-lvl-1 text-body-1 items print:w-[210mm] print"
+        >
+          <div
+            v-for="(category, categoryName) in categories"
+            :key="categoryName"
+            class="flex justify-between py-2"
+          >
+            <div class="w-full">
+              <h4 class="text-xl font-bold text-primary">{{ category.label }}</h4>
+              <p class="text-body-1">{{ category.description }}</p>
+            </div>
+            <div class="w-full space-y-2">
+              <Link
+                :href="report.url"
+                v-for="(report, reportName) in category.reports"
+                :key="reportName"
+                class="block px-5 py-4 transition rounded-md cursor-pointer bg-gray-50 hover:bg-gray-100"
+              >
+                <h5 class="text-lg font-bold text-secondary">
+                  {{ report.label }}
+                </h5>
+                <p>{{ report.description }}</p>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<style lang="scss">
+@media print {
+  .recibo-body {
+    width: 210mm;
+    border: none;
+    overflow: hidden;
+    border-bottom: 2px dashed #ddd;
+    border-left: 1px dashed #ddd;
+    border-right: 1px dashed #ddd;
+    -webkit-print-color-adjust: exact;
+  }
+}
+</style>
diff --git a/resources/js/Pages/Journal/Statements/cols.ts b/resources/js/Pages/Journal/Statements/cols.ts
new file mode 100644
index 00000000..c469082f
--- /dev/null
+++ b/resources/js/Pages/Journal/Statements/cols.ts
@@ -0,0 +1,24 @@
+export default name => {
+    return [
+      {
+        label: name || "Account Name",
+        name: "display_id",
+        width: 200
+      },
+      {
+        label: "",
+        name: "name",
+        width: 300
+      },
+      {
+        label: "",
+        name: "description"
+      },
+      {
+        label: "",
+        name: "actions",
+        width: 300,
+        type: "custom"
+      }
+    ];
+  };
diff --git a/resources/js/Pages/Journal/Transactions/Index.vue b/resources/js/Pages/Journal/Transactions/Index.vue
new file mode 100644
index 00000000..20ba268f
--- /dev/null
+++ b/resources/js/Pages/Journal/Transactions/Index.vue
@@ -0,0 +1,273 @@
+<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
new file mode 100644
index 00000000..c7066586
--- /dev/null
+++ b/resources/js/Pages/Journal/Transactions/cols.ts
@@ -0,0 +1,30 @@
+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",
+    },
+];
diff --git a/resources/js/utils/usePrint.ts b/resources/js/utils/usePrint.ts
new file mode 100644
index 00000000..844ee97c
--- /dev/null
+++ b/resources/js/utils/usePrint.ts
@@ -0,0 +1,41 @@
+export const usePrint = (elementId?: string) => {
+    const print = (element = elementId, {
+      beforePrint,
+      delay
+    } = {
+      beforePrint: () => {},
+      delay: 0
+    }, title?: string) => {
+      const modalInvoice = document.getElementById(element)
+      const cloned = modalInvoice?.cloneNode(true)
+      let section = document.getElementById("print")
+      const $title = document.querySelector('title');
+      const oldTitle = $title?.text;
+
+      if ($title) {
+        $title.textContent = title ?? oldTitle;
+      }
+
+      if (!section) {
+         section  = document.createElement("div")
+         section.id = "print"
+         document.body.appendChild(section)
+      }
+
+      section.innerHTML = "";
+      if (cloned) {
+        section.appendChild(cloned);
+        beforePrint()
+        setTimeout(() => {
+          window.print();
+          if ($title) {
+            $title.textContent = oldTitle;
+          }
+        }, delay)
+      }
+    }
+
+    return {
+      customPrint: print
+    }
+  }