fixed #99

src/components/Widgets/Transaction/AdminTransactionList/AdminPaymentList.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="AdminPaymentList"
+       :style="localOptions.style">
+    <entity-index v-if="mounted"
+                  ref="entityIndex"
+                  v-model:value="inputs"
+                  title="لیست پرداخت ها"
+                  :api="api"
+                  :table="table"
+                  :table-keys="tableKeys"
+                  :create-route-name="createRouteName"
+                  :table-grid-size="$q.screen.lt.sm"
+                  :show-search-button="false"
+                  :show-expand-button="false"
+                  :show-reload-button="false">
+      <template #entity-index-table-cell="{inputData}">
+        <template v-if="inputData.col.name === 'number'">
+          {{ inputData.rowNumber }}
+        </template>
+        <template v-else-if="inputData.col.name === 'action'">
+          <q-btn color="primary"
+                 :to="{name: 'Admin.Payment.Show', params: {id: inputData.props.row.id}}">
+            مشاهده جزییات
+          </q-btn>
+        </template>
+        <template v-else>
+          {{ inputData.col.value }}
+        </template>
+      </template>
+      <template #entity-index-table-item-cell="{inputData}">
+        <entity-index-grid-item :input-data="inputData">
+          <template #col="{col, row}">
+            <template v-if="col.name === 'number'">
+              {{ inputData.rowNumber }}
+            </template>
+            <template v-else-if="col.name === 'action'">
+              <q-btn color="primary"
+                     :to="{name: 'Admin.Payment.Show', params: {id: row.id}}">
+                مشاهده جزییات
+              </q-btn>
+            </template>
+          </template>
+        </entity-index-grid-item>
+      </template>
+    </entity-index>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import Assist from 'assets/js/Assist.js'
+import { EntityIndex } from 'quasar-crud'
+import { Payment } from 'src/models/Payment.js'
+import { mixinWidget } from 'src/mixin/Mixins.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+import { FormBuilderAssist } from 'quasar-form-builder'
+import BtnControl from 'src/components/Control/btn.vue'
+import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
+
+const BtnControlComp = shallowRef(BtnControl)
+
+export default {
+  name: 'AdminPaymentList',
+  components: { EntityIndex, EntityIndexGridItem },
+  mixins: [mixinWidget],
+  data: () => {
+    return {
+      api: APIGateway.payment.APIAdresses.base,
+      tableKeys: {
+        data: 'results',
+        total: 'count',
+        currentPage: 'current',
+        perPage: 'per_page',
+        pageKey: 'page'
+      },
+      inputs: [
+        {
+          type: 'dateTime',
+          name: 'creation_time__gte',
+          label: 'از تاریخ',
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
+        },
+        {
+          type: 'dateTime',
+          name: 'creation_time__lt',
+          label: 'تا تاریخ',
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
+        },
+        { type: 'select', name: 'type', options: (new Payment()).typeEnums, label: 'نوع تراکنش', placeholder: ' ', col: 'col-md-3 col-12' },
+        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', placeholder: ' ', atClick: () => {}, col: 'col-md-2 col-12' }
+      ],
+      table: {
+        columns: [
+          {
+            name: 'number',
+            required: true,
+            label: 'شماره',
+            align: 'left',
+            field: () => ''
+          },
+          {
+            name: 'id',
+            required: true,
+            label: 'شناسه',
+            align: 'left',
+            field: row => row.id
+          },
+          {
+            name: 'invoice_info.title',
+            required: true,
+            label: 'نام صاحب حساب',
+            align: 'left',
+            field: row => row.creator_info?.firstname + ' ' + row.creator_info?.lastname
+          },
+          {
+            name: 'type',
+            required: true,
+            label: 'نوع تراکنش',
+            align: 'left',
+            field: row => (new Payment(row)).type_info.label
+          },
+          {
+            name: 'amount',
+            required: true,
+            label: 'مبلغ تراکنش (ریال)',
+            align: 'left',
+            field: row => row.amount.toLocaleString('fa')
+          },
+          {
+            name: 'creation_time',
+            required: true,
+            label: 'زمان',
+            align: 'left',
+            field: row => Assist.miladiToShamsi(row.creation_time)
+          },
+          {
+            name: 'action',
+            required: true,
+            label: 'جزییات',
+            align: 'left',
+            field: row => ''
+          }
+        ]
+      },
+      mounted: false,
+      createRouteName: ''
+    }
+  },
+  mounted() {
+    this.setActionBtn()
+    this.mounted = true
+  },
+  methods: {
+    setActionBtn () {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'btn', 'atClick', this.search)
+    },
+    search () {
+      this.$refs.entityIndex.search()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.AdminPaymentList {
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+    color: #424242;
+    margin-bottom: 27px;
+  }
+  :deep(.list) {
+    .quasar-crud-index-table {
+      padding: 0;
+      .q-table__container {
+        background-color: transparent;
+        box-shadow: none;
+        border: none;
+        .q-table__top {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Widgets/Transaction/AdminTransactionList/OptionPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      ...
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: {
+    OptionPanelTabs
+  },
+  mixins: [mixinOptionPanel]
+})
+</script>

src/components/Widgets/Transaction/AdminTransactionShow/AdminTransactionShow.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="AdminTransactionShow"
+       :style="localOptions.style">
+    <div class="flex justify-end">
+      <q-btn flat
+             color="grey"
+             @click="$router.go(-1)">
+        بازگشت
+        >
+      </q-btn>
+    </div>
+    <entity-show v-if="mounted"
+                 ref="entityEdit"
+                 v-model:value="inputs"
+                 title="اطلاعات پرداخت"
+                 :api="api"
+                 :entity-id-key="entityIdKey"
+                 :index-route-name="'UserPanel.Wallet'"
+                 :show-close-button="false"
+                 :show-edit-button="false"
+                 :show-expand-button="false"
+                 :show-save-button="false"
+                 :show-reload-button="false"
+                 :redirect-after-edit="false"
+                 :show-index-button="false"
+                 :after-load-input-data="afterLoadInputData">
+      <template #after-form-builder>
+        <q-btn v-if="transaction.invoice"
+               class="full-width q-mt-md"
+               color="primary"
+               @click="showInvoice">
+          مشاهده سفارش
+        </q-btn>
+      </template>
+    </entity-show>
+  </div>
+</template>
+
+<script>
+import { EntityShow } from 'quasar-crud'
+import { mixinWidget } from 'src/mixin/Mixins.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+import { Transaction } from 'src/models/Transaction.js'
+
+export default {
+  name: 'AdminTransactionShow',
+  components: {
+    EntityShow
+  },
+  mixins: [mixinWidget],
+  data () {
+    const transactionId = this.$route.params.id
+    return {
+      mounted: false,
+      entityLoading: true,
+      requestLoading: false,
+      api: APIGateway.transaction.APIAdresses.byId(transactionId),
+      transaction: new Transaction(),
+      entityIdKey: 'id',
+      inputs: [
+        { type: 'separator', name: 'space', label: 'مشخصات کاربر', className: 'custom-separator', col: 'col-12' },
+        { type: 'input', name: 'creator_info.firstname', responseKey: 'creator_info.firstname', label: 'نام', placeholder: ' ', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'creator_info.lastname', responseKey: 'creator_info.lastname', label: 'نام خانوادگی', placeholder: ' ', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'creator_info.mobile_number', responseKey: 'creator_info.mobile_number', label: 'تلفن همراه', placeholder: ' ', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'creator_info.email', responseKey: 'creator_info.email', label: 'ایمیل', placeholder: ' ', col: 'col-md-3 col-12' },
+
+        { type: 'separator', name: 'space', label: 'مشخصات حساب', className: 'custom-separator', col: 'col-12' },
+        { type: 'input', name: 'id', responseKey: 'id', label: 'شناسه', placeholder: ' ', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'reference_code', responseKey: 'reference_code', label: 'کد مرجع', placeholder: ' ', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'authority_code', responseKey: 'authority_code', label: 'شناسه پرداخت', placeholder: ' ', col: 'col-md-4 col-12' },
+        {
+          type: 'select',
+          name: 'status',
+          responseKey: 'status',
+          label: 'وضعیت',
+          options: (new Transaction()).statusEnums,
+          placeholder: ' ',
+          col: 'col-md-4 col-12'
+        },
+        { type: 'input', name: 'amount', responseKey: 'amount', label: 'مبلغ کل(ریال)', placeholder: ' ', col: 'col-md-4 col-12' },
+        { type: 'dateTime', name: 'creation_time', responseKey: 'creation_time', label: 'تاریخ ثبت', placeholder: ' ', col: 'col-md-4 col-12' },
+        { type: 'inputEditor', name: 'description', responseKey: 'description', label: 'توضیحات', placeholder: ' ', col: 'col-12' }
+        // { type: 'input', name: 'IBAN', responseKey: 'IBAN', label: 'شماره شبا', placeholder: ' ', col: 'col-md-6 col-12' },
+        // { type: 'input', name: 'receipt', responseKey: 'receipt', label: 'رسید پرداخت', placeholder: ' ', col: 'col-md-6 col-12' }
+      ],
+      requestInputs: [
+        { type: 'file', name: 'receipt', label: 'فایل رسید پرداخت', placeholder: ' ', col: 'col-md-3 col-12' },
+        { type: 'InputEditor', name: 'description', label: 'توضیحات', placeholder: ' ', col: 'col-12' }
+      ]
+    }
+  },
+  mounted() {
+    this.mounted = true
+  },
+  methods: {
+    showInvoice () {
+      const routeData = this.$router.resolve({ name: 'UserPanel.Invoice.Show', params: { id: this.transaction.invoice } })
+      window.open(routeData.href, '_blank')
+    },
+    afterLoadInputData (data) {
+      this.transaction = new Transaction(data)
+      this.entityLoading = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.AdminTransactionShow {
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+    color: #424242;
+    margin-bottom: 27px;
+    display: flex;
+    flex-flow: row;
+    position: relative;
+    .static-title {
+
+    }
+    .dynamic-title {
+
+    }
+    .back-action {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  :deep(.form) {
+    padding: 24px;
+  }
+}
+</style>

src/components/Widgets/Transaction/AdminTransactionShow/OptionPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      ...
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: {
+    OptionPanelTabs
+  },
+  mixins: [mixinOptionPanel]
+})
+</script>

src/components/Widgets/Transaction/TransactionList/OptionPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      ...
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: {
+    OptionPanelTabs
+  },
+  mixins: [mixinOptionPanel]
+})
+</script>

src/components/Widgets/Transaction/TransactionList/PaymentList.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="PaymentList"
+       :style="localOptions.style">
+    <entity-index v-if="mounted"
+                  ref="entityIndex"
+                  v-model:value="inputs"
+                  title="لیست پرداخت ها"
+                  :api="api"
+                  :table="table"
+                  :table-keys="tableKeys"
+                  :create-route-name="createRouteName"
+                  :table-grid-size="$q.screen.lt.sm"
+                  :show-search-button="false"
+                  :show-expand-button="false"
+                  :show-reload-button="false">
+      <template #entity-index-table-cell="{inputData}">
+        <template v-if="inputData.col.name === 'number'">
+          {{ inputData.rowNumber }}
+        </template>
+        <template v-else-if="inputData.col.name === 'action'">
+          <q-btn color="primary"
+                 :to="{name: 'UserPanel.Payment.Show', params: {id: inputData.props.row.id}}">
+            مشاهده جزییات
+          </q-btn>
+        </template>
+        <template v-else>
+          {{ inputData.col.value }}
+        </template>
+      </template>
+      <template #entity-index-table-item-cell="{inputData}">
+        <entity-index-grid-item :input-data="inputData">
+          <template #col="{col, row}">
+            <template v-if="col.name === 'number'">
+              {{ inputData.rowNumber }}
+            </template>
+            <template v-else-if="col.name === 'action'">
+              <q-btn color="primary"
+                     :to="{name: 'UserPanel.Payment.Show', params: {id: row.id}}">
+                مشاهده جزییات
+              </q-btn>
+            </template>
+          </template>
+        </entity-index-grid-item>
+      </template>
+    </entity-index>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import Assist from 'assets/js/Assist.js'
+import { EntityIndex } from 'quasar-crud'
+import { Payment } from 'src/models/Payment.js'
+import { Invoice } from 'src/models/Invoice.js'
+import { mixinWidget } from 'src/mixin/Mixins.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+import { FormBuilderAssist } from 'quasar-form-builder'
+import BtnControl from 'src/components/Control/btn.vue'
+import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
+
+const BtnControlComp = shallowRef(BtnControl)
+
+export default {
+  name: 'PaymentList',
+  components: { EntityIndex, EntityIndexGridItem },
+  mixins: [mixinWidget],
+  data: () => {
+    return {
+      api: APIGateway.payment.APIAdresses.base,
+      tableKeys: {
+        data: 'results',
+        total: 'count',
+        currentPage: 'current',
+        perPage: 'per_page',
+        pageKey: 'page'
+      },
+      inputs: [
+        {
+          type: 'dateTime',
+          name: 'creation_time__gte',
+          label: 'از تاریخ',
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
+        },
+        {
+          type: 'dateTime',
+          name: 'creation_time__lt',
+          label: 'تا تاریخ',
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
+        },
+        { type: 'select', name: 'type', options: (new Payment()).typeEnums, label: 'نوع تراکنش', placeholder: ' ', col: 'col-md-3 col-12' },
+        { type: 'hidden', name: 'wallet__owner', value: null },
+        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', placeholder: ' ', atClick: () => {}, col: 'col-md-2 col-12' }
+      ],
+      table: {
+        columns: [
+          {
+            name: 'number',
+            required: true,
+            label: 'شماره',
+            align: 'left',
+            field: () => ''
+          },
+          {
+            name: 'id',
+            required: true,
+            label: 'شناسه',
+            align: 'left',
+            field: row => row.id
+          },
+          {
+            name: 'invoice_info.title',
+            required: true,
+            label: 'عنوان',
+            align: 'left',
+            field: row => row.invoice_info?.title
+          },
+          {
+            name: 'type',
+            required: true,
+            label: 'نوع تراکنش',
+            align: 'left',
+            field: row => (new Payment(row)).type_info.label
+          },
+          {
+            name: 'amount',
+            required: true,
+            label: 'مبلغ تراکنش (ریال)',
+            align: 'left',
+            field: row => row.amount.toLocaleString('fa')
+          },
+          {
+            name: 'creation_time',
+            required: true,
+            label: 'زمان',
+            align: 'left',
+            field: row => Assist.miladiToShamsi(row.creation_time)
+          },
+          {
+            name: 'action',
+            required: true,
+            label: 'جزییات',
+            align: 'left',
+            field: row => ''
+          }
+        ]
+      },
+      mounted: false,
+      createRouteName: ''
+    }
+  },
+  mounted() {
+    this.setOwner()
+    this.setActionBtn()
+    this.$bus.on('ReloadUserPayments', this.search)
+    this.mounted = true
+  },
+  methods: {
+    setOwner () {
+      const user = this.$store.getters['Auth/user']
+      FormBuilderAssist.setAttributeByName(this.inputs, 'wallet__owner', 'value', user.id)
+    },
+    setActionBtn () {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'btn', 'atClick', this.search)
+    },
+    search () {
+      this.$refs.entityIndex.search()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.PaymentList {
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+    color: #424242;
+    margin-bottom: 27px;
+  }
+  :deep(.list) {
+    .quasar-crud-index-table {
+      padding: 0;
+      .q-table__container {
+        background-color: transparent;
+        box-shadow: none;
+        border: none;
+        .q-table__top {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Widgets/Transaction/TransactionShow/OptionPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      ...
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: {
+    OptionPanelTabs
+  },
+  mixins: [mixinOptionPanel]
+})
+</script>

src/components/Widgets/Transaction/TransactionShow/PaymentShow.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="PaymentShow"
+       :style="localOptions.style">
+    <div class="flex justify-end">
+      <q-btn flat
+             color="grey"
+             @click="$router.go(-1)">
+        بازگشت
+        >
+      </q-btn>
+    </div>
+    <entity-show v-if="mounted"
+                 ref="entityEdit"
+                 v-model:value="inputs"
+                 title="تراکنش کیف پول"
+                 :api="api"
+                 :entity-id-key="entityIdKey"
+                 :index-route-name="'UserPanel.Wallet'"
+                 :show-close-button="false"
+                 :show-edit-button="false"
+                 :show-expand-button="false"
+                 :show-save-button="false"
+                 :show-reload-button="false"
+                 :redirect-after-edit="false"
+                 :show-index-button="false"
+                 :after-load-input-data="afterLoadInputData">
+      <template #after-form-builder>
+        <q-btn v-if="payment.invoice_info?.id"
+               class="full-width q-mt-md"
+               color="primary"
+               @click="showInvoice">
+          مشاهده سفارش
+        </q-btn>
+        <div v-if="payment.description"
+             class="q-my-md">
+          توضیحات:
+          <div v-html="payment.description" />
+        </div>
+        <div v-if="payment.receipt || payment.IBAN">
+          <div class="row q-col-gutter-md q-mt-lg">
+            <div class="col-md-6 col-12">
+              رسید پرداخت:
+              <div>
+                <q-img :src="payment.receipt" />
+              </div>
+            </div>
+            <div class="col-md-6 col-12">
+              شماره شبا:
+              {{ payment.IBAN }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </entity-show>
+  </div>
+</template>
+
+<script>
+import { EntityShow } from 'quasar-crud'
+import { Payment } from 'src/models/Payment.js'
+import { mixinWidget } from 'src/mixin/Mixins.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+
+export default {
+  name: 'PaymentShow',
+  components: {
+    EntityShow
+  },
+  mixins: [mixinWidget],
+  data: () => {
+    return {
+      mounted: false,
+      entityLoading: true,
+      api: null,
+      payment: new Payment(),
+      entityIdKey: 'id',
+      entityParamKey: 'id',
+      showRouteName: 'Admin.Content.Show',
+      indexRouteName: 'Admin.Content.List',
+      inputs: [
+        // { type: 'separator', name: 'space', label: 'مشخصات حساب', className: 'custom-separator', col: 'col-12' },
+        { type: 'input', name: 'id', responseKey: 'id', label: 'شناسه', placeholder: ' ', col: 'col-md-2 col-12' },
+        { type: 'dateTime', name: 'creation_time', responseKey: 'creation_time', label: 'تاریخ ثبت', placeholder: ' ', col: 'col-md-4 col-12' },
+        {
+          type: 'select',
+          name: 'type',
+          responseKey: 'type',
+          label: 'نوع درخواست',
+          options: (new Payment()).typeEnums,
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
+        },
+        { type: 'input', name: 'amount', responseKey: 'amount', label: 'مبلغ کل(ریال)', placeholder: ' ', col: 'col-md-3 col-12' }
+        // { type: 'input', name: 'IBAN', responseKey: 'IBAN', label: 'شماره شبا', placeholder: ' ', col: 'col-md-6 col-12' },
+        // { type: 'input', name: 'receipt', responseKey: 'receipt', label: 'رسید پرداخت', placeholder: ' ', col: 'col-md-6 col-12' }
+      ]
+    }
+  },
+  created() {
+    this.api = APIGateway.payment.APIAdresses.byId(this.$route.params.id)
+  },
+  mounted() {
+    this.mounted = true
+  },
+  methods: {
+    showInvoice () {
+      const routeData = this.$router.resolve({ name: 'UserPanel.Invoice.Show', params: { id: this.payment.invoice_info.id } })
+      window.open(routeData.href, '_blank')
+    },
+    setActionBtn () {
+      this.inputs.forEach((item, index) => {
+        if (item.name === 'btn') {
+          this.inputs[index].atClick = this.edit
+        }
+      })
+    },
+    afterLoadInputData (data) {
+      this.payment = new Payment(data)
+      this.entityLoading = false
+    },
+    edit() {
+      this.entityLoading = true
+      this.$refs.entityEdit.editEntity(false)
+        .then(() => {
+          this.$refs.entityEdit.getData()
+          this.entityLoading = false
+        })
+        .catch(() => {
+          this.$refs.entityEdit.getData()
+          this.entityLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.PaymentShow {
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+    color: #424242;
+    margin-bottom: 27px;
+    display: flex;
+    flex-flow: row;
+    position: relative;
+    .static-title {
+
+    }
+    .dynamic-title {
+
+    }
+    .back-action {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  :deep(.form) {
+    padding: 24px;
+  }
+}
+</style>

src/models/Transaction.js

@@ -34,7 +34,18 @@ class Transaction extends Model {
         key: 'invoice_info',
         relatedModel: Invoice
       }
-    ])
+    ], {
+      status: {
+        infoKey: 'status_info',
+        enumListKey: 'statusEnums',
+        enums: [
+          { label: 'لغو شده', value: 'CANCELED' },
+          { label: 'در حال پرداخت', value: 'IN_PROGRESS' },
+          { label: 'پرداخت نقدی', value: 'PAID' },
+          { label: 'پرداخت قسطی', value: 'PAY_IN_INSTALMENT' }
+        ]
+      }
+    })
   }
 }
 

src/pages/Admin/Transaction/List.vue

@@ -0,0 +1,24 @@
+<template>
+  <q-page-builder v-model:sections="currenSections"
+                  v-model:options="pageConfig"
+                  :editable="pageBuilderEditable"
+                  :loading="pageBuilderLoading" />
+</template>
+
+<script>
+import { mixinPageOptions } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'AdminPanel.Invoice.List',
+  mixins: [mixinPageOptions],
+  data: () => {
+    return {
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'AdminPaymentList' }], options: { style: { paddingTop: '' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '10px', alignment: { justifyContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignItems: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null } }, style: { maxWidth: '1200px', width: '1200px', marginBottom: '10px' } } }] } }]
+    }
+  },
+  created() {
+    this.currenSections = this.sections
+    this.pageBuilderLoading = false
+  }
+}
+</script>

src/pages/Admin/Transaction/Show.vue

@@ -0,0 +1,24 @@
+<template>
+  <q-page-builder v-model:sections="currenSections"
+                  v-model:options="pageConfig"
+                  :editable="pageBuilderEditable"
+                  :loading="pageBuilderLoading" />
+</template>
+
+<script>
+import { mixinPageOptions } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'AdminPanel.Package.Show',
+  mixins: [mixinPageOptions],
+  data: () => {
+    return {
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'AdminTransactionShow' }], options: { style: { paddingTop: '', marginBottom: '124px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '10px', alignment: { justifyContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignItems: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null } }, style: { maxWidth: '1200px', width: '1200px' } } }] } }]
+    }
+  },
+  created() {
+    this.currenSections = this.sections
+    this.pageBuilderLoading = false
+  }
+}
+</script>

src/pages/Admin/User/show.vue

@@ -43,8 +43,6 @@
                      :api="api"
                      :after-load-input-data="afterLoadInputData"
                      :entity-id-key="entityIdKey"
-                     :entity-param-key="entityParamKey"
-                     :show-route-name="showRouteName"
                      :default-layout="false"
                      :show-close-button="false"
                      :show-edit-button="false"
@@ -121,87 +119,108 @@
       </q-tab-panel>
 
       <q-tab-panel name="financial">
-        <entity-index v-if="mounted"
-                      ref="invoiceList"
-                      v-model:value="invoiceListInputs"
-                      title="لیست صورتحساب ها"
-                      :api="invoiceListApi"
-                      :table="invoiceListTable"
-                      :table-keys="invoiceListTableKeys"
-                      :show-search-button="false"
-                      :show-reload-button="false"
-                      :show-expand-button="false">
-          <template v-slot:entity-index-table-cell="{inputData}">
-            <template v-if="inputData.col.name === 'number'">
-              {{ inputData.rowNumber }}
-            </template>
-            <template v-else-if="inputData.col.name === 'action'">
-              <div class="action-column-entity-index">
-                <q-btn color="primary"
-                       label="جزییات"
-                       :to="{name: 'Admin.Invoice.Show', params: {id: inputData.props.row.id}}" />
-              </div>
-            </template>
-            <template v-else>
-              {{ inputData.col.value }}
-            </template>
-          </template>
-        </entity-index>
-        <q-separator class="q-my-md" />
-        <entity-index v-if="mounted"
-                      ref="paymentList"
-                      v-model:value="paymentListInputs"
-                      title="لیست پرداخت ها"
-                      :api="paymentListApi"
-                      :table="paymentListTable"
-                      :table-keys="paymentListTableKeys"
-                      :show-search-button="false"
-                      :show-reload-button="false"
-                      :show-expand-button="false">
-          <template v-slot:entity-index-table-cell="{inputData}">
-            <template v-if="inputData.col.name === 'number'">
-              {{ inputData.rowNumber }}
-            </template>
-            <template v-else-if="inputData.col.name === 'action'">
-              <div class="action-column-entity-index">
-                <q-btn color="primary"
-                       label="جزییات" />
-              </div>
-            </template>
-            <template v-else>
-              {{ inputData.col.value }}
-            </template>
-          </template>
-        </entity-index>
-        <q-separator class="q-my-md" />
-        <entity-index v-if="mounted"
-                      ref="transactionList"
-                      v-model:value="transactionListInputs"
-                      title="لیست تراکنش ها"
-                      :api="transactionListApi"
-                      :table="transactionListTable"
-                      :table-keys="transactionListTableKeys"
-                      :show-search-button="false"
-                      :show-reload-button="false"
-                      :show-expand-button="false">
-          <template v-slot:entity-index-table-cell="{inputData}">
-            <template v-if="inputData.col.name === 'number'">
-              {{ inputData.rowNumber }}
-            </template>
-            <template v-else-if="inputData.col.name === 'action'">
-              <div class="action-column-entity-index">
-                <q-btn color="primary"
-                       label="جزییات" />
-              </div>
-            </template>
-            <template v-else>
-              {{ inputData.col.value }}
-            </template>
-          </template>
-        </entity-index>
-        <q-skeleton v-else
-                    type="rect"
-                    height="200px" />
+        <q-tabs v-model="financialTab"
+                dense
+                class="text-grey"
+                active-color="primary"
+                indicator-color="primary"
+                align="justify"
+                narrow-indicator>
+          <q-tab name="invoiceList"
+                 label="صورتحساب ها" />
+          <q-tab name="paymentList"
+                 label="پرداخت ها" />
+          <q-tab name="transactionList"
+                 label="تراکنش ها" />
+        </q-tabs>
+        <q-separator />
+        <q-tab-panels v-model="financialTab"
+                      animated>
+          <q-tab-panel name="invoiceList">
+            <entity-index v-if="mounted"
+                          ref="invoiceList"
+                          v-model:value="invoiceListInputs"
+                          title="لیست صورتحساب ها"
+                          :api="invoiceListApi"
+                          :table="invoiceListTable"
+                          :table-keys="invoiceListTableKeys"
+                          :show-search-button="false"
+                          :show-reload-button="false"
+                          :show-expand-button="false">
+              <template v-slot:entity-index-table-cell="{inputData}">
+                <template v-if="inputData.col.name === 'number'">
+                  {{ inputData.rowNumber }}
+                </template>
+                <template v-else-if="inputData.col.name === 'action'">
+                  <div class="action-column-entity-index">
+                    <q-btn color="primary"
+                           label="جزییات"
+                           :to="{name: 'Admin.Invoice.Show', params: {id: inputData.props.row.id}}" />
+                  </div>
+                </template>
+                <template v-else>
+                  {{ inputData.col.value }}
+                </template>
+              </template>
+            </entity-index>
+          </q-tab-panel>
+          <q-tab-panel name="paymentList">
+            <entity-index v-if="mounted"
+                          ref="paymentList"
+                          v-model:value="paymentListInputs"
+                          title="لیست پرداخت ها"
+                          :api="paymentListApi"
+                          :table="paymentListTable"
+                          :table-keys="paymentListTableKeys"
+                          :show-search-button="false"
+                          :show-reload-button="false"
+                          :show-expand-button="false">
+              <template v-slot:entity-index-table-cell="{inputData}">
+                <template v-if="inputData.col.name === 'number'">
+                  {{ inputData.rowNumber }}
+                </template>
+                <template v-else-if="inputData.col.name === 'action'">
+                  <div class="action-column-entity-index">
+                    <q-btn color="primary"
+                           :to="{ name: 'Admin.Payment.Show', params: { id: inputData.props.row.id } }"
+                           label="جزییات" />
+                  </div>
+                </template>
+                <template v-else>
+                  {{ inputData.col.value }}
+                </template>
+              </template>
+            </entity-index>
+          </q-tab-panel>
+          <q-tab-panel name="transactionList">
+            <entity-index v-if="mounted"
+                          ref="transactionList"
+                          v-model:value="transactionListInputs"
+                          title="لیست تراکنش ها"
+                          :api="transactionListApi"
+                          :table="transactionListTable"
+                          :table-keys="transactionListTableKeys"
+                          :show-search-button="false"
+                          :show-reload-button="false"
+                          :show-expand-button="false">
+              <template v-slot:entity-index-table-cell="{inputData}">
+                <template v-if="inputData.col.name === 'number'">
+                  {{ inputData.rowNumber }}
+                </template>
+                <template v-else-if="inputData.col.name === 'action'">
+                  <div class="action-column-entity-index">
+                    <q-btn color="primary"
+                           :to="{ name: 'Admin.Transaction.Show', params: { id: inputData.props.row.id } }"
+                           label="جزییات" />
+                  </div>
+                </template>
+                <template v-else>
+                  {{ inputData.col.value }}
+                </template>
+              </template>
+            </entity-index>
+          </q-tab-panel>
+        </q-tab-panels>
       </q-tab-panel>
       <q-tab-panel name="movies2">
         سوابق باشگاه اندیشه جویان
@@ -236,11 +255,10 @@ export default {
     const userId = this.$route.params.id
     return {
       tab: 'userInfo',
+      financialTab: 'invoiceList',
       api: APIGateway.user.APIAdresses.byId(userId),
       mounted: false,
       entityIdKey: 'id',
-      entityParamKey: 'id',
-      showRouteName: 'Admin.User.Show',
       inputs: [
         { type: 'separator', name: 'space', label: 'نقش و وضعیت ها', className: 'custom-separator', col: 'col-12' },
         {

src/router/routes.js

@@ -617,6 +617,23 @@ const routes = [
                 component: () => import('src/pages/Admin/Payment/Show.vue')
               }
             ]
+          },
+          {
+            path: 'transaction',
+            name: 'Admin.Transaction',
+            component: () => import('layouts/bareLayout.vue'),
+            children: [
+              {
+                path: '',
+                name: 'Admin.Transaction.List',
+                component: () => import('src/pages/Admin/Transaction/List.vue')
+              },
+              {
+                path: ':id',
+                name: 'Admin.Transaction.Show',
+                component: () => import('src/pages/Admin/Transaction/Show.vue')
+              }
+            ]
           }
         ]
       },