Dashboard Page: Add YTD Option

Adding the ability to select YTD (Year to Date) slicer on the Dashboard page.

src/pages/Dashboard/BaseDashboardChart.vue

@@ -11,7 +11,7 @@ export default defineComponent({
   data() {
     return {
       period: 'This Year' as PeriodKey,
-      periodOptions: ['This Year', 'This Quarter', 'This Month'] as PeriodKey[],
+      periodOptions: ['This Year', 'YTD', 'This Quarter', 'This Month'] as PeriodKey[],
     };
   },
   watch: {

src/pages/Dashboard/Cashflow.vue

@@ -72,7 +72,7 @@ export default defineComponent({
   data: () => ({
     data: [] as { inflow: number; outflow: number; yearmonth: string }[],
     periodList: [],
-    periodOptions: ['This Year', 'This Quarter'],
+    periodOptions: ['This Year', 'YTD', 'This Quarter'],
     hasData: false,
   }),
   computed: {

src/pages/Dashboard/Dashboard.vue

@@ -14,7 +14,7 @@
         <PeriodSelector
           class="px-3"
           :value="period"
-          :options="['This Year', 'This Quarter', 'This Month']"
+          :options="['This Year', 'YTD', 'This Quarter', 'This Month']"
           @change="(value) => (period = value)"
         />
       </div>

src/pages/Dashboard/PeriodSelector.vue

@@ -51,7 +51,7 @@ export default defineComponent({
     value: { type: String as PropType<PeriodKey>, default: 'This Year' },
     options: {
       type: Array as PropType<PeriodKey[]>,
-      default: () => ['This Year', 'This Quarter', 'This Month'],
+      default: () => ['This Year', 'YTD', 'This Quarter', 'This Month'],
     },
   },
   emits: ['change'],
@@ -65,6 +65,7 @@ export default defineComponent({
     this.periodSelectorMap = {
       '': t`Set Period`,
       'This Year': t`This Year`,
+      'YTD': t`YTD`,
       'This Quarter': t`This Quarter`,
       'This Month': t`This Month`,
     };

src/pages/Dashboard/ProfitAndLoss.vue

@@ -57,7 +57,7 @@ export default defineComponent({
   data: () => ({
     data: [] as { yearmonth: string; balance: number }[],
     hasData: false,
-    periodOptions: ['This Year', 'This Quarter'],
+    periodOptions: ['This Year', 'YTD', 'This Quarter'],
   }),
   computed: {
     chartData() {

src/utils/misc.ts

@@ -24,6 +24,8 @@ export function getDatesAndPeriodList(period: PeriodKey): {
 
   if (period === 'This Year') {
     fromDate = toDate.minus({ months: 12 });
+  } else if (period === 'YTD') {
+    fromDate = DateTime.now().startOf('Year');
   } else if (period === 'This Quarter') {
     fromDate = toDate.minus({ months: 3 });
   } else if (period === 'This Month') {
@@ -39,6 +41,10 @@ export function getDatesAndPeriodList(period: PeriodKey): {
   while (true) {
     const nextDate = periodList.at(0)!.minus({ months: 1 });
     if (nextDate.toMillis() < fromDate.toMillis()) {
+      if (period === 'YTD'){
+        periodList.unshift(nextDate);
+        break;
+      }
       break;
     }
 

src/utils/types.ts

@@ -98,7 +98,7 @@ export type DropdownItem = {
 
 export type UIGroupedFields = Map<string, Map<string, Field[]>>;
 export type ExportFormat = 'csv' | 'json';
-export type PeriodKey = 'This Year' | 'This Quarter' | 'This Month';
+export type PeriodKey = 'This Year'| 'YTD' | 'This Quarter' | 'This Month';
 
 export type PrintValues = {
   print: Record<string, unknown>;