ADD: Transactions List Page

FIX: Dates

src/layout/AppMenu.vue

@@ -13,7 +13,7 @@ const model = ref([
         items: [
             { label: 'ایجاد اموال', icon: 'pi pi-fw pi-file-plus', to: '/belonging/create-belonging' },
             { label: 'لیست اموال', icon: 'pi pi-fw pi-file', to: '/belonging/list-belongings' },
-            { label: 'لیست تراکنش اموال', icon: 'pi pi-fw pi-plus', to: '/transactions/belonging-transactions' }
+            { label: 'لیست تراکنش اموال', icon: 'pi pi-list-check', to: '/transactions/list-transactions' }
         ]
     },
     {

src/router/index.js

@@ -63,6 +63,11 @@ const router = createRouter({
                     name: 'list-features',
                     component: () => import('@/views/pages/Features/ListFeatures.vue')
                 },
+                {
+                    path: '/transactions/list-transactions',
+                    name: 'list-transactions',
+                    component: () => import('@/views/pages/Transaction/ListTransactions.vue')
+                },
                 {
                     path: '/uikit/formlayout',
                     name: 'formlayout',

src/service/TransactionService.js

@@ -1,6 +1,16 @@
 import axios from 'axios';
 
 export const TransactionService = {
+    _getAuthHeader: () => {
+        const bmToken = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith('bm-token='))
+            ?.split('=')[1];
+
+        return {
+            Authorization: `Bearer ${bmToken}`
+        };
+    },
     /**
      * Get a single transaction by ID
      * @param {string} transactionId - The transaction ID
@@ -143,5 +153,36 @@ export const TransactionService = {
             console.log(err);
             return err.response?.data?.message || 'Error deleting transaction';
         }
+    },
+
+    searchTransactions: async (query) => {
+        const config = {
+            method: 'get',
+            url: '/api/transactions/admin/search',
+            withCredentials: true,
+            params: query,
+            headers: TransactionService._getAuthHeader()
+        };
+        try {
+            const response = await axios(config);
+            return response.data;
+        } catch (err) {
+            console.log(err);
+        }
+    },
+
+    indexTransactions: async () => {
+        const config = {
+            method: 'post',
+            url: '/api/transactions/admin/index-all',
+            withCredentials: true,
+            headers: TransactionService._getAuthHeader()
+        };
+        try {
+            const response = await axios(config);
+            return response.data;
+        } catch (err) {
+            console.log(err);
+        }
     }
 };

src/views/pages/Belonging/CreateBelonging.vue

@@ -142,7 +142,7 @@ const onTransactionSaved = async () => {
     if (editMode.value && belonging.value?._id) {
         belonging.value = await BelongingService.getBelonging(belonging.value._id);
     }
-    toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
+    // toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
 };
 
 const handleSelectCategory = ($event) => {
@@ -259,7 +259,7 @@ const getStatusSeverity = (status) => {
         case 'failed':
             return 'danger';
         case 'pending':
-            return 'warning';
+            return 'warn';
         case 'finished':
             return 'success';
         default:

src/views/pages/Belonging/TransactionDialog.vue

@@ -23,8 +23,7 @@ const transaction = reactive({
     status: 'pending',
     value: null,
     description: '',
-    date: new Date().toISOString(),
+    date: new Date().toISOString()
-    belongingId: props.belongingId
 });
 
 const typeOptions = [
@@ -78,6 +77,7 @@ const saveTransaction = async () => {
     }
 
     try {
+        transaction.belongingId = props.belongingId;
         const result = await TransactionService.createTransaction(transaction);
         if (result === 'success') {
             toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });

src/views/pages/Features/ListFeatures.vue

@@ -87,7 +87,7 @@ const saveFeature = async () => {
                 <TabPanel v-for="category in categories" :key="category._id + '_content'" :value="category._id">
                     <p>لیست ویژگی های {{ category.nativeName }}</p>
                     <div class="w-1/3 my-3">
-                        <Listbox filter checkmark :options="category.features" option-value="_id" option-label="nativeName" @item-dblclick="editFeature($event, category._id)" emptyMessage="موردی برای نمایش وجود ندارد."></Listbox>
+                        <Listbox filter :options="category.features" option-value="_id" option-label="nativeName" @item-dblclick="editFeature($event, category._id)" emptyMessage="موردی برای نمایش وجود ندارد."></Listbox>
                         <Button class="my-3" :categoryId="category._id" @click="openNew(category._id)">افزودن</Button>
                     </div>
                 </TabPanel>

src/views/pages/Transaction/ListTransactions.vue

@@ -0,0 +1,346 @@
+<script setup>
+import { FilterMatchMode } from '@primevue/core/api';
+import { useToast } from 'primevue/usetoast';
+import { onMounted, ref, watch } from 'vue';
+import { TransactionService } from '@/service/TransactionService';
+import { useRouter, useRoute } from 'vue-router';
+import Chip from 'primevue/chip';
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
+import LoadingCheck from '@/components/LoadingCheck.vue';
+import Popover from 'primevue/popover';
+onMounted(() => {
+    loadData();
+});
+
+const toast = useToast();
+const dt = ref();
+const transactions = ref();
+const transactionDialog = ref(false);
+const deleteTransactionDialog = ref(false);
+const deleteTransactionsDialog = ref(false);
+const transaction = ref({});
+const selectedTransactions = ref();
+const filters = ref({
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+});
+const submitted = ref(false);
+
+function hideDialog() {
+    transactionDialog.value = false;
+    submitted.value = false;
+}
+
+const router = useRouter();
+
+function editTransaction(transactionId) {
+    router.push('/transaction/edit-transaction/' + transactionId);
+}
+
+const route = useRoute();
+const searchPhrase = ref(route.query.query);
+const page = ref(Number(route.query.page) || 1);
+const per_page = ref(Number(route.query.per_page) || 20);
+const totalCount = ref(0);
+const pagesCount = ref(0);
+
+let searchTimeout;
+
+// Update your search watcher
+watch(searchPhrase, (newPhrase, oldPhrase) => {
+    if (newPhrase !== oldPhrase) {
+        // Debounce search to avoid too many requests
+        if (searchTimeout) clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            router.push({
+                query: {
+                    ...route.query,
+                    query: newPhrase || undefined,
+                    page: 1 // Reset to first page on new search
+                }
+            });
+        }, 300);
+    }
+});
+
+watch(
+    () => route.query,
+    () => {
+        page.value = Number(route.query.page) || 1;
+        per_page.value = Number(route.query.per_page) || 20;
+        searchPhrase.value = route.query.query || '';
+        loadData();
+    },
+    { deep: true }
+);
+const handleRemoveSearch = () => {
+    removeFromQuery('searchPhrase'); // Ensure 'searchPhrase' is the correct key
+    searchPhrase.value = '';
+};
+
+const removeFromQuery = (queryToRemove) => {
+    const newQuery = { ...route.query };
+
+    delete newQuery[queryToRemove];
+
+    router.replace({ query: newQuery }).catch((err) => {
+        if (err.name !== 'NavigationDuplicated') {
+            console.error(err);
+        }
+    });
+};
+
+const onPageChange = (event) => {
+    const newPage = event.page + 1;
+    const newPerPage = event.rows;
+
+    if (page.value !== newPage || per_page.value !== newPerPage) {
+        router.push({
+            query: {
+                ...route.query,
+                page: newPage,
+                per_page: newPerPage
+            }
+        });
+    }
+};
+
+const loadData = () => {
+    TransactionService.searchTransactions(route.query)
+        .then((response) => {
+            console.log('response', response);
+            transactions.value = response.transactions || response;
+            totalCount.value = response.totalCount || response.length || 0;
+            pagesCount.value = Math.ceil(totalCount.value / per_page.value);
+        })
+        .catch((error) => {
+            toast.add({ severity: 'error', summary: 'Error', detail: 'خطا در دریافت اطلاعات', life: 3000 });
+            console.error('Error loading data:', error);
+        });
+};
+
+const loading = ref(false);
+const indexingFinished = ref(false);
+const indexingMessage = ref('در حال ایندکس...');
+const animationKey = ref(0);
+
+// Function to handle indexing
+const indexTransactions = async () => {
+    loading.value = true;
+    indexingFinished.value = false;
+
+    try {
+        // Your indexing logic here
+        await TransactionService.indexTransactions();
+        // When indexing completes
+        TransactionService.searchTransactions(route.query)
+            .then((response) => {
+                console.log('response', response);
+                transactions.value = response.transactions || response;
+                totalCount.value = response.totalCount || response.length || 0;
+                pagesCount.value = Math.ceil(totalCount.value / per_page.value);
+            })
+            .catch((error) => {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'خطا در دریافت اطلاعات', life: 3000 });
+                console.error('Error loading data:', error);
+            });
+        indexingFinished.value = true;
+        indexingMessage.value = 'ایندکس با موفقیت انجام شد';
+    } catch (error) {
+        indexingMessage.value = 'خطا در ایندکس';
+    } finally {
+        // Reset after some time
+        setTimeout(() => {
+            loading.value = false;
+            animationKey.value++; // Force re-render of animation
+        }, 3000);
+    }
+};
+
+const formatDate = (timestamp) => {
+    const date = new Date(timestamp * 1000);
+
+    // Format using Intl.DateTimeFormat
+    return new Intl.DateTimeFormat('fa-IR', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }).format(date);
+};
+
+// Helper functions for translations and formatting
+const getTypeTranslation = (type) => {
+    switch (type) {
+        case 'deposit':
+            return 'واریز';
+        case 'withdraw':
+            return 'برداشت';
+        default:
+            return type;
+    }
+};
+
+const getTypeSeverity = (type) => {
+    switch (type) {
+        case 'deposit':
+            return 'success';
+        case 'withdraw':
+            return 'danger';
+        default:
+            return null;
+    }
+};
+
+const getStatusTranslation = (status) => {
+    switch (status) {
+        case 'failed':
+            return 'ناموفق';
+        case 'pending':
+            return 'در انتظار';
+        case 'finished':
+            return 'تکمیل شده';
+        default:
+            return status;
+    }
+};
+
+const getStatusSeverity = (status) => {
+    switch (status) {
+        case 'failed':
+            return 'danger';
+        case 'pending':
+            return 'warn';
+        case 'finished':
+            return 'success';
+        default:
+            return null;
+    }
+};
+
+const op = ref();
+const activeDescription = ref('');
+
+const toggle = (event, data) => {
+    activeDescription.value = data;
+    op.value.toggle(event);
+};
+</script>
+
+<template>
+    <div>
+        <div class="card">
+            <Toolbar class="mb-6">
+                <template #start>
+                    <!--                    <Button label="ساخت تراکنش جدید" icon="pi pi-plus" severity="secondary" class="mr-2 mx-3" @click="router.push('/transaction/create-transaction')" />-->
+                    <Button @click="indexTransactions" :disabled="loading" severity="secondary mx-3" class="indexing-button">
+                        <div class="button-content">
+                            <div v-if="!loading">ایندکس کردن تراکنش‌ها</div>
+                            <div v-else class="loading-content flex">
+                                <LoadingCheck :key="animationKey" :is-complete="indexingFinished" />
+                                <Transition enter-active-class="animate__animated animate__fadeIn animate__fast" leave-active-class="animate__animated animate__fadeOut animate__fast" mode="out-in">
+                                    <div :key="indexingMessage">{{ indexingMessage }}</div>
+                                </Transition>
+                            </div>
+                        </div>
+                    </Button>
+                </template>
+
+                <template #end> </template>
+            </Toolbar>
+
+            <DataTable
+                ref="dt"
+                v-model:selection="selectedTransactions"
+                :value="transactions"
+                dataKey="id"
+                :paginator="true"
+                :rows="per_page"
+                :filters="filters"
+                :total-records="totalCount"
+                :current-page="page - 1"
+                @page="onPageChange($event)"
+                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                :rowsPerPageOptions="[20, 40, 80]"
+                currentPageReportTemplate="نمایش {first} تا {last} از {totalRecords} تراکنش"
+                tableStyle="min-width: 50rem"
+                stripedRows
+                filterDisplay="menu"
+                :globalFilterFields="['type', 'status', 'belongingName', 'createdAt', 'description']"
+            >
+                <template #header>
+                    <div class="">
+                        <h4 class="m-0">مدیریت تراکنش‌ها</h4>
+                        <div class="p-input-icon-right w-1/3 mt-2 lg:mt-0">
+                            <InputText v-model="searchPhrase" placeholder="جستجو..." class="w-full" />
+                        </div>
+                    </div>
+                    <Chip v-if="searchPhrase" class="mx-2 mt-2" :label="searchPhrase" removable @remove="handleRemoveSearch" />
+                </template>
+
+                <Column field="_id" header="شناسه" sortable style="width: 10%"></Column>
+                <Column field="belongingName" header="دارایی" sortable style="width: 15%"></Column>
+
+                <Column field="type" header="نوع تراکنش" sortable style="width: 15%">
+                    <template #body="{ data }">
+                        <Tag :severity="getTypeSeverity(data.type)" :value="getTypeTranslation(data.type)" />
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="typeOptions" optionLabel="label" optionValue="value" placeholder="انتخاب نوع" class="p-column-filter" showClear />
+                    </template>
+                </Column>
+
+                <Column field="status" header="وضعیت" sortable style="width: 15%">
+                    <template #body="{ data }">
+                        <Tag :severity="getStatusSeverity(data.status)" :value="getStatusTranslation(data.status)" />
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="انتخاب وضعیت" class="p-column-filter" showClear />
+                    </template>
+                </Column>
+
+                <Column field="createdAt" header="تاریخ" sortable style="width: 15%">
+                    <template #body="slotProps">
+                        {{ formatDate(slotProps.data.createdAt) }}
+                    </template>
+                </Column>
+
+                <Column field="description" header="توضیحات" style="width: 10%">
+                    <template #body="{ data }">
+                        <Button v-if="data.description" icon="pi pi-info-circle" text rounded aria-label="توضیحات" @click="toggle($event, data.description)" />
+                    </template>
+                </Column>
+            </DataTable>
+
+            <Popover ref="op" :showCloseIcon="true" :autoHide="false">
+                <div class="p-2">{{ activeDescription }}</div>
+            </Popover>
+        </div>
+
+        <Dialog v-model:visible="deleteTransactionDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+            <div class="flex items-center gap-4">
+                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <span v-if="transaction"
+                    >Are you sure you want to delete transaction <b>{{ transaction.transactionCode }}</b
+                    >?</span
+                >
+            </div>
+            <template #footer>
+                <Button label="خیر" icon="pi pi-times" text @click="deleteTransactionDialog = false" />
+                <Button label="بله" icon="pi pi-check" @click="deleteTransaction" />
+            </template>
+        </Dialog>
+
+        <Dialog v-model:visible="deleteTransactionsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
+            <div class="flex items-center gap-4">
+                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <span>Are you sure you want to delete the selected transactions?</span>
+            </div>
+            <template #footer>
+                <Button label="No" icon="pi pi-times" text @click="deleteTransactionsDialog = false" />
+                <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedTransactions" />
+            </template>
+        </Dialog>
+    </div>
+</template>

src/views/pages/auth/Login.vue

@@ -16,7 +16,12 @@ const login = async () => {
             email: email.value,
             password: password.value
         });
+        const env = import.meta.env.VITE_ENV;
+        if (env === 'production') {
             Cookies.set('bm-token', response.data.data.token, { sameSite: 'none', secure: true, expires: 1000, domain: '.chbk.app' });
+        } else {
+            Cookies.set('bm-token', response.data.data.token, { sameSite: 'none', secure: true, expires: 1000 });
+        }
         localStorage.setItem('bm-token', response.data.data.token);
         await router.push('/');
     } catch (error) {