From c3702ee6d5a9c6e0ba162088065599ab70daad69 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 23 Sep 2025 11:26:46 +0530
Subject: [PATCH] feat: transaction list

---
 frontend/components.d.ts                      |   3 +
 .../components/Settings/SettingDetails.vue    |   8 +-
 frontend/src/components/Settings/Settings.vue |  13 +-
 .../Settings/TransactionDetails.vue           | 152 +++++++++++
 .../src/components/Settings/Transactions.vue  | 241 ++++++++++++++++++
 lms/lms/doctype/lms_payment/lms_payment.json  |   3 +-
 6 files changed, 412 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/Settings/TransactionDetails.vue
 create mode 100644 frontend/src/components/Settings/Transactions.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 55c2e3ce..a9da70ee 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -90,6 +90,7 @@ declare module 'vue' {
     PaymentGatewayDetails: typeof import('./src/components/Settings/PaymentGatewayDetails.vue')['default']
     PaymentGateways: typeof import('./src/components/Settings/PaymentGateways.vue')['default']
     PaymentSettings: typeof import('./src/components/Settings/PaymentSettings.vue')['default']
+    PaymentTransactions: typeof import('./src/components/Settings/PaymentTransactions.vue')['default']
     Play: typeof import('./src/components/Icons/Play.vue')['default']
     ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
     Question: typeof import('./src/components/Modals/Question.vue')['default']
@@ -108,6 +109,8 @@ declare module 'vue' {
     StudentHeatmap: typeof import('./src/components/StudentHeatmap.vue')['default']
     StudentModal: typeof import('./src/components/Modals/StudentModal.vue')['default']
     Tags: typeof import('./src/components/Tags.vue')['default']
+    TransactionDetails: typeof import('./src/components/Settings/TransactionDetails.vue')['default']
+    Transactions: typeof import('./src/components/Settings/Transactions.vue')['default']
     UnsplashImageBrowser: typeof import('./src/components/UnsplashImageBrowser.vue')['default']
     UpcomingEvaluations: typeof import('./src/components/UpcomingEvaluations.vue')['default']
     Uploader: typeof import('./src/components/Controls/Uploader.vue')['default']
diff --git a/frontend/src/components/Settings/SettingDetails.vue b/frontend/src/components/Settings/SettingDetails.vue
index 95931e68..3319854c 100644
--- a/frontend/src/components/Settings/SettingDetails.vue
+++ b/frontend/src/components/Settings/SettingDetails.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="flex flex-col justify-between h-full">
+	<div class="flex flex-col justify-between h-full text-base">
 		<div>
-			<div class="flex itemsc-center justify-between">
-				<div class="text-xl font-semibold leading-none mb-1 text-ink-gray-9">
+			<div class="flex items-center justify-between">
+				<div class="text-xl font-semibold leading-none mb-2 text-ink-gray-9">
 					{{ __(label) }}
 				</div>
 				<Badge
@@ -12,7 +12,7 @@
 					theme="orange"
 				/>
 			</div>
-			<div class="text-xs text-ink-gray-5">
+			<div class="text-ink-gray-6 leading-5">
 				{{ __(description) }}
 			</div>
 		</div>
diff --git a/frontend/src/components/Settings/Settings.vue b/frontend/src/components/Settings/Settings.vue
index 468b963f..815491bd 100644
--- a/frontend/src/components/Settings/Settings.vue
+++ b/frontend/src/components/Settings/Settings.vue
@@ -44,7 +44,8 @@
 								? { fields: activeTab.fields }
 								: {}),
 							...(activeTab.label == 'Evaluators' ||
-							activeTab.label == 'Members'
+							activeTab.label == 'Members' ||
+							activeTab.label == 'Transactions'
 								? { 'onUpdate:show': (val) => (show = val), show }
 								: {}),
 						}"
@@ -80,6 +81,7 @@ import Categories from '@/components/Settings/Categories.vue'
 import EmailTemplates from '@/components/Settings/EmailTemplates.vue'
 import BrandSettings from '@/components/Settings/BrandSettings.vue'
 import PaymentGateways from '@/components/Settings/PaymentGateways.vue'
+import Transactions from '@/components/Settings/Transactions.vue'
 import ZoomSettings from '@/components/Settings/ZoomSettings.vue'
 import Badges from '@/components/Settings/Badges.vue'
 
@@ -168,8 +170,7 @@ const tabsStructure = computed(() => {
 				{
 					label: 'Configuration',
 					icon: 'CreditCard',
-					description:
-						'Configure the payment gateway and other payment related settings',
+					description: 'Manage all your payment related settings and defaults',
 					fields: [
 						{
 							label: 'Default Currency',
@@ -209,6 +210,12 @@ const tabsStructure = computed(() => {
 					template: markRaw(PaymentGateways),
 					description: 'Add and manage all your payment gateways',
 				},
+				{
+					label: 'Transactions',
+					icon: 'Landmark',
+					template: markRaw(Transactions),
+					description: 'View all your payment transactions',
+				},
 			],
 		},
 		{
diff --git a/frontend/src/components/Settings/TransactionDetails.vue b/frontend/src/components/Settings/TransactionDetails.vue
new file mode 100644
index 00000000..b996b02d
--- /dev/null
+++ b/frontend/src/components/Settings/TransactionDetails.vue
@@ -0,0 +1,152 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Transaction Details'),
+			size: '3xl',
+		}"
+	>
+		<template #body-content>
+			<div v-if="transactionData" class="text-base">
+				<div class="grid grid-cols-3 gap-5 mt-5">
+					<FormControl
+						:label="__('Payment Received')"
+						type="checkbox"
+						v-model="transactionData.payment_received"
+					/>
+					<FormControl
+						:label="__('Payment For Certificate')"
+						type="checkbox"
+						v-model="transactionData.payment_for_certificate"
+					/>
+				</div>
+
+				<div class="grid grid-cols-3 gap-5 mt-5">
+					<Link
+						:label="__('Member')"
+						doctype="User"
+						v-model="transactionData.member"
+					/>
+					<FormControl
+						:label="__('Billing Name')"
+						v-model="transactionData.billing_name"
+					/>
+					<Link
+						:label="__('Source')"
+						v-model="transactionData.source"
+						doctype="LMS Source"
+					/>
+				</div>
+
+				<div class="font-semibold mt-10">
+					{{ __('Payment Details') }}
+				</div>
+				<div class="grid grid-cols-3 gap-5 mt-5">
+					<Link
+						:label="__('Payment For Document Type')"
+						v-model="transactionData.payment_for_document_type"
+						doctype="DocType"
+					/>
+					<Link
+						:label="__('Payment For Document')"
+						v-model="transactionData.payment_for_document"
+						:doctype="transactionData.payment_for_document_type"
+					/>
+					<Link
+						:label="__('Address')"
+						v-model="transactionData.address"
+						doctype="Address"
+					/>
+				</div>
+
+				<div class="grid grid-cols-3 gap-5 mt-5">
+					<Link
+						:label="__('Currency')"
+						v-model="transactionData.currency"
+						doctype="Currency"
+					/>
+					<FormControl :label="__('Amount')" v-model="transactionData.amount" />
+					<FormControl
+						:label="__('Order ID')"
+						v-model="transactionData.order_id"
+					/>
+				</div>
+
+				<div class="grid grid-cols-3 gap-5 mt-5">
+					<FormControl :label="__('GSTIN')" v-model="transactionData.gstin" />
+					<FormControl :label="__('PAN')" v-model="transactionData.pan" />
+					<FormControl
+						:label="__('Payment ID')"
+						v-model="transactionData.payment_id"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #actions="{ close }">
+			<div class="space-x-2 pb-5 float-right">
+				<Button @click="openDetails(close)">
+					{{ __('Open the ') }}
+					{{
+						transaction.payment_for_document_type == 'LMS Course'
+							? __('Course')
+							: __('Batch')
+					}}
+				</Button>
+				<Button variant="solid" @click="saveTransaction(close)">
+					{{ __('Save') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Dialog, FormControl, Button } from 'frappe-ui'
+import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+
+const show = defineModel<boolean>({ required: true, default: false })
+const transactions = defineModel<any>('transactions')
+const router = useRouter()
+const showModal = defineModel('show')
+const transactionData = ref<{ [key: string]: any } | null>(null)
+
+const props = defineProps<{
+	transaction: { [key: string]: any } | null
+}>()
+
+watch(
+	() => props.transaction,
+	(newVal) => {
+		transactionData.value = newVal ? { ...newVal } : null
+	},
+	{ immediate: true }
+)
+
+const saveTransaction = (close: () => void) => {
+	transactions.value.setValue
+		.submit({
+			...transactionData.value,
+		})
+		.then(() => {
+			close()
+		})
+}
+
+const openDetails = (close: Function) => {
+	if (props.transaction) {
+		const docType = props.transaction.payment_for_document_type
+		const docName = props.transaction.payment_for_document
+		if (docType && docName) {
+			router.push({
+				name: docType == 'LMS Course' ? 'CourseDetail' : 'BatchDetail',
+				params: {
+					[docType == 'LMS Course' ? 'courseName' : 'batchName']: docName,
+				},
+			})
+		}
+	}
+	close()
+	showModal.value = false
+}
+</script>
diff --git a/frontend/src/components/Settings/Transactions.vue b/frontend/src/components/Settings/Transactions.vue
new file mode 100644
index 00000000..0c6904fb
--- /dev/null
+++ b/frontend/src/components/Settings/Transactions.vue
@@ -0,0 +1,241 @@
+<template>
+	<div class="flex min-h-0 flex-col text-base">
+		<div class="mb-5">
+			<div class="text-xl font-semibold mb-1 text-ink-gray-9">
+				{{ __(label) }}
+			</div>
+			<div class="text-ink-gray-6 leading-5">
+				{{ __(description) }}
+			</div>
+		</div>
+
+		<div class="flex items-center space-x-5 mb-4">
+			<FormControl
+				v-model="billingName"
+				:placeholder="__('Filter by Billing Name')"
+			/>
+			<Link
+				v-model="member"
+				doctype="User"
+				:placeholder="__('Filter by Member')"
+			/>
+			<FormControl
+				v-model="paymentReceived"
+				type="checkbox"
+				:label="__('Payment Received')"
+			/>
+			<FormControl
+				v-model="paymentForCertificate"
+				type="checkbox"
+				:label="__('Payment for Certificate')"
+			/>
+		</div>
+
+		<div v-if="transactions.data?.length" class="overflow-y-scroll">
+			<ListView
+				:columns="columns"
+				:rows="transactions.data"
+				row-key="name"
+				:options="{
+                    showTooltip: false,
+                    selectable: false,
+                    onRowClick: (row: { [key: string]: any }) => {
+                        openForm(row)
+                    },
+                }"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in columns">
+						<template #prefix="{ item }">
+							<FeatherIcon
+								v-if="item.icon"
+								:name="item.icon"
+								class="h-4 w-4 stroke-1.5"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+
+				<ListRows>
+					<ListRow :row="row" v-for="row in transactions.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<FormControl
+									v-if="
+										['payment_received', 'payment_for_certificate'].includes(
+											column.key
+										)
+									"
+									type="checkbox"
+									v-model="row[column.key]"
+									:disabled="true"
+								/>
+								<div v-else-if="column.key == 'amount'">
+									{{ getCurrencySymbol(row['currency']) }} {{ row[column.key] }}
+								</div>
+								<div v-else class="leading-5 text-sm">
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+			</ListView>
+			<div
+				v-if="transactions.data.length && transactions.hasNextPage"
+				class="flex justify-center mt-4"
+			>
+				<Button @click="transactions.next()">
+					<template #prefix>
+						<RefreshCw class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ __('Load More') }}
+				</Button>
+			</div>
+		</div>
+	</div>
+	<TransactionDetails
+		v-model="showForm"
+		:transaction="currentTransaction"
+		v-model:transactions="transactions"
+		v-model:show="show"
+	/>
+</template>
+<script setup lang="ts">
+import {
+	Button,
+	createListResource,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	FeatherIcon,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	FormControl,
+} from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+import { RefreshCw } from 'lucide-vue-next'
+import TransactionDetails from './TransactionDetails.vue'
+import Link from '@/components/Controls/Link.vue'
+
+const showForm = ref(false)
+const currentTransaction = ref<{ [key: string]: any } | null>(null)
+const show = defineModel('show')
+const billingName = ref(null)
+const paymentReceived = ref(false)
+const paymentForCertificate = ref(false)
+const member = ref(null)
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const transactions = createListResource({
+	doctype: 'LMS Payment',
+	fields: [
+		'name',
+		'member',
+		'billing_name',
+		'source',
+		'payment_for_document_type',
+		'payment_for_document',
+		'payment_received',
+		'payment_for_certificate',
+		'currency',
+		'amount',
+		'order_id',
+		'payment_id',
+		'gstin',
+		'pan',
+		'address',
+	],
+	auto: true,
+	orderBy: 'modified desc',
+})
+
+watch(
+	[billingName, member, paymentReceived, paymentForCertificate],
+	([
+		newBillingName,
+		newMember,
+		newPaymentReceived,
+		newPaymentForCertificate,
+	]) => {
+		transactions.update({
+			filters: [
+				newBillingName ? [['billing_name', 'like', `%${newBillingName}%`]] : [],
+				newMember ? [['member', '=', newMember]] : [],
+				newPaymentReceived
+					? [['payment_received', '=', newPaymentReceived]]
+					: [],
+				newPaymentForCertificate
+					? [['payment_for_certificate', '=', newPaymentForCertificate]]
+					: [],
+			].flat(),
+		})
+		transactions.reload()
+	},
+	{ immediate: true }
+)
+
+const openForm = (transaction: { [key: string]: any }) => {
+	currentTransaction.value = transaction
+	showForm.value = true
+}
+
+const getCurrencySymbol = (currency: string) => {
+	const currencySymbols: Record<string, string> = {
+		USD: '$',
+		EUR: '€',
+		GBP: '£',
+		INR: '₹',
+		AED: 'د.إ',
+		CHF: 'Fr',
+		JPY: '¥',
+		AUD: '$',
+	}
+	return currencySymbols[currency] || currency
+}
+
+const columns = computed(() => {
+	return [
+		{
+			label: __('Billing Name'),
+			icon: 'user',
+			key: 'billing_name',
+			width: '30%',
+		},
+		{
+			label: __('Amount'),
+			icon: 'dollar-sign',
+			key: 'amount',
+			width: '20%',
+			align: 'right',
+		},
+		{
+			label: __('Payment Received'),
+			icon: 'check-circle',
+			key: 'payment_received',
+			width: '25%',
+			align: 'center',
+		},
+		{
+			label: __('Payment for Certificate'),
+			icon: 'award',
+			key: 'payment_for_certificate',
+			width: '25%',
+			align: 'center',
+		},
+	]
+})
+</script>
diff --git a/lms/lms/doctype/lms_payment/lms_payment.json b/lms/lms/doctype/lms_payment/lms_payment.json
index aaea6a9a..662aa6e1 100644
--- a/lms/lms/doctype/lms_payment/lms_payment.json
+++ b/lms/lms/doctype/lms_payment/lms_payment.json
@@ -147,6 +147,7 @@
    "default": "0",
    "fieldname": "payment_for_certificate",
    "fieldtype": "Check",
+   "in_standard_filter": 1,
    "label": "Payment for Certificate"
   }
  ],
@@ -161,7 +162,7 @@
    "link_fieldname": "payment"
   }
  ],
- "modified": "2025-08-19 10:33:15.457678",
+ "modified": "2025-09-23 11:04:00.462274",
  "modified_by": "sayali@frappe.io",
  "module": "LMS",
  "name": "LMS Payment",