Merge branch 'master' into fancy_graph

# Conflicts:
#	src/statistics/FancyGraphCard.tsx
#	src/statistics/components/DatasetPickerCard.tsx
#	src/statistics/fancy_graph_entry.tsx
#	tapir/statistics/views/fancy_graph/base_view.py
#	tapir/statistics/views/fancy_graph/number_of_abcd_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_active_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_co_purchasers_view.py
#	tapir/statistics/views/fancy_graph/number_of_created_resignations_view.py
#	tapir/statistics/views/fancy_graph/number_of_exempted_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_flying_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_frozen_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_investing_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_long_term_frozen_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_paused_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_pending_resignations_view.py
#	tapir/statistics/views/fancy_graph/number_of_purchasing_members_view.py
#	tapir/statistics/views/fancy_graph/number_of_shift_partners_view.py
#	tapir/statistics/views/fancy_graph/number_of_working_members_view.py

src/statistics/components/DateRangePickerCard.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Card, FloatingLabel, Form } from "react-bootstrap";
+import { getFirstOfMonth } from "../utils.tsx";
+
+declare let gettext: (english_text: string) => string;
+
+interface DateRangePickerCardProps {
+  dateFrom: Date;
+  setDateFrom: (date: Date) => void;
+  dateTo: Date;
+  setDateTo: (date: Date) => void;
+}
+
+const DateRangePickerCard: React.FC<DateRangePickerCardProps> = ({
+  dateFrom,
+  setDateFrom,
+  dateTo,
+  setDateTo,
+}) => {
+  return (
+    <Card>
+      <Card.Header>
+        <h5>{gettext("Set date range")}</h5>
+      </Card.Header>
+      <Card.Body>
+        <Form>
+          <div className={"d-flex flex-row gap-2"}>
+            <Form.Group>
+              <FloatingLabel label={"Date from"}>
+                <Form.Control
+                  type={"date"}
+                  value={
+                    !isNaN(dateFrom.getTime())
+                      ? dateFrom.toISOString().substring(0, 10)
+                      : undefined
+                  }
+                  onChange={(event) => {
+                    setDateFrom(getFirstOfMonth(new Date(event.target.value)));
+                  }}
+                />
+              </FloatingLabel>
+            </Form.Group>
+            <Form.Group>
+              <FloatingLabel label={"Date from"}>
+                <Form.Control
+                  type={"date"}
+                  value={
+                    !isNaN(dateTo.getTime())
+                      ? dateTo.toISOString().substring(0, 10)
+                      : undefined
+                  }
+                  onChange={(event) => {
+                    setDateTo(getFirstOfMonth(new Date(event.target.value)));
+                  }}
+                />
+              </FloatingLabel>
+            </Form.Group>
+          </div>
+        </Form>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default DateRangePickerCard;