ADD: Warehouse inventory management dashboard

- Add WarehouseItemService.js — API client for all warehouse item endpoints (items CRUD, transactions, stock queries) - Add WarehouseService.js — API client for warehouse location management - Add ListWarehouseItems.vue — item catalogue table with inline create/edit dialog and bilingual unit picker - Add WarehouseItemStockView.vue — per-item stock dashboard showing total + per-warehouse breakdown, IN/OUT transaction dialog with reason presets, inline transaction history with delete - Add ListWarehouseItemTransactions.vue — full transaction history with filter panel (item, warehouse, type, date range) - Add ListWarehouses.vue — warehouse location management with create/edit dialogs - Update AppMenu.vue — add 'مدیریت انبار' menu group with 3 items - Update router/index.js — register 4 new warehouse management routes
2026-08-11 20:09:31 +03:30
parent 7421896805
commit 703df418ce
8 changed files with 2033 additions and 8 deletions
@@ -0,0 +1,537 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter, useRoute } from 'vue-router';
+import { useConfirm } from 'primevue/useconfirm';
+import ConfirmPopup from 'primevue/confirmpopup';
+import { WarehouseItemService } from '@/service/WarehouseItemService';
+
+const toast = useToast();
+const router = useRouter();
+const route = useRoute();
+const confirm = useConfirm();
+
+const items = ref([]);
+const totalCount = ref(0);
+const page = ref(Number(route.query.page) || 1);
+const perPage = ref(Number(route.query.per_page) || 20);
+const searchPhrase = ref(route.query.search || '');
+const loading = ref(false);
+
+// Create/Edit dialog
+const showDialog = ref(false);
+const editMode = ref(false);
+const submitting = ref(false);
+const selectedItem = ref(null);
+
+const form = ref({
+    nameFa: '',
+    nameEn: '',
+    code: '',
+    unitFa: '',
+    unitEn: '',
+    category: '',
+    description: ''
+});
+
+// ─── Common units ─────────────────────────────────────────────────────────────
+const UNITS = [
+    { fa: 'عدد', en: 'Piece' },
+    { fa: 'تن', en: 'Ton' },
+    { fa: 'کیلوگرم', en: 'Kilogram' },
+    { fa: 'متر', en: 'Meter' },
+    { fa: 'متر مربع', en: 'Square Meter' },
+    { fa: 'متر مکعب', en: 'Cubic Meter' },
+    { fa: 'لیتر', en: 'Liter' },
+    { fa: 'بسته', en: 'Package' },
+    { fa: 'رول', en: 'Roll' },
+    { fa: 'جعبه', en: 'Box' },
+    { fa: 'کیسه', en: 'Bag' },
+    { fa: 'پالت', en: 'Pallet' },
+];
+
+let searchTimeout = null;
+
+onMounted(() => {
+    loadData();
+});
+
+watch(searchPhrase, (val) => {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+        router.push({ query: { ...route.query, search: val || undefined, page: 1 } });
+    }, 400);
+});
+
+watch(() => route.query, () => {
+    page.value = Number(route.query.page) || 1;
+    perPage.value = Number(route.query.per_page) || 20;
+    searchPhrase.value = route.query.search || '';
+    loadData();
+}, { deep: true });
+
+const loadData = async () => {
+    loading.value = true;
+    try {
+        const result = await WarehouseItemService.listItems({
+            page: page.value,
+            limit: perPage.value,
+            search: searchPhrase.value || undefined
+        });
+        items.value = result.items || [];
+        totalCount.value = result.total || 0;
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'خطا', detail: 'خطا در بارگذاری اطلاعات', life: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const onPageChange = (event) => {
+    router.push({ query: { ...route.query, page: event.page + 1, per_page: event.rows } });
+};
+
+const openCreateDialog = () => {
+    editMode.value = false;
+    selectedItem.value = null;
+    form.value = { nameFa: '', nameEn: '', code: '', unitFa: '', unitEn: '', category: '', description: '' };
+    showDialog.value = true;
+};
+
+const openEditDialog = (item) => {
+    editMode.value = true;
+    selectedItem.value = item;
+    form.value = {
+        nameFa: item.nameFa,
+        nameEn: item.nameEn,
+        code: item.code || '',
+        unitFa: item.unitFa,
+        unitEn: item.unitEn,
+        category: item.category || '',
+        description: item.description || ''
+    };
+    showDialog.value = true;
+};
+
+const onUnitSelect = (unit) => {
+    form.value.unitFa = unit.fa;
+    form.value.unitEn = unit.en;
+};
+
+const submitForm = async () => {
+    if (!form.value.nameFa || !form.value.nameEn || !form.value.unitFa || !form.value.unitEn) {
+        toast.add({ severity: 'warn', summary: 'توجه', detail: 'لطفاً تمام فیلدهای ضروری را پر کنید', life: 3000 });
+        return;
+    }
+    submitting.value = true;
+    try {
+        if (editMode.value) {
+            await WarehouseItemService.updateItem(selectedItem.value._id, form.value);
+            toast.add({ severity: 'success', summary: 'موفق', detail: 'آیتم با موفقیت ویرایش شد', life: 3000 });
+        } else {
+            await WarehouseItemService.createItem(form.value);
+            toast.add({ severity: 'success', summary: 'موفق', detail: 'آیتم با موفقیت ایجاد شد', life: 3000 });
+        }
+        showDialog.value = false;
+        loadData();
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'خطا', detail: e.response?.data?.message || 'عملیات ناموفق بود', life: 4000 });
+    } finally {
+        submitting.value = false;
+    }
+};
+
+const confirmDelete = (item, event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: `آیا از غیرفعال‌سازی "${item.nameFa}" اطمینان دارید؟`,
+        icon: 'pi pi-exclamation-triangle',
+        rejectProps: { label: 'خیر', severity: 'secondary', outlined: true },
+        acceptProps: { label: 'بله', severity: 'danger' },
+        accept: async () => {
+            try {
+                await WarehouseItemService.deleteItem(item._id);
+                toast.add({ severity: 'success', summary: 'موفق', detail: 'آیتم غیرفعال شد', life: 3000 });
+                loadData();
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'خطا', detail: 'عملیات ناموفق بود', life: 3000 });
+            }
+        }
+    });
+};
+
+const viewStock = (itemId) => {
+    router.push(`/warehouse-items/stock/${itemId}`);
+};
+</script>
+
+<template>
+    <ConfirmPopup />
+    <div class="warehouse-items-page">
+
+        <!-- ─── Header ─────────────────────────────────────────────────── -->
+        <div class="page-header">
+            <div class="header-content">
+                <div class="header-icon">
+                    <i class="pi pi-box"></i>
+                </div>
+                <div>
+                    <h1 class="page-title">اقلام انبار</h1>
+                    <p class="page-subtitle">مدیریت محصولات و مصالح انبار</p>
+                </div>
+            </div>
+            <div class="header-actions">
+                <Button
+                    label="افزودن قلم جدید"
+                    icon="pi pi-plus"
+                    class="create-btn"
+                    @click="openCreateDialog"
+                />
+            </div>
+        </div>
+
+        <!-- ─── Main card ───────────────────────────────────────────────── -->
+        <div class="card main-card">
+            <DataTable
+                :value="items"
+                :loading="loading"
+                dataKey="_id"
+                :paginator="true"
+                :rows="perPage"
+                :total-records="totalCount"
+                lazy
+                @page="onPageChange($event)"
+                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                :rowsPerPageOptions="[20, 40, 80]"
+                currentPageReportTemplate="نمایش {first} تا {last} از {totalRecords} قلم"
+                stripedRows
+                responsiveLayout="scroll"
+            >
+                <template #header>
+                    <div class="table-header">
+                        <span class="table-title">لیست اقلام</span>
+                        <IconField>
+                            <InputIcon><i class="pi pi-search" /></InputIcon>
+                            <InputText v-model="searchPhrase" placeholder="جستجو..." class="search-input" />
+                        </IconField>
+                    </div>
+                </template>
+
+                <template #empty>
+                    <div class="empty-state">
+                        <i class="pi pi-inbox empty-icon"></i>
+                        <p>هیچ قلمی یافت نشد</p>
+                        <Button label="افزودن اولین قلم" icon="pi pi-plus" @click="openCreateDialog" />
+                    </div>
+                </template>
+
+                <Column field="code" header="کد" style="width:8%">
+                    <template #body="{ data }">
+                        <span class="code-badge" v-if="data.code">{{ data.code }}</span>
+                        <span class="text-muted" v-else>—</span>
+                    </template>
+                </Column>
+
+                <Column field="nameFa" header="نام فارسی" sortable style="width:18%">
+                    <template #body="{ data }">
+                        <div class="item-name">
+                            <span class="name-fa">{{ data.nameFa }}</span>
+                        </div>
+                    </template>
+                </Column>
+
+                <Column field="nameEn" header="نام انگلیسی" sortable style="width:18%">
+                    <template #body="{ data }">
+                        <span class="name-en">{{ data.nameEn }}</span>
+                    </template>
+                </Column>
+
+                <Column header="واحد" style="width:12%">
+                    <template #body="{ data }">
+                        <span class="unit-badge">{{ data.unitFa }} / {{ data.unitEn }}</span>
+                    </template>
+                </Column>
+
+                <Column field="category" header="دسته‌بندی" style="width:14%">
+                    <template #body="{ data }">
+                        <span v-if="data.category" class="category-chip">{{ data.category }}</span>
+                        <span v-else class="text-muted">—</span>
+                    </template>
+                </Column>
+
+                <Column field="isActive" header="وضعیت" style="width:9%">
+                    <template #body="{ data }">
+                        <Tag :severity="data.isActive ? 'success' : 'danger'"
+                             :value="data.isActive ? 'فعال' : 'غیرفعال'" />
+                    </template>
+                </Column>
+
+                <Column header="عملیات" style="width:21%">
+                    <template #body="{ data }">
+                        <div class="action-buttons">
+                            <Button
+                                icon="pi pi-chart-bar"
+                                outlined
+                                rounded
+                                severity="info"
+                                v-tooltip.top="'مشاهده موجودی'"
+                                @click="viewStock(data._id)"
+                            />
+                            <Button
+                                icon="pi pi-pencil"
+                                outlined
+                                rounded
+                                v-tooltip.top="'ویرایش'"
+                                @click="openEditDialog(data)"
+                            />
+                            <Button
+                                icon="pi pi-ban"
+                                outlined
+                                rounded
+                                severity="danger"
+                                v-tooltip.top="'غیرفعال‌سازی'"
+                                @click="confirmDelete(data, $event)"
+                            />
+                        </div>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+
+        <!-- ─── Create/Edit Dialog ──────────────────────────────────────── -->
+        <Dialog
+            v-model:visible="showDialog"
+            :header="editMode ? 'ویرایش قلم انبار' : 'افزودن قلم جدید'"
+            :style="{ width: '580px' }"
+            modal
+            :dir="'rtl'"
+        >
+            <div class="form-grid">
+                <div class="form-row">
+                    <div class="form-field">
+                        <label>نام فارسی <span class="required">*</span></label>
+                        <InputText v-model="form.nameFa" placeholder="مثال: سیمان" class="w-full" />
+                    </div>
+                    <div class="form-field">
+                        <label>نام انگلیسی <span class="required">*</span></label>
+                        <InputText v-model="form.nameEn" placeholder="e.g. Cement" class="w-full" dir="ltr" />
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-field">
+                        <label>کد (اختیاری)</label>
+                        <InputText v-model="form.code" placeholder="مثال: CEM" class="w-full" dir="ltr" />
+                    </div>
+                    <div class="form-field">
+                        <label>دسته‌بندی</label>
+                        <InputText v-model="form.category" placeholder="مثال: مصالح ساختمانی" class="w-full" />
+                    </div>
+                </div>
+
+                <!-- Unit picker -->
+                <div class="form-field full-width">
+                    <label>واحد شمارش <span class="required">*</span></label>
+                    <div class="unit-picker">
+                        <button
+                            v-for="u in UNITS"
+                            :key="u.en"
+                            class="unit-chip"
+                            :class="{ active: form.unitFa === u.fa }"
+                            type="button"
+                            @click="onUnitSelect(u)"
+                        >
+                            {{ u.fa }}
+                            <span class="unit-en">{{ u.en }}</span>
+                        </button>
+                    </div>
+                    <div class="unit-custom-row">
+                        <InputText v-model="form.unitFa" placeholder="واحد فارسی سفارشی" class="w-1/2" />
+                        <InputText v-model="form.unitEn" placeholder="Custom unit (EN)" class="w-1/2" dir="ltr" />
+                    </div>
+                </div>
+
+                <div class="form-field full-width">
+                    <label>توضیحات</label>
+                    <Textarea v-model="form.description" rows="2" class="w-full" placeholder="توضیحات اختیاری..." autoResize />
+                </div>
+            </div>
+
+            <template #footer>
+                <Button label="انصراف" icon="pi pi-times" text @click="showDialog = false" />
+                <Button
+                    :label="editMode ? 'ذخیره تغییرات' : 'ایجاد قلم'"
+                    icon="pi pi-check"
+                    :loading="submitting"
+                    @click="submitForm"
+                />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<style scoped>
+.warehouse-items-page {
+    padding: 1.5rem;
+    direction: rtl;
+}
+
+/* Header */
+.page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+}
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+.header-icon {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: #fff;
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
+}
+.page-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+.page-subtitle {
+    margin: 0;
+    color: var(--text-color-secondary);
+    font-size: 0.875rem;
+}
+.create-btn {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+    border: none !important;
+    padding: 0.65rem 1.5rem !important;
+    font-weight: 600 !important;
+}
+
+/* Card */
+.main-card {
+    border-radius: 16px;
+    overflow: hidden;
+}
+
+/* Table header */
+.table-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.25rem 0;
+}
+.table-title {
+    font-size: 1rem;
+    font-weight: 600;
+}
+.search-input { width: 260px; }
+
+/* Empty state */
+.empty-state {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-color-secondary);
+}
+.empty-icon {
+    font-size: 3rem;
+    display: block;
+    margin-bottom: 1rem;
+    opacity: 0.4;
+}
+
+/* Badges / chips */
+.code-badge {
+    font-family: monospace;
+    background: var(--surface-100);
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+.name-fa { font-weight: 600; }
+.name-en {
+    color: var(--text-color-secondary);
+    font-size: 0.875rem;
+    direction: ltr;
+    display: inline-block;
+}
+.unit-badge {
+    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
+    color: #6366f1;
+    padding: 3px 10px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+.category-chip {
+    background: var(--surface-200);
+    padding: 3px 10px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+}
+.text-muted { color: var(--text-color-secondary); opacity: 0.5; }
+
+/* Actions */
+.action-buttons {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+}
+
+/* Form */
+.form-grid { display: flex; flex-direction: column; gap: 1rem; }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
+.form-field.full-width { grid-column: span 2; }
+.form-field label { font-weight: 600; font-size: 0.9rem; }
+.required { color: #ef4444; }
+
+/* Unit picker */
+.unit-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+.unit-chip {
+    border: 1.5px solid var(--surface-border);
+    background: var(--surface-50);
+    border-radius: 20px;
+    padding: 5px 14px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    transition: all 0.2s;
+    color: var(--text-color);
+}
+.unit-chip:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.06); }
+.unit-chip.active {
+    border-color: #6366f1;
+    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
+    color: #6366f1;
+}
+.unit-en {
+    font-size: 0.75rem;
+    opacity: 0.7;
+    direction: ltr;
+    display: inline-block;
+}
+.unit-custom-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+</style>