--- a/client/package.json	Wed Mar 20 12:49:52 2019 +0100
+++ b/client/package.json	Wed Mar 20 16:48:08 2019 +0100
@@ -35,6 +35,7 @@
     "bootstrap": "^4.1.1",
     "d3": "^5.7.0",
     "d3-line-chunked": "^1.4.1",
+    "date-fns": "^1.30.1",
     "debounce": "^1.2.0",
     "font-awesome": "^4.7.0",
     "glob-all": "^3.1.0",

--- a/client/src/components/importoverview/ImportOverview.vue	Wed Mar 20 12:49:52 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Wed Mar 20 16:48:08 2019 +0100
@@ -24,6 +24,62 @@
           </button>
         </div>
       </div>
+      <div
+        class="ml-2 mr-2 mb-2 datefilter d-flex flex-row justify-content-between"
+      >
+        <div class="mr-3 my-auto pointer">
+          <button
+            @click="earlier"
+            class="btn btn-sm btn-outline-light text-dark"
+          >
+            <translate>Earlier</translate>
+            <font-awesome-icon class="ml-2" icon="angle-left" />
+          </button>
+        </div>
+        <div class="selected-interval my-auto">
+          <span class="date">{{ interval[0] | dateTime }}</span>
+          <span class="ml-3 mr-3">-</span>
+          <span class="date">{{ interval[1] | dateTime }}</span>
+        </div>
+        <div class="ml-3 my-auto pointer">
+          <button
+            :disabled="!laterPossible"
+            @click="later"
+            class="btn btn-sm btn-outline-light text-dark"
+          >
+            <font-awesome-icon class="mr-2" icon="angle-right" /><translate
+              >Later</translate
+            >
+          </button>
+        </div>
+        <div class="d-flex flex-row">
+          <select
+            class="my-auto btn btn-outline-light text-dark form-control interval-select"
+            v-model="selectedInterval"
+          >
+            <option
+              :selected="selectedInterval === $options.LAST_HOUR"
+              :value="$options.LAST_HOUR"
+              ><translate>Hour</translate></option
+            >
+            <option
+              :selected="selectedInterval === $options.TODAY"
+              :value="$options.TODAY"
+              ><translate>Day</translate></option
+            >
+            <option
+              :selected="selectedInterval === $options.LAST_7_DAYS"
+              :value="$options.LAST_7_DAYS"
+              ><translate>7 days</translate></option
+            >
+            <option
+              :selected="selectedInterval === $options.LAST_30_DAYS"
+              :value="$options.LAST_30_DAYS"
+              ><translate>30 Days</translate></option
+            >
+          </select>
+        </div>
+      </div>
       <UITableHeader
         :columns="[
           { id: 'id', title: 'Id', width: '79px' },
@@ -71,9 +127,20 @@
 import { displayError, displayInfo } from "@/lib/errors";
 import { STATES } from "@/store/imports";
 import { sortTable } from "@/lib/mixins";
+import {
+  startOfDay,
+  startOfHour,
+  endOfHour,
+  addHours,
+  subHours,
+  endOfDay,
+  addDays,
+  subDays,
+  isFuture
+} from "date-fns";
 
 export default {
-  name: "importoverviewalt",
+  name: "importoverview",
   mixins: [sortTable],
   components: {
     Filters: () => import("./Filters.vue"),
@@ -81,15 +148,94 @@
   },
   data() {
     return {
-      loading: false
+      loading: false,
+      startDate: subHours(new Date(), 1),
+      endDate: new Date(),
+      selectedInterval: this.$options.LAST_HOUR,
+      laterPossible: false
     };
   },
+  LAST_HOUR: "lasthour",
+  TODAY: "today",
+  LAST_7_DAYS: "lastsevendays",
+  LAST_30_DAYS: "lastthirtydays",
   computed: {
     ...mapState("application", ["searchQuery"]),
     ...mapState("imports", ["imports", "reviewed"]),
-    ...mapGetters("imports", ["filters"])
+    ...mapGetters("imports", ["filters"]),
+    interval() {
+      return [this.startDate, this.endDate];
+    }
   },
   methods: {
+    earlier() {
+      switch (this.selectedInterval) {
+        case this.$options.LAST_HOUR:
+          this.startDate = subHours(startOfHour(this.startDate), 1);
+          this.endDate = endOfHour(this.startDate);
+          this.laterPossible = true;
+          break;
+        case this.$options.TODAY:
+          this.startDate = subDays(startOfDay(this.startDate), 1);
+          this.endDate = endOfDay(this.startDate);
+          this.laterPossible = true;
+          break;
+        case this.$options.LAST_7_DAYS:
+          this.startDate = subDays(startOfDay(this.startDate), 7);
+          this.endDate = endOfDay(addDays(this.startDate, 7));
+          this.laterPossible = true;
+          break;
+        case this.$options.LAST_30_DAYS:
+          this.startDate = subDays(startOfDay(this.startDate), 30);
+          this.endDate = endOfDay(addDays(this.startDate, 30));
+          this.laterPossible = true;
+          break;
+      }
+    },
+    later() {
+      let start, end;
+      const now = new Date();
+      switch (this.selectedInterval) {
+        case this.$options.LAST_HOUR:
+          start = addHours(startOfHour(this.startDate), 1);
+          end = endOfHour(start);
+          this.laterPossible = !isFuture(end);
+          if (isFuture(subHours(end, 1))) {
+            return;
+          }
+          this.startDate = start;
+          this.endDate = isFuture(end) ? now : end;
+          break;
+        case this.$options.TODAY:
+          start = addDays(startOfDay(this.startDate), 1);
+          end = endOfDay(start);
+          this.laterPossible = !isFuture(end);
+          if (isFuture(subDays(end, 1))) {
+            return;
+          }
+          this.startDate = start;
+          this.endDate = isFuture(end) ? now : end;
+          break;
+        case this.$options.LAST_7_DAYS:
+          start = addDays(startOfDay(this.startDate), 7);
+          end = endOfDay(addDays(start, 7));
+          this.laterPossible = !isFuture(end);
+          if (isFuture(subDays(end, 7))) {
+            return;
+          }
+          this.startDate = start;
+          this.endDate = isFuture(end) ? now : end;
+          break;
+        case this.$options.LAST_30_DAYS:
+          start = addDays(startOfDay(this.startDate), 30);
+          end = endOfDay(addDays(start, 30));
+          this.laterPossible = !isFuture(end);
+          if (isFuture(subDays(end, 7))) return;
+          this.startDate = start;
+          this.endDate = isFuture(end) ? now : end;
+          break;
+      }
+    },
     filteredImports() {
       return this.imports.filter(i => {
         return (i.kind + i.id)
@@ -180,6 +326,27 @@
     }
   },
   watch: {
+    selectedInterval() {
+      const now = new Date();
+      switch (this.selectedInterval) {
+        case this.$options.LAST_HOUR:
+          this.startDate = subHours(now, 1);
+          this.endDate = now;
+          break;
+        case this.$options.TODAY:
+          this.startDate = startOfDay(now);
+          this.endDate = now;
+          break;
+        case this.$options.LAST_7_DAYS:
+          this.startDate = subDays(startOfDay(now), 7);
+          this.endDate = now;
+          break;
+        case this.$options.LAST_30_DAYS:
+          this.startDate = subDays(startOfDay(now), 30);
+          this.endDate = now;
+          break;
+      }
+    },
     filters() {
       this.$store.dispatch("imports/getImports", this.filters);
     }
@@ -189,3 +356,14 @@
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.date {
+  font-stretch: condensed;
+}
+.interval-select {
+  padding: 0px;
+  margin: 0px;
+  font-size: 80%;
+}
+</style>

--- a/client/yarn.lock	Wed Mar 20 12:49:52 2019 +0100
+++ b/client/yarn.lock	Wed Mar 20 16:48:08 2019 +0100
@@ -3761,7 +3761,7 @@
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-fns@^1.23.0:
+date-fns@^1.23.0, date-fns@^1.30.1:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==