xavierk
3510cc4260
- Global Carbon toast stack replaces scattered inline notices; errors persist until closed. - Settings is split into eight tabs with one Save and a remembered last tab; Numbering embeds the series settings. - New Clients page with a DataTable, shared add/edit modal, structured addresses, GST category (informational), per-client notes and payment terms. The composed address string is kept for back-compat. Deleting a client warns about invoice count; issued invoices keep their own snapshot. - Migration M7 adds the client columns and item_presets; existing clients with a GSTIN are backfilled to registered_regular. - New invoice form: client ComboBox with type-ahead and inline create, client defaults applied on selection, and an Add from preset control. - Rust tests for M7 (fresh and v6 upgrade), client validation and CRUD, presets CRUD; vitest for the toast store and new helpers. PDF output and fingerprint goldens are unchanged. The new UI has not been run in a webview yet.
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" | "clients" | "settings";
|
|
|
|
const NAV: { id: AppView; label: string }[] = [
|
|
{ id: "new", label: "New invoice" },
|
|
{ id: "invoices", label: "Invoices" },
|
|
{ id: "clients", label: "Clients" },
|
|
{ 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>
|
|
</>
|
|
);
|
|
}
|