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:
Luca
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user