= ({ eventId, event
{guest.stats.ratings}
- {new Date(guest.last_seen_at).toLocaleDateString()}
+ {fmtDate(guest.last_seen_at)}
diff --git a/frontend/src/components/admin/AdminHeader.tsx b/frontend/src/components/admin/AdminHeader.tsx
index 5b7e3794..7217f825 100644
--- a/frontend/src/components/admin/AdminHeader.tsx
+++ b/frontend/src/components/admin/AdminHeader.tsx
@@ -35,10 +35,30 @@ export const AdminHeader: React.FC
= ({ onMenuClick }) => {
const companyName = brandingSettings?.branding_company_name?.trim() || 'PicPeak';
const logoUrl = brandingSettings?.branding_logo_url?.trim();
const logoDisplayMode = brandingSettings?.branding_logo_display_mode || 'logo_and_text';
+ // Logo placement honours the same Branding > Logo Position setting
+ // the gallery does. 'sidepanel' moves the logo into the AdminSidebar
+ // brand row — suppress it here so it doesn't double up. left /
+ // center / right reposition the logo block within this header bar.
+ const logoPosition = brandingSettings?.branding_logo_position || 'left';
+ const logoInSidebar = logoPosition === 'sidepanel';
const resolvedLogoUrl = logoUrl
? (logoUrl.startsWith('http') ? logoUrl : buildResourceUrl(logoUrl))
: '/picpeak-kamera-transparent.png';
+ // Renders the logo + wordmark block per the current logo_display_mode.
+ // Re-used in left / center / right slots below so all three positions
+ // produce visually identical brand chrome.
+ const renderBrandBlock = () => (
+
+ {!logoInSidebar && (logoDisplayMode === 'logo_only' || logoDisplayMode === 'logo_and_text') && (
+
+ )}
+ {(logoDisplayMode === 'text_only' || logoDisplayMode === 'logo_and_text') && (
+
{companyName}
+ )}
+
(null);
const notificationRef = useRef(null);
@@ -79,10 +99,25 @@ export const AdminHeader: React.FC = ({ onMenuClick }) => {
const unreadCount = notificationsData?.unreadCount || 0;
return (
-
-
-
- {/* Left side - Menu button, Logo, and Date */}
+ // border-b is on the OUTER
so it spans the full header
+ // width — putting it on the inner row instead left a 32px gap on
+ // the left (the px-4/sm:px-6/lg:px-8 padding) before the divider
+ // started, visible as a missing segment between the sidebar's
+ // brand-row bottom border and the header's bottom border.
+ //
+ // The outer header is explicitly h-16 with the default border-box,
+ // so the 1px border is painted INSIDE the 64px height (y=63..64)
+ // — same model as the sidebar's brand row (also h-16 border-b
+ // border-box). Both bottom borders meet at the exact same
+ // y-coordinate.
+
+
+
+ {/* Left side - Menu button, optional left-positioned logo, Date.
+ Logo block appears here when logo_position = 'left' (the
+ default). For 'center' it's absolutely positioned across
+ the whole header; for 'right' it sits in the right-side
+ cluster just before the action widgets. */}
= ({ onMenuClick }) => {
- {/* Logo - sticky to the left on all sizes */}
-
- {(logoDisplayMode === 'logo_only' || logoDisplayMode === 'logo_and_text') && (
-
- )}
- {(logoDisplayMode === 'text_only' || logoDisplayMode === 'logo_and_text') && (
-
{companyName}
- )}
-
+ {!logoInSidebar && logoPosition === 'left' && renderBrandBlock()}
+ {/* Narrow-viewport fallback for center / right positions.
+ On screens where the centered (lg+) or right-anchored
+ (md+) brand block is hidden, render it on the left so
+ the admin chrome doesn't go logo-less on phones. */}
+ {!logoInSidebar && logoPosition === 'center' && (
+
{renderBrandBlock()}
+ )}
+ {!logoInSidebar && logoPosition === 'right' && (
+
{renderBrandBlock()}
+ )}
- {/* Date display - hidden on smaller screens */}
-
-
+ {/* Date display - hidden on smaller screens.
+ The vertical divider + left padding only render when
+ the logo sits on the left of the date (logo_position
+ = 'left'). For 'center' / 'right' / 'sidepanel' the
+ left cluster has only the mobile menu (which is
+ hidden on xl+), so a divider would be floating on
+ its own with nothing to separate. */}
+ {/* Explicit `flex items-center` (not just block) + the
+ self-stretch on the border-l variant so the divider
+ covers the full header row, AND the text baseline sits
+ exactly on the same y-axis as the brand-block / sidebar
+ logo to its left. The previous `hidden xl:block` left
+ the
inheriting its block-level vertical position,
+ which read as slightly off-centre next to the larger
+ logo image. */}
+
+
{format(new Date(), 'PPPP')}
- {/* Right side actions */}
+ {/* Centered logo. Absolutely positioned so the existing
+ left/right clusters keep their natural sizing; hidden on
+ sub-lg widths to avoid colliding with the right-side
+ action cluster on narrow screens. pointer-events-none on
+ the wrapper passes hover/click through (the logo itself
+ has no interactive children today). */}
+ {!logoInSidebar && logoPosition === 'center' && (
+
+ {renderBrandBlock()}
+
+ )}
+
+ {/* Right side actions (preceded by the brand block when
+ logo_position = 'right'). The right-anchored logo sits
+ before the language / dark-mode / notifications / user
+ cluster so the widgets stay where admins expect them. */}
+ {!logoInSidebar && logoPosition === 'right' && (
+
+ {renderBrandBlock()}
+
+ )}
{/* Language Selector */}
diff --git a/frontend/src/components/admin/AdminLayout.tsx b/frontend/src/components/admin/AdminLayout.tsx
index 25d6850b..7eef8a12 100644
--- a/frontend/src/components/admin/AdminLayout.tsx
+++ b/frontend/src/components/admin/AdminLayout.tsx
@@ -9,10 +9,23 @@ import { AdminHeader } from './AdminHeader';
import { MaintenanceBanner } from './MaintenanceBanner';
import { MandatoryPasswordChangeModal } from './MandatoryPasswordChangeModal';
+const SIDEBAR_COLLAPSED_KEY = 'admin-sidebar-collapsed';
+
export const AdminLayout: React.FC = () => {
const { isAuthenticated, isLoading, mustChangePassword } = useAdminAuth();
const [sidebarOpen, setSidebarOpen] = useState(false);
-
+ const [sidebarCollapsed, setSidebarCollapsedState] = useState
(() => {
+ if (typeof window === 'undefined') return false;
+ return window.localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === '1';
+ });
+
+ const setSidebarCollapsed = (v: boolean) => {
+ setSidebarCollapsedState(v);
+ if (typeof window !== 'undefined') {
+ window.localStorage.setItem(SIDEBAR_COLLAPSED_KEY, v ? '1' : '0');
+ }
+ };
+
// Handle session timeout
useSessionTimeout();
@@ -40,6 +53,8 @@ export const AdminLayout: React.FC = () => {
= ({ sidebarOpen, setSidebarOpen, mustChangePassword }) => {
+const AdminLayoutInner: React.FC = ({ sidebarOpen, setSidebarOpen, sidebarCollapsed, setSidebarCollapsed, mustChangePassword }) => {
return (
{/* Mandatory Password Change Modal */}
@@ -68,21 +85,40 @@ const AdminLayoutInner: React.FC
= ({ sidebarOpen, setSid
{/* Sidebar - disabled when password change required */}
-
setSidebarOpen(false)} />
+ setSidebarOpen(false)}
+ collapsed={sidebarCollapsed}
+ onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+ />
+ {/* Main content. `scrollbar-gutter: stable` on the column itself
+ (via the inline style) reserves the scrollbar gutter once at
+ the column level — so the header sits in the full column
+ width AND lines up with the sidebar's right edge, while
+
's scroll content honors the same gutter and never
+ shifts when content overflows. Without this, the header and
+ main each made their own decisions about the gutter, leaving
+ a visible ~15px notch on the right edge of the header's
+ border between the column's content area and the scrollbar. */}
+
{/* Header - disabled when password change required */}
-
+
{/* Maintenance mode banner */}
- {/* Page content - disabled when password change required */}
-
+ {/* Page content - disabled when password change required.
+ overflow moved up to the column so the scrollbar gutter is
+ reserved once at the column level (see above). main now
+ just contributes its content + padding. */}
+
= ({ isOpen, onClose }) => {
+export const AdminSidebar: React.FC = ({ isOpen, onClose, collapsed = false, onToggleCollapse }) => {
const location = useLocation();
const { t } = useTranslation();
const { hasPermission } = usePermissions();
const { flags } = useFeatureFlags();
+ // Branding lookup for the "logo_position = sidepanel" mode — when
+ // chosen, the logo replaces the "PicPeak Admin" text in the brand
+ // row, and the favicon takes over in the collapsed icon rail.
+ const { data: publicSettings } = usePublicSettings();
+ const logoInSidebar = publicSettings?.branding_logo_position === 'sidepanel';
+ const rawLogoUrl = publicSettings?.branding_logo_url?.trim();
+ const rawFaviconUrl = publicSettings?.branding_favicon_url?.trim();
+ const resolvedLogoUrl = rawLogoUrl
+ ? (rawLogoUrl.startsWith('http') ? rawLogoUrl : buildResourceUrl(rawLogoUrl))
+ : null;
+ const resolvedFaviconUrl = rawFaviconUrl
+ ? (rawFaviconUrl.startsWith('http') ? rawFaviconUrl : buildResourceUrl(rawFaviconUrl))
+ : null;
+ // In collapsed rail, prefer the favicon (it's already a square,
+ // tight crop). Fall back to the logo when no favicon is set, then
+ // to nothing — better an empty rail than a stretched logo.
+ const sidebarBrandImageUrl = collapsed
+ ? (resolvedFaviconUrl || resolvedLogoUrl)
+ : (resolvedLogoUrl || resolvedFaviconUrl);
+ const showLogoBrand = logoInSidebar && !!sidebarBrandImageUrl;
+ const brandAlt = publicSettings?.branding_company_name?.trim() || t('admin.title');
const filteredNavigation = navigation.filter((item) => {
if (item.permission && !hasPermission(item.permission as string)) return false;
@@ -101,38 +136,99 @@ export const AdminSidebar: React.FC = ({ isOpen, onClose }) =
return true;
});
+ // Desktop width: full nav (w-64) vs icon rail (w-16). Mobile is always
+ // w-64 since the collapse affordance only applies on lg+ viewports.
+ const widthClasses = collapsed ? 'w-64 lg:w-16' : 'w-64';
+ const showLabels = !collapsed;
+
return (
- {/* Brand */}
-
-
-
{t('admin.title')}
+ {/* Brand row: title on the left, mobile close (X) on the
+ right. The desktop collapse toggle used to live here but
+ was moved down next to the version / storage widgets so
+ it sits in admins' muscle-memory zone for chrome controls.
+ When collapsed on desktop the title hides and the row
+ becomes an empty spacer (no rail-width fight). */}
+
+
+ {showLogoBrand ? (
+ <>
+ {/* Logo brand variant — fed by Branding > Logo
+ Position = "Sidebar". On the collapsed rail, only
+ the favicon (or logo as fallback) is shown — sized
+ to fit the 64px-wide rail. Expanded shows the full
+ logo at the same h-8 the admin header uses for
+ visual continuity. */}
+
+ {/* On mobile the rail-narrow style only applies at
+ lg+, so when collapsed=true the mobile view still
+ has the regular w-64 width — show the company name
+ next to the logo so the brand row doesn't feel
+ empty there. */}
+ {collapsed && (
+
+ {brandAlt}
+
+ )}
+
+ ) : (
+ <>
+ {showLabels && (
+
{t('admin.title')}
+ )}
+ {/* When collapsed on desktop the title is hidden; on mobile we
+ always show it because the rail-narrow style only applies at lg+ */}
+ {collapsed && (
+
{t('admin.title')}
+ )}
+
+ )}
{/* Navigation */}
-
+
{filteredNavigation.map((item) => {
- const isActive = location.pathname === item.href ||
+ const isActive = location.pathname === item.href ||
(item.href !== '/admin/dashboard' && location.pathname.startsWith(item.href));
-
+ const label = t(item.nameKey);
+
return (
onClose()}
- className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
+ title={collapsed ? label : undefined}
+ className={`flex items-center py-2 text-sm font-medium rounded-lg transition-colors ${
+ collapsed ? 'px-3 lg:px-0 lg:justify-center' : 'px-3'
+ } ${
isActive
? 'bg-accent-dark text-white'
: 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-100'
@@ -143,18 +239,46 @@ export const AdminSidebar: React.FC = ({ isOpen, onClose }) =
.tile-selected pattern used in the customizer. The accent
-dark token defaults to the legacy primary green so users
who haven't set CI colours yet see no migration regression. */}
- {label}
);
})}
- {/* Bottom section - sticky to bottom (only for users with settings.view permission) */}
+ {/* Desktop collapse / expand toggle.
+ Lives directly above the version + storage widgets — sits
+ in admins' muscle-memory zone for chrome controls and
+ stays visible even when the sidebar is collapsed so the
+ rail can always be re-expanded. Hidden on mobile (the X
+ in the brand row already closes the sheet there). */}
+ {onToggleCollapse && (
+
+
+ {collapsed
+ ?
+
+
{/* Version Info */}
diff --git a/frontend/src/components/admin/ClientsLayout.tsx b/frontend/src/components/admin/ClientsLayout.tsx
index 22e38b02..d3de2e1a 100644
--- a/frontend/src/components/admin/ClientsLayout.tsx
+++ b/frontend/src/components/admin/ClientsLayout.tsx
@@ -14,7 +14,7 @@
import React from 'react';
import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
-import { Briefcase, UserCog } from 'lucide-react';
+import { Briefcase, UserCog, FileText, Receipt, Wrench, Calculator, Clock, ScrollText, Calendar } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { useFeatureFlags, type FeatureKey } from '../../contexts/FeatureFlagsContext';
@@ -46,12 +46,57 @@ export const ClientsLayout: React.FC = () => {
icon: UserCog,
featureFlag: 'customerPortal',
},
- // Add future sub-features here as they ship:
- // { key: 'calendar', to: '/admin/clients/calendar', ... featureFlag: 'calendar' }
- // { key: 'quotes', to: '/admin/clients/quotes', ... featureFlag: 'quotes' }
- // { key: 'bills', to: '/admin/clients/bills', ... featureFlag: 'bills' }
- // etc. The empty-state below disappears automatically once any of
- // these is enabled.
+ {
+ key: 'calendar',
+ to: '/admin/clients/calendar',
+ label: t('clients.subnav.calendar', 'Calendar'),
+ icon: Calendar,
+ featureFlag: 'calendar',
+ },
+ {
+ key: 'quotes',
+ to: '/admin/clients/quotes',
+ label: t('clients.subnav.quotes', 'Quotes'),
+ icon: FileText,
+ featureFlag: 'quotes',
+ },
+ {
+ key: 'contracts',
+ to: '/admin/clients/contracts',
+ label: t('clients.subnav.contracts', 'Contracts'),
+ icon: ScrollText,
+ featureFlag: 'contracts',
+ },
+ {
+ key: 'hours',
+ to: '/admin/clients/hours',
+ label: t('clients.subnav.hours', 'Hours'),
+ icon: Clock,
+ featureFlag: 'hoursLogging',
+ },
+ {
+ key: 'bills',
+ to: '/admin/clients/bills',
+ label: t('clients.subnav.bills', 'Invoices'),
+ icon: Receipt,
+ featureFlag: 'bills',
+ },
+ {
+ key: 'tax-report',
+ to: '/admin/clients/tax-report',
+ label: t('clients.subnav.taxReport', 'Tax'),
+ icon: Calculator,
+ featureFlag: 'taxReport',
+ },
+ // Future sub-features:
+ // { key: 'messaging', ... featureFlag: 'messaging' }
+ {
+ key: 'development',
+ to: '/admin/clients/development',
+ label: t('clients.subnav.development', 'Development'),
+ icon: Wrench,
+ featureFlag: 'crmDevelopment',
+ },
];
const enabledItems = navItems.filter((item) => flags[item.featureFlag]);
@@ -64,22 +109,22 @@ export const ClientsLayout: React.FC = () => {
- {t('clients.title', 'Clients')}
+ {t('clients.title', 'CRM')}
- {t('clients.subtitle', 'Customer accounts, scheduling, quotes and billing for recurring clients.')}
+ {t('clients.subtitle', 'Customer accounts, scheduling, quotes and billing — everything for recurring clients in one place.')}
- {t('clients.empty.title', 'No client features enabled')}
+ {t('clients.empty.title', 'No CRM features enabled')}
{t(
'clients.empty.body',
- 'Enable Accounts (or another Clients sub-feature) under Settings → Features to get started.',
+ 'Enable Accounts (or another CRM sub-feature) under Settings → Features to get started.',
)}
@@ -91,10 +136,10 @@ export const ClientsLayout: React.FC = () => {
- {t('clients.title', 'Clients')}
+ {t('clients.title', 'CRM')}
- {t('clients.subtitle', 'Customer accounts, scheduling, quotes and billing for recurring clients.')}
+ {t('clients.subtitle', 'Customer accounts, scheduling, quotes and billing — everything for recurring clients in one place.')}
@@ -103,7 +148,7 @@ export const ClientsLayout: React.FC = () => {
in one tap on touch devices, no horizontal scroll. */}
- {t('clients.navAriaLabel', 'Clients navigation')}
+ {t('clients.navAriaLabel', 'CRM navigation')}
{
{/* Desktop: sticky left rail */}
{enabledItems.map((item) => {
diff --git a/frontend/src/components/admin/CrmOverviewSection.tsx b/frontend/src/components/admin/CrmOverviewSection.tsx
new file mode 100644
index 00000000..88f7ea7d
--- /dev/null
+++ b/frontend/src/components/admin/CrmOverviewSection.tsx
@@ -0,0 +1,272 @@
+/**
+ * CrmOverviewSection — headline metrics embedded into the main
+ * AdminDashboard for admins who use the CRM features.
+ *
+ * Feature-flag gating (three layers):
+ * - `clients` parent flag OFF → renders nothing
+ * - only `quotes` enabled → only the quote cards render
+ * - only `bills` enabled → only the invoice + revenue
+ * + outstanding cards render
+ * - both enabled → full section
+ *
+ * Numbers come from /api/admin/dashboard/crm-stats. Each card deep-
+ * links into the matching filtered list so the admin can drill in
+ * with one click.
+ */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import {
+ FileText, Send, CheckCircle2, XCircle, Clock,
+ Receipt, AlertTriangle, TrendingUp, Wallet,
+} from 'lucide-react';
+import { Card } from '../common';
+import { fetchCrmOverview, type CrmOverviewStats } from '../../services/bills.service';
+import { useFeatureFlags } from '../../contexts/FeatureFlagsContext';
+import { usePublicSettings } from '../../hooks/usePublicSettings';
+
+import { formatMoneyMinor } from '../../utils/money';
+// Local alias preserved so call-sites in this file keep their
+// minor-units semantics. The unified helper handles the /100 conversion.
+const formatMoney = formatMoneyMinor;
+
+export const CrmOverviewSection: React.FC = () => {
+ const { t } = useTranslation();
+ const { flags } = useFeatureFlags();
+ const { data: publicSettings } = usePublicSettings();
+
+ // Outer gate: hide the entire CRM block when the parent feature
+ // flag is off. The query is also skipped so we don't hit the
+ // endpoint at all on non-CRM installs.
+ const clientsOn = !!flags.clients;
+ const quotesOn = clientsOn && !!flags.quotes;
+ const billsOn = clientsOn && !!flags.bills;
+ const anyCrm = quotesOn || billsOn;
+
+ // Per-tile visibility (admin pref in Settings → CRM behaviour). All
+ // default true; only explicit false hides the matching tile. We
+ // resolve via `!== false` so the very first render — before
+ // publicSettings finishes loading — shows everything, then settles.
+ const showRevenue = publicSettings?.crm_overview_show_revenue !== false;
+ const showOutstanding = publicSettings?.crm_overview_show_outstanding !== false;
+ const showQuotes = publicSettings?.crm_overview_show_quotes !== false;
+ const showInvoices = publicSettings?.crm_overview_show_invoices !== false;
+ // Compute which sub-sections actually render so we can skip the
+ // outer block entirely when the admin hid everything.
+ const billsRevenueRow = billsOn && (showRevenue || showOutstanding);
+ const quotesBlock = quotesOn && showQuotes;
+ const invoicesBlock = billsOn && showInvoices;
+
+ const { data, isLoading, isError } = useQuery({
+ queryKey: ['crm-overview'],
+ queryFn: () => fetchCrmOverview(),
+ enabled: anyCrm,
+ // Dashboard tile aggregates — admin opens this on every dashboard
+ // load; refetching the full aggregate on every mount adds DB load
+ // without observable benefit. 60s window covers the typical
+ // "click into a contract / click back" pattern.
+ staleTime: 60_000,
+ });
+
+ if (!anyCrm) return null;
+ // Admin hid every CRM tile — render nothing, including the heading.
+ if (!billsRevenueRow && !quotesBlock && !invoicesBlock) return null;
+ if (isLoading) return null;
+ if (isError || !data) {
+ // Surface a tiny inline notice when the section is enabled by
+ // flags but the API failed — silent renders make this hard to
+ // debug (the user reported "everything turned on but nothing
+ // shows" which traced back to a permission check on the
+ // backend). Keep it small so it doesn't disrupt the page.
+ return (
+
+
+ {t('crmOverview.title', 'CRM overview')}
+
+
+ {t('crmOverview.loadError',
+ 'Could not load CRM stats. Check that you have bills.view or quotes.view permission and that the backend is on the latest build.')}
+
+
+ );
+ }
+
+ const d: CrmOverviewStats = data;
+ const cur = d.currency || 'CHF';
+
+ return (
+
+
+ {t('crmOverview.title', 'CRM overview')}
+
+
+ {/* Revenue + outstanding (bills feature only). Revenue trio and
+ outstanding tile are gated independently — admins who only
+ want the outstanding figure (or vice versa) can hide either
+ via Settings → CRM behaviour. */}
+ {billsRevenueRow && (
+
+ {showRevenue && (
+ <>
+
+ )}
+
+ {/* Quotes pipeline (quotes feature only) */}
+ {quotesBlock && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+interface StatCardProps {
+ icon: React.ReactNode;
+ label: string;
+ value: string | number;
+ sub?: string;
+ to?: string;
+}
+const StatCard: React.FC = ({ icon, label, value, sub, to }) => {
+ const inner = (
+
+
+
{icon}
+
+
{label}
+
{value}
+ {sub &&
{sub}
}
+
+
+ );
+ if (to) {
+ return ([]);
@@ -228,7 +230,7 @@ export const CssTemplateEditor: React.FC = () => {
{/* Last Updated */}
{activeTemplate.updated_at && (
- {t('cssTemplates.lastUpdated', 'Last updated')}: {new Date(activeTemplate.updated_at).toLocaleString()}
+ {t('cssTemplates.lastUpdated', 'Last updated')}: {fmtDateTime(activeTemplate.updated_at)}
)}
diff --git a/frontend/src/components/admin/CustomerCrmPanels.tsx b/frontend/src/components/admin/CustomerCrmPanels.tsx
new file mode 100644
index 00000000..9f58f324
--- /dev/null
+++ b/frontend/src/components/admin/CustomerCrmPanels.tsx
@@ -0,0 +1,221 @@
+/**
+ * Customer CRM panels — quotes + invoices history shown on the customer
+ * detail page. Each panel:
+ * - is gated by its global feature flag (`quotes` / `bills`); when the
+ * flag is off the panel doesn't render at all (no empty space)
+ * - shows the 10 most recent rows for that customer, with status
+ * badge, total and a click-through to the full document
+ * - exposes a "New …" button + a "Show all" link to the global list
+ * pre-filtered by this customer
+ *
+ * Lives as a separate component so CustomerDetailPage doesn't need to
+ * know about CRM types; the panels handle their own data fetching.
+ */
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { FileText, Plus, Receipt, ScrollText } from 'lucide-react';
+import { Card, Button, Loading } from '../common';
+import { useFeatureFlags } from '../../contexts/FeatureFlagsContext';
+import { quotesService } from '../../services/quotes.service';
+import { billsService } from '../../services/bills.service';
+import { contractsService } from '../../services/contracts.service';
+import { formatMoney } from './LineItemsTable';
+import { useLocalizedDate } from '../../hooks/useLocalizedDate';
+
+interface Props {
+ customerAccountId: number;
+}
+
+export const CustomerCrmPanels: React.FC
= ({ customerAccountId }) => {
+ const { flags } = useFeatureFlags();
+
+ return (
+ <>
+ {flags.quotes && = ({ customerAccountId }) => {
+ const { t } = useTranslation();
+ const { format: fmtDate } = useLocalizedDate();
+ const { data, isLoading } = useQuery({
+ queryKey: ['customer-quotes', customerAccountId],
+ queryFn: () => quotesService.list({ customerAccountId, page: 1, pageSize: 10, sort: 'newest' }),
+ // Customer detail page mounts these three panels together. Without
+ // staleTime they all refetch on every visit + every queryClient
+ // touch elsewhere. 30s lets a quick tab-out/tab-in not re-hit the
+ // API; admin mutations invalidate the cache explicitly when they
+ // need fresh data.
+ staleTime: 30_000,
+ });
+
+ return (
+
+
+
+
+
+
+
{t('common.showAll', 'Show all')}
+
+ {/* "New quote" pre-fills via state on QuoteEditorPage when a
+ customerAccountId search-param is present (cheap follow-up
+ if you want it). For now the editor's customer picker
+ starts empty. */}
+ {/* Pre-fill this customer on the editor via search-param
+ so the admin doesn't have to retype it. The editor picks
+ it up on mount. */}
+
+
+
+
+
+ {t('customers.detail.noQuotes', 'No quotes for this customer yet.')}
+
+ ) : (
+
+ )}
+
+ );
+};
+
+const ContractsPanel: React.FC = ({ customerAccountId }) => {
+ const { t } = useTranslation();
+ const { format: fmtDate } = useLocalizedDate();
+ const { data, isLoading } = useQuery({
+ queryKey: ['customer-contracts', customerAccountId],
+ queryFn: () => contractsService.list({ customerAccountId, page: 1, pageSize: 10, sort: 'newest' }),
+ staleTime: 30_000,
+ });
+
+ return (
+
+
+
+
+
+
+
{t('common.showAll', 'Show all')}
+
+
+
+
+
+
+ {t('customers.detail.noContracts', 'No contracts for this customer yet.')}
+
+ ) : (
+
+ )}
+
+ );
+};
+
+const InvoicesPanel: React.FC = ({ customerAccountId }) => {
+ const { t } = useTranslation();
+ const { format: fmtDate } = useLocalizedDate();
+ const { data, isLoading } = useQuery({
+ queryKey: ['customer-invoices', customerAccountId],
+ queryFn: () => billsService.list({ customerAccountId, page: 1, pageSize: 10, sort: 'newest' }),
+ staleTime: 30_000,
+ });
+
+ return (
+
+
+
+
+
+
+
{t('common.showAll', 'Show all')}
+
+ {/* Same prefill trick as quotes — see comment in QuotesPanel. */}
+
+
+
+
+
+ {t('customers.detail.noBills', 'No invoices for this customer yet.')}
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/frontend/src/components/admin/CustomerPicker.tsx b/frontend/src/components/admin/CustomerPicker.tsx
new file mode 100644
index 00000000..538122fc
--- /dev/null
+++ b/frontend/src/components/admin/CustomerPicker.tsx
@@ -0,0 +1,214 @@
+/**
+ * CustomerPicker — shared search-or-create surface for the three CRM
+ * editors (Quote, Bill, Contract).
+ *
+ * **Why this exists**
+ *
+ * The audit flagged that QuoteEditorPage, BillEditorPage, and
+ * ContractEditorPage each carried near-identical ~80-line customer
+ * picker blocks: a "currently selected" row when an id is present,
+ * a search-debounced lookup with passive-badge chips, and an
+ * "InlineCustomerCreate" expansion when the admin clicks "+ Create
+ * new customer". The three copies had drifted: passive badge text
+ * positioning differed, the contract variant used a bare ` { ... }} // CustomerSummary from search
+ * onCreate={(c) => { ... }} // CustomerAccountDetail from inline create
+ * onClear={() => { ... }} // user clicked "Change"
+ * readOnly={false} // contract editor uses true on edit
+ * />
+ *
+ * The component owns the `customerSearch` state + the debounced
+ * useQuery against customerAdminService.search and the "+ Create new
+ * customer" expansion toggle. Parents own the canonical
+ * `customerAccountId / label / isPassive` triple because each editor
+ * stores them differently (Quote nests them inside a form object,
+ * Bill + Contract use separate useStates). Keeping the triple owned
+ * by the parent avoids a forced shape migration.
+ *
+ * **Selection vs creation callbacks**
+ *
+ * `onSelect` receives the CustomerSummary shape from the search
+ * endpoint (id, email, displayName, companyName, firstName, lastName,
+ * isPassive). `onCreate` receives the full CustomerAccountDetail
+ * because some editors want to inherit additional fields from a
+ * freshly-created customer (e.g. Quote inherits the new customer's
+ * preferredLanguage so the doc renders in their locale by default).
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { Button, Input } from '../common';
+import { InlineCustomerCreate } from './InlineCustomerCreate';
+import {
+ customerAdminService,
+ type CustomerAccountDetail,
+ type CustomerAccountSummary,
+} from '../../services/customerAdmin.service';
+
+// Alias for clarity at the call-site: search returns the Summary shape.
+export type CustomerSummary = CustomerAccountSummary;
+
+export interface CustomerPickerProps {
+ value: number | null;
+ label: string;
+ isPassive: boolean;
+ onSelect: (customer: CustomerSummary) => void;
+ onCreate: (customer: CustomerAccountDetail) => void;
+ onClear: () => void;
+ /**
+ * Read-only mode: render only the selected-row chip, hide search +
+ * create + change. Used by the contract editor in edit mode where
+ * the customer is locked to whatever the contract was created with.
+ */
+ readOnly?: boolean;
+ /**
+ * Placeholder override for the search box. Defaults to the i18n
+ * `crm.customerPicker.search` key with an EN fallback. Specific
+ * editors can pass a doc-type-flavoured label.
+ */
+ searchPlaceholder?: string;
+ /**
+ * F.6 — surface a feature-gate badge so the admin sees up front that
+ * selecting a particular customer won't work for this surface (e.g.
+ * the calendar's hour-entry drag-create modal would 409 the backend
+ * on a customer whose `feature_hours_logging` is OFF).
+ * Currently only 'hoursLogging' is supported; pass undefined to
+ * skip the badge entirely (default for quote / bill / contract
+ * editors which don't care about hour-logging eligibility).
+ */
+ requireFeature?: 'hoursLogging';
+}
+
+export const CustomerPicker: React.FC = ({
+ value,
+ label,
+ isPassive,
+ onSelect,
+ onCreate,
+ onClear,
+ readOnly = false,
+ searchPlaceholder,
+ requireFeature,
+}) => {
+ const { t } = useTranslation();
+ const [search, setSearch] = useState('');
+ const [creating, setCreating] = useState(false);
+ // Debounce the search term before it hits the API. The previous
+ // shape fired one search request per keystroke; on a passive-
+ // customer list of 500+ rows, that's hundreds of /api/admin/customers
+ // calls during a single look-up. 250ms is below the perceptual
+ // threshold for typing.
+ const [debouncedSearch, setDebouncedSearch] = useState('');
+ useEffect(() => {
+ const handle = window.setTimeout(() => setDebouncedSearch(search), 250);
+ return () => window.clearTimeout(handle);
+ }, [search]);
+
+ const { data: options = [] } = useQuery({
+ queryKey: ['crm-customer-picker', debouncedSearch],
+ queryFn: () => customerAdminService.search(debouncedSearch),
+ enabled: !readOnly && !value && !creating && debouncedSearch.trim().length >= 2,
+ });
+
+ if (value) {
+ return (
+
+
+ {label || `#${value}`}
+ {isPassive && (
+
+ {t('customers.passive.badge', 'Passive — admin only')}
+
+ )}
+
+ {!readOnly && (
+
+ {t('common.change', 'Change')}
+
+ )}
+
setCreating(false)}
+ onCreated={(c) => {
+ onCreate(c);
+ setCreating(false);
+ }}
+ />
+ );
+ }
+
+ return (
+ <>
+
+ {options.map((c) => {
+ // F.6 — gate badge for the calendar's hour-entry create
+ // modal. Selecting a customer with feature_hours_logging
+ // OFF would 409 the backend; warn up front. We still allow
+ // the click so the admin can open the customer's detail
+ // page to flip the flag from a separate tab.
+ const hourLoggingOff =
+ requireFeature === 'hoursLogging' && c.featureHoursLogging === false;
+ return (
+
+ onSelect(c)}
+ className="w-full text-left px-3 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800 text-sm"
+ >
+
+ {c.companyName || c.displayName || c.email}
+
+ {c.email}
+ {c.isPassive && (
+
+ {t('customers.passive.badge', 'Passive — admin only')}
+
+ )}
+ {hourLoggingOff && (
+
+ {t('customers.hoursLoggingDisabled.badge', 'Hour logging disabled')}
+
+ )}
+
+
+ );
+ })}
+
+ )}
+ setCreating(true)}
+ className="mt-3 inline-flex items-center gap-1 text-sm text-primary-600 dark:text-primary-400 hover:underline"
+ >
+ {t('customers.create.openLink', '+ Create new customer')}
+
+
+ );
+};
diff --git a/frontend/src/components/admin/DocumentLineageCard.tsx b/frontend/src/components/admin/DocumentLineageCard.tsx
new file mode 100644
index 00000000..84cf2b06
--- /dev/null
+++ b/frontend/src/components/admin/DocumentLineageCard.tsx
@@ -0,0 +1,313 @@
+/**
+ * — flat list of every document sharing one
+ * `deal_uuid` (migration 140), grouped by type. Renders on the three
+ * detail pages (Quote / Contract / Bill) so the admin sees the
+ * complete chain — quotes + contracts + invoices (incl. Storno /
+ * reissue / installment siblings) — without walking individual FKs.
+ *
+ * Data comes from `GET /api/admin/deals/:uuid/documents` (commit #3).
+ * The card is purely presentational; the parent passes the dealUuid
+ * and a `currentId` so the row representing "the document you're
+ * looking at" can be highlighted instead of linked.
+ *
+ * When no other documents share the deal (newly-created standalone
+ * doc), the card renders a compact "no related documents" line
+ * instead of three empty groups — keeps the detail page from looking
+ * busy on the common case.
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import { FileText, ScrollText, Receipt, AlertTriangle, Pencil } from 'lucide-react';
+import { Button, Card } from '../common';
+import { formatMoneyMinor } from '../../utils/money';
+import { api } from '../../config/api';
+import { EditInstallmentPlanModal } from './EditInstallmentPlanModal';
+
+export interface DocumentLineageCardProps {
+ dealUuid: string | null | undefined;
+ /** Which document you're currently looking at. The matching row
+ * renders muted (not a link) so the admin doesn't navigate to the
+ * page they're already on. */
+ current: { kind: 'quote' | 'contract' | 'invoice'; id: number };
+ className?: string;
+}
+
+interface DealItemBase {
+ id: number;
+ number: string;
+ status: string;
+ currency?: string;
+ totalAmountMinor?: number;
+ issueDate?: string;
+ eventName?: string | null;
+ createdAt?: string;
+}
+
+interface DealQuoteItem extends DealItemBase { kind: 'quote'; validUntil?: string; }
+interface DealContractItem extends DealItemBase { kind: 'contract'; title?: string | null; validUntil?: string; }
+interface DealInvoiceItem extends DealItemBase {
+ kind: 'invoice';
+ invoiceKind: 'invoice' | 'storno';
+ paidAmountMinor?: number;
+ dueDate?: string;
+ eventDate?: string | null;
+ installmentIndex?: number;
+ installmentTotal?: number;
+ installmentLabel?: string | null;
+ installmentTrigger?: string | null;
+ installmentOffsetDays?: number;
+ isMonthlyDraft?: boolean;
+}
+
+interface DealLineageResponse {
+ dealUuid: string;
+ quotes: DealQuoteItem[];
+ contracts: DealContractItem[];
+ invoices: DealInvoiceItem[];
+}
+
+const EDITABLE_PLAN_STATUSES = new Set(['scheduled', 'pending_delivery']);
+
+export const DocumentLineageCard: React.FC = ({
+ dealUuid, current, className = '',
+}) => {
+ const { t } = useTranslation();
+ const [showEditPlan, setShowEditPlan] = useState(false);
+ const { data, isLoading, error } = useQuery({
+ queryKey: ['deal-lineage', dealUuid],
+ queryFn: async () => {
+ const res = await api.get(`/admin/deals/${dealUuid}/documents`);
+ return (res.data.data || res.data) as DealLineageResponse;
+ },
+ enabled: !!dealUuid,
+ staleTime: 30_000,
+ });
+
+ if (!dealUuid) return null;
+
+ if (isLoading) {
+ return (
+
+
+ {t('dealLineage.loading', 'Loading related documents…')}
+
+
+ );
+ }
+ if (error) {
+ return (
+
+
+
+
+ );
+ }
+ if (!data) return null;
+
+ const { quotes, contracts, invoices } = data;
+ const totalCount = quotes.length + contracts.length + invoices.length;
+
+ // Reshape gesture is offered when this deal holds a multi-installment
+ // plan AND every invoice is still pre-customer. Server re-checks on
+ // save; if a sibling shipped between render and click, the 409 path
+ // in the modal handles the race.
+ const hasMultiInstallment = invoices.some((i) => (i.installmentTotal || 0) > 1);
+ const allInvoicesEditable = invoices.length > 0
+ && invoices.every((i) => i.invoiceKind !== 'storno'
+ && EDITABLE_PLAN_STATUSES.has(i.status));
+ const canEditPlan = hasMultiInstallment && allInvoicesEditable;
+ // Only ONE doc total = the current one. No siblings to surface.
+ if (totalCount <= 1) {
+ return (
+
+
+ {t('dealLineage.title', 'Related documents')}
+
+
+ {t('dealLineage.empty', 'No other documents share this deal yet. New invoices, contracts, or installments will show up here once created.')}
+
+
+ );
+ }
+
+ return (
+
+
+ {t('dealLineage.title', 'Related documents')}
+
+
+ {quotes.length > 0 && (
+ |
+ ))}
+
+ )}
+
+ {contracts.length > 0 && (
+ |
+ ))}
+
+ )}
+
+ {invoices.length > 0 && (
+ setShowEditPlan(true)}
+ leftIcon={
+ ) : undefined}
+ >
+ {invoices.map((i) => {
+ const isStorno = i.invoiceKind === 'storno';
+ const installmentTag = i.installmentTotal && i.installmentTotal > 1
+ ? ` · ${i.installmentLabel || `${i.installmentIndex! + 1}/${i.installmentTotal}`}`
+ : '';
+ return (
+ |
+ );
+ })}
+
+ )}
+
+ {canEditPlan && dealUuid && (
+ setShowEditPlan(false)}
+ dealUuid={dealUuid}
+ siblings={invoices.map((i) => ({
+ id: i.id,
+ number: i.number,
+ status: i.status,
+ totalAmountMinor: i.totalAmountMinor,
+ installmentIndex: i.installmentIndex,
+ installmentTotal: i.installmentTotal,
+ installmentLabel: i.installmentLabel,
+ installmentTrigger: i.installmentTrigger,
+ installmentOffsetDays: i.installmentOffsetDays,
+ }))}
+ eventDate={invoices.find((i) => i.eventDate)?.eventDate || null}
+ />
+ )}
+
+ );
+};
+
+const Group: React.FC<{
+ icon: React.ReactNode;
+ label: string;
+ count: number;
+ children: React.ReactNode;
+ action?: React.ReactNode;
+}> = ({ icon, label, count, children, action }) => (
+
+
+ {icon}
+ {label}
+ ({count})
+ {action}
+
+
+
+
+ {number}
+ {badge && (
+
+ {badge}
+
+ )}
+ {meta && (
+ {meta}
+ )}
+
+
+ {right && {right} }
+ {t(statusKey, statusFallback)}
+
+
{inner} ;
+ }
+ return (
+
+
+ );
+};
+
+export default DocumentLineageCard;
diff --git a/frontend/src/components/admin/EditInstallmentPlanModal.tsx b/frontend/src/components/admin/EditInstallmentPlanModal.tsx
new file mode 100644
index 00000000..41a243c6
--- /dev/null
+++ b/frontend/src/components/admin/EditInstallmentPlanModal.tsx
@@ -0,0 +1,209 @@
+/**
+ * — atomic reshape of an installment plan
+ * after siblings have spawned. Wraps the same ``
+ * used by Quote/Bill editors, pre-filled from the existing siblings
+ * (via the lineage payload — no extra fetch needed).
+ *
+ * Triggered from ``, which only renders the
+ * "Edit plan" button when every invoice on the deal is still
+ * scheduled / pending_delivery (the same gate enforced server-side).
+ * The server still re-checks on save; a 409 INVOICE_LOCKED races back
+ * if a sibling shipped between modal open and save click.
+ *
+ * Plan total preservation: the backend uses sum(existing sibling totals)
+ * as the plan total, so the panel doesn't need to surface money — only
+ * the structure (percents / labels / triggers / offsets).
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { X, AlertTriangle } from 'lucide-react';
+import { Button, Card } from '../common';
+import { InstallmentsPanel } from './InstallmentsPanel';
+import type { PaymentTermInstallment } from '../../services/quotes.service';
+import { dealsService } from '../../services/deals.service';
+
+export interface EditInstallmentPlanModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ dealUuid: string;
+ /** Existing sibling invoices on the deal — used to seed the panel
+ * and to derive the current plan total for percent computation. */
+ siblings: Array<{
+ id: number;
+ number: string;
+ status: string;
+ totalAmountMinor?: number;
+ installmentIndex?: number;
+ installmentTotal?: number;
+ installmentLabel?: string | null;
+ installmentTrigger?: string | null;
+ installmentOffsetDays?: number;
+ }>;
+ /** Event date — passed to so its date preview
+ * works for before_event / after_event rows. */
+ eventDate?: string | null;
+ onSaved?: () => void;
+}
+
+const VALID_TRIGGERS: PaymentTermInstallment['trigger'][] = [
+ 'quote_accepted', 'before_event', 'after_event', 'after_delivery', 'fixed_date',
+];
+
+function isValidTrigger(t: unknown): t is PaymentTermInstallment['trigger'] {
+ return typeof t === 'string' && (VALID_TRIGGERS as string[]).includes(t);
+}
+
+export const EditInstallmentPlanModal: React.FC = ({
+ isOpen, onClose, dealUuid, siblings, eventDate, onSaved,
+}) => {
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+
+ // Derive the initial panel rows from the existing siblings, sorted
+ // by installment_index. Percent = total_amount_minor / sum * 100.
+ const initialPlan = useMemo(() => {
+ const sorted = [...siblings].sort(
+ (a, b) => (a.installmentIndex ?? 0) - (b.installmentIndex ?? 0),
+ );
+ const sum = sorted.reduce((s, x) => s + (x.totalAmountMinor || 0), 0);
+ if (sum === 0) {
+ // Degenerate: every sibling totals zero. Fall back to equal split.
+ return sorted.map((s, i) => ({
+ label: s.installmentLabel || `${i + 1}/${sorted.length}`,
+ percent: Math.round(10000 / sorted.length) / 100,
+ trigger: isValidTrigger(s.installmentTrigger) ? s.installmentTrigger : 'fixed_date',
+ offset_days: s.installmentOffsetDays ?? 0,
+ }));
+ }
+ // Compute percents, last slice absorbs rounding so the panel reports
+ // sum=100 on open.
+ const rows: PaymentTermInstallment[] = [];
+ let accPct = 0;
+ sorted.forEach((s, i) => {
+ let pct = i === sorted.length - 1
+ ? Math.max(0, 100 - accPct)
+ : Math.round(((s.totalAmountMinor || 0) / sum) * 10000) / 100;
+ pct = Math.round(pct * 100) / 100;
+ accPct += pct;
+ rows.push({
+ label: s.installmentLabel || `${i + 1}/${sorted.length}`,
+ percent: pct,
+ trigger: isValidTrigger(s.installmentTrigger) ? s.installmentTrigger : 'fixed_date',
+ offset_days: s.installmentOffsetDays ?? 0,
+ });
+ });
+ return rows;
+ }, [siblings]);
+
+ const [plan, setPlan] = useState(initialPlan);
+ const [valid, setValid] = useState(true);
+
+ // Reseed when the modal opens against fresh siblings.
+ useEffect(() => {
+ if (isOpen) setPlan(initialPlan);
+ }, [isOpen, initialPlan]);
+
+ const save = useMutation({
+ mutationFn: async () => {
+ if (!plan || plan.length === 0) {
+ throw new Error(t('dealLineage.editPlanEmpty', 'Plan cannot be empty.') as string);
+ }
+ return dealsService.updateInstallmentPlan(dealUuid, plan);
+ },
+ onSuccess: () => {
+ toast.success(t('dealLineage.editPlanSuccess', 'Installment plan updated.'));
+ queryClient.invalidateQueries({ queryKey: ['deal-lineage', dealUuid] });
+ queryClient.invalidateQueries({ queryKey: ['adminBills'] });
+ queryClient.invalidateQueries({ queryKey: ['admin-invoices'] });
+ onSaved?.();
+ onClose();
+ },
+ onError: (err: unknown) => {
+ const e = err as { response?: { data?: { error?: string; code?: string } }; message?: string };
+ const code = e?.response?.data?.code;
+ if (code === 'INVOICE_LOCKED' || code === 'PLAN_HAS_STORNO') {
+ toast.error(t('dealLineage.editPlanLocked',
+ 'Plan can no longer be edited — at least one invoice has shipped or been cancelled.'));
+ queryClient.invalidateQueries({ queryKey: ['deal-lineage', dealUuid] });
+ onClose();
+ return;
+ }
+ if (code === 'PERCENT_SUM_INVALID') {
+ toast.error(t('dealLineage.editPlanPercentSumError', 'Percents must sum to 100.'));
+ return;
+ }
+ toast.error(
+ e?.response?.data?.error
+ || e?.message
+ || t('dealLineage.editPlanGeneralError', 'Could not update plan.'),
+ );
+ },
+ });
+
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+
+ {t('dealLineage.editPlanModalTitle', 'Edit installment plan')}
+
+
+ {t('dealLineage.editPlanHelp',
+ 'Atomically reshape this plan: change percents, labels, triggers, add or remove rows. The plan total stays fixed; existing invoice numbers are kept where possible. Refused once any invoice has shipped.')}
+
+
+
+
+
+
+
+ {t('dealLineage.editPlanWarning',
+ 'Trimming rows deletes their invoice numbers (the sequence cannot release them — a §14 UStG continuity rule). Adding rows claims fresh numbers.')}
+
+
setPlan(next || [])}
+ onValidityChange={setValid}
+ eventDate={eventDate || null}
+ />
+
+
+
+ {t('common.cancel', 'Cancel')}
+
+ save.mutate()}
+ isLoading={save.isPending}
+ disabled={save.isPending || !valid || !plan || plan.length === 0}
+ >
+ {t('dealLineage.editPlanSave', 'Save plan')}
+
+
+
+
+ *
+ * Per-event override for the pre-event customer reminder (migration
+ * 143). Mounted once on the EventDetailsPage; admin can:
+ * - Disable the reminder for THIS event only (no global flip)
+ * - Override the global "days before" offset (null = inherit)
+ * - Provide a custom body that overrides the resolved template's
+ * body for THIS event only (subject still comes from the template)
+ *
+ * Saves through the existing PUT /api/admin/events/:id endpoint with
+ * the three new whitelisted fields (added 2026-05-25):
+ * - event_reminder_disabled (bool)
+ * - event_reminder_offset_days (int | null)
+ * - event_reminder_body_override (string | null)
+ *
+ * Behaves correctly on pre-migration installs: if the event object
+ * doesn't carry the new fields, the form starts blank and "Reset to
+ * default" is a no-op until admin saves something.
+ *
+ * Strings: every label / hint / button goes through `t()` with a
+ * fallback. The maintainer flagged "no hard coded i18n" in commit #5
+ * — applying that convention strictly from here forward.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { Bell, BellOff, Save } from 'lucide-react';
+import { Button, Card, Input } from '../common';
+import { api } from '../../config/api';
+
+export interface EventReminderOverrideCardProps {
+ eventId: number;
+ /** Initial values from the event row; null when unset. */
+ initial: {
+ event_reminder_disabled?: boolean;
+ event_reminder_offset_days?: number | null;
+ event_reminder_body_override?: string | null;
+ };
+ /** Optional callback so the parent can refresh its event query
+ * after a save. */
+ onSaved?: () => void;
+}
+
+export const EventReminderOverrideCard: React.FC = ({
+ eventId, initial, onSaved,
+}) => {
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+
+ const [disabled, setDisabled] = useState(!!initial.event_reminder_disabled);
+ const [offsetDays, setOffsetDays] = useState(
+ initial.event_reminder_offset_days == null ? '' : String(initial.event_reminder_offset_days),
+ );
+ const [bodyOverride, setBodyOverride] = useState(initial.event_reminder_body_override || '');
+
+ // Reset local state if the parent's `initial` changes (e.g. after
+ // the event refetches following an unrelated save).
+ useEffect(() => {
+ setDisabled(!!initial.event_reminder_disabled);
+ setOffsetDays(initial.event_reminder_offset_days == null ? '' : String(initial.event_reminder_offset_days));
+ setBodyOverride(initial.event_reminder_body_override || '');
+ }, [initial.event_reminder_disabled, initial.event_reminder_offset_days, initial.event_reminder_body_override]);
+
+ const save = useMutation({
+ mutationFn: async () => {
+ const payload: Record = {
+ event_reminder_disabled: disabled,
+ };
+ // Empty string → null clears the override and inherits global.
+ if (offsetDays.trim() === '') {
+ payload.event_reminder_offset_days = null;
+ } else {
+ const n = Number(offsetDays);
+ if (!Number.isFinite(n) || n < 0) {
+ throw new Error(t('eventReminderOverride.invalidOffset',
+ 'Offset must be a non-negative integer or blank.') as string);
+ }
+ payload.event_reminder_offset_days = Math.floor(n);
+ }
+ payload.event_reminder_body_override = bodyOverride.trim() === '' ? null : bodyOverride;
+ await api.put(`/admin/events/${eventId}`, payload);
+ },
+ onSuccess: () => {
+ toast.success(t('eventReminderOverride.saved', 'Reminder override saved.'));
+ queryClient.invalidateQueries({ queryKey: ['admin-event', eventId] });
+ queryClient.invalidateQueries({ queryKey: ['adminEvent', eventId] });
+ onSaved?.();
+ },
+ onError: (err: unknown) => {
+ const e = err as { message?: string; response?: { data?: { error?: string } } };
+ toast.error(
+ e?.response?.data?.error
+ || e?.message
+ || t('eventReminderOverride.saveError', 'Could not save reminder override.'),
+ );
+ },
+ });
+
+ return (
+
+
+
+ {disabled
+ ?
+ {t('eventReminderOverride.title', 'Pre-event reminder')}
+
+
+
save.mutate()}
+ isLoading={save.isPending}
+ disabled={save.isPending}
+ leftIcon={
+
+ {t('eventReminderOverride.help',
+ 'Per-event override for the customer reminder. Global on-off + default offset live under Settings → Reminder emails. Anything left blank here inherits the global setting / resolved template.')}
+
+
+ 
+ {/* On mobile the rail-narrow style only applies at
+ lg+, so when collapsed=true the mobile view still
+ has the regular w-64 width — show the company name
+ next to the logo so the brand row doesn't feel
+ empty there. */}
+ {collapsed && (
+
+ {brandAlt}
+
+ )}
+
+ ) : (
+ <>
+ {showLabels && (
+ {t('admin.title')}
+ )}
+ {/* When collapsed on desktop the title is hidden; on mobile we
+ always show it because the rail-narrow style only applies at lg+ */}
+ {collapsed && (
+ {t('admin.title')}
+ )}
+
+ )}