@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/views/modules/finance/PayableReceivableList.vue

@@ -0,0 +1,636 @@
+<template>
+  <div>
+    <ViewTemplateWithTable :panel="panel" :templateList="templateList" :propsParam="propsParam">
+      <div slot="content-buttons">
+
+        <Button _key="btnPayableReceivableCreate" title="Pagar e Receber" classIcon="fas fa-plus-circle" type="primary"
+          size="small" eventName="productCreate" :clicked="create" />
+
+        <SideBar title="Pagar e Receber">
+          <div v-if="sideBar.open">
+            <PayableReceivableCreateUpdate :id="id" />
+          </div>
+        </SideBar>
+      </div>
+      <div slot="content-buttons-table-header">
+        <div class="side-by-side">
+          <div v-if="hasRule('Billet')">
+            <Button _key="btnOpenBillet" :title="'Boleto Bancário'" classIcon="fa-solid fa-barcode" type="primary"
+              size="small" :clicked="openBillet" />
+          </div>
+        </div>
+      </div>
+
+      <div slot="content-between-search-table">
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+            <div class="showAll">
+              <CheckboxSimple fieldTarget="showAll" title="Mostrar todas" v-model="showAll" />
+            </div>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+            <IncrementDecrement title="Ano" :disabled="disabled || isShowAll || isShowToday" fieldTarget="year"
+              :triggerEvent="true" :min="1" :initialValue="initialYear" v-model="initialYear" />
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+            <DateTime title="Vencimento" fieldTarget="period" format="DD/MM/YYYY" type="date" :range="true"
+              :confirm="true" confirmText="Filtrar" :disabled="isShowAll || isShowToday" placeholder :required="false"
+              v-model="period" />
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="1" xl="1">
+            <div class="div-btn-today text-center">
+              <div class="btn-today" :class="{ 'btn-today-selected': today, 'btn-today-disabled': isShowAll }"
+                @click="applyFilterToday">
+                <i v-if="!today" class="fa-solid fa-calendar-week"></i>
+                <i v-else class="fa-solid fa-circle-check icon-today-check"></i>
+                <span class="title-today">Hoje</span>
+              </div>
+            </div>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="7" xl="7">
+            <SelectOption :initialValue="initialMonth" :disabled="disabled || isShowAll || isShowToday"
+              :showButtonNext="false" fieldTarget="month" size="small" :width="112" :height="40" :options="options"
+              v-model="initialMonth" />
+          </b-col>
+        </b-row>
+      </div>
+      <div slot="content-filter-horizontal">
+        <div class="div-legend">
+          <b-row>
+            <b-col xs="12" sm="12" md="12" lg="3" xl="3">
+              <RadioGroup title="Tipo" fieldTarget="type" :options="[
+      { text: 'Pagar', value: 'Pagar' },
+      { text: 'Receber', value: 'Receber' },
+    ]" :disabled="isShowAll || isShowToday" v-model="type" />
+            </b-col>
+            <b-col xs="12" sm="12" md="12" lg="9" xl="9">
+              <RadioGroup title="Situação" fieldTarget="status" :options="[
+      { text: 'Pendente', value: 'Pendente' },
+      { text: 'Agendada', value: 'Agendada' },
+      { text: 'Pago', value: 'Pago' },
+      { text: 'Recebido', value: 'Recebido' },
+    ]" :disabled="isShowAll || isShowToday" v-model="status" />
+            </b-col>
+          </b-row>
+        </div>
+        <b-row>
+          <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+            <Select title="Tipo de Pagamento" :disabled="isShowAll || isShowToday" fieldTarget="typePaymentId"
+              :required="false" url="/api/v1/finance/type-payment/select-all" :showNewRegister="false">
+            </Select>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+            <Select title="Categoria" :disabled="isShowAll || isShowToday" fieldTarget="categoryId" :required="false"
+              url="api/v1/finance/chart-of-accounts/select-all" :showNewRegister="false">
+            </Select>
+          </b-col>
+          <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+            <Select title="Conta Bancária" :disabled="isShowAll || isShowToday" fieldTarget="bankAccountId"
+              :required="false" url="api/v1/finance/bank-account/select-all" :showNewRegister="false">
+            </Select>
+          </b-col>
+        </b-row>
+      </div>
+    </ViewTemplateWithTable>
+
+    <Modal title="Tem certeza que deseja excluir?" :width="500" v-show="showModal('removeRent')">
+      <Alert type="warning">
+        <span>
+          Atenção, todos os registros relacionados também serão
+          excluídos/cancelados, esta ação é irreversível!
+        </span>
+      </Alert>
+      <Confirmation :isModal="false" title="Deseja excluir?" type="danger" :confirmed="remove" />
+    </Modal>
+    <Modal :title="title" :width="900" :onHideModal="onHideModal" v-show="showModal('openBillet')">
+      <Billet origin="payableReceivable" :selected="selected" v-if="showModalBillet" v-model="selectedOption" />
+    </Modal>
+
+    <PrintPreview v-if="printFinance" module="Finance" :payableReceivableId="payableReceivableId"
+      :onHideModal="onHideModal">
+    </PrintPreview>
+  </div>
+</template>
+
+<script>
+
+
+import ViewTemplateWithTable from "@nixweb/nixloc-ui/src/component/template/ViewTemplateWithTable.vue";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import SideBar from "@nixweb/nixloc-ui/src/component/forms/SideBar";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import SelectOption from "@nixweb/nixloc-ui/src/component/shared/SelectOption.vue";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import IncrementDecrement from "@nixweb/nixloc-ui/src/component/forms/IncrementDecrement.vue";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple";
+import PrintPreview from '../../../components/modules/adm/document/PrintPreview.vue'
+
+import Billet from '../../../components/modules/billing/billet/Billet.vue'
+import PayableReceivableCreateUpdate from "../../../components/modules/finance/payable-receivable/PayableReceivableCreateUpdate.vue";
+
+import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
+
+export default {
+  name: "PayableReceivableListView",
+  components: {
+    ViewTemplateWithTable,
+    Confirmation,
+    Alert,
+    Modal,
+    SideBar,
+    Button,
+    DateTime,
+    ScrollBar,
+    PayableReceivableCreateUpdate,
+    SelectOption,
+    Select,
+    IncrementDecrement,
+    RadioGroup,
+    CheckboxSimple, Billet, PrintPreview, PrintPreview
+  },
+  data() {
+    return {
+      id: "",
+      selectedOption: 0,
+      panel: {
+        module: "Financeiro",
+        title: "Pagar e Receber",
+        showFilter: true,
+        showSearch: true,
+        showButtons: true,
+      },
+      templateList: {
+        urlGetApi: "/api/v1/finance/payable-receivable/get-all",
+        urlDeleteAllApi: "/api/v1/finance/payable-receivable/delete",
+        showChecks: true,
+        headerTable: [
+          {
+            field: "typeName",
+            title: "Tipo",
+            type: "class",
+            fieldComparison: "typeName",
+            classCssTitle: "text-center",
+            classCssBody: [
+              {
+                classCss: "text-center badge badge-danger",
+                fieldComparison: "Pagar",
+              },
+              {
+                classCss: "text-center badge badge-primary",
+                fieldComparison: "Receber",
+              },
+            ],
+          },
+          {
+            title: "Vencimento",
+            field: "dueDate",
+            type: "text",
+            iconSearch: true,
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+          },
+          {
+            field: "recipientName",
+            fieldSecond: "description",
+            title: "Descrição",
+            type: "link",
+            eventName: "payableReceivableUpdate",
+            iconSearch: true,
+          },
+          {
+            field: "status",
+            type: "html",
+          },
+          {
+            field: "documents",
+            type: "html",
+            classCssBody: "text-center",
+          },
+          {
+            field: "tags",
+            type: "html",
+            classCssBody: "text-center",
+          },
+          {
+            title: "Valor",
+            field: "value",
+            classCssTitle: "text-center",
+            classCssBody: "text-center",
+            type: "currency",
+          },
+          {
+            type: "button",
+            typeButton: "dropdown",
+            classCssBody: "text-center",
+            styleBody: "width: 80px;",
+            button: {
+              title: "Mais...",
+              type: "info",
+              classIcon: "fa-solid fa-chevron-down",
+              size: "small",
+              items: [
+                {
+                  title: "Recibo",
+                  classIcon: "fa-solid fa-file-invoice-dollar",
+                  eventName: "receiptFinance",
+                  hr: false,
+                },
+              ],
+            },
+          },
+        ],
+      },
+      propsParam: {
+        today: false,
+        year: 20,
+        month: 20,
+      },
+      options: [
+        {
+          title: "Janeiro",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 1,
+        },
+        {
+          title: "Fevereiro",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 2,
+        },
+        {
+          title: "Março",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 3,
+        },
+        {
+          title: "Abril",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 4,
+        },
+        {
+          title: "Maio",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 5,
+        },
+        {
+          title: "Junho",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 6,
+        },
+        {
+          title: "Julho",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 7,
+        },
+        {
+          title: "Agosto",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 8,
+        },
+        {
+          title: "Setembro",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 9,
+        },
+        {
+          title: "Outubro",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 10,
+        },
+        {
+          title: "Novembro",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 11,
+        },
+        {
+          title: "Dezembro",
+          titleSize: "13",
+          icon: "fa-solid fa-calendar-day",
+          value: 12,
+        },
+      ],
+      initialYear: 0,
+      initialMonth: 0,
+      period: ["", ""],
+      type: "",
+      status: "",
+      today: false,
+      year: 0,
+      month: 0,
+      yearCurrent: 0,
+      monthCurrent: 0,
+      showAll: false,
+      showModalBillet: false,
+      printFinance: false,
+      payableReceivableId: ""
+    };
+  },
+  created() {
+    var dateObj = new Date();
+    var year = dateObj.getFullYear();
+    var month = dateObj.getUTCMonth() + 1;
+
+    this.yearCurrent = year;
+    this.monthCurrent = month;
+
+    this.initialYear = year;
+    this.initialMonth = month;
+
+    this.year = year;
+    this.month = month;
+
+    this.propsParam.year = year;
+    this.propsParam.month = month;
+
+    this.loadFilterStorage(year, month);
+  },
+  beforeDestroy() {
+    this.cleanTags();
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event", "paramsFilterStorage"]),
+    ...mapState("generic", ["sideBar", "selectStatic", "selected"]),
+    ...mapGetters("user", ["hasRule"]),
+    disabled() {
+      if (this.period[0] == "") return false;
+      if (this.period.length == 0) return false;
+      return true;
+    },
+    isShowAll() {
+      if (this.showAll) return true;
+      return false;
+    },
+    isShowToday() {
+      if (this.today) return true;
+      return false;
+    },
+    title() {
+      if (this.selectedOption == 1) return "Emitir Boleto";
+      if (this.selectedOption == 2) return "Alterar Boleto";
+      if (this.selectedOption == 3) return "Cancelar Boleto";
+      return "Seleciona uma opção para boleto bancário";
+    }
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "openModal",
+      "openSideBar",
+      "hideModal",
+      "addEvent",
+      "addFilter",
+      "removeLoading",
+      "cleanTags",
+      "executedSearch",
+      "cleanSelected"
+    ]),
+    ...mapActions("generic", ["deleteAllApi"]),
+    create() {
+      this.id = "";
+      this.openSideBar();
+      this.removeLoading(["btnPayableReceivableCreate"]);
+    },
+    remove() {
+      let params = {
+        url: this.templateList.urlDeleteAllApi,
+        selected: [this.id],
+      };
+
+      this.deleteAllApi(params).then((response) => {
+        if (response.success) {
+          this.hideModal("removeRent");
+        }
+        this.removeLoading(["confirm"]);
+      });
+    },
+    openBillet() {
+      this.showModalBillet = true;
+      this.openModal("openBillet");
+      this.removeLoading(["btnOpenBillet"]);
+    },
+    onHideModal() {
+      this.showModalBillet = false;
+      this.printFinance = false;
+    },
+    applyFilterToday() {
+      if (!this.showAll) {
+        this.today = !this.today;
+        let obj = { fieldTarget: "today", value: "hoje" };
+        this.addFilter(obj);
+        this.executedSearch();
+
+        let self = this;
+        setTimeout(function () {
+          self.removeLoading(["btnFilterToday"]);
+        }, 300);
+      }
+    },
+    loadFilterStorage(year, month) {
+      var yearStorage = this.paramsFilterStorage(this.$route.name, 'year', year);
+      this.initialYear = yearStorage;
+      this.year = yearStorage;
+
+      var monthStorage = this.paramsFilterStorage(this.$route.name, 'month', month);
+      this.initialMonth = monthStorage;
+      this.month = monthStorage;
+
+      var showAllStorage = this.paramsFilterStorage(this.$route.name, 'showAll', false);
+      this.showAll = showAllStorage;
+
+      var period = this.paramsFilterStorage(this.$route.name, 'period', []);
+      if (period.length > 0) this.period = [period.start, period.end];
+
+
+      this.type = this.paramsFilterStorage(this.$route.name, 'type', "");
+
+
+
+
+
+    }
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "removeRent") {
+          this.id = event.data.id;
+          this.openModal("removeRent");
+        }
+        if (event.name == "payableReceivableUpdate") {
+          this.id = event.data.id;
+          this.openSideBar();
+        }
+
+        if (event.name == "canceledBillet" || event.name == "updatedBillet" || event.name == "generatedPdfBillet") {
+          this.cleanSelected();
+          this.hideModal();
+          this.showModalBillet = false;
+        }
+
+        if (event.name == "receiptFinance") {
+          this.printFinance = true;
+          this.payableReceivableId = event.data.id;
+        }
+
+        if (event.name == "emailSent") {
+          this.printFinance = false;
+        }
+      },
+      deep: true,
+    },
+    showAll: {
+      handler(value) {
+        if (!value) this.addEvent({ name: "tagRemoved", data: "showAll" });
+      },
+      deep: true,
+    },
+    initialYear: {
+      handler(value) {
+        this.propsParam.year = value;
+        if (value == this.yearCurrent) this.addEvent({ name: "tagRemoved", data: "year" });
+      },
+      deep: true,
+    },
+    initialMonth: {
+      handler(value) {
+        this.propsParam.month = value;
+        if (value == this.monthCurrent) this.addEvent({ name: "tagRemoved", data: "month" });
+      },
+      deep: true,
+    },
+    today: {
+      handler(value) {
+        this.propsParam.today = value;
+        if (!value) this.addEvent({ name: "tagRemoved", data: "today" });
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style>
+.badge-default {
+  background-color: #eeeeee;
+  font-size: 13px !important;
+  border-radius: 50px !important;
+}
+
+.box-finance {
+  width: 10px;
+  height: 10px;
+  border-radius: 50px;
+  margin-right: 8px;
+}
+
+.div-btn-today {
+  margin-top: 38px;
+  width: 130px;
+}
+
+.finance-delay {
+  background-color: red;
+}
+
+.finance-received {
+  color: #009183;
+  margin-right: 5px;
+}
+
+.finance-paid {
+  color: #834140;
+  margin-right: 5px;
+}
+
+.finance-today {
+  background-color: #ff8a1b;
+}
+
+.finance-scheduled {
+  background-color: #3d4eae;
+}
+
+.payable {
+  color: red;
+}
+
+.receivable {
+  color: darkblue;
+}
+
+.paid {
+  color: #834140;
+}
+
+.received {
+  color: #009183;
+}
+
+.div-legend {
+  margin-top: 15px;
+}
+
+.magin {
+  margin-right: 15px;
+}
+
+.div-tag {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.showAll {
+  margin-bottom: 10px;
+}
+
+.btn-today {
+  cursor: pointer;
+  border: 1px solid #e5e4e8;
+  background-color: white;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 7px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 38px;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%)
+}
+
+.btn-today-selected {
+  background-color: white;
+  border-color: #F1BC31;
+}
+
+.btn-today-disabled {
+  opacity: 0.4;
+}
+
+.title-today {
+  margin-left: 5px;
+}
+
+.icon-today-check {
+  color: #F1BC31;
+}
+</style>

package/src/views/modules/finance/ReportFinance.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <ViewTemplateReportList :panel="panel" :reports="reports" />
+  </div>
+</template>
+
+<script>
+import ViewTemplateReportList from "@nixweb/nixloc-ui/src/component/template/ViewTemplateReportList";
+
+export default {
+  name: "ReportFinanceStockView",
+  components: { ViewTemplateReportList },
+  data() {
+    return {
+      panel: {
+        module: "Financeiro",
+        title: "Relatório",
+        showFilter: false,
+        showSearch: true,
+        showButtons: false,
+      },
+      reports: {
+        default: [
+          {
+            name: "Receita x Despesa de Locação",
+            description: "Analise qual custo de cada locação...",
+            routeName: "reportRentPerformance",
+          },
+          {
+            name: "Pagar e Receber",
+            description: "Filtre as contas por data de emissão, vencimento, tipo e outros critérios...",
+            routeName: "reportPayableReceivable",
+          },
+        ],
+        saved: [],
+      },
+    };
+  },
+};
+</script>