feat(ui): Massive frontend modernization including customer table redesign, new map features, and consistent styling

src/pages/stats/components/YearSelector.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <label
+      v-for="year in availableYears"
+      :key="year"
+      class="label cursor-pointer gap-2 p-0"
+    >
+      <input
+        type="checkbox"
+        class="checkbox checkbox-sm checkbox-primary"
+        :checked="modelValue.includes(year)"
+        @change="toggleYear(year)"
+      />
+      <span class="label-text">{{ year }}</span>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  modelValue: number[];
+  yearsBack?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  yearsBack: 3
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number[]): void;
+}>();
+
+const currentYear = new Date().getFullYear();
+
+const availableYears = computed(() => {
+  const years: number[] = [];
+  for (let i = 0; i <= props.yearsBack; i++) {
+    years.push(currentYear - i);
+  }
+  return years;
+});
+
+function toggleYear(year: number) {
+  const newValue = [...props.modelValue];
+  const index = newValue.indexOf(year);
+
+  if (index === -1) {
+    newValue.push(year);
+  } else if (newValue.length > 1) {
+    // Don't allow deselecting the last year
+    newValue.splice(index, 1);
+  }
+
+  // Sort descending
+  newValue.sort((a, b) => b - a);
+  emit('update:modelValue', newValue);
+}
+</script>