@nixweb/nixloc-ui 1.15.0 → 1.16.0

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

@@ -0,0 +1,448 @@
+<template>
+    <div class="finance-item-main" :class="rowClass">
+        <div class="finance-item-left">
+            <div class="finance-item-checkbox">
+                <b-form-checkbox v-model="selected" :value="item.id" />
+            </div>
+
+            <div class="finance-item-icon-wrap">
+                <div class="finance-item-icon" :style="'background:' + item.colorIcon">
+                    <i :class="item.icon"></i>
+                </div>
+            </div>
+
+            <div class="finance-div-item-badge">
+                <div class="finance-item-badge">
+                    <span class="finance-item-type" :class="item.type">{{ labelType }}</span>
+                </div>
+            </div>
+
+            <div class="finance-div-item-recipient">
+                <div class="finance-item-recipient finance-item-ellipsis title" :title="item.destinatario">
+                    {{ item.recipientName }}
+                </div>
+                <div class="finance-item-ellipsis">
+                    <span class="finance-item-description title">{{ item.description }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="finance-item-center">
+            <div class="finance-item-due-date">
+                <i class="fa-regular fa-calendar"></i>
+                <span>Vencimento</span>
+            </div>
+            <div class="finance-item-due-date">
+                {{ fmtDate(item._d || item.dueDate) }}
+                <span class="finance-item-dot" :class="dotClass" v-if="!isPaidOrReceived"></span>
+                <i v-else class="fa-solid fa-check finance-item-status-check"></i>
+                <span class="finance-item-status-label">{{ labelStatus }}</span>
+            </div>
+        </div>
+
+        <div class="finance-item-tags"
+            v-if="(item.tags && item.tags.length) || (item.tagsCustom && item.tagsCustom.length)">
+            <div v-for="tag in (item.tags || [])" :key="tag" class="finance-item-tag">
+                {{ tag }}
+            </div>
+            <div v-for="tag in (item.tagsCustom || [])" :key="tag.name || tag" class="finance-item-tag-custom"
+                :style="'background-color:' + (tag.color || '#111827')">
+                {{ tag.name || tag }}
+            </div>
+        </div>
+
+        <div class="finance-item-bank" v-if="item.logoBank">
+            <img class="finance-item-img-bank"
+                :src="'https://espaco.blob.core.windows.net/nixloc-bank-logo/' + item.logoBank" alt="Banco" />
+        </div>
+
+        <div class="finance-item-value">
+            <div class="finance-item-amount" :class="item.type">
+                {{ item.value | currency }}
+            </div>
+            <div class="finance-item-balance" :class="item.type">
+                {{ item.balance | currency }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { mapState, mapMutations } from "vuex";
+
+export default {
+    name: "PayableReceivableItem",
+    props: { item: { type: Object, required: true } },
+    computed: {
+        ...mapState("generic", ["selected"]),
+        selected: {
+            get() {
+                return this.$store.state.generic.selected;
+            },
+            set(value) {
+                this.addSelected(value);
+            },
+        },
+        labelType() {
+            return this.item.type === "pagar" ? "Pagar" : "Receber";
+        },
+        labelStatus() {
+            const map = { hoje: "Hoje", pendente: "Pendente", agendada: "Agendada", pago: "Pago", recebido: "Recebido", atrasado: "Atrasado" };
+            const s = (this.item.status || "").toLowerCase();
+            return map[s] || (s ? s[0].toUpperCase() + s.slice(1) : "Pendente");
+        },
+        dotClass() {
+            const s = (this.item.status || "").toLowerCase();
+            return { hoje: s === "hoje", pendente: s === "pendente", agendada: s === "agendada" };
+        },
+        isPaidOrReceived() {
+            const s = (this.item.status || "").toLowerCase();
+            return s === "pago" || s === "recebido";
+        },
+        rowClass() {
+            return { "finance-item-paid": this.item.status === "pago" || this.item.status === "recebido", "finance-item-late": this.item.status === "atrasado" };
+        },
+    },
+    methods: {
+        ...mapMutations("generic", ["addSelected"]),
+        fmtDate(d) {
+            const date = d instanceof Date ? d : new Date(d);
+            if (isNaN(date)) return "--/--/----";
+            return date.toLocaleDateString("pt-BR");
+        },
+    },
+    filters: {
+        currency(v) {
+            if (v === null || v === undefined || v === "") return "—";
+            try {
+                return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL", minimumFractionDigits: 2 }).format(Number(v));
+            } catch (e) {
+                return v;
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.finance-item-main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px 10px 0;
+    margin: 0 16px;
+    border-top: 1px solid #e6e8eb;
+    box-sizing: border-box;
+}
+
+.finance-item-checkbox {
+    margin: 0px 0px 27px 15px;
+}
+
+.finance-item-main>div {
+    min-width: 0;
+}
+
+.finance-item-paid {
+    opacity: 0.9;
+}
+
+.finance-item-late {
+    background: #fff7f7;
+}
+
+.finance-item-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1 1 320px;
+    min-width: 240px;
+}
+
+.finance-item-center {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    text-align: left;
+    flex: 0 0 180px;
+    min-width: 160px;
+}
+
+.finance-item-tags {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    max-width: 350px;
+    margin: 0 auto;
+    flex: 1 1 260px;
+    min-width: 200px;
+    overflow: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+}
+
+.finance-item-bank {
+    display: flex;
+    justify-content: center;
+    width: 40px;
+    flex: 0 0 40px;
+    flex-shrink: 0;
+}
+
+.finance-item-value {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    margin-left: auto;
+    text-align: right;
+}
+
+.finance-item-icon-wrap {
+    display: flex;
+    justify-content: flex-start;
+    width: 40px;
+    flex: 0 0 40px;
+}
+
+.finance-item-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.finance-div-item-badge {
+    width: 75px;
+    flex: 0 0 75px;
+}
+
+.finance-item-badge {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.finance-item-type {
+    font-size: 11px;
+    font-weight: 700;
+    border-radius: 50px;
+    padding: 0 7px;
+    text-transform: uppercase;
+    border: 1px solid transparent;
+}
+
+.finance-item-type.pagar {
+    background: #fef2f2;
+    border-color: #fecaca;
+    color: #dc2626;
+}
+
+.finance-item-type.receber {
+    background: #ecfdf5;
+    border: 1px solid #a7f3d0;
+    color: #065f46;
+}
+
+.finance-div-item-recipient {
+    flex: 1 1 0;
+    min-width: 0;
+    width: auto;
+    max-width: none;
+}
+
+.finance-item-recipient {
+    font-weight: 600;
+    color: #1f2937;
+}
+
+.finance-item-description {
+    color: #757575;
+    font-size: 12.5px;
+}
+
+.finance-item-due-date {
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #6b7785;
+}
+
+.finance-item-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.finance-item-dot.hoje {
+    background-color: #f97316;
+}
+
+.finance-item-dot.pendente {
+    background-color: #dc2626;
+}
+
+.finance-item-dot.agendada {
+    background-color: #7c3aed;
+}
+
+.finance-item-status-check {
+    font-size: 12px;
+    color: #1a7f37;
+}
+
+.finance-item-status-label {
+    font-size: 13px;
+    color: #6b7785;
+    font-weight: 500;
+    text-transform: capitalize;
+}
+
+.finance-item-img-bank {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+}
+
+.finance-item-tag {
+    font-size: 11px;
+    background: #f3f4f6;
+    color: #374151;
+    border: 1px solid #e6e7eb;
+    border-radius: 50px;
+    padding: 0 5px 0 8px;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.finance-item-tag-custom {
+    color: white;
+    font-size: 11px;
+    border-radius: 50px;
+    padding: 0 5px 0 8px;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.finance-item-amount {
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+}
+
+.finance-item-amount.pagar {
+    color: #dc2626;
+}
+
+.finance-item-amount.receber {
+    color: green;
+}
+
+.finance-item-balance {
+    font-size: 12px;
+}
+
+.finance-item-balance.pagar {
+    color: #dc2626;
+}
+
+.finance-item-balance.receber {
+    color: green;
+}
+
+.finance-item-ellipsis {
+    max-width: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 1024px) {
+    .finance-item-badge {
+        min-width: 64px;
+    }
+
+    .finance-item-center .finance-item-due-date {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 768px) {
+    .finance-item-left {
+        order: 1;
+    }
+
+    .finance-item-center {
+        order: 2;
+    }
+
+    .finance-item-tags {
+        order: 3;
+        flex: 1 1 100%;
+        white-space: normal;
+        overflow: hidden;
+        gap: 4px;
+    }
+
+    .finance-item-value {
+        order: 4;
+        flex: 1 1 100%;
+        text-align: right;
+        margin-left: 0;
+    }
+
+    .finance-item-bank {
+        order: 5;
+        flex: 0 0 32px;
+    }
+
+    .finance-div-item-recipient {
+        max-width: 100%;
+    }
+
+    .finance-item-main {
+        padding-right: 12px;
+        margin: 0 12px;
+    }
+}
+
+@media (max-width: 520px) {
+    .finance-item-badge {
+        display: none;
+    }
+
+    .finance-item-description {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        white-space: normal;
+    }
+
+    .finance-item-center {
+        min-width: 0;
+    }
+
+    .finance-item-img-bank {
+        width: 28px;
+        height: 28px;
+    }
+
+    .finance-item-main {
+        gap: 8px;
+    }
+}
+
+.finance-item-checkbox {
+    flex: 0 0 24px;
+    width: 24px;
+}
+</style>