@hub-kit/core 0.3.0

package/dist/pages/supplier-list/SupplierListPage.d.ts

@@ -0,0 +1,9 @@
+import { type Formatters } from "../../lib/formatters";
+import type { SupplierListAdapter } from "../../adapters/supplier-list";
+import { type SupplierListLabels } from "./labels";
+export interface SupplierListPageProps {
+    adapter: SupplierListAdapter;
+    labels?: SupplierListLabels;
+    formatters?: Formatters;
+}
+export declare function SupplierListPage({ adapter, labels, formatters }: SupplierListPageProps): import("react").JSX.Element;

package/dist/pages/supplier-list/SupplierListPage.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Plus, Search, TriangleAlert } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "../../ui/dialog.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table.js";
+import { ErrorState, TableSkeleton, readableErrorMessage } from "../../components/feedback/query-states.js";
+import { TablePagination } from "../../components/feedback/table-pagination.js";
+import { cn } from "../../lib/class-names.js";
+import { englishFormatters } from "../../lib/formatters.js";
+import { SortControl } from "./sort-control.js";
+import { useTableView } from "./use-table-view.js";
+import { englishSupplierListLabels } from "./labels.js";
+const STATUS_ACTIVE = "active";
+const STATUS_DELETED = "deleted";
+const STATUS_ALL = "all";
+function formatIban(iban) {
+    if (!iban)
+        return "—";
+    return iban.replace(/(.{4})/g, "$1 ").trim();
+}
+export function SupplierListPage({ adapter, labels = englishSupplierListLabels, formatters = englishFormatters }) {
+    const [search, setSearch] = useState("");
+    const [status, setStatus] = useState(STATUS_ACTIVE);
+    const [missingAddressOnly, setMissingAddressOnly] = useState(false);
+    const suppliersQuery = adapter.useSuppliers(status !== STATUS_ACTIVE);
+    const suppliers = useMemo(() => suppliersQuery.data ?? [], [suppliersQuery.data]);
+    const missingAddressCount = useMemo(() => suppliers.filter((s) => !s.address?.trim()).length, [suppliers]);
+    const filtered = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        return suppliers.filter((s) => {
+            if (status === STATUS_DELETED && !s.deleted_at)
+                return false;
+            if (status === STATUS_ACTIVE && s.deleted_at)
+                return false;
+            if (missingAddressOnly && s.address?.trim())
+                return false;
+            return !term || `${s.name} ${s.address ?? ""}`.toLowerCase().includes(term);
+        });
+    }, [suppliers, search, status, missingAddressOnly]);
+    const view = useTableView(filtered, {
+        initialSort: "name",
+        initialDirection: "asc",
+        resetKey: `${search}|${status}|${missingAddressOnly}`,
+        sortValue: (row, key) => {
+            switch (key) {
+                case "bookedTotal":
+                    return row.bookedTotal;
+                case "createdAt":
+                    return row.created_at ?? "";
+                default:
+                    return row.name ?? "";
+            }
+        },
+    });
+    const sortColumns = [
+        { value: "name", label: labels.columnName },
+        { value: "bookedTotal", label: labels.columnBooked },
+        { value: "createdAt", label: "Created" },
+    ];
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: labels.title }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.subtitle })] }), adapter.canCreate && _jsx(NewSupplierDialog, { adapter: adapter, labels: labels })] }), _jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: labels.searchPlaceholder, className: "pl-9" })] }), _jsx(Combobox, { value: status, onValueChange: setStatus, className: "w-full sm:w-40", options: [
+                            { value: STATUS_ACTIVE, label: labels.statusActive },
+                            { value: STATUS_DELETED, label: labels.statusDeleted },
+                            { value: STATUS_ALL, label: labels.statusAll },
+                        ] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: missingAddressOnly, onChange: (event) => setMissingAddressOnly(event.target.checked), className: "size-4" }), labels.missingAddressToggle(missingAddressCount)] }), _jsx(SortControl, { columns: sortColumns, sort: view.sort, direction: view.direction, onSort: view.setSort, onDirection: view.setDirection, labels: labels })] }), suppliersQuery.error ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: suppliersQuery.error, onRetry: () => { } }) })) : suppliersQuery.loading ? (_jsx("div", { className: "mt-4", children: _jsx(TableSkeleton, { rows: 6, columns: 5 }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-4 hidden overflow-hidden overflow-x-auto rounded-xl border border-border bg-card sm:block", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { children: labels.columnName }), _jsx(TableHead, { children: labels.columnAddress }), _jsx(TableHead, { children: labels.columnIban }), _jsx(TableHead, { className: "text-right", children: labels.columnBooked })] }) }), _jsxs(TableBody, { children: [view.pageRows.map((supplier) => (_jsx(SupplierRow, { supplier: supplier, adapter: adapter, labels: labels, formatters: formatters }, supplier.id))), view.total === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, className: "py-12 text-center text-muted-foreground", children: labels.empty }) }))] })] }) }), _jsx("div", { className: "mt-4 space-y-3 sm:hidden", children: view.total === 0 ? (_jsx("p", { className: "rounded-xl border border-border bg-card px-4 py-12 text-center text-sm text-muted-foreground", children: labels.empty })) : (view.pageRows.map((supplier) => (_jsx("div", { className: "cursor-pointer rounded-xl border border-border bg-card p-4", onClick: () => adapter.openSupplier(supplier.id), children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium text-foreground", children: supplier.name }), _jsx("div", { className: "mt-0.5 text-sm text-muted-foreground", children: supplier.address?.trim() || labels.noAddress })] }), _jsx("div", { className: "shrink-0 text-right font-medium tabular-nums text-foreground", children: formatters.formatMoney(supplier.bookedTotal) })] }) }, supplier.id)))) })] })), !suppliersQuery.error && !suppliersQuery.loading && view.total > 0 && (_jsx(TablePagination, { page: view.page, totalPages: view.totalPages, pageSize: view.pageSize, total: view.total, from: view.from, to: view.to, onPage: view.setPage, onPageSize: view.setPageSize }))] }));
+}
+function SupplierRow({ supplier, adapter, labels, formatters, }) {
+    return (_jsxs(TableRow, { className: cn("cursor-pointer", supplier.deleted_at && "opacity-60"), onClick: () => adapter.openSupplier(supplier.id), children: [_jsx(TableCell, { className: "font-medium text-foreground", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [supplier.name, supplier.deleted_at && (_jsx("span", { className: "inline-flex items-center rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: labels.deletedBadge }))] }) }), _jsx(TableCell, { className: cn("text-sm", supplier.address?.trim() ? "text-muted-foreground" : "text-amber-700"), children: supplier.address?.trim() || labels.noAddress }), _jsx(TableCell, { className: "font-mono text-sm text-muted-foreground", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [formatIban(supplier.iban), supplier.hasUnconfirmedAccount && _jsx(TriangleAlert, { className: "size-3.5 shrink-0 text-amber-600", "aria-label": labels.unconfirmedAccount })] }) }), _jsxs(TableCell, { className: "text-right", children: [_jsx("div", { className: "font-medium tabular-nums text-foreground", children: formatters.formatMoney(supplier.bookedTotal) }), _jsx("div", { className: "text-xs text-muted-foreground", children: labels.columnInvoiceCount(supplier.invoiceCount) })] })] }));
+}
+function NewSupplierDialog({ adapter, labels }) {
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState("");
+    const [error, setError] = useState("");
+    const [isCreating, setIsCreating] = useState(false);
+    async function create() {
+        if (!name.trim()) {
+            setError(labels.nameRequired);
+            return;
+        }
+        setError("");
+        setIsCreating(true);
+        try {
+            const created = await adapter.createSupplier({ name: name.trim() });
+            toast.success(labels.createdToast);
+            setName("");
+            setOpen(false);
+            adapter.openSupplier(created.id);
+        }
+        catch (e) {
+            toast.error(labels.createFailedToast(readableErrorMessage(e, "")));
+        }
+        finally {
+            setIsCreating(false);
+        }
+    }
+    return (_jsxs(Dialog, { open: open, onOpenChange: (next) => { setOpen(next); if (next)
+            setError(""); }, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { className: "gap-2", children: [_jsx(Plus, { className: "size-4" }), " ", labels.newSupplierButton] }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.newSupplierTitle }), _jsx(DialogDescription, { children: labels.newSupplierDescription })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.nameFieldLabel }), _jsx(Input, { value: name, onChange: (event) => { setName(event.target.value); setError(""); }, placeholder: labels.nameFieldPlaceholder, "aria-invalid": !!error }), error && _jsx("p", { className: "text-xs text-destructive", children: error })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: labels.cancel }), _jsx(Button, { onClick: create, disabled: isCreating, children: isCreating ? labels.creating : labels.create })] })] })] }));
+}

package/dist/pages/supplier-list/index.d.ts

@@ -0,0 +1,4 @@
+export { SupplierListPage } from "./SupplierListPage";
+export type { SupplierListPageProps } from "./SupplierListPage";
+export { englishSupplierListLabels } from "./labels";
+export type { SupplierListLabels } from "./labels";

package/dist/pages/supplier-list/index.js

@@ -0,0 +1,2 @@
+export { SupplierListPage } from "./SupplierListPage.js";
+export { englishSupplierListLabels } from "./labels.js";

package/dist/pages/supplier-list/labels.d.ts

@@ -0,0 +1,33 @@
+export interface SupplierListLabels {
+    title: string;
+    subtitle: string;
+    searchPlaceholder: string;
+    statusAll: string;
+    statusActive: string;
+    statusDeleted: string;
+    missingAddressToggle: (count: number) => string;
+    columnName: string;
+    columnAddress: string;
+    columnIban: string;
+    columnBooked: string;
+    columnInvoiceCount: (count: number) => string;
+    noAddress: string;
+    unconfirmedAccount: string;
+    deletedBadge: string;
+    empty: string;
+    newSupplierButton: string;
+    newSupplierTitle: string;
+    newSupplierDescription: string;
+    nameFieldLabel: string;
+    nameFieldPlaceholder: string;
+    nameRequired: string;
+    cancel: string;
+    create: string;
+    creating: string;
+    createdToast: string;
+    createFailedToast: (error: string) => string;
+    sortLabel: string;
+    sortAscending: string;
+    sortDescending: string;
+}
+export declare const englishSupplierListLabels: SupplierListLabels;

package/dist/pages/supplier-list/labels.js

@@ -0,0 +1,32 @@
+export const englishSupplierListLabels = {
+    title: "Suppliers",
+    subtitle: "Every supplier the pipeline or a person has entered.",
+    searchPlaceholder: "Search name or address",
+    statusAll: "All",
+    statusActive: "Active",
+    statusDeleted: "Deleted",
+    missingAddressToggle: (count) => `Missing address (${count})`,
+    columnName: "Name",
+    columnAddress: "Address",
+    columnIban: "IBAN",
+    columnBooked: "Booked total",
+    columnInvoiceCount: (count) => `${count} invoice${count === 1 ? "" : "s"}`,
+    noAddress: "No address",
+    unconfirmedAccount: "New bank account, not yet confirmed",
+    deletedBadge: "Deleted",
+    empty: "No suppliers found.",
+    newSupplierButton: "New supplier",
+    newSupplierTitle: "New supplier",
+    newSupplierDescription: "Add a supplier by hand.",
+    nameFieldLabel: "Name",
+    nameFieldPlaceholder: "Supplier name",
+    nameRequired: "Name is required.",
+    cancel: "Cancel",
+    create: "Create",
+    creating: "Creating…",
+    createdToast: "Supplier created.",
+    createFailedToast: (error) => `Could not create the supplier: ${error}`,
+    sortLabel: "Sort by",
+    sortAscending: "Ascending",
+    sortDescending: "Descending",
+};

package/dist/pages/supplier-list/sort-control.d.ts

@@ -0,0 +1,17 @@
+import type { SortDirection } from "./use-table-view";
+export interface SortColumn {
+    value: string;
+    label: string;
+}
+export declare function SortControl({ columns, sort, direction, onSort, onDirection, labels, }: {
+    columns: SortColumn[];
+    sort: string;
+    direction: SortDirection;
+    onSort: (key: string) => void;
+    onDirection: (direction: SortDirection) => void;
+    labels: {
+        sortLabel: string;
+        sortAscending: string;
+        sortDescending: string;
+    };
+}): import("react").JSX.Element;

package/dist/pages/supplier-list/sort-control.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from "../../ui/combobox.js";
+export function SortControl({ columns, sort, direction, onSort, onDirection, labels, }) {
+    return (_jsxs("div", { className: "flex w-full flex-wrap items-center gap-2 sm:w-auto", children: [_jsx("span", { className: "hidden shrink-0 text-sm text-muted-foreground sm:inline", children: labels.sortLabel }), _jsx(Combobox, { value: sort, onValueChange: onSort, className: "w-full sm:w-48", options: columns }), _jsx(Combobox, { value: direction, onValueChange: (value) => onDirection(value), className: "w-full sm:w-40", options: [
+                    { value: "asc", label: labels.sortAscending },
+                    { value: "desc", label: labels.sortDescending },
+                ] })] }));
+}

package/dist/pages/supplier-list/use-table-view.d.ts

@@ -0,0 +1,23 @@
+export type SortDirection = "asc" | "desc";
+export interface TableView<Row> {
+    pageRows: Row[];
+    sort: string;
+    direction: SortDirection;
+    setSort: (key: string) => void;
+    setDirection: (direction: SortDirection) => void;
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    setPageSize: (size: number) => void;
+    total: number;
+    totalPages: number;
+    from: number;
+    to: number;
+}
+export declare function useTableView<Row>(rows: Row[], options: {
+    sortValue: (row: Row, key: string) => string | number;
+    initialSort: string;
+    initialDirection?: SortDirection;
+    initialPageSize?: number;
+    resetKey?: string;
+}): TableView<Row>;

package/dist/pages/supplier-list/use-table-view.js

@@ -0,0 +1,54 @@
+import { useMemo, useState } from "react";
+export function useTableView(rows, options) {
+    const { sortValue, initialSort, initialDirection = "asc", initialPageSize = 25, resetKey, } = options;
+    const [sort, setSortState] = useState(initialSort);
+    const [direction, setDirectionState] = useState(initialDirection);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    const [seenResetKey, setSeenResetKey] = useState(resetKey);
+    if (resetKey !== seenResetKey) {
+        setSeenResetKey(resetKey);
+        setPage(1);
+    }
+    const sortedRows = useMemo(() => {
+        const copy = [...rows];
+        copy.sort((first, second) => {
+            const firstValue = sortValue(first, sort);
+            const secondValue = sortValue(second, sort);
+            const comparison = typeof firstValue === "number" && typeof secondValue === "number"
+                ? firstValue - secondValue
+                : String(firstValue).localeCompare(String(secondValue));
+            return direction === "asc" ? comparison : -comparison;
+        });
+        return copy;
+    }, [rows, sort, direction, sortValue]);
+    const total = sortedRows.length;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const safePage = Math.min(page, totalPages);
+    const from = total === 0 ? 0 : (safePage - 1) * pageSize + 1;
+    const to = Math.min(safePage * pageSize, total);
+    const pageRows = sortedRows.slice((safePage - 1) * pageSize, safePage * pageSize);
+    function setSort(key) {
+        setSortState(key);
+        setPage(1);
+    }
+    function setDirection(next) {
+        setDirectionState(next);
+        setPage(1);
+    }
+    return {
+        pageRows,
+        sort,
+        direction,
+        setSort,
+        setDirection,
+        page: safePage,
+        setPage,
+        pageSize,
+        setPageSize,
+        total,
+        totalPages,
+        from,
+        to,
+    };
+}

package/dist/pages/team/account-dialogs.d.ts

@@ -0,0 +1,12 @@
+import type { TeamAdapter, TeamEmployee } from "../../adapters/team";
+import type { TeamPageLabels } from "./labels";
+export declare function ToggleActiveDialog({ employee, adapter, labels, }: {
+    employee: TeamEmployee;
+    adapter: TeamAdapter;
+    labels: TeamPageLabels;
+}): import("react").JSX.Element;
+export declare function ResetPasswordDialog({ employee, adapter, labels, }: {
+    employee: TeamEmployee;
+    adapter: TeamAdapter;
+    labels: TeamPageLabels;
+}): import("react").JSX.Element;

package/dist/pages/team/account-dialogs.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { KeyRound, ShieldCheck, ShieldOff } from "lucide-react";
+import { toast } from "sonner";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../ui/alert-dialog.js";
+import { IconAction } from "../../ui/icon-action.js";
+import { readableErrorMessage } from "../../components/feedback/query-states.js";
+import { TempPasswordDialog } from "./temp-password-dialog.js";
+export function ToggleActiveDialog({ employee, adapter, labels, }) {
+    const [isSaving, setIsSaving] = useState(false);
+    const isMyOwnAccount = !!adapter.currentUserEmail &&
+        adapter.currentUserEmail.toLowerCase() === employee.email.toLowerCase();
+    const isOwnerAccount = employee.roleName === "super_admin";
+    const toggleLabels = labels.activeToggle;
+    async function confirmToggle() {
+        setIsSaving(true);
+        try {
+            await adapter.setEmployeeActive({ employeeId: employee.id, isActive: !employee.isActive });
+            toast.success(employee.isActive ? toggleLabels.deactivated : toggleLabels.reactivated);
+        }
+        catch (error) {
+            toast.error(toggleLabels.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(IconAction, { className: employee.isActive
+                        ? "text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                        : "text-muted-foreground hover:bg-brand/10 hover:text-brand", label: employee.isActive ? toggleLabels.deactivate : toggleLabels.reactivate, disabled: isSaving || (employee.isActive && (isOwnerAccount || isMyOwnAccount)), title: isOwnerAccount ? labels.edit.superAdminCannotBeDeactivated : undefined, children: employee.isActive ? _jsx(ShieldOff, { className: "size-4" }) : _jsx(ShieldCheck, { className: "size-4" }) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: employee.isActive ? toggleLabels.deactivateTitle : toggleLabels.reactivateTitle }), _jsx(AlertDialogDescription, { children: employee.isActive
+                                    ? toggleLabels.deactivateDescription(employee.email)
+                                    : toggleLabels.reactivateDescription(employee.email) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: toggleLabels.cancel }), _jsx(AlertDialogAction, { onClick: confirmToggle, className: employee.isActive
+                                    ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                                    : "", children: employee.isActive ? toggleLabels.confirmDeactivate : toggleLabels.confirmReactivate })] })] })] }));
+}
+export function ResetPasswordDialog({ employee, adapter, labels, }) {
+    const [credentials, setCredentials] = useState(null);
+    const resetLabels = labels.resetPassword;
+    async function confirmReset() {
+        try {
+            const result = await adapter.resetPassword({ employeeId: employee.id });
+            setCredentials(result);
+        }
+        catch (error) {
+            toast.error(resetLabels.failed(readableErrorMessage(error, "")));
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(IconAction, { label: resetLabels.open, disabled: !employee.isActive || employee.roleName === "super_admin", children: _jsx(KeyRound, { className: "size-4" }) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: resetLabels.title }), _jsx(AlertDialogDescription, { children: resetLabels.description(employee.email) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: resetLabels.cancel }), _jsx(AlertDialogAction, { onClick: confirmReset, children: resetLabels.confirm })] })] })] }), credentials && (_jsx(TempPasswordDialog, { credentials: credentials, onClose: () => setCredentials(null), labels: labels, title: resetLabels.resultTitle, description: resetLabels.resultDescription(credentials.email) }))] }));
+}

package/dist/pages/team/employee-editor.d.ts

@@ -0,0 +1,19 @@
+import type { TeamAdapter, TeamCompany, TeamEmployee } from "../../adapters/team";
+import type { TeamPageLabels } from "./labels";
+export declare function CompanyPickList({ companies, selectedIds, onChange, maxHeightClass, }: {
+    companies: TeamCompany[];
+    selectedIds: string[];
+    onChange: (nextIds: string[]) => void;
+    maxHeightClass?: string;
+}): import("react").JSX.Element;
+export declare function EmployeePermissionsSection({ employee, adapter, labels, }: {
+    employee: TeamEmployee;
+    adapter: TeamAdapter;
+    labels: TeamPageLabels;
+}): import("react").JSX.Element | null;
+export declare function EditEmployeeSheet({ employee, companies, adapter, labels, }: {
+    employee: TeamEmployee;
+    companies: TeamCompany[];
+    adapter: TeamAdapter;
+    labels: TeamPageLabels;
+}): import("react").JSX.Element;

package/dist/pages/team/employee-editor.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pencil } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { IconAction } from "../../ui/icon-action.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../ui/select.js";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "../../ui/sheet.js";
+import { PermissionChecklist } from "../../components/access/permission-checklist.js";
+import { readableErrorMessage } from "../../components/feedback/query-states.js";
+export function CompanyPickList({ companies, selectedIds, onChange, maxHeightClass = "max-h-72", }) {
+    return (_jsx("div", { className: `grid ${maxHeightClass} gap-2 overflow-y-auto`, children: companies.map((company) => {
+            const checked = selectedIds.includes(company.id);
+            return (_jsxs("label", { className: "flex cursor-pointer items-center gap-2 rounded-md border border-border px-3 py-2 text-sm hover:bg-muted/40", children: [_jsx(Checkbox, { checked: checked, onCheckedChange: (next) => onChange(next ? [...selectedIds, company.id] : selectedIds.filter((id) => id !== company.id)) }), _jsx("span", { className: "font-medium text-foreground", children: company.code }), _jsx("span", { className: "text-muted-foreground", children: company.name })] }, company.id));
+        }) }));
+}
+export function EmployeePermissionsSection({ employee, adapter, labels, }) {
+    const catalogueQuery = adapter.usePermissionCatalogue();
+    const [isSaving, setIsSaving] = useState(false);
+    const permissions = catalogueQuery.data ?? [];
+    // The owner account holds everything, so its boxes would only be ones nobody may untick.
+    const locked = employee.roleName === "super_admin";
+    if (catalogueQuery.isLoading || permissions.length === 0)
+        return null;
+    async function togglePermission(key, value) {
+        setIsSaving(true);
+        try {
+            await adapter.setEmployeeRight({ employeeId: employee.id, right: key, value });
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: labels.permissionsTitle }), _jsx("div", { className: "rounded-lg border border-border p-3", children: _jsx(PermissionChecklist, { permissions: permissions, held: locked ? permissions.map((p) => p.key) : employee.permissions, disabled: locked || isSaving, readOnlyNote: locked ? labels.impliedBySuperAdmin : undefined, categoryLabel: labels.categoryLabel, onToggle: togglePermission }) })] }));
+}
+export function EditEmployeeSheet({ employee, companies, adapter, labels, }) {
+    const editLabels = labels.edit;
+    const isMyOwnAccount = !!adapter.currentUserEmail &&
+        adapter.currentUserEmail.toLowerCase() === employee.email.toLowerCase();
+    const isOwnerAccount = employee.roleName === "super_admin";
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState(employee.name ?? "");
+    const [email, setEmail] = useState(employee.email);
+    const [roleName, setRoleName] = useState(isOwnerAccount ? adapter.assignableRoles[0] : employee.roleName);
+    const [selectedCompanyIds, setSelectedCompanyIds] = useState(employee.allowedCompanyIds);
+    const [isSaving, setIsSaving] = useState(false);
+    // The owner role is not assignable, and editing your own row must not change your own role.
+    const roleLocked = isOwnerAccount || isMyOwnAccount;
+    const roleChanged = !roleLocked && roleName !== employee.roleName;
+    const profileChanged = name.trim() !== (employee.name ?? "") || email.trim() !== employee.email;
+    const accessChanged = selectedCompanyIds.length !== employee.allowedCompanyIds.length ||
+        selectedCompanyIds.some((id) => !employee.allowedCompanyIds.includes(id));
+    // An empty selection means unrestricted, so removing the last company WIDENS access.
+    const accessWidens = accessChanged && selectedCompanyIds.length === 0 && employee.allowedCompanyIds.length > 0;
+    const invalid = !name.trim() || !email.trim();
+    async function save() {
+        setIsSaving(true);
+        try {
+            if (isOwnerAccount) {
+                // Name only: the owner's email is the login identity and its role is fixed.
+                if (name.trim() !== (employee.name ?? "")) {
+                    await adapter.updateEmployeeProfile({
+                        employeeId: employee.id,
+                        name: name.trim(),
+                        email: employee.email,
+                    });
+                    toast.success(editLabels.saved);
+                }
+                setOpen(false);
+                return;
+            }
+            // Three writes with no transaction: skip the unchanged ones and name the step that failed.
+            let failedStep = "";
+            try {
+                if (profileChanged) {
+                    failedStep = editLabels.stepProfile;
+                    await adapter.updateEmployeeProfile({
+                        employeeId: employee.id,
+                        name: name.trim(),
+                        email: email.trim(),
+                    });
+                }
+                if (roleChanged) {
+                    failedStep = editLabels.stepRole;
+                    await adapter.updateEmployeeRole({ employeeId: employee.id, roleName });
+                }
+                if (accessChanged) {
+                    failedStep = editLabels.stepAccess;
+                    await adapter.setCompanyAccess({
+                        employeeId: employee.id,
+                        companyIds: selectedCompanyIds,
+                    });
+                }
+            }
+            catch (error) {
+                toast.error(editLabels.partlyFailed(failedStep, readableErrorMessage(error, "")));
+                return;
+            }
+            toast.success(editLabels.saved);
+            setOpen(false);
+        }
+        catch (error) {
+            toast.error(editLabels.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsxs(Sheet, { open: open, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            if (nextOpen) {
+                setName(employee.name ?? "");
+                setEmail(employee.email);
+                setRoleName(isOwnerAccount ? adapter.assignableRoles[0] : employee.roleName);
+                setSelectedCompanyIds(employee.allowedCompanyIds);
+            }
+        }, children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(IconAction, { label: editLabels.open, children: _jsx(Pencil, { className: "size-4" }) }) }), _jsxs(SheetContent, { side: "right", className: "flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-xl", children: [_jsxs(SheetHeader, { className: "border-b border-border px-6 py-4", children: [_jsx(SheetTitle, { children: editLabels.title }), _jsx(SheetDescription, { className: "sr-only", children: editLabels.title })] }), _jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto px-6 py-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.newEmployee.name }), _jsx(Input, { value: name, onChange: (event) => setName(event.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.newEmployee.email }), _jsx(Input, { type: "email", value: email, onChange: (event) => setEmail(event.target.value), disabled: isOwnerAccount }), !isOwnerAccount && email.trim() !== employee.email && (_jsx("p", { className: "text-xs text-muted-foreground", children: editLabels.emailChangeHint }))] }), isMyOwnAccount && !isOwnerAccount && (_jsx("p", { className: "rounded-md border border-warning/40 bg-warning-soft px-3 py-2 text-xs text-foreground", children: editLabels.editingMyselfNote })), isOwnerAccount ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.newEmployee.role }), _jsx("div", { className: "rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-foreground", children: labels.roleLabel("super_admin") }), _jsx("p", { className: "text-xs text-muted-foreground", children: editLabels.superAdminRoleHint })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.newEmployee.role }), _jsxs(Select, { value: roleName, disabled: isMyOwnAccount, onValueChange: setRoleName, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: adapter.assignableRoles.map((role) => (_jsx(SelectItem, { value: role, children: labels.roleLabel(role) }, role))) })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.newEmployee.companies }), _jsx(CompanyPickList, { companies: companies, selectedIds: selectedCompanyIds, onChange: setSelectedCompanyIds }), selectedCompanyIds.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: labels.newEmployee.noCompaniesHint }))] }), _jsx(EmployeePermissionsSection, { employee: employee, adapter: adapter, labels: labels })] })), roleChanged && (_jsx("p", { className: "rounded-md border border-warning/40 bg-warning-soft px-3 py-2 text-xs text-foreground", children: editLabels.roleChangeWarning(labels.roleLabel(employee.roleName), labels.roleLabel(roleName)) })), accessWidens && (_jsx("p", { className: "rounded-md border border-warning/40 bg-warning-soft px-3 py-2 text-xs text-foreground", children: editLabels.accessWidensWarning }))] }), _jsxs(SheetFooter, { className: "mt-auto gap-2 border-t border-border px-6 py-4", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: editLabels.cancel }), _jsx(Button, { onClick: save, disabled: isSaving || invalid, children: isSaving ? editLabels.saving : editLabels.save })] })] })] }));
+}

package/dist/pages/team/labels.d.ts

@@ -0,0 +1,99 @@
+export interface TeamPageLabels {
+    title: string;
+    subtitle: string;
+    peopleTab: string;
+    rolesTab: string;
+    searchPlaceholder: string;
+    inactiveOnly: string;
+    empty: string;
+    roleLabel: (roleName: string) => string;
+    columns: {
+        name: string;
+        email: string;
+        role: string;
+        companies: string;
+        permissions: string;
+        active: string;
+    };
+    allCompanies: string;
+    moreCompanies: (count: number) => string;
+    permissionCount: (held: number, total: number) => string;
+    active: string;
+    inactive: string;
+    neverSignedIn: string;
+    categoryLabel: (categoryKey: string) => string;
+    permissionsTitle: string;
+    permissionColumnLabel: string;
+    rolesMatrixNote: string;
+    impliedBySuperAdmin: string;
+    newEmployee: {
+        button: string;
+        title: string;
+        name: string;
+        email: string;
+        role: string;
+        companies: string;
+        noCompaniesHint: string;
+        someCompaniesHint: string;
+        emailRequired: string;
+        emailInvalid: string;
+        emailTaken: string;
+        nameRequired: string;
+        create: string;
+        creating: string;
+        cancel: string;
+        createFailed: (error: string) => string;
+        rightsFailed: (error: string) => string;
+    };
+    edit: {
+        open: string;
+        title: string;
+        emailChangeHint: string;
+        editingMyselfNote: string;
+        superAdminRoleHint: string;
+        roleChangeWarning: (fromRole: string, toRole: string) => string;
+        accessWidensWarning: string;
+        stepProfile: string;
+        stepRole: string;
+        stepAccess: string;
+        save: string;
+        saving: string;
+        cancel: string;
+        saved: string;
+        partlyFailed: (step: string, error: string) => string;
+        failed: (error: string) => string;
+        superAdminCannotBeDeactivated: string;
+    };
+    activeToggle: {
+        deactivate: string;
+        reactivate: string;
+        deactivateTitle: string;
+        reactivateTitle: string;
+        deactivateDescription: (email: string) => string;
+        reactivateDescription: (email: string) => string;
+        confirmDeactivate: string;
+        confirmReactivate: string;
+        cancel: string;
+        deactivated: string;
+        reactivated: string;
+        failed: (error: string) => string;
+    };
+    resetPassword: {
+        open: string;
+        title: string;
+        description: (email: string) => string;
+        confirm: string;
+        cancel: string;
+        failed: (error: string) => string;
+        resultTitle: string;
+        resultDescription: (email: string) => string;
+    };
+    tempPassword: {
+        title: string;
+        description: (email: string) => string;
+        copy: string;
+        copyFailed: string;
+        close: string;
+    };
+}
+export declare const englishTeamPageLabels: TeamPageLabels;