@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/finance/new-payable-receivable/PayableReceivableList.vue

@@ -0,0 +1,321 @@
+<template>
+    <div>
+        <div class="finance-list-row">
+            <div class="finance-list-left">
+                <slot></slot>
+            </div>
+
+            <div class="finance-list-right">
+                <TableTotalPerPage :totalRecords="200" />
+            </div>
+        </div>
+
+        <div class="finance-list">
+            <section v-for="(group, idx) in groups" :key="group.key" class="finance-list-day">
+                <header class="finance-list-day-header">
+                    <div class="finance-list-day-left">
+                        <b-form-checkbox v-if="idx === 0" v-model="selectAll" @change="select" />
+                        <span v-else class="finance-list-checkbox-spacer"></span>
+
+                        <span class="finance-list-daynum">{{ group.dayNumber }}</span>
+                        <span class="finance-list-weekday">{{ group.weekday }}</span>
+                    </div>
+
+                    <div class="finance-list-day-right">
+                        <slot name="day-actions" :dateKey="group.key" :items="group.items"></slot>
+                        <span @click="openModal('config')" v-if="idx === 0" class="finance-tools-icon">
+                            <i class="fa-solid fa-gear"></i>
+                        </span>
+                        <span v-else class="finance-tools-spacer"></span>
+                    </div>
+                </header>
+
+                <div>
+                    <PayableReceivableItem v-for="item in group.items" :key="item.id" :item="item"
+                        @select="$emit('select', item)" @edit="$emit('edit', item)" />
+                </div>
+            </section>
+
+            <PayableReceivableSummary :prevBalance="1500" :totalPagar="900" :totalReceber="600"
+                balanceType="positive" />
+
+            <div v-if="!groups.length" class="finance-list-empty">Nenhum registro encontrado</div>
+        </div>
+
+        <Modal title="Configuração" :width="500" :height="750" v-if="showModal('config')">
+            <PayableReceivableConfig />
+        </Modal>
+    </div>
+</template>
+
+<script>
+
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import PayableReceivableConfig from './PayableReceivableConfig.vue'
+import PayableReceivableSummary from "./PayableReceivableSummary.vue";
+import PayableReceivableItem from "./PayableReceivableItem.vue";
+import TableTotalPerPage from "@nixweb/nixloc-ui/src/component/shared/TableTotalPerPage.vue";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+    name: "FinanceList",
+    components: { Modal, PayableReceivableConfig, PayableReceivableItem, PayableReceivableSummary, TableTotalPerPage },
+    props: {
+        items: { type: Array, default: () => [] },
+        timezone: { type: String, default: "America/Sao_Paulo" },
+        sortAsc: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            selectAll: false,
+        };
+    },
+    computed: {
+        ...mapState("generic", ["selected"]),
+        ...mapGetters("generic", ["showModal"]),
+        selected: {
+            get() {
+                return this.$store.state.generic.selected;
+            },
+            set(value) {
+                this.addSelected(value);
+            },
+        },
+        groups() {
+            const norm = this.items.map(this.normalizeItem);
+            norm.sort((a, b) => b._d - a._d);
+
+            const map = new Map();
+            for (const it of norm) {
+                const key = this.keyFromDate(it._d);
+                if (!map.has(key)) map.set(key, []);
+                map.get(key).push(it);
+            }
+
+            const fmtWeek = new Intl.DateTimeFormat("pt-BR", {
+                weekday: "long",
+                timeZone: this.timezone,
+            });
+            const fmtFull = new Intl.DateTimeFormat("pt-BR", {
+                day: "2-digit",
+                month: "2-digit",
+                year: "numeric",
+                timeZone: this.timezone,
+            });
+
+            const arr = Array.from(map.entries()).map(([key, arr]) => {
+                const d = arr[0]._d;
+                const balance = arr.reduce((s, i) => s + this.signed(i), 0);
+                return {
+                    key,
+                    items: arr,
+                    balance,
+                    dayNumber: d.getDate(),
+                    weekday: fmtWeek.format(d),
+                    fullDate: fmtFull.format(d),
+                };
+            });
+
+            arr.sort((a, b) => new Date(b.key) - new Date(a.key));
+            return arr;
+        },
+    },
+    methods: {
+        ...mapMutations("generic", ["addSelected", "openModal"]),
+        select() {
+            this.addSelected([]);
+            if (this.selectAll) {
+                for (let i in this.items) {
+                    this.selected.push(this.items[i].id);
+                }
+            }
+        },
+        normalizeItem(raw) {
+            const item = { ...raw };
+            item.type = (item.type || item.tipo || "").toString().toLowerCase();
+            item.valor = Number(item.valor != null ? item.valor : item.amount || 0);
+
+            const v = item.vencimento || item.dataVenc || item.dueDate;
+            let d;
+            if (v instanceof Date) d = v;
+            else if (typeof v === "string") {
+                const m = v.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+                if (m) {
+                    const y = Number(m[1]),
+                        mo = Number(m[2]) - 1,
+                        day = Number(m[3]);
+                    d = new Date(y, mo, day);
+                } else d = new Date(v);
+            } else if (typeof v === "number") d = new Date(v);
+            else d = new Date(NaN);
+
+            const dLocal = isNaN(d)
+                ? new Date(NaN)
+                : new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+            item._d = dLocal;
+            return item;
+        },
+        keyFromDate(d) {
+            const y = d.getFullYear();
+            const m = String(d.getMonth() + 1).padStart(2, "0");
+            const day = String(d.getDate()).padStart(2, "0");
+            return `${y}-${m}-${day}`;
+        },
+        signed(item) {
+            const abs = Math.abs(Number(item.valor) || 0);
+            return item.type === "pagar" ? -abs : abs;
+        },
+        fmtCurrency(v) {
+            return new Intl.NumberFormat("pt-BR", {
+                style: "currency",
+                currency: "BRL",
+            }).format(v || 0);
+        },
+    },
+    emits: ["select", "edit", "tools-click"],
+};
+</script>
+
+<style scoped>
+.finance-list-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 10px 0px 10px;
+    margin-top: -10px;
+}
+
+.finance-list-left {
+    display: flex;
+    align-items: center;
+}
+
+.finance-list-right {
+    display: flex;
+    align-items: center;
+}
+
+.finance-list {
+    border: 1px solid #e6e8eb;
+    background-color: white;
+    border-radius: 12px;
+}
+
+.finance-list-day+.finance-list-day {
+    border-top: 1px solid #f0f2f4;
+}
+
+.finance-list-day-header,
+.finance-list-day-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+}
+
+.finance-list-day-left {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+}
+
+.finance-list-checkbox-spacer {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    margin-left: 25px;
+}
+
+.finance-list-daynum {
+    font-size: 20px;
+    font-weight: 800;
+    color: #7a8a9b;
+    width: 32px;
+    margin-left: 10px;
+}
+
+.finance-list-weekday {
+    font-size: 12px;
+    color: #93a1b3;
+    text-transform: lowercase;
+}
+
+.finance-list-fulldate {
+    font-size: 12px;
+    color: #6b7785;
+}
+
+.finance-list-ul {
+    list-style: none;
+    margin: 0;
+    padding: 0 12px;
+}
+
+.finance-list-empty {
+    padding: 24px;
+    text-align: center;
+    color: #8a94a6;
+}
+
+.finance-list-day-footer {
+    padding: 8px 14px 14px;
+    gap: 8px;
+}
+
+.finance-list-label {
+    color: #7a8a9b;
+    margin-right: 6px;
+}
+
+.finance-list-pos {
+    background: #ecfdf5;
+    border: 1px solid #a7f3d0 !important;
+    color: #065f46;
+    border-radius: 50px;
+    min-width: 150px;
+    margin-right: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6px 12px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.finance-list-neg {
+    color: #b42318;
+}
+
+.finance-list-day-add {
+    margin-left: auto;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 4px;
+}
+
+.finance-list-day-add i {
+    font-size: 14px;
+    color: #9aa7b6;
+}
+
+.finance-list-day-add:hover i {
+    color: #6f7f93;
+}
+
+
+.finance-tools-icon {
+    font-size: 20px;
+    cursor: pointer;
+    color: #7A8A9B;
+}
+
+
+.finance-tools-spacer {
+    display: inline-block;
+    min-height: 28px;
+    min-width: 92px;
+}
+</style>

package/src/components/modules/finance/new-payable-receivable/PayableReceivableSummary.vue

@@ -0,0 +1,179 @@
+<template>
+    <div>
+        <button class="finance-summary-btn" @click="toggleSummary" v-if="!open">
+            <i class="fa-solid fa-wallet"></i>
+        </button>
+
+        <transition name="slide-up">
+            <div v-if="open" class="finance-summary-panel">
+                <div class="finance-summary-header title">
+                    <span>Resumo Financeiro</span>
+                    <i class="fa-solid fa-xmark finance-summary-close" @click="toggleSummary"></i>
+                </div>
+
+                <div class="finance-summary-body">
+                    <div class="finance-summary-item">
+                        <span class="finance-summary-label">Saldo anterior</span>
+                        <span class="finance-summary-value" :class="{
+                            'finance-summary-red': balanceType === 'positive',
+                            'finance-summary-green': balanceType === 'negative'
+                        }">
+                            {{ fmtCurrency(prevBalance) }}
+                        </span>
+                    </div>
+
+                    <div class="finance-summary-item">
+                        <span class="finance-summary-label">Total a pagar</span>
+                        <span class="finance-summary-value finance-summary-negative">
+                            {{ fmtCurrency(totalPagar) }}
+                        </span>
+                    </div>
+
+                    <div class="finance-summary-item">
+                        <span class="finance-summary-label">Total a receber</span>
+                        <span class="finance-summary-value finance-summary-positive">
+                            {{ fmtCurrency(totalReceber) }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "FinanceSummary",
+    props: {
+        prevBalance: { type: Number, default: 0 },
+        totalPagar: { type: Number, default: 0 },
+        totalReceber: { type: Number, default: 0 },
+        balanceType: { type: String, default: "neutral" }
+    },
+    data() {
+        return { open: false };
+    },
+    methods: {
+        toggleSummary() {
+            this.open = !this.open;
+        },
+        fmtCurrency(v) {
+            return new Intl.NumberFormat("pt-BR", {
+                style: "currency",
+                currency: "BRL"
+            }).format(v || 0);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.finance-summary-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 26px;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    background: #D98621;
+    color: #fff;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.finance-summary-btn:hover {
+    background: #D98621;
+}
+
+.finance-summary-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 28px;
+    width: 350px;
+    border: 1px solid #e6e8eb;
+    border-radius: 12px;
+    background-color: white;
+    overflow: hidden;
+    animation: fadeIn 0.3s ease;
+}
+
+.finance-summary-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    font-weight: 600;
+    color: #333;
+}
+
+.finance-summary-close {
+    cursor: pointer;
+    font-size: 18px;
+    color: #979696;
+}
+
+.finance-summary-body {
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-left: 15px;
+    margin-right: 15px;
+    border-top: 1px solid #e6e8eb;
+}
+
+.finance-summary-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+}
+
+.finance-summary-label {
+    color: #7a8a9b;
+}
+
+.finance-summary-value {
+    font-weight: 700;
+}
+
+.finance-summary-positive {
+    color: green;
+}
+
+.finance-summary-negative {
+    color: #dc2626;
+}
+
+.finance-summary-red {
+    color: #dc2626;
+}
+
+.finance-summary-green {
+    color: green;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+    transition: all 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+</style>

package/src/components/modules/finance/payable-receivable/PayableReceivable.js

@@ -0,0 +1,57 @@
+export default class PayableReceivable {
+    constructor() {
+        this.id = "";
+        this.type = 1;
+        this.recurrence = 1;
+        this.recipient = { id: "", content: "" };
+        this.description = "";
+        this.document = "";
+        this.value = 0;
+        this.dueDate = "";
+        this.competenceDate = "";
+        this.typePayment = { id: "", content: "" };
+        this.chartOfAccounts = { id: "", content: "" };
+        this.bankAccount = { id: "", content: "" };
+        this.repeater = { id: "", content: "" };
+        this.recurrence = 0;
+        this.conciliationDate = "";
+        this.discount = 0;
+        this.fees = 0;
+        this.paid = false;
+        this.numberRentPayment = 0;
+        this.numberRentTeam = 0;
+        this.observation = "";
+        this.tokenBillet = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.type = data.type;
+        this.recurrence = data.recurrence;
+        this.recipient = { id: data.recipient.id, content: data.recipient.content };
+        this.description = data.description;
+        this.document = data.document;
+        this.value = data.value;
+        this.dueDate = data.dueDate;
+        this.competenceDate = data.competenceDate;
+        this.conciliationDate = data.conciliationDate;
+
+        if (data.typePayment.id)
+            this.typePayment = { id: data.typePayment.id, content: data.typePayment.content };
+
+        if (data.chartOfAccounts.id) {
+            this.chartOfAccounts = { id: data.chartOfAccounts.id, content: data.chartOfAccounts.content };
+        }
+
+        if (data.bankAccount.id)
+            this.bankAccount = { id: data.bankAccount.id, content: data.bankAccount.content };
+
+        this.conciliationDate = data.conciliationDate;
+        this.discount = data.discount;
+        this.fees = data.fees;
+        this.paid = data.paid;
+        this.numberRentPayment = data.numberRentPayment;
+        this.numberRentTeam = data.numberRentTeam;
+        this.observation = data.observation;
+        this.tokenBillet = data.tokenBillet;
+    }
+}