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 { CustomerAuthProvider } from './contexts/CustomerAuthContext';
|
||||||
import { AdminLayout, AdminAuthWrapper } from './components/admin';
|
import { AdminLayout, AdminAuthWrapper } from './components/admin';
|
||||||
import { ClientsLayout } from './components/admin/ClientsLayout';
|
import { ClientsLayout } from './components/admin/ClientsLayout';
|
||||||
|
import { AccountingLayout } from './components/admin/AccountingLayout';
|
||||||
import { RequireFeature } from './components/admin/RequireFeature';
|
import { RequireFeature } from './components/admin/RequireFeature';
|
||||||
import { PageErrorBoundary, OfflineIndicator, SkipLink, DynamicFavicon, RobotsMetaTags, CMSContentBlock, Loading } from './components/common';
|
import { PageErrorBoundary, OfflineIndicator, SkipLink, DynamicFavicon, RobotsMetaTags, CMSContentBlock, Loading } from './components/common';
|
||||||
import { MaintenanceWrapper } from './components/MaintenanceWrapper';
|
import { MaintenanceWrapper } from './components/MaintenanceWrapper';
|
||||||
@@ -260,6 +261,20 @@ function App() {
|
|||||||
</Route>
|
</Route>
|
||||||
</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
|
{/* Old /admin/customers paths now live under
|
||||||
/admin/clients/accounts. Kept indefinitely as
|
/admin/clients/accounts. Kept indefinitely as
|
||||||
redirects so existing bookmarks and email links
|
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,
|
X,
|
||||||
Users,
|
Users,
|
||||||
Briefcase,
|
Briefcase,
|
||||||
|
Landmark,
|
||||||
PanelLeftClose,
|
PanelLeftClose,
|
||||||
PanelLeftOpen,
|
PanelLeftOpen,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
@@ -96,6 +97,16 @@ const navigation: NavItem[] = [
|
|||||||
'taxReport', 'hoursLogging', 'contracts', 'calendar',
|
'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 }) => {
|
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,
|
// When the parent `clients` flag is on but no sub-feature is enabled,
|
||||||
// there's nothing to render. Settings → Features is one click away
|
// 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
|
// Settings → Features once they've reviewed the seeded block
|
||||||
// library with their lawyer.
|
// library with their lawyer.
|
||||||
contracts: false,
|
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;
|
export const FEATURE_FLAGS_QUERY_KEY = ['feature-flags'] as const;
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import {
|
|||||||
Briefcase,
|
Briefcase,
|
||||||
Wrench,
|
Wrench,
|
||||||
Calculator,
|
Calculator,
|
||||||
|
Landmark,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button, Card } from '../../../components/common';
|
import { Button, Card } from '../../../components/common';
|
||||||
@@ -278,6 +279,20 @@ export const FeaturesTab: React.FC = () => {
|
|||||||
) : undefined}
|
) : 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
|
<FeatureCard
|
||||||
icon={Briefcase}
|
icon={Briefcase}
|
||||||
title={t('settings.features.hoursLogging.title', 'Hours logging')}
|
title={t('settings.features.hoursLogging.title', 'Hours logging')}
|
||||||
|
|||||||
@@ -196,6 +196,7 @@
|
|||||||
"users": "Benutzer",
|
"users": "Benutzer",
|
||||||
"calendar": "Kalender",
|
"calendar": "Kalender",
|
||||||
"clients": "CRM",
|
"clients": "CRM",
|
||||||
|
"accounting": "Buchhaltung",
|
||||||
"betaTag": "Beta"
|
"betaTag": "Beta"
|
||||||
},
|
},
|
||||||
"eventTypes": {
|
"eventTypes": {
|
||||||
@@ -1635,6 +1636,11 @@
|
|||||||
"sidebar": "Steuer",
|
"sidebar": "Steuer",
|
||||||
"requiresBills": "Bitte zuerst Rechnungen aktivieren — die Steuerliste liest aus Ihren Rechnungen."
|
"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": {
|
"analytics": {
|
||||||
"title": "Statistiken",
|
"title": "Statistiken",
|
||||||
"description": "Speichernutzung, Galerie-Aufrufe, Download-Zahlen und Statistiken pro Veranstaltung."
|
"description": "Speichernutzung, Galerie-Aufrufe, Download-Zahlen und Statistiken pro Veranstaltung."
|
||||||
@@ -3375,6 +3381,18 @@
|
|||||||
"development": "Entwicklung"
|
"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": {
|
"calendar": {
|
||||||
"pageTitle": "Kalender",
|
"pageTitle": "Kalender",
|
||||||
"subtitle": "Termine, erfasste Stunden und offene Angebote/Verträge in einer Ansicht.",
|
"subtitle": "Termine, erfasste Stunden und offene Angebote/Verträge in einer Ansicht.",
|
||||||
|
|||||||
@@ -196,6 +196,7 @@
|
|||||||
"users": "Users",
|
"users": "Users",
|
||||||
"calendar": "Calendar",
|
"calendar": "Calendar",
|
||||||
"clients": "CRM",
|
"clients": "CRM",
|
||||||
|
"accounting": "Accounting",
|
||||||
"betaTag": "Beta"
|
"betaTag": "Beta"
|
||||||
},
|
},
|
||||||
"archives": {
|
"archives": {
|
||||||
@@ -1193,6 +1194,11 @@
|
|||||||
"sidebar": "Tax",
|
"sidebar": "Tax",
|
||||||
"requiresBills": "Enable Bills first — the tax report reads from your invoices."
|
"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": {
|
"analytics": {
|
||||||
"title": "Analytics",
|
"title": "Analytics",
|
||||||
"description": "Storage usage, gallery views, download counts, and per-event stats."
|
"description": "Storage usage, gallery views, download counts, and per-event stats."
|
||||||
@@ -3375,6 +3381,18 @@
|
|||||||
"development": "Development"
|
"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": {
|
"calendar": {
|
||||||
"pageTitle": "Calendar",
|
"pageTitle": "Calendar",
|
||||||
"subtitle": "Events, logged hours, and pending quotes/contracts in one view.",
|
"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
|
// upload. Independent of quotes / bills — contracts can be sent on
|
||||||
// their own. Seeded block bodies are examples only; admins must
|
// their own. Seeded block bodies are examples only; admins must
|
||||||
// have their lawyer review before sending. See docs/crm-disclaimers.md.
|
// 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>;
|
export type FeatureFlags = Record<FeatureKey, boolean>;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user