xavierk
f7a1302e94
react-pdf wraps text once at the first flex measure; when yoga then shrank the vendor column the cached lines ran under the INVOICE meta column. The header now pins column widths (299 + 24 + 192 pt), sizes the logo from its own aspect (stacked above the text when it would leave under 160 pt), uses absolute per-Text line heights, and turns hyphenation off. Also: repeating table header with an orphan-header guard, wrap=false rows, Page n of N footer, GSTIN printed only when present, one Text per address line, HTML twin header grid. The light-theme header showed the white-text wordmark; the ternary was inverted. Adds vitest + pdfjs-dist harness that fails on the old document (address overlaps Invoice No.) and passes on the new one.
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import {
|
|
Content,
|
|
Header,
|
|
HeaderGlobalAction,
|
|
HeaderGlobalBar,
|
|
HeaderMenuItem,
|
|
HeaderName,
|
|
HeaderNavigation,
|
|
SkipToContent,
|
|
} from "@carbon/react";
|
|
import { Asleep, Light } from "@carbon/icons-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
export type AppView = "new" | "invoices" | "series" | "settings";
|
|
|
|
const NAV: { id: AppView; label: string }[] = [
|
|
{ id: "new", label: "New invoice" },
|
|
{ id: "invoices", label: "Invoices" },
|
|
{ id: "series", label: "Series" },
|
|
{ id: "settings", label: "Settings" },
|
|
];
|
|
|
|
interface AppShellProps {
|
|
view: AppView;
|
|
onNavigate: (view: AppView) => void;
|
|
theme: string;
|
|
onToggleTheme: () => void;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function AppShell({ view, onNavigate, theme, onToggleTheme, children }: AppShellProps) {
|
|
// The Carbon header background follows the theme: light on g10, dark on g100.
|
|
// The "dark" wordmark has dark text for light surfaces; "light" has white text for dark ones.
|
|
const wordmark =
|
|
theme === "g100" ? "/brand/bongbetic-wordmark-dark.png" : "/brand/bongbetic-wordmark-light.png";
|
|
|
|
return (
|
|
<>
|
|
<Header aria-label="Voiced">
|
|
<SkipToContent />
|
|
<HeaderName href="#" prefix="">
|
|
<span className="voiced-brand">
|
|
<img className="voiced-brand__logo" src={wordmark} alt="Bongbetic" />
|
|
<span className="voiced-brand__divider" aria-hidden="true" />
|
|
<span className="voiced-brand__product">Voiced</span>
|
|
</span>
|
|
</HeaderName>
|
|
<HeaderNavigation aria-label="Voiced navigation">
|
|
{NAV.map((item) => (
|
|
<HeaderMenuItem
|
|
key={item.id}
|
|
isCurrentPage={view === item.id}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
onNavigate(item.id);
|
|
}}
|
|
>
|
|
{item.label}
|
|
</HeaderMenuItem>
|
|
))}
|
|
</HeaderNavigation>
|
|
<HeaderGlobalBar>
|
|
<HeaderGlobalAction aria-label="Toggle colour theme" onClick={onToggleTheme}>
|
|
{theme === "g100" ? <Light size={20} /> : <Asleep size={20} />}
|
|
</HeaderGlobalAction>
|
|
</HeaderGlobalBar>
|
|
</Header>
|
|
<Content id="main-content">{children}</Content>
|
|
</>
|
|
);
|
|
}
|