feat(hours): aggregate open-hours landing view on /admin/clients/hours
When no customer is selected, list every customer with unbilled hour entries — entry count, total hours, and open amount (resolved via the override → customer-rate → install-default chain). Rows with no resolvable rate are flagged "Rate not set" rather than undercounted. Click a row to drill into the per-customer logging section. Backend: getUnbilledSummaryByCustomer() + GET /api/admin/customers/hour-entries/unbilled-summary (customers.view).
This commit is contained in:
Luca
@@ -3268,7 +3268,16 @@
|
||||
"pickPlaceholder": "— Kunde wählen —",
|
||||
"emptyList": "Noch keine Kunden mit aktivierter Stundenerfassung. Aktivieren Sie „Stundenerfassung“ zuerst auf der Kundendetailseite.",
|
||||
"searchPlaceholder": "Nach E-Mail oder Firma suchen…",
|
||||
"customerLoggingDisabled": "Bei diesem Kunden ist die Stundenerfassung deaktiviert. Aktiviere sie auf der Kundendetailseite, um Stunden zu erfassen."
|
||||
"customerLoggingDisabled": "Bei diesem Kunden ist die Stundenerfassung deaktiviert. Aktiviere sie auf der Kundendetailseite, um Stunden zu erfassen.",
|
||||
"openHours": {
|
||||
"title": "Offene Stunden über alle Kunden",
|
||||
"subtitle": "Noch nicht abgerechnete Zeitblöcke. Oben einen Kunden wählen oder auf eine Zeile klicken, um Details zu öffnen.",
|
||||
"empty": "Aktuell keine offenen Stunden – alles abgerechnet oder noch keine Zeit erfasst.",
|
||||
"entryLine_one": "{{count}} Eintrag · {{hours}} Std.",
|
||||
"entryLine_other": "{{count}} Einträge · {{hours}} Std.",
|
||||
"passive": "Passiv",
|
||||
"needsRate": "Kein Satz hinterlegt"
|
||||
}
|
||||
},
|
||||
"crmDev": {
|
||||
"title": "CRM-Entwicklung",
|
||||
|
||||
@@ -3268,7 +3268,16 @@
|
||||
"pickPlaceholder": "— Select customer —",
|
||||
"emptyList": "No customers have hours logging enabled yet. Flip \"Hours logging\" on a customer's detail page first.",
|
||||
"searchPlaceholder": "Search by email or company…",
|
||||
"customerLoggingDisabled": "This customer has hour logging disabled. Enable it on the customer's detail page to log hours."
|
||||
"customerLoggingDisabled": "This customer has hour logging disabled. Enable it on the customer's detail page to log hours.",
|
||||
"openHours": {
|
||||
"title": "Open hours across all customers",
|
||||
"subtitle": "Unbilled time blocks waiting to be billed. Pick a customer above, or click a row to drill in.",
|
||||
"empty": "No unbilled hours right now — everything is billed or no time has been logged yet.",
|
||||
"entryLine_one": "{{count}} entry · {{hours}}h",
|
||||
"entryLine_other": "{{count}} entries · {{hours}}h",
|
||||
"passive": "Passive",
|
||||
"needsRate": "Rate not set"
|
||||
}
|
||||
},
|
||||
"crmDev": {
|
||||
"title": "CRM Development",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Clock, ChevronRight, AlertTriangle } from 'lucide-react';
|
||||
import { Card } from '../../../components/common';
|
||||
import { HoursSection } from '../../../components/admin/HoursSection';
|
||||
import {
|
||||
@@ -22,7 +23,21 @@ import {
|
||||
import {
|
||||
customerAdminService,
|
||||
type CustomerAccountDetail,
|
||||
type UnbilledHoursSummaryRow,
|
||||
} from '../../../services/customerAdmin.service';
|
||||
import { businessProfileService } from '../../../services/businessProfile.service';
|
||||
import { formatMoneyMinor } from '../../../utils/money';
|
||||
|
||||
/** Build a display label matching the CustomerPicker convention. */
|
||||
function summaryLabel(r: UnbilledHoursSummaryRow): string {
|
||||
return (
|
||||
r.companyName
|
||||
|| [r.firstName, r.lastName].filter(Boolean).join(' ')
|
||||
|| r.displayName
|
||||
|| r.email
|
||||
|| `#${r.customerAccountId}`
|
||||
);
|
||||
}
|
||||
|
||||
export const HoursLoggingPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -47,6 +62,30 @@ export const HoursLoggingPage: React.FC = () => {
|
||||
enabled: !!selectedId,
|
||||
});
|
||||
|
||||
// Landing aggregate — every customer with open (unbilled) hours. Only
|
||||
// fetched while no customer is picked; once one is selected the page
|
||||
// hands over to HoursSection. invalidated implicitly by remount on
|
||||
// re-entry (HoursSection mutations bump per-customer keys).
|
||||
const { data: summary = [], isLoading: summaryLoading } = useQuery({
|
||||
queryKey: ['admin-unbilled-hours-summary'],
|
||||
queryFn: () => customerAdminService.getUnbilledHoursSummary(),
|
||||
enabled: !selectedId,
|
||||
});
|
||||
|
||||
const { data: profileSnapshot } = useQuery({
|
||||
queryKey: ['business-profile-snapshot'],
|
||||
queryFn: () => businessProfileService.get(),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
const currency = profileSnapshot?.profile?.defaultCurrency || 'CHF';
|
||||
|
||||
const selectFromSummary = (r: UnbilledHoursSummaryRow) => {
|
||||
setSelectedId(r.customerAccountId);
|
||||
setCustomerLabel(summaryLabel(r));
|
||||
setCustomerIsPassive(r.isPassive);
|
||||
setCustomerHoursAllowed(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container py-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -116,6 +155,76 @@ export const HoursLoggingPage: React.FC = () => {
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{!selectedId && (
|
||||
<Card padding="lg">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Clock className="w-4 h-4 text-muted-theme" />
|
||||
<h2 className="text-base font-semibold text-theme">
|
||||
{t('hoursLogging.openHours.title', 'Open hours across all customers')}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-sm text-muted-theme mb-4">
|
||||
{t('hoursLogging.openHours.subtitle',
|
||||
'Unbilled time blocks waiting to be billed. Pick a customer above, or click a row to drill in.')}
|
||||
</p>
|
||||
|
||||
{summaryLoading ? (
|
||||
<p className="text-sm text-muted-theme py-6 text-center">
|
||||
{t('common.loading', 'Loading…')}
|
||||
</p>
|
||||
) : summary.length === 0 ? (
|
||||
<p className="text-sm text-muted-theme py-6 text-center">
|
||||
{t('hoursLogging.openHours.empty',
|
||||
'No unbilled hours right now — everything is billed or no time has been logged yet.')}
|
||||
</p>
|
||||
) : (
|
||||
<div className="divide-y divide-neutral-200 dark:divide-neutral-700">
|
||||
{summary.map((r) => (
|
||||
<button
|
||||
key={r.customerAccountId}
|
||||
type="button"
|
||||
onClick={() => selectFromSummary(r)}
|
||||
className="w-full flex items-center justify-between gap-4 py-3 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/60 rounded-md px-2 -mx-2 transition-colors"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-theme truncate">{summaryLabel(r)}</span>
|
||||
{r.isPassive && (
|
||||
<span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
|
||||
{t('hoursLogging.openHours.passive', 'Passive')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-theme mt-0.5">
|
||||
{t('hoursLogging.openHours.entryLine', {
|
||||
count: r.entryCount,
|
||||
hours: (r.totalMinutes / 60).toFixed(2),
|
||||
defaultValue: '{{count}} entries · {{hours}}h',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<div className="text-right">
|
||||
{r.rateResolvable ? (
|
||||
<div className="font-semibold text-theme tabular-nums">
|
||||
{formatMoneyMinor(r.openAmountMinor, currency)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 text-amber-700 dark:text-amber-300 text-xs">
|
||||
<AlertTriangle className="w-3.5 h-3.5" />
|
||||
{t('hoursLogging.openHours.needsRate', 'Rate not set')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-muted-theme" />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{selectedId && customerHoursAllowed && (
|
||||
<HoursSection
|
||||
customerId={selectedId}
|
||||
|
||||
@@ -340,6 +340,14 @@ export const customerAdminService = {
|
||||
return (response.data as any).data ?? response.data;
|
||||
},
|
||||
|
||||
/** Landing aggregate for /admin/clients/hours — every customer that
|
||||
* currently carries unbilled hour entries, with open hours + open
|
||||
* amount (install default currency). Sorted by open amount desc. */
|
||||
async getUnbilledHoursSummary(): Promise<UnbilledHoursSummaryRow[]> {
|
||||
const response = await api.get(`/admin/customers/hour-entries/unbilled-summary`);
|
||||
return ((response.data as any).data?.summary ?? (response.data as any).summary) || [];
|
||||
},
|
||||
|
||||
/** Admin override — issue the customer's running monthly draft now,
|
||||
* bypassing the cadence-day wait. 409 when no draft exists or the
|
||||
* draft is empty. Returns the issued invoice id + number. */
|
||||
@@ -419,6 +427,24 @@ export interface HourEntry {
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface UnbilledHoursSummaryRow {
|
||||
customerAccountId: number;
|
||||
companyName: string | null;
|
||||
displayName: string | null;
|
||||
firstName: string | null;
|
||||
lastName: string | null;
|
||||
email: string | null;
|
||||
isPassive: boolean;
|
||||
billingCadence: string | null;
|
||||
entryCount: number;
|
||||
totalMinutes: number;
|
||||
openAmountMinor: number;
|
||||
/** false when at least one entry has no resolvable rate (no override,
|
||||
* no customer rate, no install default) — its amount is excluded from
|
||||
* openAmountMinor and the UI prompts to set a rate. */
|
||||
rateResolvable: boolean;
|
||||
}
|
||||
|
||||
export interface HourEntryCreatePayload {
|
||||
entryDate: string; // YYYY-MM-DD
|
||||
startTime: string; // HH:MM
|
||||
|
||||
Reference in New Issue
Block a user