diff --git a/dir with spaces/test.books.db b/dir with spaces/test.books.db
new file mode 100644
index 000000000..e8348ef1c
Binary files /dev/null and b/dir with spaces/test.books.db differ
diff --git a/reports/AccountReport.ts b/reports/AccountReport.ts
index ad4e05910..1a8fa720f 100644
--- a/reports/AccountReport.ts
+++ b/reports/AccountReport.ts
@@ -39,6 +39,7 @@ export abstract class AccountReport extends LedgerReport {
   toYear?: number;
   consolidateColumns = false;
   hideGroupAmounts = false;
+  showOpeningAndClosing = false;
   periodicity: Periodicity = 'Monthly';
   basedOn: BasedOn = 'Until Date';
 
@@ -47,7 +48,15 @@ export abstract class AccountReport extends LedgerReport {
 
   accountMap?: Record<string, Account>;
 
+  get acceptSingleTimePeriod() {
+    return true;
+  }
+
   async setDefaultFilters(): Promise<void> {
+    if (this.basedOn === 'Period' && !this.toDate) {
+      this.toDate = DateTime.now().plus({ days: 1 }).toISODate();
+    }
+
     if (this.basedOn === 'Until Date' && !this.toDate) {
       this.toDate = DateTime.now().plus({ days: 1 }).toISODate();
     }
@@ -57,6 +66,14 @@ export abstract class AccountReport extends LedgerReport {
       this.toYear = this.fromYear + 1;
     }
 
+    if (this.basedOn === 'Period' && !this.fromDate) {
+      this.fromDate = DateTime.now()
+        .plus({ days: 1 })
+        .minus({ month: 1 })
+        .toISODate();
+      this.count = 3;
+    }
+
     await this._setDateRanges();
   }
 
@@ -124,6 +141,8 @@ export abstract class AccountReport extends LedgerReport {
       indent: al.level ?? 0,
     } as ReportCell;
 
+    let sumValue = 0;
+
     const balanceCells = this._dateRanges!.map((k) => {
       const rawValue = al.valueMap?.get(k)?.balance ?? 0;
       let value = this.fyo.format(rawValue, 'Currency');
@@ -131,6 +150,8 @@ export abstract class AccountReport extends LedgerReport {
         value = '';
       }
 
+      sumValue += rawValue;
+
       return {
         rawValue,
         value,
@@ -139,6 +160,18 @@ export abstract class AccountReport extends LedgerReport {
       } as ReportCell;
     });
 
+    if (this.showOpeningAndClosing) {
+      balanceCells.push({
+        rawValue: sumValue,
+        value:
+          this.hideGroupAmounts && al.isGroup
+            ? ''
+            : this.fyo.format(sumValue, 'Currency'),
+        align: 'right',
+        width: ACC_BAL_WIDTH,
+      });
+    }
+
     return {
       cells: [nameCell, balanceCells].flat(),
       level: al.level,
@@ -251,51 +284,108 @@ export abstract class AccountReport extends LedgerReport {
   }
 
   async _getDateRanges(): Promise<DateRange[]> {
-    const endpoints = await this._getFromAndToDates();
-    const fromDate = DateTime.fromISO(endpoints.fromDate);
-    const toDate = DateTime.fromISO(endpoints.toDate);
+    let dateRanges: DateRange[];
 
-    if (this.consolidateColumns) {
-      return [
+    if (this.basedOn === 'Period') {
+      const toDate = DateTime.fromISO(this.toDate!).plus({ days: 1 });
+      const fromDate = DateTime.fromISO(this.fromDate);
+
+      dateRanges = [
         {
           toDate,
           fromDate,
         },
       ];
-    }
 
-    const months: number = monthsMap[this.periodicity];
-    const dateRanges: DateRange[] = [
-      {
-        toDate,
-        fromDate: this._fixMonthsJump(toDate, toDate.minus({ months })),
-      },
-    ];
+      const interval = toDate.diff(fromDate, ['years', 'months', 'days']);
+      const count = this.count ?? 1;
+
+      for (let i = 1; i < count; i++) {
+        const lastRange = dateRanges.at(-1)!;
+        dateRanges.push({
+          toDate: lastRange.fromDate,
+          fromDate: this._fixMonthsJump(
+            toDate,
+            lastRange.fromDate.minus(interval)
+          ),
+        });
+      }
 
-    let count = this.count ?? 1;
-    if (this.basedOn === 'Fiscal Year') {
-      count = Math.ceil(((this.toYear! - this.fromYear!) * 12) / months);
-    }
+      if (this.consolidateColumns) {
+        const firstRange = dateRanges.at(0)!;
+        const lastRange = dateRanges.at(-1)!;
+        return [
+          {
+            toDate: firstRange.toDate,
+            fromDate: lastRange.fromDate,
+          },
+        ];
+      }
+    } else {
+      const endpoints = await this._getFromAndToDates();
+      const fromDate = DateTime.fromISO(endpoints.fromDate);
+      const toDate = DateTime.fromISO(endpoints.toDate);
+
+      if (this.consolidateColumns) {
+        return [
+          {
+            toDate,
+            fromDate,
+          },
+        ];
+      }
 
-    for (let i = 1; i < count; i++) {
-      const lastRange = dateRanges.at(-1)!;
-      dateRanges.push({
-        toDate: lastRange.fromDate,
-        fromDate: this._fixMonthsJump(
+      const months: number = monthsMap[this.periodicity];
+      const interval = { months };
+      dateRanges = [
+        {
           toDate,
-          lastRange.fromDate.minus({ months })
-        ),
-      });
+          fromDate: this._fixMonthsJump(toDate, toDate.minus(interval)),
+        },
+      ];
+
+      let count = this.count ?? 1;
+      if (this.basedOn === 'Fiscal Year') {
+        count = Math.ceil(((this.toYear! - this.fromYear!) * 12) / months);
+      }
+
+      for (let i = 1; i < count; i++) {
+        const lastRange = dateRanges.at(-1)!;
+        dateRanges.push({
+          toDate: lastRange.fromDate,
+          fromDate: this._fixMonthsJump(
+            toDate,
+            lastRange.fromDate.minus({ months })
+          ),
+        });
+      }
     }
 
-    return dateRanges.sort((b, a) => b.toDate.toMillis() - a.toDate.toMillis());
+    dateRanges = dateRanges.sort(
+      (b, a) => b.toDate.toMillis() - a.toDate.toMillis()
+    );
+
+    if (this.showOpeningAndClosing) {
+      const openingPeriod = {
+        fromDate: DateTime.fromISO('0001-01-01'),
+        toDate: dateRanges[0].fromDate,
+      };
+      dateRanges = dateRanges.reverse();
+      dateRanges.unshift(openingPeriod);
+    }
+
+    return dateRanges;
   }
 
   async _getFromAndToDates() {
     let toDate: string;
     let fromDate: string;
 
-    if (this.basedOn === 'Until Date') {
+    if (this.basedOn === 'Period') {
+      throw new Error(
+        '_getFromAndToDates should not be called with period basedOn'
+      );
+    } else if (this.basedOn === 'Until Date') {
       toDate = DateTime.fromISO(this.toDate!).plus({ days: 1 }).toISODate();
       const months = monthsMap[this.periodicity] * Math.max(this.count ?? 1, 1);
       fromDate = DateTime.fromISO(this.toDate!).minus({ months }).toISODate();
@@ -312,13 +402,28 @@ export abstract class AccountReport extends LedgerReport {
     return { fromDate, toDate };
   }
 
-  async _getQueryFilters(): Promise<QueryFilter> {
+  _getDateBoundaries() {
+    const last = this._dateRanges.length - 1;
+    if (this.showOpeningAndClosing) {
+      return {
+        fromDate: this._dateRanges[0].fromDate,
+        toDate: this._dateRanges[last].toDate,
+      };
+    } else {
+      return {
+        fromDate: this._dateRanges[last].fromDate,
+        toDate: this._dateRanges[0].toDate,
+      };
+    }
+  }
+
+  _getQueryFilters(): QueryFilter {
     const filters: QueryFilter = {};
-    const { fromDate, toDate } = await this._getFromAndToDates();
+    const { fromDate, toDate } = this._getDateBoundaries();
 
     const dateFilter: string[] = [];
-    dateFilter.push('<', toDate);
-    dateFilter.push('>=', fromDate);
+    dateFilter.push('<', toDate.toISODate());
+    dateFilter.push('>=', fromDate.toISODate());
 
     filters.date = dateFilter;
     filters.reverted = false;
@@ -339,24 +444,30 @@ export abstract class AccountReport extends LedgerReport {
         options: [
           { label: t`Fiscal Year`, value: 'Fiscal Year' },
           { label: t`Until Date`, value: 'Until Date' },
+          { label: t`Period`, value: 'Period' },
         ],
         label: t`Based On`,
         fieldname: 'basedOn',
       },
-      {
-        fieldtype: 'Select',
-        options: [
-          { label: t`Monthly`, value: 'Monthly' },
-          { label: t`Quarterly`, value: 'Quarterly' },
-          { label: t`Half Yearly`, value: 'Half Yearly' },
-          { label: t`Yearly`, value: 'Yearly' },
-        ],
-        label: t`Periodicity`,
-        fieldname: 'periodicity',
-      },
-      ,
     ] as Field[];
 
+    let periodicityFilters = [] as Field[];
+    if (this.basedOn !== 'Period') {
+      periodicityFilters = [
+        {
+          fieldtype: 'Select',
+          options: [
+            { label: t`Monthly`, value: 'Monthly' },
+            { label: t`Quarterly`, value: 'Quarterly' },
+            { label: t`Half Yearly`, value: 'Half Yearly' },
+            { label: t`Yearly`, value: 'Yearly' },
+          ],
+          label: t`Periodicity`,
+          fieldname: 'periodicity',
+        },
+      ] as Field[];
+    }
+
     let dateFilters = [
       {
         fieldtype: 'Int',
@@ -376,7 +487,32 @@ export abstract class AccountReport extends LedgerReport {
       },
     ] as Field[];
 
-    if (this.basedOn === 'Until Date') {
+    if (this.basedOn === 'Period') {
+      dateFilters = [
+        {
+          fieldtype: 'Date',
+          fieldname: 'fromDate',
+          placeholder: t`From Date`,
+          label: t`From Date`,
+          required: true,
+        },
+        {
+          fieldtype: 'Date',
+          fieldname: 'toDate',
+          placeholder: t`To Date`,
+          label: t`To Date`,
+          required: true,
+        },
+        {
+          fieldtype: 'Int',
+          fieldname: 'count',
+          minvalue: 1,
+          placeholder: t`Number of periods`,
+          label: t`Number of periods`,
+          required: true,
+        },
+      ] as Field[];
+    } else if (this.basedOn === 'Until Date') {
       dateFilters = [
         {
           fieldtype: 'Date',
@@ -398,6 +534,7 @@ export abstract class AccountReport extends LedgerReport {
 
     return [
       filters,
+      periodicityFilters,
       dateFilters,
       {
         fieldtype: 'Check',
@@ -409,6 +546,11 @@ export abstract class AccountReport extends LedgerReport {
         label: t`Hide Group Amounts`,
         fieldname: 'hideGroupAmounts',
       } as Field,
+      {
+        fieldtype: 'Check',
+        label: t`Show Openings and Closings`,
+        fieldname: 'showOpeningAndClosing',
+      } as Field,
     ].flat();
   }
 
@@ -423,11 +565,18 @@ export abstract class AccountReport extends LedgerReport {
       },
     ] as ColumnField[];
 
-    const dateColumns = this._dateRanges!.sort(
+    let ranges = this._dateRanges!.sort(
       (a, b) => b.toDate.toMillis() - a.toDate.toMillis()
-    ).map((d) => {
+    );
+    if (this.showOpeningAndClosing) {
+      ranges = ranges.reverse();
+    }
+
+    const dateColumns = ranges.map((d) => {
       const toDate = d.toDate.minus({ days: 1 });
-      const label = this.fyo.format(toDate.toJSDate(), 'Date');
+      const label =
+        // this.fyo.format(d.fromDate.toJSDate(), 'Date') + " - " +
+        this.fyo.format(toDate.toJSDate(), 'Date');
 
       return {
         label,
@@ -438,6 +587,17 @@ export abstract class AccountReport extends LedgerReport {
       } as ColumnField;
     });
 
+    if (this.showOpeningAndClosing) {
+      dateColumns[0].label = t`Opening`;
+      dateColumns.push({
+        label: t`Closing`,
+        fieldtype: 'Data',
+        fieldname: 'toDate',
+        align: 'right',
+        width: ACC_BAL_WIDTH,
+      });
+    }
+
     return [columns, dateColumns].flat();
   }
 
diff --git a/reports/GeneralLedger/GeneralLedger.ts b/reports/GeneralLedger/GeneralLedger.ts
index 1752c9933..1624f1347 100644
--- a/reports/GeneralLedger/GeneralLedger.ts
+++ b/reports/GeneralLedger/GeneralLedger.ts
@@ -33,6 +33,10 @@ export class GeneralLedger extends LedgerReport {
   groupBy: 'none' | 'party' | 'account' | 'referenceName' = 'none';
   _rawData: LedgerEntry[] = [];
 
+  get acceptSingleTimePeriod() {
+    return true;
+  }
+
   constructor(fyo: Fyo) {
     super(fyo);
   }
diff --git a/reports/TrialBalance/TrialBalance.ts b/reports/TrialBalance/TrialBalance.ts
index 24e98cc5c..30063ebe3 100644
--- a/reports/TrialBalance/TrialBalance.ts
+++ b/reports/TrialBalance/TrialBalance.ts
@@ -43,6 +43,10 @@ export class TrialBalance extends AccountReport {
 
   accountMap?: Record<string, Account>;
 
+  get acceptSingleTimePeriod() {
+    return true;
+  }
+
   get rootTypes(): AccountRootType[] {
     return [
       AccountRootTypeEnum.Asset,
diff --git a/src/components/Controls/DatePeriod.vue b/src/components/Controls/DatePeriod.vue
new file mode 100644
index 000000000..1f937f1b5
--- /dev/null
+++ b/src/components/Controls/DatePeriod.vue
@@ -0,0 +1,354 @@
+<style scoped>
+.dropdown1 :deep(button) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.dropdown2 :deep(button),
+.btn-left :deep(button),
+.date-start :deep(.rounded),
+.date-stop :deep(.rounded) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btn-right :deep(button) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.date-start,
+.date-stop {
+  width: 8rem;
+}
+.date-start :deep(input + div),
+.date-stop :deep(input + div),
+.date-start :deep(input),
+.date-stop :deep(input) {
+  height: 2rem;
+  --tw-text-opacity: 1;
+  color: rgba(82, 82, 82, var(--tw-text-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(237, 237, 237, var(--tw-bg-opacity));
+}
+</style>
+<template>
+  <div style="display: flex" class="flex">
+    <div class="dropdown1">
+      <Dropdown
+        ref="dropdownPeriod"
+        class="text-sm"
+        :items="periodOptions"
+        right
+      >
+        <template
+          #default="{
+            toggleDropdown,
+            highlightItemUp,
+            highlightItemDown,
+            selectHighlightedItem,
+          }"
+        >
+          <Button
+            icon
+            @click="toggleDropdown()"
+            @keydown.down="highlightItemDown"
+            @keydown.up="highlightItemUp"
+            @keydown.enter="selectHighlightedItem"
+          >
+            {{ periodSelectorMap?.[value] ?? value }}
+            <feather-icon name="chevron-down" class="ms-1 w-3 h-3" />
+          </Button>
+        </template>
+      </Dropdown>
+    </div>
+    <div
+      class="dropdown2"
+      :value="value"
+      :class="{
+        hidden: value == 'custom',
+      }"
+    >
+      <Dropdown
+        ref="dropdownAnchor"
+        class="text-sm"
+        :items="anchorOptions"
+        right
+      >
+        <template
+          #default="{
+            toggleDropdown,
+            highlightItemUp,
+            highlightItemDown,
+            selectHighlightedItem,
+          }"
+        >
+          <Button
+            icon
+            @click="toggleDropdown()"
+            @keydown.down="highlightItemDown"
+            @keydown.up="highlightItemUp"
+            @keydown.enter="selectHighlightedItem"
+          >
+            {{ anchorSelectorMap?.[anchorValue] ?? anchorValue }}
+            <feather-icon name="chevron-down" class="ms-1 w-3 h-3" />
+          </Button>
+        </template>
+      </Dropdown>
+    </div>
+    <div class="btn-left">
+      <Button icon @click="prev"
+        ><feather-icon name="chevron-left" class="ms-1 w-3 h-3"
+      /></Button>
+    </div>
+    <div class="date-start">
+      <DateComp
+        :df="startDateField"
+        :value="startDate.toISODate()"
+        @change="changeStartDate"
+      ></DateComp>
+    </div>
+    <div class="date-stop">
+      <DateComp
+        :df="stopDateField"
+        :value="stopDate.minus({ days: 1 }).toISODate()"
+        @change="changeStopDate"
+      ></DateComp>
+    </div>
+    <div class="btn-right">
+      <Button icon @click="next"
+        ><feather-icon name="chevron-right" class="ms-1 w-3 h-3"
+      /></Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { t } from 'fyo';
+import { fyo } from 'src/initFyo';
+import { DateTime } from 'luxon';
+import { ModelNameEnum } from 'models/types';
+import Button from 'src/components/Button.vue';
+import Dropdown from 'src/components/Dropdown.vue';
+import DateComp from 'src/components/Controls/Date.vue';
+import { PeriodKey } from 'src/utils/types';
+import { PropType } from 'vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DatePeriod',
+  components: {
+    Dropdown,
+    Button,
+    DateComp,
+  },
+  props: {},
+  emits: ['change'],
+  data() {
+    return {
+      value: 'M',
+      anchorValue: 'civil',
+      periodSelectorMap: {} as Record<PeriodKey | '', string>,
+      anchorSelectorMap: {} as Record<PeriodKey | '', string>,
+      anchorOptions: [],
+      periodOptions: [] as { label: string; action: () => void }[],
+      startDateField: {
+        name: 'startDate',
+        label: '',
+      },
+      stopDateField: {
+        name: 'stopDate',
+        label: '',
+      },
+      startDate: this.startDate || DateTime.now().startOf('day'),
+      stopDate: this.stopDate || DateTime.now().startOf('day'),
+    };
+  },
+  mounted() {
+    this.anchorSelectorMap = {
+      civil: t`Civil`,
+      fiscal: t`Fiscal`,
+      to_date: t`To Date`,
+      custom: t`Custom`,
+    };
+
+    this.anchorOptions = Object.keys(this.anchorSelectorMap)
+      .map((option) => {
+        if (option == 'custom') return null;
+
+        let label = this.anchorSelectorMap[option] ?? option;
+
+        return {
+          label,
+          action: () => this.selectAnchor(option),
+        };
+      })
+      .filter((x) => x);
+
+    this.periodSelectorMap = {
+      Y: t`Year`,
+      S: t`Semester`,
+      Q: t`Quarter`,
+      M: t`Month`,
+      custom: t`Custom`,
+    };
+
+    this.periodOptions = Object.keys(this.periodSelectorMap).map((option) => {
+      let label = this.periodSelectorMap[option] ?? option;
+
+      return {
+        label,
+        action: () => this.selectOption(option),
+      };
+    });
+
+    this.selectAnchor(this.anchorValue);
+  },
+  methods: {
+    async selectAnchor(value: PeriodKey) {
+      this.anchorValue = value;
+
+      if (this.value == 'custom') return;
+
+      if (this.anchorValue == 'to_date') {
+        this.stopDate = DateTime.now().startOf('day').plus({ days: 1 });
+        this.startDate = this.stopDate.minus(this.period(this.value, 1));
+      } else if (this.anchorValue == 'civil') {
+        this.startDate = DateTime.now().startOf('day');
+        switch (this.value) {
+          case 'Y':
+            this.startDate = this.startDate.startOf('year');
+            break;
+          case 'S':
+            this.startDate = this.startDate.startOf('month').set({
+              month: this.startDate.month < 7 ? 1 : 7,
+            });
+            break;
+          case 'Q':
+            this.startDate = this.startDate.startOf('quarter');
+            break;
+          case 'M':
+            this.startDate = this.startDate.startOf('month');
+            break;
+        }
+        this.stopDate = this.startDate.plus(this.period(this.value, 1));
+      } else if (this.anchorValue == 'fiscal') {
+        const fys = DateTime.fromJSDate(
+          await fyo.getValue(
+            ModelNameEnum.AccountingSettings,
+            'fiscalYearStart'
+          )
+        );
+        const fye = DateTime.fromJSDate(
+          await fyo.getValue(ModelNameEnum.AccountingSettings, 'fiscalYearEnd')
+        );
+        const duration = fye
+          .plus({ days: 1 })
+          .diff(fys, ['years', 'months', 'days']);
+
+        const today = DateTime.now().startOf('day');
+        this.startDate = DateTime.now().startOf('day').set({
+          month: fys.month,
+          day: fys.day,
+        });
+
+        if (this.startDate.toJSDate() > today.toJSDate()) {
+          this.startDate = this.startDate.minus({ years: 1 });
+        }
+
+        for (
+          let i = 12;
+          i > 0 &&
+          this.startDate.plus(this.period(this.value, 1)).toJSDate() <
+            today.toJSDate();
+          i--
+        ) {
+          this.startDate = this.startDate.plus(this.period(this.value, 1));
+        }
+
+        this.stopDate = this.startDate.plus(
+          this.value == 'Y' ? duration : this.period(this.value, 1)
+        );
+      }
+
+      this.emitChanged();
+      (
+        this.$refs.dropdownAnchor as InstanceType<typeof Dropdown>
+      ).toggleDropdown(false);
+    },
+    selectOption(value: PeriodKey) {
+      this.value = value;
+      if (this.value != 'custom') {
+        this.stopDate = this.startDate.plus(this.period(this.value, 1));
+        this.selectAnchor(this.anchorValue);
+      } else {
+        this.emitChanged();
+      }
+
+      (
+        this.$refs.dropdownPeriod as InstanceType<typeof Dropdown>
+      ).toggleDropdown(false);
+    },
+    changeStartDate(d) {
+      this.startDate = DateTime.fromJSDate(d);
+      this.anchorValue = 'custom';
+      if (this.value != 'custom') {
+        this.stopDate = this.startDate.plus(this.period(this.value, 1));
+      }
+      this.emitChanged();
+    },
+    changeStopDate(d) {
+      this.stopDate = DateTime.fromJSDate(d).plus({ days: 1 });
+      this.anchorValue = 'custom';
+      if (this.value != 'custom') {
+        this.startDate = this.stopDate.minus(this.period(this.value, 1));
+      }
+      this.emitChanged();
+    },
+    emitChanged() {
+      console.log('emit change');
+      this.$emit('change', {
+        start: this.startDate,
+        stop: this.stopDate,
+        last: this.stopDate.minus({ day: 1 }),
+      });
+    },
+    prev() {
+      if (this.value != 'custom') {
+        this.startDate = this.startDate.minus(this.period(this.value, 1));
+        this.stopDate = this.stopDate.minus(this.period(this.value, 1));
+      } else {
+        let interval = this.interval();
+        this.stopDate = this.startDate;
+        this.startDate = this.stopDate.minus(interval);
+      }
+      this.emitChanged();
+    },
+    next() {
+      if (this.value != 'custom') {
+        this.startDate = this.startDate.plus(this.period(this.value, 1));
+        this.stopDate = this.stopDate.plus(this.period(this.value, 1));
+      } else {
+        let interval = this.interval();
+        this.startDate = this.stopDate;
+        this.stopDate = this.startDate.plus(interval);
+      }
+      this.emitChanged();
+    },
+    period(val, n) {
+      switch (val) {
+        case 'Y':
+          return { years: n };
+        case 'S':
+          return { months: n * 6 };
+        case 'Q':
+          return { months: n * 3 };
+        case 'M':
+          return { months: n };
+      }
+    },
+    interval() {
+      return this.stopDate.diff(this.startDate, ['years', 'months', 'days']);
+    },
+  },
+});
+</script>
diff --git a/src/pages/Report.vue b/src/pages/Report.vue
index 02d94de17..aac590cc2 100644
--- a/src/pages/Report.vue
+++ b/src/pages/Report.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col w-full h-full">
     <PageHeader :title="title">
+      <div v-if="report?.acceptSingleTimePeriod">
+        <DatePeriod @change="periodChanged"></DatePeriod>
+      </div>
       <DropdownWithActions
         v-for="group of groupedActions"
         :key="group.label"
@@ -27,7 +30,7 @@
       class="grid grid-cols-5 gap-4 p-4 border-b dark:border-gray-800"
     >
       <FormControl
-        v-for="field in report.filters"
+        v-for="field in reportFilters()"
         :key="field.fieldname + '-filter'"
         :border="true"
         size="small"
@@ -51,6 +54,7 @@ import { reports } from 'reports';
 import { Report } from 'reports/Report';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
+import DatePeriod from 'src/components/Controls/DatePeriod.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import ListReport from 'src/components/Report/ListReport.vue';
@@ -65,6 +69,7 @@ import { PropType, computed, defineComponent, inject } from 'vue';
 export default defineComponent({
   components: {
     PageHeader,
+    DatePeriod,
     FormControl,
     ListReport,
     DropdownWithActions,
@@ -155,12 +160,40 @@ export default defineComponent({
         this.report = await getReport(this.reportClassName);
       }
 
+      if (this.report.acceptSingleTimePeriod && this.report?.basedOn != null)
+        await this.report.set('basedOn', 'Period');
+      if (this.startDate)
+        await this.report.set(
+          'fromDate',
+          this.startDate.toISODate() as DocValue
+        );
+      if (this.lastDate)
+        await this.report.set('toDate', this.lastDate.toISODate() as DocValue);
+
       if (!this.report.reportData.length) {
         await this.report.setReportData();
       } else if (this.report.shouldRefresh) {
         await this.report.setReportData(undefined, true);
       }
     },
+    reportFilters() {
+      let filters = this.report.filters;
+      if (this.report.acceptSingleTimePeriod) {
+        filters = filters.filter(
+          (field) =>
+            !['fromDate', 'toDate', 'basedOn'].includes(field.fieldname)
+        );
+      }
+      return filters;
+    },
+    async periodChanged({ start, stop, last }) {
+      this.startDate = start;
+      this.lastDate = last;
+      await this.report?.set('fromDate', start.toISODate() as DocValue);
+      await this.report?.set('toDate', last.toISODate() as DocValue);
+      if (this.report?.basedOn != null)
+        await this.report?.set('basedOn', 'Period');
+    },
   },
 });
 </script>