s + p.project.pots.filter((x) => x.status === 'active').length, 0)}`} />
@@ -118,25 +151,27 @@ const Body: React.FC<{ data: CustomerReportData }> = ({ data }) => {
-
Stunden je Monat
+ {chartTitle}
-
+ {!ranged && (
+
+ )}
- {series.length ? (
+ {series.some((m) => m.minutes > 0) ? (
({ key: m.month, label: `${MONTHS[Number(m.month.slice(5)) - 1].slice(0, 3)} ${m.month.slice(2, 4)}`, a: m.billable_minutes, b: m.minutes - m.billable_minutes }))}
+ points={series.map((m) => ({ key: m.key, label: pointLabel(m.start), a: m.billable_minutes, b: m.minutes - m.billable_minutes }))}
format={(v) => `${formatHours(v, 1)} h`}
axisFormat={(v) => formatNumber(v / 60, 0)}
height={220}
/>
) : (
- Noch keine Buchungen.
+ {ranged ? 'Keine Buchungen im Zeitraum.' : 'Noch keine Buchungen.'}
)}
diff --git a/src/components/reports/PeriodPicker.tsx b/src/components/reports/PeriodPicker.tsx
new file mode 100644
index 0000000..e4e31d4
--- /dev/null
+++ b/src/components/reports/PeriodPicker.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { inputClass } from '../ui/controls';
+import { Icon } from '../ui/Icon';
+import { MONTHS, addDays, addMonths, formatDate, isoWeek, mondayOf, monthEnd, monthStart } from '../../lib/format';
+
+export type Period = 'week' | 'month' | 'quarter' | 'year' | 'custom';
+
+export function periodRange(period: Period, anchor: string, custom: { from: string; to: string }) {
+ if (period === 'week') {
+ const from = mondayOf(anchor);
+ return { from, to: addDays(from, 6), label: `KW ${isoWeek(from)} · ${formatDate(from)} – ${formatDate(addDays(from, 6))}` };
+ }
+ if (period === 'month') return { from: monthStart(anchor), to: monthEnd(anchor), label: `${MONTHS[Number(anchor.slice(5, 7)) - 1]} ${anchor.slice(0, 4)}` };
+ if (period === 'quarter') {
+ const q = Math.floor((Number(anchor.slice(5, 7)) - 1) / 3);
+ const from = `${anchor.slice(0, 4)}-${String(q * 3 + 1).padStart(2, '0')}-01`;
+ return { from, to: monthEnd(addMonths(from, 2)), label: `Q${q + 1} ${anchor.slice(0, 4)}` };
+ }
+ if (period === 'year') return { from: `${anchor.slice(0, 4)}-01-01`, to: `${anchor.slice(0, 4)}-12-31`, label: anchor.slice(0, 4) };
+ return { ...custom, label: `${formatDate(custom.from)} – ${formatDate(custom.to)}` };
+}
+
+/** Verschiebt den Bezugstag um eine Periode vor oder zurueck. */
+export function shiftAnchor(period: Period, anchor: string, step: number) {
+ if (period === 'week') return addDays(anchor, 7 * step);
+ if (period === 'month') return addMonths(anchor, step);
+ if (period === 'quarter') return addMonths(anchor, 3 * step);
+ if (period === 'year') return `${Number(anchor.slice(0, 4)) + step}-01-01`;
+ return anchor;
+}
+
+/**
+ * Auswahl Woche/Monat/Quartal/Jahr/Zeitraum mit Blaettern. `allLabel` blendet
+ * zusaetzlich eine Option ohne Einschraenkung ein (Wert 'all').
+ */
+export function PeriodPicker({
+ period,
+ onPeriod,
+ anchor,
+ onAnchor,
+ custom,
+ onCustom,
+ allLabel,
+}: {
+ period: P;
+ onPeriod: (p: P) => void;
+ anchor: string;
+ onAnchor: (a: string) => void;
+ custom: { from: string; to: string };
+ onCustom: (c: { from: string; to: string }) => void;
+ allLabel?: string;
+}) {
+ const label = period === 'all' ? null : periodRange(period as Period, anchor, custom).label;
+ return (
+ <>
+
+ {period === 'all' ? null : period === 'custom' ? (
+
+ e.target.value && onCustom({ ...custom, from: e.target.value })} />
+ –
+ e.target.value && onCustom({ ...custom, to: e.target.value })} />
+
+ ) : (
+
+
+
+
+ {label}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/reports/Reports.tsx b/src/components/reports/Reports.tsx
index d8733f9..25240bf 100644
--- a/src/components/reports/Reports.tsx
+++ b/src/components/reports/Reports.tsx
@@ -1,38 +1,22 @@
import React, { useEffect, useMemo, useState } from 'react';
import { Avatar, Card, ErrorBox, IconButton, Spinner, inputClass } from '../ui/controls';
import { Modal } from '../ui/Modal';
-import { Icon } from '../ui/Icon';
import { CountUp, Donut, BILLABLE, NON_BILLABLE } from '../ui/charts';
import { ReportTable } from './ReportTable';
import { EntryList } from '../booking/EntryList';
import { ExportMenu } from './ExportMenu';
import { CustomerReport } from './CustomerReport';
import { ProjectReport } from './ProjectReport';
+import { PeriodPicker, periodRange, type Period } from './PeriodPicker';
import { useAuth } from '../../lib/auth';
import { customersApi, entriesApi, qs, reportsApi, usersApi, type GroupRow } from '../../lib/api';
import { useLoader, usePersistentState } from '../../lib/hooks';
-import { MONTHS, addDays, addMonths, formatDate, formatEuro, formatHours, isoWeek, mondayOf, monthEnd, monthStart, todayIso } from '../../lib/format';
+import { formatEuro, formatHours, monthStart, todayIso } from '../../lib/format';
import { useRouter } from '../../lib/router';
import { atLeast, type Customer, type DirectoryUser } from '../../types';
-type Period = 'week' | 'month' | 'quarter' | 'year' | 'custom';
type Tab = 'clients' | 'projects' | 'tasks' | 'users';
-function periodRange(period: Period, anchor: string, custom: { from: string; to: string }) {
- if (period === 'week') {
- const from = mondayOf(anchor);
- return { from, to: addDays(from, 6), label: `KW ${isoWeek(from)} · ${formatDate(from)} – ${formatDate(addDays(from, 6))}` };
- }
- if (period === 'month') return { from: monthStart(anchor), to: monthEnd(anchor), label: `${MONTHS[Number(anchor.slice(5, 7)) - 1]} ${anchor.slice(0, 4)}` };
- if (period === 'quarter') {
- const q = Math.floor((Number(anchor.slice(5, 7)) - 1) / 3);
- const from = `${anchor.slice(0, 4)}-${String(q * 3 + 1).padStart(2, '0')}-01`;
- return { from, to: monthEnd(addMonths(from, 2)), label: `Q${q + 1} ${anchor.slice(0, 4)}` };
- }
- if (period === 'year') return { from: `${anchor.slice(0, 4)}-01-01`, to: `${anchor.slice(0, 4)}-12-31`, label: anchor.slice(0, 4) };
- return { ...custom, label: `${formatDate(custom.from)} – ${formatDate(custom.to)}` };
-}
-
export const Reports: React.FC = () => {
const { route, navigate } = useRouter();
const [kind, id] = route.params;
@@ -105,13 +89,6 @@ const TimeReport: React.FC = () => {
[range.from, range.to, customerId, team, includeFixed, hideNonBillable]
);
- const shift = (step: number) => {
- if (period === 'week') setAnchor(addDays(anchor, 7 * step));
- if (period === 'month') setAnchor(addMonths(anchor, step));
- if (period === 'quarter') setAnchor(addMonths(anchor, 3 * step));
- if (period === 'year') setAnchor(`${Number(anchor.slice(0, 4)) + step}-01-01`);
- };
-
const exportParams = { from: range.from, to: range.to, customer_id: customerId || undefined, team: team || undefined, include_fixed: includeFixed ? 1 : undefined, hide_non_billable: hideNonBillable ? 1 : undefined };
const groupName = { clients: 'Kunden', projects: 'Projekte', tasks: 'Tasks', users: 'Mitarbeiter' }[tab];
const exportOptions = useMemo(
@@ -165,33 +142,7 @@ const TimeReport: React.FC = () => {
)}
-
- {period === 'custom' ? (
-
- setCustom({ ...custom, from: e.target.value })} />
- –
- setCustom({ ...custom, to: e.target.value })} />
-
- ) : (
-
-
-
-
- {range.label}
-
-
-
- )}
+