feat(accounting): Accounting nav section + relocate Tax report out of CRM
Adds the `accounting` feature flag to the frontend (type, context default) and a Settings -> Features toggle card. When enabled: - A new top-level "Accounting" sidebar entry appears (gated by `accounting` + accounting.view), with an AccountingLayout sub-nav mirroring ClientsLayout. - The Tax report relocates: it is HIDDEN from the CRM (Clients) sub-nav and shown under Accounting instead, at /admin/accounting/tax-report. When accounting is OFF, Tax stays under CRM exactly as before. Tax visibility still depends on `taxReport` (which depends on `bills`), so the relocation only changes WHERE the menu item lives, not whether it exists. Files: featureFlags.service.ts (+'accounting'), FeatureFlagsContext default, AdminSidebar entry, new AccountingLayout, ClientsLayout filter, App.tsx route, FeaturesTab card, en/de i18n (navigation.accounting, accounting.*, settings.features.accounting; DE authored natively). Verified: `npm run build` green; en/de JSON valid.
This commit is contained in:
@@ -64,6 +64,7 @@ import {
|
||||
import { CustomerAuthProvider } from './contexts/CustomerAuthContext';
|
||||
import { AdminLayout, AdminAuthWrapper } from './components/admin';
|
||||
import { ClientsLayout } from './components/admin/ClientsLayout';
|
||||
import { AccountingLayout } from './components/admin/AccountingLayout';
|
||||
import { RequireFeature } from './components/admin/RequireFeature';
|
||||
import { PageErrorBoundary, OfflineIndicator, SkipLink, DynamicFavicon, RobotsMetaTags, CMSContentBlock, Loading } from './components/common';
|
||||
import { MaintenanceWrapper } from './components/MaintenanceWrapper';
|
||||
@@ -260,6 +261,20 @@ function App() {
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Accounting section (migration 122). Parent gated by
|
||||
the `accounting` flag. Hosts the Tax report — which
|
||||
relocates here from the CRM sub-nav when accounting
|
||||
is on — plus the future inbound-invoice / expenses
|
||||
pages. Each sub-route is independently flagged. */}
|
||||
<Route element={<RequireFeature flag="accounting" />}>
|
||||
<Route path="accounting" element={<AccountingLayout />}>
|
||||
<Route element={<RequireFeature flag="taxReport" />}>
|
||||
<Route path="tax-report" element={<TaxReportPage />} />
|
||||
</Route>
|
||||
<Route index element={<Navigate to="/admin/accounting/tax-report" replace />} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Old /admin/customers paths now live under
|
||||
/admin/clients/accounts. Kept indefinitely as
|
||||
redirects so existing bookmarks and email links
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* Accounting section layout (migration 122).
|
||||
*
|
||||
* Wraps /admin/accounting/* routes with a Settings-style left sub-nav,
|
||||
* mirroring ClientsLayout. Today it hosts the Tax report (relocated here
|
||||
* from CRM when the `accounting` flag is on); the inbound-document inbox and
|
||||
* expenses pages slot in as additional sub-nav entries when their UIs land.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Landmark, Calculator } from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { useFeatureFlags, type FeatureKey } from '../../contexts/FeatureFlagsContext';
|
||||
|
||||
interface NavItem {
|
||||
key: string;
|
||||
to: string;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
/** Feature flag that must be ON for this entry to render. */
|
||||
featureFlag: FeatureKey;
|
||||
}
|
||||
|
||||
export const AccountingLayout: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const { flags } = useFeatureFlags();
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
key: 'tax-report',
|
||||
to: '/admin/accounting/tax-report',
|
||||
label: t('accounting.subnav.taxReport', 'Tax'),
|
||||
icon: Calculator,
|
||||
featureFlag: 'taxReport',
|
||||
},
|
||||
// Future Accounting sub-features (inbound inbox, expenses) slot in here
|
||||
// once their pages land, e.g.:
|
||||
// { key: 'inbox', to: '/admin/accounting/inbox', featureFlag: 'accounting' }
|
||||
// { key: 'expenses', to: '/admin/accounting/expenses', featureFlag: 'accounting' }
|
||||
];
|
||||
|
||||
const enabledItems = navItems.filter((item) => flags[item.featureFlag]);
|
||||
|
||||
const header = (
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">
|
||||
{t('accounting.title', 'Accounting')}
|
||||
</h1>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 mt-1">
|
||||
{t('accounting.subtitle', 'Inbound supplier invoices, expenses and reporting.')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (enabledItems.length === 0) {
|
||||
return (
|
||||
<div>
|
||||
{header}
|
||||
<div className="rounded-xl border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900 p-8 text-center">
|
||||
<Landmark className="w-10 h-10 mx-auto mb-3 text-neutral-400" />
|
||||
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-1">
|
||||
{t('accounting.empty.title', 'No accounting features enabled')}
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{t('accounting.empty.body', 'Enable the Tax report (or another accounting sub-feature) under Settings → Features to get started.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{header}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[220px_1fr] gap-6 lg:gap-8">
|
||||
{/* Mobile: native select dropdown */}
|
||||
<div className="lg:hidden">
|
||||
<label htmlFor="accounting-section" className="sr-only">
|
||||
{t('accounting.navAriaLabel', 'Accounting navigation')}
|
||||
</label>
|
||||
<select
|
||||
id="accounting-section"
|
||||
value={location.pathname}
|
||||
onChange={(e) => navigate(e.target.value)}
|
||||
className="w-full rounded-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 px-3 py-2 text-sm font-medium text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
>
|
||||
{enabledItems.map((item) => (
|
||||
<option key={item.key} value={item.to}>{item.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Desktop: sticky left rail */}
|
||||
<aside className="hidden lg:block">
|
||||
<nav
|
||||
aria-label={t('accounting.navAriaLabel', 'Accounting navigation')}
|
||||
className="sticky top-6 space-y-1"
|
||||
>
|
||||
{enabledItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<NavLink
|
||||
key={item.key}
|
||||
to={item.to}
|
||||
className={({ isActive }) =>
|
||||
`group w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? 'bg-accent-dark text-white'
|
||||
: 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Icon
|
||||
className={`w-4 h-4 flex-shrink-0 ${
|
||||
isActive
|
||||
? 'text-white'
|
||||
: 'text-neutral-500 dark:text-neutral-400 group-hover:text-neutral-700 dark:group-hover:text-neutral-200'
|
||||
}`}
|
||||
/>
|
||||
<span className="truncate">{item.label}</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div className="min-w-0">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
X,
|
||||
Users,
|
||||
Briefcase,
|
||||
Landmark,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
} from 'lucide-react';
|
||||
@@ -96,6 +97,16 @@ const navigation: NavItem[] = [
|
||||
'taxReport', 'hoursLogging', 'contracts', 'calendar',
|
||||
],
|
||||
},
|
||||
// Accounting section (migration 122) — inbound supplier invoices,
|
||||
// expenses + re-bill, and the tax report (which relocates here from
|
||||
// the CRM sub-nav when `accounting` is on). Gated by the `accounting`
|
||||
// master flag; the sub-pages inside AccountingLayout are each
|
||||
// independently feature-gated.
|
||||
{
|
||||
nameKey: 'navigation.accounting', href: '/admin/accounting', icon: Landmark,
|
||||
permission: 'accounting.view',
|
||||
featureFlag: 'accounting',
|
||||
},
|
||||
];
|
||||
|
||||
export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose, collapsed = false, onToggleCollapse }) => {
|
||||
|
||||
@@ -99,7 +99,13 @@ export const ClientsLayout: React.FC = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const enabledItems = navItems.filter((item) => flags[item.featureFlag]);
|
||||
const enabledItems = navItems.filter((item) => {
|
||||
if (!flags[item.featureFlag]) return false;
|
||||
// When the Accounting area is enabled, the tax report relocates out
|
||||
// of CRM and under Accounting — hide it here so it isn't in both.
|
||||
if (item.key === 'tax-report' && flags.accounting) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
// When the parent `clients` flag is on but no sub-feature is enabled,
|
||||
// there's nothing to render. Settings → Features is one click away
|
||||
|
||||
@@ -45,6 +45,10 @@ export const DEFAULT_FLAGS: FeatureFlags = {
|
||||
// Settings → Features once they've reviewed the seeded block
|
||||
// library with their lawyer.
|
||||
contracts: false,
|
||||
// Accounting (migration 122). Top-level Accounting area (inbound
|
||||
// supplier invoices, expenses + re-bill). When ON, the tax report
|
||||
// moves out of the CRM sub-nav and under Accounting. Strictly opt-in.
|
||||
accounting: false,
|
||||
};
|
||||
|
||||
export const FEATURE_FLAGS_QUERY_KEY = ['feature-flags'] as const;
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
Briefcase,
|
||||
Wrench,
|
||||
Calculator,
|
||||
Landmark,
|
||||
} from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Card } from '../../../components/common';
|
||||
@@ -278,6 +279,20 @@ export const FeaturesTab: React.FC = () => {
|
||||
) : undefined}
|
||||
/>
|
||||
|
||||
<FeatureCard
|
||||
icon={Landmark}
|
||||
title={t('settings.features.accounting.title', 'Accounting')}
|
||||
description={t(
|
||||
'settings.features.accounting.description',
|
||||
'Capture incoming supplier invoices (upload or phone/tablet camera), categorize expenses and re-bill costs to clients on the relevant event. When enabled, the Tax report moves out of CRM into a dedicated Accounting section. VAT / tax treatment is provided as guidance only — verify with your Treuhänder before relying on it.',
|
||||
)}
|
||||
status="new"
|
||||
statusLabel={statusLabel('new')}
|
||||
sidebarLabel={t('settings.features.accounting.sidebar', 'Accounting')}
|
||||
enabled={staged.accounting}
|
||||
onToggle={(next) => setFlag('accounting', next)}
|
||||
/>
|
||||
|
||||
<FeatureCard
|
||||
icon={Briefcase}
|
||||
title={t('settings.features.hoursLogging.title', 'Hours logging')}
|
||||
|
||||
@@ -196,6 +196,7 @@
|
||||
"users": "Benutzer",
|
||||
"calendar": "Kalender",
|
||||
"clients": "CRM",
|
||||
"accounting": "Buchhaltung",
|
||||
"betaTag": "Beta"
|
||||
},
|
||||
"eventTypes": {
|
||||
@@ -1635,6 +1636,11 @@
|
||||
"sidebar": "Steuer",
|
||||
"requiresBills": "Bitte zuerst Rechnungen aktivieren — die Steuerliste liest aus Ihren Rechnungen."
|
||||
},
|
||||
"accounting": {
|
||||
"title": "Buchhaltung",
|
||||
"description": "Eingehende Lieferantenrechnungen erfassen (Upload oder Handy-/Tablet-Kamera), Aufwände kategorisieren und Kosten dem passenden Event des Kunden weiterverrechnen. Wenn aktiviert, wandert die Steuerliste aus dem CRM in einen eigenen Buchhaltungsbereich. MwSt-/Steuerbehandlung dient nur als Orientierung — vor dem Verlassen darauf mit Ihrem Treuhänder prüfen.",
|
||||
"sidebar": "Buchhaltung"
|
||||
},
|
||||
"analytics": {
|
||||
"title": "Statistiken",
|
||||
"description": "Speichernutzung, Galerie-Aufrufe, Download-Zahlen und Statistiken pro Veranstaltung."
|
||||
@@ -3375,6 +3381,18 @@
|
||||
"development": "Entwicklung"
|
||||
}
|
||||
},
|
||||
"accounting": {
|
||||
"title": "Buchhaltung",
|
||||
"subtitle": "Eingehende Lieferantenrechnungen, Aufwände und Auswertungen.",
|
||||
"navAriaLabel": "Buchhaltungs-Navigation",
|
||||
"empty": {
|
||||
"title": "Keine Buchhaltungsfunktionen aktiviert",
|
||||
"body": "Aktiviere die Steuerliste (oder eine andere Buchhaltungs-Unterfunktion) unter Einstellungen → Funktionen, um loszulegen."
|
||||
},
|
||||
"subnav": {
|
||||
"taxReport": "Steuer"
|
||||
}
|
||||
},
|
||||
"calendar": {
|
||||
"pageTitle": "Kalender",
|
||||
"subtitle": "Termine, erfasste Stunden und offene Angebote/Verträge in einer Ansicht.",
|
||||
|
||||
@@ -196,6 +196,7 @@
|
||||
"users": "Users",
|
||||
"calendar": "Calendar",
|
||||
"clients": "CRM",
|
||||
"accounting": "Accounting",
|
||||
"betaTag": "Beta"
|
||||
},
|
||||
"archives": {
|
||||
@@ -1193,6 +1194,11 @@
|
||||
"sidebar": "Tax",
|
||||
"requiresBills": "Enable Bills first — the tax report reads from your invoices."
|
||||
},
|
||||
"accounting": {
|
||||
"title": "Accounting",
|
||||
"description": "Capture incoming supplier invoices (upload or phone/tablet camera), categorize expenses and re-bill costs to clients on the relevant event. When enabled, the Tax report moves out of CRM into a dedicated Accounting section. VAT / tax treatment is provided as guidance only — verify with your Treuhänder before relying on it.",
|
||||
"sidebar": "Accounting"
|
||||
},
|
||||
"analytics": {
|
||||
"title": "Analytics",
|
||||
"description": "Storage usage, gallery views, download counts, and per-event stats."
|
||||
@@ -3375,6 +3381,18 @@
|
||||
"development": "Development"
|
||||
}
|
||||
},
|
||||
"accounting": {
|
||||
"title": "Accounting",
|
||||
"subtitle": "Inbound supplier invoices, expenses and reporting.",
|
||||
"navAriaLabel": "Accounting navigation",
|
||||
"empty": {
|
||||
"title": "No accounting features enabled",
|
||||
"body": "Enable the Tax report (or another accounting sub-feature) under Settings → Features to get started."
|
||||
},
|
||||
"subnav": {
|
||||
"taxReport": "Tax"
|
||||
}
|
||||
},
|
||||
"calendar": {
|
||||
"pageTitle": "Calendar",
|
||||
"subtitle": "Events, logged hours, and pending quotes/contracts in one view.",
|
||||
|
||||
@@ -41,7 +41,12 @@ export type FeatureKey =
|
||||
// upload. Independent of quotes / bills — contracts can be sent on
|
||||
// their own. Seeded block bodies are examples only; admins must
|
||||
// have their lawyer review before sending. See docs/crm-disclaimers.md.
|
||||
| 'contracts';
|
||||
| 'contracts'
|
||||
// Accounting (migration 122). Top-level Accounting area — inbound
|
||||
// supplier invoices, expenses + re-bill, plus the tax report, which
|
||||
// relocates here from the CRM sub-nav when this flag is on. Strictly
|
||||
// opt-in; independent of the CRM flags.
|
||||
| 'accounting';
|
||||
|
||||
export type FeatureFlags = Record<FeatureKey, boolean>;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user