@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/rental/new-items-rent/BadgeStatusStock.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="badge-status-stock">
+        <span class="badge-chip bg-kit" v-if="itemRent.type == 4">Kit</span>
+        <span v-else v-for="(b, i) in badges" :key="i" class="badge-chip" :class="b.className"
+            :title="b.title || b.text" @click="onBadgeClick(b)">
+            {{ b.text }}
+        </span>
+    </div>
+</template>
+
+<script>
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "BadgeStatusStock",
+    props: {
+        itemRent: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        badges() {
+            const {
+                type,
+                statusRental,
+                statusStockItemsRent,
+                totalMaterialRented,
+                totalMaterialReturned,
+                serviceDone
+            } = this.itemRent || {};
+
+            const out = [];
+
+            if (type === 5) {
+                if (statusRental !== 2) {
+                    out.push({ text: "Material", className: "bg-material" });
+                } else {
+                    if (statusStockItemsRent === 5 || statusStockItemsRent === 7) {
+                        out.push({ text: "Mat… Realizado", className: "bg-material" });
+                    }
+                    if (totalMaterialRented === 0 && statusStockItemsRent !== 7) {
+                        out.push({ text: "Material Pendente", className: "bg-pending" });
+                    }
+                    if (totalMaterialRented !== totalMaterialReturned && statusStockItemsRent !== 7) {
+                        out.push({ text: "Mat… Pendente", className: "bg-pending" });
+                    }
+                }
+                return out;
+            }
+
+            if (type === 3) {
+                if (statusRental !== 2) {
+                    out.push({ text: "Serviço", className: "bg-pending" });
+                } else {
+                    if (!serviceDone) out.push({ text: "Serv… Pendente", className: "bg-pending" });
+                    else out.push({ text: "Serv… Realizado", className: "bg-service" });
+                }
+                return out;
+            }
+
+            if (statusStockItemsRent === 1) out.push({ text: "Não Reservado", className: "bg-available" });
+            if (statusStockItemsRent === 2) out.push({ text: "Reservado", className: "bg-reserved" });
+            if (statusStockItemsRent === 3) out.push({ text: "Locado", className: "bg-rent" });
+            if (statusStockItemsRent === 4) out.push({ text: "Locado Parcial", className: "bg-rent" });
+            if (statusStockItemsRent === 5) out.push({ text: "Retornado", className: "bg-returned" });
+            if (statusStockItemsRent === 6) out.push({ text: "Retornado Parcial", className: "bg-partial-returned" });
+            if (statusStockItemsRent === 7) out.push({ text: "Renovado", className: "bg-renewed" });
+
+            return out;
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        onBadgeClick() {
+            this.addEvent({ name: "totalizationAndHistory", data: this.itemRent });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.badge-status-stock {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.badge-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 10px;
+    font-size: 12px;
+    line-height: 1;
+    color: #fff;
+    border-radius: 9999px;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: transform 0.15s ease;
+}
+
+.bg-material {
+    background-color: #812805;
+}
+
+.bg-pending {
+    background-color: #F1BC31;
+}
+
+.bg-kit {
+    background-color: #525E7B;
+}
+
+.bg-service {
+    background-color: #df800d;
+}
+
+.bg-available {
+    background-color: #8fbc8f;
+}
+
+.bg-reserved {
+    background-color: #008b8b;
+}
+
+.bg-rent {
+    background-color: #00008b;
+}
+
+.bg-returned {
+    background-color: #b8860b;
+}
+
+.bg-partial-returned {
+    background-color: #b8860b;
+}
+
+.bg-renewed {
+    background-color: #1c1cc5;
+}
+</style>

package/src/components/modules/rental/new-items-rent/BadgeTotalization.vue

@@ -0,0 +1,224 @@
+<template>
+    <div class="badge-totalization">
+        <div class="bt-row">
+            <span class="bt-value bt-unit">
+                <small>Unit</small> {{ itemRent.unitValue | currency }}
+            </span>
+            <span class="bt-sep">|</span>
+            <span class="bt-value bt-total">
+                <span v-if="!itemRent.kitId">
+                    <small>Total</small> {{ formatCurrency(subtotal) }}
+                </span>
+                <span v-else>
+                    <small>Total</small> {{ itemRent.totalUnitValue | currency }}
+                </span>
+            </span>
+        </div>
+
+        <div v-if="hasDiscount" class="bt-row bt-discount-row">
+            <span class="bt-value bt-discount">
+                <small>Desc</small> {{ itemRent.totalUnitDiscount | currency }}
+            </span>
+            <span class="bt-sep">|</span>
+            <span class="bt-value bt-total-final title">
+                <small>Tot.</small> {{ formatCurrency(finalTotal) }}
+            </span>
+            <span v-if="percentageDiscount > 0" class="bt-pill bt-pill-discount">
+                {{ percentageDiscount.toFixed(1) }}%
+            </span>
+        </div>
+
+        <div class="bt-row bt-extras">
+            <span v-if="totalUnitCost > 0" class="bt-pill bt-pill-cost">
+                Custo {{ formatCurrency(totalUnitCost) }}
+            </span>
+            <span v-if="totalUnitInsurance > 0" class="bt-pill bt-pill-insurance">
+                Seguro {{ formatCurrency(totalUnitInsurance) }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "BadgeTotalization",
+    props: {
+        itemRent: {
+            type: Object,
+            default: () => ({
+                unitValue: 0,
+                quantity: 1,
+                unitDiscount: 0,
+                totalUnitDiscount: 0,
+                totalUnitValue: null,
+                percentageDiscount: 0,
+                unitCost: 0,
+                totalUnitCost: 0,
+                totalUnitInsurance: 0
+            })
+        }
+    },
+    computed: {
+        unitValue() {
+            const n = Number(this.itemRent?.unitValue ?? 0);
+            return Number.isNaN(n) ? 0 : n;
+        },
+        quantity() {
+            const n = Number(this.itemRent?.quantity ?? 0);
+            return Number.isNaN(n) ? 0 : n;
+        },
+        subtotal() {
+            return this.unitValue * this.quantity;
+        },
+        unitDiscount() {
+            const n = Number(this.itemRent?.unitDiscount ?? 0);
+            return Number.isNaN(n) ? 0 : n;
+        },
+        totalUnitDiscount() {
+            const val =
+                this.itemRent?.totalUnitDiscount != null
+                    ? Number(this.itemRent.totalUnitDiscount)
+                    : this.unitDiscount * this.quantity;
+            return Number.isNaN(val) ? 0 : Math.max(0, val);
+        },
+        percentageDiscount() {
+            const n = Number(this.itemRent?.percentageDiscount ?? 0);
+            return Number.isNaN(n) ? 0 : n;
+        },
+        explicitTotal() {
+            const t = this.itemRent?.totalUnitValue;
+            return t == null ? null : Number(t);
+        },
+        finalTotal() {
+            if (this.explicitTotal != null && !Number.isNaN(this.explicitTotal)) {
+                return this.explicitTotal;
+            }
+            return Math.max(0, this.subtotal - this.totalUnitDiscount);
+        },
+        hasDiscount() {
+            return (
+                this.unitDiscount > 0 ||
+                this.totalUnitDiscount > 0 ||
+                this.percentageDiscount > 0
+            );
+        },
+        totalUnitCost() {
+            const n = Number(this.itemRent?.totalUnitCost ?? 0);
+            return Number.isNaN(n) ? 0 : n;
+        },
+        totalUnitInsurance() {
+            const n = Number(this.itemRent?.totalUnitInsurance ?? 0);
+            return Number.isNaN(n) ? 0 : n;
+        }
+    },
+    methods: {
+        formatCurrency(v) {
+            try {
+                return new Intl.NumberFormat("pt-BR", {
+                    style: "currency",
+                    currency: "BRL",
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                }).format(Number(v) || 0);
+            } catch {
+                return `R$ ${(Number(v) || 0).toFixed(2)}`;
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.badge-totalization {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 6px;
+    font-family: inherit;
+    align-items: center;
+    text-align: center;
+    margin-right: 35px;
+}
+
+.bt-row {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.bt-sep {
+    opacity: 0.55;
+}
+
+.bt-value {
+    line-height: 1.1;
+    white-space: nowrap;
+}
+
+.bt-value small {
+    text-transform: none;
+    font-size: 10px;
+    opacity: 0.85;
+    margin-right: 4px;
+}
+
+.bt-unit {
+    font-size: 12px;
+}
+
+.bt-total {
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.bt-discount-row .bt-value {
+    font-size: 12px;
+}
+
+.bt-discount {
+    color: #FF4843;
+    font-weight: 700;
+}
+
+.bt-total-final {
+    color: #0f172a;
+    font-weight: 700;
+}
+
+.bt-extras {
+    gap: 6px;
+}
+
+.bt-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    font-size: 11px;
+    font-weight: 500;
+    white-space: nowrap;
+    user-select: none;
+    border: 1px solid transparent;
+}
+
+.bt-pill-cost {
+    background: #fee2e2;
+    color: #7f1d1d;
+    border-color: #fecaca;
+}
+
+.bt-pill-insurance {
+    background: #e0f2fe;
+    color: #0c4a6e;
+    border-color: #bae6fd;
+}
+
+.bt-pill-discount {
+    background: #FF4843;
+    color: #ffffff;
+    font-size: 10px;
+    padding: 2px 6px;
+}
+</style>