anahita-front/components/panel/SalesFactor.vue

<template>
    <div class="sales-factor">
        <div>
            <h2>{{ $t("salesFactor") }}</h2>
            <ul>
                <li v-for="(value, key) in data" :key="key">
                    <label>{{ $t(key) }}:</label>
                    <span>{{ value }}</span>
                </li>
            </ul>
        </div>
        <table>
            <thead>
                <tr>
                    <th v-for="(h, i) in headers" :key="i" v-text="$t(h)" />
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, i) in products" :key="i">
                    <td>{{ i + 1 }}</td>
                    <td>{{ item.product.uid }}</td>
                    <td>{{ item.product.title }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ $t('number') }}</td>
                    <td>{{ numberFormat(item.price) }}</td>
                    <td>{{ 100 - Math.round(((item.specialPrice || item.price) / item.price) * 100) }} %</td>
                    <td>{{ numberFormat(item.specialPrice || item.price) }}</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <div>
            <div>
                <div>
                    <label v-for="(word, i) in words" :key="i">
                        {{ $t(word) }}:
                    </label>
                </div>
                <label>{{ $t("debtor") }}:</label>
            </div>
            <ul>
                <li v-for="(value, key) in summary" :key="key">
                    <label>{{ $t(key) }}</label>
                    <span>{{ numberFormat(value) }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import init from '../../initialize/panel.js'
const { headers, words } = init()

const props = defineProps(['data'])

const { products, userID, _id, invoiceNumber, shippingAddress, createdAt } = props.data

const data = reactive({
    customerName: userID.firstName + ' ' + userID.lastName,
    phone: userID.phoneNumber,
    documentNumber: _id,
    customerCode: userID._id,
    fax: userID.cellNumber,
    factorNumber: invoiceNumber,
    address: shippingAddress,
    factorDate: new Date(createdAt).toLocaleDateString('fa-IR'),
});

const sumPrices = products.reduce((sum, item) => sum + item.price, 0)
const sumSpecialPrices = products.reduce((sum, item) => sum + item.specialPrice || item.price, 0)

const summary = reactive({
    netSum: sumPrices,
    discountPercent: 100 - Math.round((sumSpecialPrices / sumPrices) * 100),
    sheetDiscount: sumPrices - sumSpecialPrices,
    totalAmountFactor: sumSpecialPrices
});

const numberFormat = (number) =>
    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)

</script>

<style lang="scss">
.sales-factor {
    @apply w-[77.5rem] flex flex-col [&_*]:border-[#E5E5E5];

    &>div:nth-of-type(1) {
        @apply flex flex-col;

        &>h2 {
            @apply h-[2.8rem] bg-zinc-100 flex items-center justify-center;
            @apply text-[#333333] text-sm lg:text-base font-bold font-vazir;
        }

        ul {
            @apply grid grid-cols-3 grid-rows-3 py-8 px-6 gap-6 border text-xs lg:text-base;

            li {
                @apply flex items-center gap-2.5 font-vazir;

                label {
                    @apply text-[#333333] font-bold;
                }

                span {
                    @apply text-[#7F7F7F] font-medium;
                }

                &:nth-child(7) {
                    @apply col-span-2;
                }
            }
        }
    }

    table {
        thead {
            tr {
                @apply h-[2.8rem] bg-[#F2F2F2];

                th {
                    @apply border border-t-0;
                    @apply text-center text-[#333333] text-xs lg:text-base font-medium font-vazir;
                }

                th:nth-of-type(9) {
                    @apply text-right pr-3;
                }
            }
        }

        tbody {
            tr {
                @apply h-[2.8rem];

                td {
                    @apply border border-t-0;
                    @apply text-center text-[#333333] text-[0.7em] lg:text-sm font-medium font-vazir;
                }

                td:nth-of-type(3) {
                    @apply w-[22.5rem];
                }

                td:nth-of-type(9) {
                    @apply w-[13.4rem];
                }
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply w-[64.1rem] flex;

        label {
            @apply text-[#333333] text-xs lg:text-base font-bold font-vazir;
        }

        &>div {
            @apply w-[43.1rem] flex flex-col border border-t-0;

            &>div {
                @apply h-[6.9rem] p-6 flex flex-wrap gap-y-4 border-b;

                label {
                    @apply first:w-full last:mx-auto;
                }
            }

            &>label {
                @apply h-[10.2rem] flex items-end p-6;
            }
        }

        &>ul {
            @apply flex flex-col justify-end h-[17.1rem] border-l;

            li {
                @apply flex border-b first:border-t;

                * {
                    @apply w-[10.5rem] h-[3.3rem] flex items-center justify-center;
                }

                label {
                    @apply border-l;
                }

                span {
                    @apply text-[#333333] text-[0.7em] lg:text-sm font-medium font-vazir;
                }
            }
        }
    }
}
</style>