feat: add filter by fiscal year to Expense Claim Summary in PWA

Author: vinyselopal

frontend/src/components/ExpenseClaimSummary.vue

@@ -23,11 +23,11 @@
 					</div>
 					<span class="text-gray-800 text-base font-semibold leading-6">
 						{{
-							formatCurrency(
-								summary.data?.total_pending_amount,
-								company_currency
-							)
-						}}
+		formatCurrency(
+			summary.data?.total_pending_amount,
+			company_currency
+		)
+	}}
 					</span>
 				</div>
 				<div class="flex flex-col gap-1">
@@ -39,11 +39,11 @@
 					</div>
 					<span class="text-gray-800 text-base font-semibold leading-6">
 						{{
-							formatCurrency(
-								summary.data?.total_approved_amount,
-								company_currency
-							)
-						}}
+			formatCurrency(
+				summary.data?.total_approved_amount,
+				company_currency
+			)
+		}}
 					</span>
 				</div>
 
@@ -56,25 +56,37 @@
 					</div>
 					<span class="text-gray-800 text-base font-semibold leading-6">
 						{{
-							formatCurrency(
-								summary.data?.total_rejected_amount,
-								company_currency
-							)
-						}}
+			formatCurrency(
+				summary.data?.total_rejected_amount,
+				company_currency
+			)
+		}}
 					</span>
 				</div>
 			</div>
+			<div class="flex flex-col gap-1.5">
+				<span class="text-gray-600 text-base font-medium leading-5"> Fiscal Year </span>
+				<Autocomplete
+					label="Select Fiscal Year"
+					class="w-full"
+					placeholder="Select Fiscal Year"
+					:options="fiscalYears.data.fiscal_years"
+					v-model="selectedPeriod"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { FeatherIcon } from "frappe-ui"
-import { computed } from "vue"
+import { FeatherIcon, Autocomplete } from "frappe-ui"
+import { computed, ref, watch, inject, onMounted } from "vue"
+import { formatCurrency } from "@/utils/formatters"
+import { expenseClaimSummary as summary, fiscalYears } from "@/data/claims"
 
-import { expenseClaimSummary as summary } from "@/data/claims"
+const dayjs = inject("$dayjs")
 
-import { formatCurrency } from "@/utils/formatters"
+let selectedPeriod = ref({})
 
 const total_claimed_amount = computed(() => {
 	return (
@@ -84,5 +96,24 @@ const total_claimed_amount = computed(() => {
 	)
 })
 
+const fetchExpenseClaimSummary = (selectedPeriod) => {
+	const year_start_date = selectedPeriod && selectedPeriod.year_start_date
+	const year_end_date = selectedPeriod && selectedPeriod.year_end_date
+	summary.reload({ year_start_date, year_end_date })
+}
+
+watch(
+	() => selectedPeriod.value,
+	(newValue) => {
+		return fetchExpenseClaimSummary(newValue)
+	},
+	{ deep: true }
+)
+
 const company_currency = computed(() => summary.data?.currency)
+
+onMounted(() => {
+	selectedPeriod.value = fiscalYears.data.current_fiscal_year
+	fetchExpenseClaimSummary(selectedPeriod.value)
+})
 </script>

frontend/src/data/claims.js

@@ -1,14 +1,50 @@
 import { createResource } from "frappe-ui"
 import { employeeResource } from "./employee"
 import { reactive } from "vue"
+import dayjs from "@/utils/dayjs"
 
 export const expenseClaimSummary = createResource({
 	url: "hrms.api.get_expense_claim_summary",
+	makeParams(params) {
+		return {
+			employee: employeeResource.data.name,
+			start_date: params ? params.year_start_date : null,
+			end_date: params ? params.year_end_date : null,
+		}
+	},
+	auto: true,
+})
+
+function getPeriodLabel(period) {
+	return `${dayjs(period?.year_start_date).format("MMM YYYY")} - ${dayjs(
+		period?.year_end_date
+	).format("MMM YYYY")}`
+}
+
+const add_options = (period) => {
+	return {
+		...period,
+		value: getPeriodLabel(period),
+		label: getPeriodLabel(period),
+	}
+}
+
+export const fiscalYears = createResource({
+	url: "hrms.api.get_fiscal_years_for_company",
 	params: {
-		employee: employeeResource.data.name,
+		company: employeeResource.data?.company,
+		current_date: dayjs().format("YYYY-MM-DD"),
 	},
 	auto: true,
-	cache: "hrms:expense_claim_summary",
+	transform: (data) => {
+		const newdata = {
+			current_fiscal_year: add_options(data.current_fiscal_year),
+			fiscal_years: data.fiscal_years.map((period) => {
+				return add_options(period)
+			}),
+		}
+		return newdata
+	},
 })
 
 const transformClaimData = (data) => {

hrms/api/__init__.py

@@ -5,6 +5,8 @@
 from frappe.utils import getdate
 from frappe.utils.data import cint
 
+from erpnext.accounts.utils import get_fiscal_year, get_fiscal_years
+
 SUPPORTED_FIELD_TYPES = [
 	"Link",
 	"Select",
@@ -355,9 +357,14 @@ def get_expense_claim_filters(
 
 
 @frappe.whitelist()
-def get_expense_claim_summary(employee: str) -> dict:
+def get_expense_claim_summary(
+	employee: str, start_date: str | None = None, end_date: str | None = None
+) -> dict:
 	from frappe.query_builder.functions import Sum
 
+	start_date = frappe.utils.data.get_datetime(start_date)
+	end_date = frappe.utils.data.get_datetime(end_date)
+
 	Claim = frappe.qb.DocType("Expense Claim")
 
 	pending_claims_case = (
@@ -379,7 +386,7 @@ def get_expense_claim_summary(employee: str) -> dict:
 	)
 	sum_rejected_claims = Sum(rejected_claims_case).as_("total_rejected_amount")
 
-	summary = (
+	query = (
 		frappe.qb.from_(Claim)
 		.select(
 			sum_pending_claims,
@@ -388,8 +395,12 @@ def get_expense_claim_summary(employee: str) -> dict:
 			Claim.company,
 		)
 		.where((Claim.docstatus != 2) & (Claim.employee == employee))
-	).run(as_dict=True)[0]
+	)
 
+	if start_date and end_date:
+		query = query.where((Claim.posting_date >= start_date) & (Claim.posting_date <= end_date))
+
+	summary = query.run(as_dict=True)[0]
 	currency = frappe.db.get_value("Company", summary.company, "default_currency")
 	summary["currency"] = currency
 
@@ -632,3 +643,11 @@ def get_allowed_states_for_workflow(workflow: dict, user_id: str) -> list[str]:
 @frappe.whitelist()
 def is_employee_checkin_allowed():
 	return cint(frappe.db.get_single_value("HR Settings", "allow_employee_checkin_from_mobile_app"))
+
+
+@frappe.whitelist()
+def get_fiscal_years_for_company(company):
+	today = getdate()
+	fiscal_years = get_fiscal_years(company=company, as_dict=True)
+	current_fiscal_year = get_fiscal_year(company=company, date=today, as_dict=True)
+	return {"fiscal_years": fiscal_years, "current_fiscal_year": current_fiscal_year}