64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 6d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 5f:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zod@^4"}] 60:["$","li","@base-ui/react@^1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react@^1"}]]}]}] 61:["$","$L64",null,{"namespace":"@soldevelo","registryDependencies":["alert","alert-dialog","badge","button","dropdown-menu","field","skeleton","spinner","table","https://registry.soldevelo.com/r/openlmis-callout.json","https://registry.soldevelo.com/r/openlmis-column-view-options.json","https://registry.soldevelo.com/r/openlmis-data-table.json","https://registry.soldevelo.com/r/openlmis-discard-changes-dialog.json","https://registry.soldevelo.com/r/openlmis-form-actions.json","https://registry.soldevelo.com/r/openlmis-form-dialog.json","https://registry.soldevelo.com/r/openlmis-form-fields.json","https://registry.soldevelo.com/r/openlmis-list-toolbar.json","https://registry.soldevelo.com/r/openlmis-number-text.json","https://registry.soldevelo.com/r/openlmis-workspace.json","https://registry.soldevelo.com/r/openlmis-workspace-tabs.json"]}] 62:["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","destructive",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","destructive",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.577 0.245 27.325)"}}],["$","p",null,{"children":"oklch(0.577 0.245 27.325)"}]]}]}]]}],["$","div","destructive-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","destructive-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.985 0 0)"}}],["$","p",null,{"children":"oklch(0.985 0 0)"}]]}]}]]}],["$","div","success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.596 0.145 163.225)"}}],["$","p",null,{"children":"oklch(0.596 0.145 163.225)"}]]}]}]]}],["$","div","success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.985 0 0)"}}],["$","p",null,{"children":"oklch(0.985 0 0)"}]]}]}]]}],["$","div","warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.666 0.179 58.318)"}}],["$","p",null,{"children":"oklch(0.666 0.179 58.318)"}]]}]}]]}],["$","div","warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.985 0 0)"}}],["$","p",null,{"children":"oklch(0.985 0 0)"}]]}]}]]}],["$","div","info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.55 0.13 237)"}}],"$L67"]}]}]]}],"$L68"]}],"$L69"]}]}]]}],"$L6a","$L6b","$L6c"]}]}]}] 6e:T269e,"use client" import { type ColumnVisibilityState, createColumnHelper, useTable, } from "@tanstack/react-table" import { BuildingIcon, EllipsisIcon, EyeIcon, PencilIcon, PlusIcon, Trash2Icon, } from "lucide-react" import { useMemo } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { DataTable, DataTableColumnHeader, DataTableEmpty, DataTableError, type DataTableFeatures, DataTableSkeleton, dataTableFeatures, } from "@/components/blocks/openlmis/data-table/data-table" import type { ResponsiveColumn } from "@/components/blocks/openlmis/data-table/responsive-columns" import { ListToolbar } from "@/components/blocks/openlmis/list-toolbar" import type { Approval } from "@/components/openlmis/product-editor-page/approval-form" import { type ColumnVisibility, ColumnViewOptions, } from "@/components/openlmis/column-view-options" /** The columns a user may hide, and the room each needs before it shows by default. */ export const APPROVAL_HIDEABLE_COLUMNS = [ { id: "maxPeriodsOfStock", label: "Max Periods Of Stock", hideBelow: "2xl" }, { id: "emergencyOrderPoint", label: "Emergency Order Point", hideBelow: "4xl", }, { id: "minPeriodsOfStock", label: "Min Periods Of Stock", hideBelow: "5xl" }, ] as const satisfies readonly (ResponsiveColumn & { label: string })[] type StockColumn = (typeof APPROVAL_HIDEABLE_COLUMNS)[number]["id"] const byName = (a: string, b: string) => a.localeCompare(b) /** Approvals under their facility type, both by name. */ export function groupApprovals(approvals: readonly Approval[]) { const groups = new Map< string, { facilityType: Approval["facilityType"]; approvals: Approval[] } >() for (const approval of approvals) { const group = groups.get(approval.facilityType.id) if (group) group.approvals.push(approval) else groups.set(approval.facilityType.id, { facilityType: approval.facilityType, approvals: [approval], }) } return ( [...groups.values()] // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh array; toSorted needs the ES2023 lib .sort((a, b) => byName(a.facilityType.name, b.facilityType.name)) .map((group) => ({ ...group, // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh array; toSorted needs the ES2023 lib approvals: group.approvals.sort((a, b) => byName(a.program.name, b.program.name) ), })) ) } type ApprovalRow = | { kind: "group"; id: string; facilityType: string } | { kind: "approval"; id: string; facilityType: string; approval: Approval } type RowActions = { /** Without it, rows offer View instead of Edit and Remove. */ canEdit: boolean onEdit: (approvalId: string) => void onRemove: (approvalId: string) => void } const columnHelper = createColumnHelper() const number = new Intl.NumberFormat("en-US", { maximumFractionDigits: 3 }) const muted = - function createColumns(actions: RowActions) { const stockColumn = (id: StockColumn, title: string) => columnHelper.display({ id, header: ({ column }) => ( ), meta: { className: "w-48" }, cell: ({ row }) => { if (row.original.kind === "group") return null const value = row.original.approval[id] return value == null ? ( muted ) : ( {number.format(value)} ) }, }) return columnHelper.columns([ columnHelper.display({ id: "facilityType", header: ({ column }) => ( ), cell: ({ row }) => row.original.kind === "group" ? ( {row.original.facilityType} ) : ( // Read out on each row, since only the group row shows it. {row.original.facilityType} ), meta: { className: "w-2/5 @2xl/main:w-1/5" }, }), columnHelper.display({ id: "program", header: ({ column }) => ( ), cell: ({ row }) => row.original.kind === "approval" && ( {row.original.approval.program.name} ), }), stockColumn("maxPeriodsOfStock", "Max Periods Of Stock"), stockColumn("emergencyOrderPoint", "Emergency Order Point"), stockColumn("minPeriodsOfStock", "Min Periods Of Stock"), columnHelper.display({ id: "actions", header: () => Actions, meta: { className: "w-16" }, cell: ({ row }) => row.original.kind === "approval" && ( ), }), ]) } function ApprovalActions({ approval, actions, }: { approval: Approval actions: RowActions }) { return (

} > {actions.canEdit ? ( <> actions.onEdit(approval.id)}> Edit actions.onRemove(approval.id)} variant="destructive" > Remove ) : ( actions.onEdit(approval.id)}> View )}

) } const NO_ROWS: ApprovalRow[] = [] const getRowId = (row: ApprovalRow) => `${row.kind}-${row.id}` type FacilityApprovedProductsProps = RowActions & { /** The product's approvals; a skeleton shows until they are set. */ approvals: readonly Approval[] | undefined columnVisibility: ColumnVisibilityState /** Replaces the table, e.g. when the approvals could not be loaded. */ error?: string onRetry?: () => void } /** The facility types that may stock a product, each with its programs and stock levels. */ export function FacilityApprovedProducts({ approvals, columnVisibility, error, onRetry, canEdit, onEdit, onRemove, }: FacilityApprovedProductsProps) { const columns = useMemo( () => createColumns({ canEdit, onEdit, onRemove }), [canEdit, onEdit, onRemove] ) const rows = useMemo( () => approvals ? groupApprovals(approvals).flatMap( ({ facilityType, approvals: grouped }): ApprovalRow[] => [ { kind: "group", id: facilityType.id, facilityType: facilityType.name, }, ...grouped.map((approval) => ({ kind: "approval" as const, id: approval.id, facilityType: facilityType.name, approval, })), ] ) : NO_ROWS, [approvals] ) const table = useTable({ features: dataTableFeatures, columns, data: rows, getRowId, enableSorting: false, state: { columnVisibility }, }) if (error) { return ( ) } if (!approvals) return return ( } title="No Facility Types Yet" /> } table={table} /> ) } type ApprovalsToolbarProps = { columnVisibility: ColumnVisibility onColumnVisibilityChange: (visibility: ColumnVisibility) => void onColumnReset?: () => void /** Left out when the user cannot edit approvals. */ onAdd?: () => void } /** The View menu, then Add Facility Type, which takes the whole row while the tab is narrow. */ export function ApprovalsToolbar({ columnVisibility, onColumnVisibilityChange, onColumnReset, onAdd, }: ApprovalsToolbarProps) { return (

{onAdd && (

)} ) }6f:Tdc0,"use client" import { AlertCircleIcon, Trash2Icon } from "lucide-react" import { useRef, useState } from "react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { Button } from "@/components/ui/button" import { Spinner } from "@/components/ui/spinner" import type { Approval } from "@/components/openlmis/product-editor-page/approval-form" import { useDialogTarget } from "@/components/openlmis/form-dialog/use-dialog-target" type RemoveApprovalDialogProps = { /** The approval to remove; the dialog is open while it is set. */ approvalId: string | undefined /** The product's approvals; one not among them shows as no longer there. */ approvals: readonly Approval[] productName: string onConfirm: (approvalId: string) => void /** Locks the dialog and spins Remove while the removal runs. */ pending?: boolean /** Why the removal failed; the dialog stays open to try again. */ error?: string onClose: () => void } export function RemoveApprovalDialog({ approvalId, approvals, productName, onConfirm, pending = false, error, onClose, }: RemoveApprovalDialogProps) { const { shown, dialogProps } = useDialogTarget(approvalId, onClose) const cancelRef = useRef(null) const current = approvals.find((approval) => approval.id === shown) // The approval as the dialog opened, so the removal does not turn it into Not Found while it closes. const [opened, setOpened] = useState<{ id: string approval: Approval | undefined }>() if (shown !== undefined && opened?.id !== shown) setOpened({ id: shown, approval: current }) const approval = opened && opened.id === shown ? opened.approval : current return ( {approval ? `Remove ${approval.facilityType.name} From ${approval.program.name}?` : "Facility Type Not Found"} {approval ? `Facilities of type ${approval.facilityType.name} will no longer stock ${productName} in ${approval.program.name}.` : "This facility type no longer stocks the product."} {error && ( Could Not Remove Facility Type {error} )} {approval ? "Cancel" : "Close"} {approval && ( )} ) }70:T111f,"use client" import { useMemo, useState } from "react" import { FieldGroup } from "@/components/ui/field" import { FormDialog, FormDialogBody, FormDialogCancel, FormDialogDescription, FormDialogFooter, FormDialogForm, FormDialogHeader, FormDialogSubmit, FormDialogTitle, } from "@/components/openlmis/form-dialog/form-dialog" import { useDialogTarget } from "@/components/openlmis/form-dialog/use-dialog-target" import { useAppForm } from "@/components/openlmis/form-fields/form" /** A product that can go into a kit. */ export type KitProduct = { id: string productCode: string fullProductName: string | null dispensingUnit?: string | null } /** Code and name, then the unit, so two packings of one product tell apart. */ export function kitProductLabel(product: KitProduct) { const name = product.fullProductName ? `${product.productCode} - ${product.fullProductName}` : product.productCode return product.dispensingUnit ? `${name} (${product.dispensingUnit})` : name } type KitProductsDialogProps = { open: boolean /** The products to pick from. */ products: readonly KitProduct[] /** Left out of the choices: the kit itself and the products already in it. */ excluded: ReadonlySet onAdd: (products: KitProduct[]) => void onClose: () => void /** Lists only the first this many matches, with a hint to type more, as a server search would. */ limit?: number } /** Pick, by code or name, the products a kit unpacks into. */ export function KitProductsDialog({ open, onClose, ...props }: KitProductsDialogProps) { const { shown, dialogProps } = useDialogTarget(open || undefined, onClose) return ( {shown && } ) } function KitProductsForm({ products, excluded, onAdd, onDone, limit, }: Omit & { onDone: () => void }) { const [typed, setTyped] = useState("") const matches = useMemo(() => { const query = typed.trim().toLowerCase() return products .filter((product) => !excluded.has(product.id)) .map((product) => ({ value: product.id, label: kitProductLabel(product), })) .filter((item) => item.label.toLowerCase().includes(query)) }, [products, excluded, typed]) const items = limit === undefined ? matches : matches.slice(0, limit) const form = useAppForm({ defaultValues: { picked: [] as string[] }, onSubmit: ({ value }) => { const picked = new Set(value.picked) onAdd(products.filter((product) => picked.has(product.id))) onDone() }, }) return ( void form.handleSubmit()}> Add Products Search by code or name and pick the products this kit unpacks into. Enter their quantities in the list. {(field) => ( `Remove ${label}`} /> )} state.values.picked.length}> {(count) => ( {count === 0 ? "Add Products" : count === 1 ? "Add 1 Product" : `Add ${count} Products`} )} ) }71:Tf0a,import type { KitProduct } from "@/components/openlmis/product-editor-page/kit-products-dialog" import type { Approval } from "@/components/openlmis/product-editor-page/approval-form" import type { Product } from "@/components/openlmis/product-editor-page/product-form" import type { KitChild } from "@/components/openlmis/product-editor-page/kit-form" import type { NamedOption, ProgramLink, } from "@/components/openlmis/product-editor-page/program-link-form" export const MOCK_PRODUCT: Product = { id: "kit-delivery", productCode: "K100", fullProductName: "Clean Delivery Kit", description: "Everything a birth attendant needs for one clean delivery.", dispensingUnit: "kit", netContent: 1, packRoundingThreshold: 0, roundToZero: false, } const ASPIRIN: KitProduct = { id: "p-aspirin", productCode: "C100", fullProductName: "Acetylsalicylic Acid", dispensingUnit: "10 tab strip", } const GAUZE: KitProduct = { id: "p-gauze", productCode: "C101", fullProductName: "Gauze Bandage", dispensingUnit: "each", } const GLOVES: KitProduct = { id: "p-gloves", productCode: "C102", fullProductName: "Surgical Gloves", dispensingUnit: "pair", } const CORD_CLAMP: KitProduct = { id: "p-clamp", productCode: "C105", fullProductName: null, } /** Every product, for Add Products and to refuse a code another product has. */ export const MOCK_PRODUCTS: KitProduct[] = [ { id: MOCK_PRODUCT.id, productCode: MOCK_PRODUCT.productCode, fullProductName: MOCK_PRODUCT.fullProductName, }, ASPIRIN, GAUZE, GLOVES, { id: "p-oxytocin", productCode: "C103", fullProductName: "Oxytocin", dispensingUnit: "ampoule", }, { id: "p-condom", productCode: "C104", fullProductName: "Male Condom", dispensingUnit: "each", }, CORD_CLAMP, ] export const MOCK_KIT_CHILDREN: KitChild[] = [ { product: GLOVES, quantity: 2 }, { product: GAUZE, quantity: 10 }, { product: CORD_CLAMP, quantity: 1 }, ] export const MOCK_PROGRAMS: NamedOption[] = [ { id: "family-planning", name: "Family Planning" }, { id: "essential-meds", name: "Essential Meds" }, { id: "maternal-health", name: "Maternal Health" }, { id: "epi", name: "EPI" }, ] export const MOCK_CATEGORIES: NamedOption[] = [ { id: "kits", name: "Kits" }, { id: "surgical", name: "Surgical Supplies" }, { id: "medicines", name: "Medicines" }, ] export const MOCK_FACILITY_TYPES: NamedOption[] = [ { id: "health-center", name: "Health Center" }, { id: "district-hospital", name: "District Hospital" }, { id: "warehouse", name: "Warehouse" }, ] export const MOCK_LINKS: ProgramLink[] = [ { programId: "maternal-health", categoryId: "kits", fullSupply: true, dosesPerPatient: 1, displayOrder: 1, pricePerPack: 12.5, }, { programId: "essential-meds", categoryId: "surgical", active: false, fullSupply: false, dosesPerPatient: null, displayOrder: 4, pricePerPack: null, }, ] export const MOCK_APPROVALS: Approval[] = [ { id: "health-center-maternal-health", facilityType: { id: "health-center", name: "Health Center" }, program: { id: "maternal-health", name: "Maternal Health" }, maxPeriodsOfStock: 3, emergencyOrderPoint: 0.5, minPeriodsOfStock: 1, }, { id: "district-hospital-maternal-health", facilityType: { id: "district-hospital", name: "District Hospital" }, program: { id: "maternal-health", name: "Maternal Health" }, maxPeriodsOfStock: 4, emergencyOrderPoint: null, minPeriodsOfStock: 2, }, { id: "district-hospital-essential-meds", facilityType: { id: "district-hospital", name: "District Hospital" }, program: { id: "essential-meds", name: "Essential Meds" }, maxPeriodsOfStock: 2.5, emergencyOrderPoint: 1, minPeriodsOfStock: null, }, ]72:Tc04,import { z } from "zod" import { decimalText, toDecimal, toNumberText, } from "@/components/openlmis/number-text" import type { NamedOption } from "@/components/openlmis/product-editor-page/program-link-form" /** How much stock facilities of one type keep, in periods of use. */ export type ApprovalStock = { maxPeriodsOfStock: number emergencyOrderPoint: number | null minPeriodsOfStock: number | null } /** One facility type approved to stock the product in one program. */ export type Approval = ApprovalStock & { id: string facilityType: NamedOption program: NamedOption } /** What Add and Save hand back: the pair is only set when adding, since an edit keeps it. */ export type ApprovalValues = ApprovalStock & { facilityTypeId: string programId: string } const periods = (optional: boolean) => decimalText( { required: "Enter the most periods of stock.", invalid: "Enter a number of 0 or more, such as 3 or 1.5.", tooLarge: "Enter a smaller number.", }, { optional } ) /** Refuses a facility type and program pair already approved, other than the one being edited. */ export function approvalFormSchema( approved: readonly Approval[], editingId?: string ) { return z .object({ facilityTypeId: z .string() .nullable() .refine(Boolean, "Choose a facility type."), programId: z.string().nullable().refine(Boolean, "Choose a program."), maxPeriodsOfStock: periods(false), emergencyOrderPoint: periods(true), minPeriodsOfStock: periods(true), }) .superRefine((values, context) => { const taken = approved.some( (approval) => approval.id !== editingId && approval.facilityType.id === values.facilityTypeId && approval.program.id === values.programId ) if (taken) { context.addIssue({ code: "custom", path: ["programId"], message: "This facility type already stocks the product in this program.", }) } }) } export type ApprovalFormValues = z.input> export const EMPTY_APPROVAL_FORM: ApprovalFormValues = { facilityTypeId: null, programId: null, maxPeriodsOfStock: "", emergencyOrderPoint: "", minPeriodsOfStock: "", } export function toApprovalFormValues(approval: Approval): ApprovalFormValues { return { facilityTypeId: approval.facilityType.id, programId: approval.program.id, maxPeriodsOfStock: toNumberText(approval.maxPeriodsOfStock), emergencyOrderPoint: toNumberText(approval.emergencyOrderPoint), minPeriodsOfStock: toNumberText(approval.minPeriodsOfStock), } } export function toApprovalValues(values: ApprovalFormValues): ApprovalValues { return { facilityTypeId: values.facilityTypeId ?? "", programId: values.programId ?? "", maxPeriodsOfStock: toDecimal(values.maxPeriodsOfStock) ?? 0, emergencyOrderPoint: toDecimal(values.emergencyOrderPoint), minPeriodsOfStock: toDecimal(values.minPeriodsOfStock), } }73:T2997,"use client" import { revalidateLogic } from "@tanstack/react-form" import { type ReactNode, useMemo } from "react" import { FieldGroup } from "@/components/ui/field" import type { NamedOption } from "@/components/openlmis/product-editor-page/program-link-form" import { FormDialog, FormDialogBody, FormDialogCancel, FormDialogDescription, FormDialogError, FormDialogFooter, FormDialogForm, FormDialogHeader, FormDialogSubmit, FormDialogTitle, } from "@/components/openlmis/form-dialog/form-dialog" import { useDialogTarget } from "@/components/openlmis/form-dialog/use-dialog-target" import { useAppForm } from "@/components/openlmis/form-fields/form" import { FieldSkeleton, SkeletonLine, } from "@/components/openlmis/form-fields/form-fields" import { type Approval, approvalFormSchema, type ApprovalValues, EMPTY_APPROVAL_FORM, toApprovalFormValues, toApprovalValues, } from "@/components/openlmis/product-editor-page/approval-form" /** `"new"` adds a facility type; an approval id edits, or views, that approval. */ export type ApprovalDialogTarget = "new" | (string & {}) type ProductApprovalDialogProps = { /** Opens the dialog while set. */ target: ApprovalDialogTarget | undefined productName: string /** The product's approvals; the form shows a skeleton until they are set. */ approvals: readonly Approval[] | undefined /** Every facility type; the form shows a skeleton until they are set. */ facilityTypes: readonly NamedOption[] | undefined /** The programs the product is in, the only ones it can be approved for. */ programs: readonly NamedOption[] | undefined /** Shows the approval without letting it change. */ readOnly?: boolean /** Called with the values to save; save them, then clear `target`. */ onSubmit: (values: ApprovalValues, existing?: Approval) => void /** Keeps the dialog open and spins the submit while the save runs. */ pending?: boolean /** Shown above the fields, e.g. why the save failed; what was typed stays. */ error?: ReactNode onClose: () => void } /** Let a type of facility stock the product in a program, or change how much it keeps. */ export function ProductApprovalDialog({ target, pending = false, onClose, ...props }: ProductApprovalDialogProps) { const { shown, dialogProps } = useDialogTarget(target, onClose) return ( {shown !== undefined && ( )} ) } type ContentProps = Omit & { target: ApprovalDialogTarget pending: boolean } function ApprovalContent({ target, approvals, facilityTypes, programs, readOnly = false, ...props }: ContentProps) { const adding = target === "new" const title = adding ? "Add Facility Type" : "Facility Type" if (!approvals || !facilityTypes || !programs) { return ( ) } const approval = approvals.find((item) => item.id === target) if (!adding && !approval) { return ( <> {title} This facility type no longer stocks the product. Close ) } return ( ) } type ApprovalFormProps = Omit< ContentProps, "target" | "approvals" | "facilityTypes" | "programs" > & { approval: Approval | undefined approvals: readonly Approval[] facilityTypes: readonly NamedOption[] programs: readonly NamedOption[] readOnly: boolean } const byLabel = (a: { label: string }, b: { label: string }) => a.label.localeCompare(b.label) function ApprovalForm({ approval, approvals, facilityTypes, programs, productName, readOnly, onSubmit, pending, error, }: ApprovalFormProps) { const schema = useMemo( () => approvalFormSchema(approvals, approval?.id), [approvals, approval] ) const facilityTypeItems = useMemo( () => facilityTypes .map((type) => ({ value: type.id, label: type.name })) // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh array; toSorted needs the ES2023 lib .sort(byLabel), [facilityTypes] ) const programItems = useMemo(() => { const items = programs.map((program) => ({ value: program.id, label: program.name, })) // An approval for a program the product has since left still shows its program. if (approval && !items.some((item) => item.value === approval.program.id)) { items.push({ value: approval.program.id, label: approval.program.name }) } // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh array; toSorted needs the ES2023 lib return items.sort(byLabel) }, [programs, approval]) const form = useAppForm({ defaultValues: approval ? toApprovalFormValues(approval) : EMPTY_APPROVAL_FORM, // Quiet until the first submit, then each field re-checks as it is corrected. validationLogic: revalidateLogic({ mode: "submit", modeAfterSubmission: "change", }), validators: { onDynamic: schema }, onSubmit: ({ value }) => onSubmit(toApprovalValues(value), approval), }) const facilityType = approval?.facilityType.name const title = !approval ? "Add Facility Type" : readOnly ? (facilityType ?? "") : `Edit ${facilityType}` return ( void form.handleSubmit()}> {title} {approval ? `How much ${productName} facilities of type ${facilityType} keep for ${approval.program.name}.` : `Let a type of facility stock ${productName} in one of its programs.`} {error && ( )} {(field) => ( )} {(field) => ( )} {(field) => ( )}

{(field) => ( )} {(field) => ( )}

{readOnly ? "Close" : "Cancel"} {!readOnly && ( {approval ? "Save" : "Add Facility Type"} )} ) } type ApprovalSkeletonProps = { title: string adding: boolean readOnly: boolean } /** The form as it will look, so nothing moves when its choices arrive. */ function ApprovalSkeleton({ title, adding, readOnly }: ApprovalSkeletonProps) { return ( <> {title}

{readOnly ? "Close" : "Cancel"} {!readOnly && ( {adding ? "Add Facility Type" : "Save"} )} ) }74:T45ca,"use client" import { PackageIcon } from "lucide-react" import { type ReactNode, useCallback, useMemo, useState } from "react" import { Button } from "@/components/ui/button" import type { ColumnVisibilityState } from "@tanstack/react-table" import { useColumnVisibility, useContainerSize, } from "@/components/blocks/openlmis/data-table/responsive-columns" import { APPROVAL_HIDEABLE_COLUMNS, ApprovalsToolbar, FacilityApprovedProducts, } from "@/components/openlmis/product-editor-page/facility-approved-products" import { RemoveApprovalDialog } from "@/components/openlmis/product-editor-page/remove-approval-dialog" import type { Approval, ApprovalValues, } from "@/components/openlmis/product-editor-page/approval-form" import { ProductApprovalDialog } from "@/components/openlmis/product-editor-page/product-approval-dialog" import { type Product, productName } from "@/components/openlmis/product-editor-page/product-form" import { ProductGeneralForm } from "@/components/openlmis/product-editor-page/product-general-form" import type { KitChild, KitChildValues, } from "@/components/openlmis/product-editor-page/kit-form" import { ProductKitUnpackList } from "@/components/openlmis/product-editor-page/product-kit-unpack-list" import { ProductProgramLinkDialog } from "@/components/openlmis/product-editor-page/product-program-link-dialog" import { type NamedOption, type ProgramLink, withoutProgramLink, withProgramLink, } from "@/components/openlmis/product-editor-page/program-link-form" import { PROGRAM_LINK_HIDEABLE_COLUMNS, ProductProgramLinks, ProgramLinksToolbar, } from "@/components/openlmis/product-editor-page/product-program-links" import { RemoveProgramLinkDialog } from "@/components/openlmis/product-editor-page/remove-program-link-dialog" import { Workspace, WorkspaceContent, WorkspaceDescription, WorkspaceFooter, WorkspaceHeader, WorkspaceHeading, WorkspaceIcon, WorkspaceLayout, WorkspaceTitle, } from "@/components/blocks/openlmis/workspace" import { FormActions } from "@/components/openlmis/form-actions" import { Callout } from "@/components/openlmis/callout" import { DiscardChangesDialog } from "@/components/openlmis/discard-changes-dialog" import { WorkspaceTabs, WorkspaceTabsContent, WorkspaceTabsList, WorkspaceTabsTrigger, } from "@/components/openlmis/workspace-tabs" import { MOCK_APPROVALS, MOCK_CATEGORIES, MOCK_FACILITY_TYPES, MOCK_KIT_CHILDREN, MOCK_LINKS, MOCK_PRODUCT, MOCK_PRODUCTS, MOCK_PROGRAMS, } from "@/components/openlmis/product-editor-page/mock-product" const TABS = [ { value: "general", label: "General" }, { value: "programs", label: "Programs" }, { value: "facility-types", label: "Facility Types" }, { value: "kit-unpack-list", label: "Kit Unpack List" }, ] as const /** A tab, and the part of the product it saves. */ export type ProductTab = (typeof TABS)[number]["value"] const FORM_IDS = { general: "product-general-form", kit: "kit-unpack-list-form", } as const const SAVE_ERROR = "Something went wrong. Check your connection and try again." type ProductEditorPageProps = { /** Without it, every product tab is read only. */ canEditProduct?: boolean /** Without it, the Facility Types tab is read only. */ canEditApprovals?: boolean /** Saves in these tabs fail, to show how a failed save reads; nothing is sent anywhere. */ failingSaves?: readonly ProductTab[] /** The tab shown first. */ defaultTab?: ProductTab /** Leaves the page, e.g. back to the products list; asked first when there are unsaved changes. */ onBack?: () => void } type OpenDialog = | { kind: "program" | "remove-program"; id: string } | { kind: "approval" | "remove-approval"; id: string } const NO_ACTIONS = () => null const NO_FAILURES: readonly ProductTab[] = [] /** Edit Product on mock data: General, Programs, Facility Types and Kit Unpack List, each saved on its own. */ export function ProductEditorPage({ canEditProduct = true, canEditApprovals = true, failingSaves = NO_FAILURES, defaultTab = "general", onBack, }: ProductEditorPageProps) { const [product, setProduct] = useState(MOCK_PRODUCT) const [links, setLinks] = useState(MOCK_LINKS) const [approvals, setApprovals] = useState(MOCK_APPROVALS) const [kitChildren, setKitChildren] = useState(MOCK_KIT_CHILDREN) const [tab, setTab] = useState(defaultTab) const [changes, setChanges] = useState(0) // Where to go once unsaved changes are discarded: another tab, or out of the page. const [leaving, setLeaving] = useState() const [dialog, setDialog] = useState() const [error, setError] = useState<{ area: string; message: string }>() const [saved, setSaved] = useState() // Bumped on discard, so a form left mounted starts again from the saved values. const [formKey, setFormKey] = useState(0) const name = productName(product) const fails = (area: ProductTab) => failingSaves.includes(area) const errorFor = (area: string) => error?.area === area ? error.message : undefined const succeed = (message: string) => { setError(undefined) setSaved(message) } const fail = (area: string) => { setSaved(undefined) setError({ area, message: SAVE_ERROR }) } const closeDialog = () => { setDialog(undefined) setError(undefined) } const go = (next: ProductTab | "back") => { setChanges(0) setFormKey((key) => key + 1) setError(undefined) setSaved(undefined) if (next === "back") onBack?.() else setTab(next) } const leave = (next: ProductTab | "back") => { if (changes > 0) setLeaving(next) else go(next) } const takenCodes = useMemo( () => MOCK_PRODUCTS.filter((item) => item.id !== product.id).map( (item) => item.productCode ), [product.id] ) const linkedPrograms = useMemo(() => { const linked = new Set(links.map((link) => link.programId)) return MOCK_PROGRAMS.filter((program) => linked.has(program.id)) }, [links]) const onEditLink = useCallback( (id: string) => setDialog({ kind: "program", id }), [] ) const onRemoveLink = useCallback( (id: string) => setDialog({ kind: "remove-program", id }), [] ) const onEditApproval = useCallback( (id: string) => setDialog({ kind: "approval", id }), [] ) const onRemoveApproval = useCallback( (id: string) => setDialog({ kind: "remove-approval", id }), [] ) const saveLink = (link: ProgramLink) => { if (fails("programs")) return fail("program") const program = programName(link.programId) const added = !links.some((item) => item.programId === link.programId) setLinks((current) => withProgramLink(current, link)) setDialog(undefined) succeed( added ? `${name} is now offered in ${program}.` : `Changes to ${program} for ${name} are saved.` ) } const removeLink = (programId: string) => { if (fails("programs")) return fail("remove-program") setLinks((current) => withoutProgramLink(current, programId)) setDialog(undefined) succeed(`${name} is no longer offered in ${programName(programId)}.`) } const saveApproval = (values: ApprovalValues, existing?: Approval) => { if (fails("facility-types")) return fail("approval") const facilityType = named(MOCK_FACILITY_TYPES, values.facilityTypeId) const program = named(MOCK_PROGRAMS, values.programId) const stock = { maxPeriodsOfStock: values.maxPeriodsOfStock, emergencyOrderPoint: values.emergencyOrderPoint, minPeriodsOfStock: values.minPeriodsOfStock, } setApprovals((current) => existing ? current.map((item) => item.id === existing.id ? { ...item, ...stock } : item ) : [ ...current, { ...stock, id: `${facilityType.id}-${program.id}`, facilityType, program, }, ] ) setDialog(undefined) succeed( existing ? `Changes to ${facilityType.name} in ${program.name} are saved.` : `Facilities of type ${facilityType.name} can now stock ${name} in ${program.name}.` ) } const removeApproval = (id: string) => { if (fails("facility-types")) return fail("remove-approval") const removed = approvals.find((item) => item.id === id) setApprovals((current) => current.filter((item) => item.id !== id)) setDialog(undefined) if (removed) succeed( `Facilities of type ${removed.facilityType.name} no longer stock ${name} in ${removed.program.name}.` ) } const saveKit = (values: KitChildValues[]) => { if (fails("kit-unpack-list")) return fail("kit") const products = new Map(MOCK_PRODUCTS.map((item) => [item.id, item])) setKitChildren( values.flatMap(({ productId, quantity }) => { const kitProduct = products.get(productId) return kitProduct ? [{ product: kitProduct, quantity }] : [] }) ) succeed(`The kit unpack list of ${name} is saved.`) onBack?.() } const back = leave("back")} /> const formFooter = (formId: string, saveLabel: string, readOnly: boolean) => readOnly ? ( back ) : ( 0, pending: false, cancel: () => leave("back"), }} cancelDisabled={false} saveLabel={saveLabel} /> ) const footer: Record = { general: formFooter(FORM_IDS.general, "Save Product", !canEditProduct), programs: back, "facility-types": back, "kit-unpack-list": formFooter( FORM_IDS.kit, "Save Kit Unpack List", !canEditProduct ), } return ( Edit {name} Change the details of product {product.productCode}. { if (next !== tab) leave(next as ProductTab) }} value={tab} > {TABS.map((item) => ( {item.label} ))} {saved && ( {saved} )} {tab === "general" && ( { if (fails("general")) return fail("general") const next = { ...product, ...values } setProduct(next) succeed(`Changes to ${productName(next)} are saved.`) onBack?.() }} product={product} readOnly={!canEditProduct} renderActions={NO_ACTIONS} takenCodes={takenCodes} /> )} {tab === "programs" && ( setDialog({ kind: "program", id: "new" })} onEdit={onEditLink} onRemove={onRemoveLink} /> )} {tab === "facility-types" && ( setDialog({ kind: "approval", id: "new" })} onEdit={onEditApproval} onRemove={onRemoveApproval} /> )} {tab === "kit-unpack-list" && ( )} {footer[tab]} { if (leaving) go(leaving) setLeaving(undefined) }} onKeepEditing={() => setLeaving(undefined)} open={leaving !== undefined} subject={tab === "kit-unpack-list" ? "the kit unpack list" : name} /> ) } const named = (options: readonly NamedOption[], id: string) => options.find((option) => option.id === id) ?? { id, name: id } const programName = (id: string) => named(MOCK_PROGRAMS, id).name function BackButton({ onClick }: { onClick: () => void }) { return ( ) } /** Each table tab measures its own room, so its columns fit before the user picks any. */ function useTabColumns(columns: Parameters[0]) { const [choices, setChoices] = useState({}) const [measure, size] = useContainerSize() return { measure, ...useColumnVisibility(columns, [choices, setChoices], size), } } type TableTabProps = { canEdit: boolean onAdd: () => void onEdit: (id: string) => void onRemove: (id: string) => void } function ProgramsTab({ links, canEdit, onAdd, onEdit, onRemove, }: TableTabProps & { links: readonly ProgramLink[] }) { const { measure, visibility, onReset, onVisibilityChange } = useTabColumns( PROGRAM_LINK_HIDEABLE_COLUMNS ) return (

) } function FacilityTypesTab({ approvals, canEdit, onAdd, onEdit, onRemove, }: TableTabProps & { approvals: readonly Approval[] }) { const { measure, visibility, onReset, onVisibilityChange } = useTabColumns( APPROVAL_HIDEABLE_COLUMNS ) return (

) }75:Tca0,"use client" import { revalidateLogic } from "@tanstack/react-form" import { type ReactNode, useMemo } from "react" import { FieldGroup } from "@/components/ui/field" import { ProductFormFields } from "@/components/openlmis/product-editor-page/product-form-fields" import { EMPTY_PRODUCT_FORM, productFormSchema, type ProductValues, toProductValues, } from "@/components/openlmis/product-editor-page/product-form" import { FormDialog, FormDialogBody, FormDialogCancel, FormDialogDescription, FormDialogError, FormDialogFooter, FormDialogForm, FormDialogHeader, FormDialogSubmit, FormDialogTitle, } from "@/components/openlmis/form-dialog/form-dialog" import { useDialogTarget } from "@/components/openlmis/form-dialog/use-dialog-target" import { useAppForm } from "@/components/openlmis/form-fields/form" type ProductFormDialogProps = { open: boolean /** Existing products' codes, refused for the new one. */ takenCodes?: readonly string[] /** Called with trimmed values; create the product, then close. */ onSubmit: (values: ProductValues) => void /** Keeps the dialog open and spins Add Product while the create runs. */ pending?: boolean /** Shown above the fields, e.g. why the create failed; what was typed stays. */ error?: ReactNode onClose: () => void } /** Add Product: a code, a name and how it is packed. */ export function ProductFormDialog({ open, takenCodes, onSubmit, pending = false, error, onClose, }: ProductFormDialogProps) { const { shown, dialogProps } = useDialogTarget(open || undefined, onClose) return ( {shown && ( )} ) } function AddProductForm({ takenCodes, onSubmit, pending, error, }: Omit & { pending: boolean }) { const schema = useMemo(() => productFormSchema(takenCodes), [takenCodes]) const form = useAppForm({ defaultValues: EMPTY_PRODUCT_FORM, // Quiet until the first submit, then each field re-checks as it is corrected. validationLogic: revalidateLogic({ mode: "submit", modeAfterSubmission: "change", }), validators: { onDynamic: schema }, onSubmit: ({ value }) => onSubmit(toProductValues(value)), }) return ( void form.handleSubmit()}> Add Product Give the product a code and say how it is packed. {error && ( )} Add Product ) }76:Tdb2,"use client" import { FieldGroup, FieldLegend, FieldSet } from "@/components/ui/field" import { withForm } from "@/components/openlmis/form-fields/form" import { EMPTY_PRODUCT_FORM } from "@/components/openlmis/product-editor-page/product-form" /** The product's code, name and pack size, shared by Add Product and the General tab. */ export const ProductFormFields = withForm({ defaultValues: EMPTY_PRODUCT_FORM, props: {} as { disabled?: boolean; sizeCode?: string | null }, render: function Render({ form, disabled, sizeCode }) { return ( <> {(field) => ( )} {(field) => ( )} {(field) => ( )}

Pack Size Information {(field) => ( )}

{(field) => ( )} {(field) => ( )}

{(field) => ( )}

) }, })77:T1032,import { z } from "zod" import { toWholeNumber, wholeNumberText, } from "@/components/openlmis/number-text" /** What the product forms show and save; map your API's product onto it. */ export type Product = { id: string productCode: string fullProductName: string | null description: string | null dispensingUnit: string | null /** Set for a product sized by a size code, which then takes no dispensing unit. */ sizeCode?: string | null netContent: number packRoundingThreshold: number roundToZero: boolean } /** A product's saved fields, trimmed, as a create or an update sends them. */ export type ProductValues = Omit /** The name a product is shown by: its full name, or its code when it has none. */ export const productName = ( product: Pick ) => product.fullProductName || product.productCode const toCode = (text: string) => text.replace(/\s/g, "") const sameCode = (a: string, b: string) => toCode(a).toLowerCase() === toCode(b).toLowerCase() const packSize = (required: string, min?: number) => wholeNumberText( { required, invalid: "Enter a whole number, such as 1 or 12.", tooLarge: "Enter a number no larger than 9007199254740991.", tooSmall: "Enter a number of at least 1.", }, { min, max: Number.MAX_SAFE_INTEGER } ) /** `takenCodes` are other products' codes, refused whatever their case or spacing. */ export function productFormSchema( takenCodes: readonly string[] = [], { unitRequired = true } = {} ) { return z.object({ productCode: z .string() .trim() .min(1, "Enter a product code.") .refine( (code) => !takenCodes.some((taken) => sameCode(taken, code)), "Another product already has this code." ), fullProductName: z.string(), description: z.string(), dispensingUnit: unitRequired ? z.string().trim().min(1, "Enter a dispensing unit.") : z.string(), netContent: packSize("Enter the net content.", 1), packRoundingThreshold: packSize("Enter a pack rounding threshold."), roundToZero: z.boolean(), }) } export type ProductFormValues = z.input> export const EMPTY_PRODUCT_FORM: ProductFormValues = { productCode: "", fullProductName: "", description: "", dispensingUnit: "", netContent: "", packRoundingThreshold: "", roundToZero: false, } export function toProductFormValues(product: Product): ProductFormValues { return { productCode: product.productCode, fullProductName: product.fullProductName ?? "", description: product.description ?? "", dispensingUnit: product.dispensingUnit ?? "", netContent: String(product.netContent), packRoundingThreshold: String(product.packRoundingThreshold), roundToZero: product.roundToZero, } } const optionalText = (text: string) => text.trim() || null export function toProductValues(values: ProductFormValues): ProductValues { return { productCode: toCode(values.productCode), fullProductName: optionalText(values.fullProductName), description: optionalText(values.description), dispensingUnit: optionalText(values.dispensingUnit), netContent: toWholeNumber(values.netContent), packRoundingThreshold: toWholeNumber(values.packRoundingThreshold), roundToZero: values.roundToZero, } } const sameNumber = (text: string, saved: number) => text.trim() !== "" && toWholeNumber(text) === saved /** How many fields differ from the saved product. */ export function productChanges(values: ProductFormValues, saved: Product) { const next = toProductValues(values) return [ next.productCode !== saved.productCode, next.fullProductName !== optionalText(saved.fullProductName ?? ""), next.description !== optionalText(saved.description ?? ""), next.dispensingUnit !== optionalText(saved.dispensingUnit ?? ""), !sameNumber(values.netContent, saved.netContent), !sameNumber(values.packRoundingThreshold, saved.packRoundingThreshold), next.roundToZero !== saved.roundToZero, ].filter(Boolean).length }78:T1496,"use client" import { revalidateLogic, useStore } from "@tanstack/react-form" import { type ReactNode, useEffect, useId, useMemo, useRef } from "react" import { FieldGroup } from "@/components/ui/field" import { type FormActionState, FormActions, } from "@/components/openlmis/form-actions" import { FormDialogError } from "@/components/openlmis/form-dialog/form-dialog" import { useAppForm } from "@/components/openlmis/form-fields/form" import { ChoiceCardSkeleton, FieldSkeleton, } from "@/components/openlmis/form-fields/form-fields" import { type Product, productChanges, productFormSchema, type ProductValues, toProductFormValues, toProductValues, } from "@/components/openlmis/product-editor-page/product-form" import { ProductFormFields } from "@/components/openlmis/product-editor-page/product-form-fields" type ProductGeneralFormProps = { /** The product; a skeleton shows until it is set. */ product: Product | undefined /** Other products' codes, refused as this one's. */ takenCodes?: readonly string[] /** Disables every field, e.g. without the right to edit products. */ readOnly?: boolean /** Called with trimmed values; save them, then pass the saved product back. */ onSubmit: (values: ProductValues) => void /** Locks Save and spins it while the save runs. */ pending?: boolean /** Shown above the fields, e.g. why the save failed; what was typed stays. */ error?: ReactNode /** Runs on Cancel instead of putting the form back, e.g. to leave the page. */ onCancel?: () => void /** Tells the page how many changes are unsaved, e.g. to ask before leaving. */ onChangesChange?: (changes: number) => void /** The form's id, for a Save placed elsewhere, e.g. in a page's `WorkspaceFooter`. */ formId?: string /** Places Cancel and Save; by default they sit in a row under the form, and not at all when read only. */ renderActions?: (actions: FormActionState) => ReactNode } /** A product's General tab: code, name, description and pack size. */ export function ProductGeneralForm({ product, ...props }: ProductGeneralFormProps) { if (!product) return return } function GeneralForm({ product, takenCodes, readOnly = false, onSubmit, pending = false, error, onCancel, onChangesChange, renderActions, formId: givenFormId, }: ProductGeneralFormProps & { product: Product }) { const generatedFormId = useId() const formId = givenFormId ?? generatedFormId const unitRequired = !product.sizeCode const schema = useMemo( () => productFormSchema(takenCodes, { unitRequired }), [takenCodes, unitRequired] ) const form = useAppForm({ defaultValues: toProductFormValues(product), // Quiet until the first submit, then each field re-checks as it is corrected. validationLogic: revalidateLogic({ mode: "submit", modeAfterSubmission: "change", }), validators: { onDynamic: schema }, onSubmit: ({ value }) => onSubmit(toProductValues(value)), }) const changes = useStore(form.store, (state) => productChanges(state.values, product) ) // Start again only from saved values that differ, so a rebuilt but equal product keeps the draft. const savedKey = JSON.stringify(toProductFormValues(product)) const lastSavedKey = useRef(savedKey) useEffect(() => { if (savedKey === lastSavedKey.current) return lastSavedKey.current = savedKey form.reset(toProductFormValues(product)) }, [form, product, savedKey]) useEffect(() => { onChangesChange?.(changes) }, [changes, onChangesChange]) const actions: FormActionState = { formId, changed: changes > 0, pending, cancel: onCancel ?? (() => form.reset(toProductFormValues(product))), } return ( <> {renderActions ? renderActions(actions) : !readOnly && (

)} ) } export function ProductGeneralFormSkeleton() { return (

) }79:T867,import { z } from "zod" import type { KitProduct } from "@/components/openlmis/product-editor-page/kit-products-dialog" import { toNumberText, toWholeNumber, wholeNumberText, } from "@/components/openlmis/number-text" /** One product a kit unpacks into, and how many of it. */ export type KitChild = { product: KitProduct quantity: number | null } /** What Save hands back: each product by id, with its quantity. */ export type KitChildValues = { productId: string quantity: number } export const kitFormSchema = z.object({ children: z.array( z.object({ id: z.string(), code: z.string(), name: z.string(), quantity: wholeNumberText({ required: "Enter a quantity.", invalid: "Enter a whole number, such as 0 or 12.", tooLarge: "Enter a number no larger than 2147483647.", }), }) ), }) export type KitFormValues = z.input export type KitRow = KitFormValues["children"][number] export const toKitRow = (product: KitProduct, quantity = ""): KitRow => ({ id: product.id, code: product.productCode, name: product.fullProductName ?? "", quantity, }) export const toKitFormValues = ( children: readonly KitChild[] ): KitFormValues => ({ children: children.map((child) => toKitRow(child.product, toNumberText(child.quantity)) ), }) export const toKitChildValues = (values: KitFormValues): KitChildValues[] => values.children.map((row) => ({ productId: row.id, quantity: toWholeNumber(row.quantity), })) /** Rows added, removed, or with a new quantity, against the saved list. */ export function kitChanges( rows: readonly KitRow[], saved: readonly KitChild[] ) { const savedQuantities = new Map( saved.map((child) => [child.product.id, child.quantity]) ) const kept = new Set(rows.map((row) => row.id)) const removed = saved.filter((child) => !kept.has(child.product.id)).length const changed = rows.filter( (row) => !savedQuantities.has(row.id) || row.quantity.trim() === "" || toWholeNumber(row.quantity) !== savedQuantities.get(row.id) ).length return removed + changed }7a:T2f97,"use client" import { revalidateLogic, useStore } from "@tanstack/react-form" import { BoxesIcon, EllipsisIcon, PlusIcon, Trash2Icon } from "lucide-react" import { type ReactNode, useEffect, useId, useMemo, useRef, useState, } from "react" import { flushSync } from "react-dom" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Skeleton } from "@/components/ui/skeleton" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { DataTableCard, DataTableEmpty, DataTableHeaderLabel, } from "@/components/blocks/openlmis/data-table/data-table" import { type KitProduct, KitProductsDialog, } from "@/components/openlmis/product-editor-page/kit-products-dialog" import { ListToolbar } from "@/components/blocks/openlmis/list-toolbar" import { type FormActionState, FormActions, } from "@/components/openlmis/form-actions" import { FormDialogError } from "@/components/openlmis/form-dialog/form-dialog" import { useAppForm } from "@/components/openlmis/form-fields/form" import { type KitChild, type KitChildValues, kitChanges, kitFormSchema, toKitChildValues, toKitFormValues, toKitRow, } from "@/components/openlmis/product-editor-page/kit-form" const TABLE_CLASSES = "[&_td]:h-14 [&_td]:px-4 [&_td]:py-2 [&_th]:h-10 [&_th]:px-4" type ProductKitUnpackListProps = { /** The kit's id, left out of the products it can unpack into. */ kitId: string /** What the kit unpacks into; a skeleton shows until it is set. */ kitChildren: readonly KitChild[] | undefined /** The products Add Products picks from. */ products: readonly KitProduct[] /** Shows the list without letting it change. */ readOnly?: boolean /** Called with every row once all quantities are valid; save them, then pass the saved list back. */ onSubmit: (children: KitChildValues[]) => void /** Locks Save and spins it while the save runs. */ pending?: boolean /** Shown above the list, e.g. why the save failed; what was entered stays. */ error?: ReactNode /** Runs on Cancel instead of putting the list back, e.g. to leave the page. */ onCancel?: () => void /** Tells the page how many changes are unsaved, e.g. to ask before leaving. */ onChangesChange?: (changes: number) => void /** The form's id, for a Save placed elsewhere, e.g. in a page's `WorkspaceFooter`. */ formId?: string /** Places Cancel and Save; by default they sit in a row under the list, and not at all when read only. */ renderActions?: (actions: FormActionState) => ReactNode /** Passed to Add Products: lists only the first this many matches. */ searchLimit?: number } /** The products a kit unpacks into, each with a quantity, saved together. */ export function ProductKitUnpackList({ kitChildren, ...props }: ProductKitUnpackListProps) { if (!kitChildren) return return } function KitUnpackForm({ kitId, kitChildren, products, readOnly = false, onSubmit, pending = false, error, onCancel, onChangesChange, renderActions, formId: givenFormId, searchLimit, }: ProductKitUnpackListProps & { kitChildren: readonly KitChild[] }) { const generatedFormId = useId() const formId = givenFormId ?? generatedFormId const [adding, setAdding] = useState(false) const listRegion = useRef(null) const addButton = useRef(null) const form = useAppForm({ defaultValues: toKitFormValues(kitChildren), // Quiet until the first submit, then each quantity re-checks as it is corrected. validationLogic: revalidateLogic({ mode: "submit", modeAfterSubmission: "change", }), validators: { onDynamic: kitFormSchema }, onSubmit: ({ value }) => onSubmit(toKitChildValues(value)), }) const rows = useStore(form.store, (state) => state.values.children) const changes = kitChanges(rows, kitChildren) // Start again only from a saved list that differs, so a rebuilt but equal list keeps the draft. const savedKey = JSON.stringify(toKitFormValues(kitChildren)) const lastSavedKey = useRef(savedKey) useEffect(() => { if (savedKey === lastSavedKey.current) return lastSavedKey.current = savedKey form.reset(toKitFormValues(kitChildren)) }, [form, kitChildren, savedKey]) useEffect(() => { onChangesChange?.(changes) }, [changes, onChangesChange]) const excluded = useMemo( () => new Set([kitId, ...rows.map((row) => row.id)]), [kitId, rows] ) const removeRow = (index: number) => { flushSync(() => form.removeFieldValue("children", index)) // Focus the next row's menu, or Add Products once the list is empty. const buttons = listRegion.current?.querySelectorAll( "[data-kit-actions]" ) ;( buttons?.[Math.min(index, buttons.length - 1)] ?? addButton.current )?.focus() } const addProducts = (picked: KitProduct[]) => form.setFieldValue("children", (current) => [ ...current, ...picked.map((product) => toKitRow(product)), ]) const actions: FormActionState = { formId, changed: changes > 0, pending, cancel: onCancel ?? (() => form.reset(toKitFormValues(kitChildren))), } return ( <>

{ event.preventDefault() if (changes > 0) void form.handleSubmit() }} > {!readOnly && (

)} {error && ( )}

{rows.length === 0 ? ( } title="No Kit Products Found" /> ) : ( Product Quantity {!readOnly && ( Actions )} {rows.map((row, index) => { const name = row.name || row.code return ( {name} {row.name && ( {row.code} )}

{(field) => ( )}

{!readOnly && (

} > removeRow(index)} variant="destructive" > Remove

)} ) })}

)}

{renderActions ? renderActions(actions) : !readOnly && (

)} setAdding(false)} limit={searchLimit} open={adding && !readOnly} products={products} /> ) } const SKELETON_ROWS = [0, 1, 2] export function KitUnpackListSkeleton() { return (

Product Quantity {SKELETON_ROWS.map((row) => ( ))}

) }7b:T264a,"use client" import { revalidateLogic } from "@tanstack/react-form" import { type ReactNode, useMemo, useState } from "react" import { FieldGroup } from "@/components/ui/field" import { FormDialog, FormDialogBody, FormDialogCancel, FormDialogDescription, FormDialogError, FormDialogFooter, FormDialogForm, FormDialogHeader, FormDialogSubmit, FormDialogTitle, } from "@/components/openlmis/form-dialog/form-dialog" import { useDialogTarget } from "@/components/openlmis/form-dialog/use-dialog-target" import { useAppForm } from "@/components/openlmis/form-fields/form" import { ChoiceCardSkeleton, FieldSkeleton, SkeletonLine, } from "@/components/openlmis/form-fields/form-fields" import { EMPTY_PROGRAM_LINK_FORM, type NamedOption, type ProgramLink, programLinkFormSchema, toProgramLink, toProgramLinkFormValues, unlinkedPrograms, } from "@/components/openlmis/product-editor-page/program-link-form" /** `"new"` adds a program; a program id edits, or views, that link. */ export type ProgramLinkDialogTarget = "new" | (string & {}) type ProductProgramLinkDialogProps = { /** Opens the dialog while set. */ target: ProgramLinkDialogTarget | undefined /** The product's name, for the description. */ productName: string /** The product's links, so Add offers only programs it is not in yet. */ links: readonly ProgramLink[] /** Every program; the form shows a skeleton until they are set. */ programs: readonly NamedOption[] | undefined categories: readonly NamedOption[] | undefined /** Shows the link without letting it change. */ readOnly?: boolean /** Called with the link as it should be saved; save it, then clear `target`. */ onSubmit: (link: ProgramLink) => void /** Keeps the dialog open and spins the submit while the save runs. */ pending?: boolean /** Shown above the fields, e.g. why the save failed; what was typed stays. */ error?: ReactNode onClose: () => void } /** Add a product to a program, or edit how it is offered in one. */ export function ProductProgramLinkDialog({ target, pending = false, onClose, ...props }: ProductProgramLinkDialogProps) { const { shown, dialogProps } = useDialogTarget(target, onClose) return ( {shown !== undefined && ( )} ) } type ContentProps = Omit< ProductProgramLinkDialogProps, "target" | "onClose" > & { target: ProgramLinkDialogTarget pending: boolean } function ProgramLinkContent({ target, links, programs, categories, readOnly = false, ...props }: ContentProps) { const adding = target === "new" const link = links.find((item) => item.programId === target) if (!adding && !link) { return ( <> Program This program is no longer linked to the product. Close ) } if (!programs || !categories) { return ( ) } return ( ) } type ProgramLinkFormProps = Omit< ContentProps, "target" | "programs" | "categories" > & { link: ProgramLink | undefined programs: readonly NamedOption[] categories: readonly NamedOption[] readOnly: boolean } function ProgramLinkForm({ link, links, programs, categories, productName, readOnly, onSubmit, pending, error, }: ProgramLinkFormProps) { // The choices as the dialog opened, so a program just added never drops out of its own list. const [linksAtOpen] = useState(links) const programItems = useMemo( () => unlinkedPrograms(programs, linksAtOpen).map((program) => ({ value: program.id, label: program.name, })), [programs, linksAtOpen] ) const categoryItems = useMemo( () => categories.map((category) => ({ value: category.id, label: category.name, })), [categories] ) const linkedName = link ? (programs.find((program) => program.id === link.programId)?.name ?? link.programId) : undefined const form = useAppForm({ defaultValues: link ? toProgramLinkFormValues(link) : EMPTY_PROGRAM_LINK_FORM, // Quiet until the first submit, then each field re-checks as it is corrected. validationLogic: revalidateLogic({ mode: "submit", modeAfterSubmission: "change", }), validators: { onDynamic: programLinkFormSchema }, onSubmit: ({ value }) => onSubmit(toProgramLink(value, link)), }) const title = !link ? "Add Program" : readOnly ? (linkedName ?? "") : `Edit ${linkedName}` const description = !link ? `Offer ${productName} in another program.` : readOnly ? `How ${productName} is offered in this program.` : `Change how ${productName} is offered in this program.` return ( void form.handleSubmit()}> {title} {description} {error && ( )} {!link && ( {(field) => ( )} )} {(field) => ( )}

{(field) => ( )} {(field) => ( )}

{(field) => ( )} {(field) => ( )} {readOnly ? "Close" : "Cancel"} {!readOnly && ( {link ? "Save" : "Add Program"} )} ) } type ProgramLinkSkeletonProps = { title: string adding: boolean readOnly: boolean } /** The form as it will look, so nothing moves when the programs arrive. */ function ProgramLinkSkeleton({ title, adding, readOnly, }: ProgramLinkSkeletonProps) { return ( <> {title}

{adding && }

{readOnly ? "Close" : "Cancel"} {!readOnly && ( {adding ? "Add Program" : "Save"} )} ) }7c:Tde6,import { z } from "zod" import { decimalText, toDecimal, toNumberText, toOptionalWholeNumber, wholeNumberText, } from "@/components/openlmis/number-text" /** A program, or an orderable display category: anything picked by id and shown by name. */ export type NamedOption = { id: string name: string } /** How a product is offered in one program. */ export type ProgramLink = { programId: string /** The orderable display category, which groups the product on requisitions. */ categoryId: string | null /** False once the program stops offering it; left out, it counts as active. */ active?: boolean fullSupply: boolean dosesPerPatient: number | null displayOrder: number | null pricePerPack: number | null } const optionalWholeNumber = () => wholeNumberText( { invalid: "Enter a whole number, such as 1 or 12.", tooLarge: "Enter a number no larger than 2147483647.", }, { optional: true } ) export const programLinkFormSchema = z.object({ programId: z.string().nullable().refine(Boolean, "Choose a program."), fullSupply: z.boolean(), dosesPerPatient: optionalWholeNumber(), categoryId: z .string() .nullable() .refine(Boolean, "Choose a display category."), displayOrder: optionalWholeNumber(), pricePerPack: decimalText( { invalid: "Enter a price such as 20 or 20.75.", tooLarge: "Enter a smaller price.", tooPrecise: "Enter a price with no more than two decimals.", }, { optional: true, maxDecimals: 2 } ), }) export type ProgramLinkFormValues = z.input export const EMPTY_PROGRAM_LINK_FORM: ProgramLinkFormValues = { programId: null, fullSupply: false, dosesPerPatient: "", categoryId: null, displayOrder: "", pricePerPack: "", } export function toProgramLinkFormValues( link: ProgramLink ): ProgramLinkFormValues { return { programId: link.programId, fullSupply: link.fullSupply, dosesPerPatient: toNumberText(link.dosesPerPatient), categoryId: link.categoryId, displayOrder: toNumberText(link.displayOrder), pricePerPack: toNumberText(link.pricePerPack), } } export function toProgramLink( values: ProgramLinkFormValues, saved?: ProgramLink ): ProgramLink { return { programId: values.programId ?? "", active: saved?.active ?? true, fullSupply: values.fullSupply, dosesPerPatient: toOptionalWholeNumber(values.dosesPerPatient), categoryId: values.categoryId, displayOrder: toOptionalWholeNumber(values.displayOrder), pricePerPack: toDecimal(values.pricePerPack), } } /** The links with `link` added, or replacing the one for its program. */ export function withProgramLink( links: readonly ProgramLink[], link: ProgramLink ) { return links.some((item) => item.programId === link.programId) ? links.map((item) => (item.programId === link.programId ? link : item)) : [...links, link] } export const withoutProgramLink = ( links: readonly ProgramLink[], programId: string ) => links.filter((link) => link.programId !== programId) /** Programs the product is not offered in yet, by name. */ export function unlinkedPrograms( programs: readonly NamedOption[], links: readonly ProgramLink[] ) { const linked = new Set(links.map((link) => link.programId)) return ( programs .filter((program) => !linked.has(program.id)) // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh array; toSorted needs the ES2023 lib .sort((a, b) => a.name.localeCompare(b.name)) ) }7d:T22be,"use client" import { type ColumnVisibilityState, createColumnHelper, useTable, } from "@tanstack/react-table" import { EllipsisIcon, EyeIcon, LayersIcon, PencilIcon, PlusIcon, Trash2Icon, XIcon, } from "lucide-react" import { useMemo } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { DataTable, DataTableColumnHeader, DataTableEmpty, DataTableError, type DataTableFeatures, DataTableSkeleton, dataTableFeatures, } from "@/components/blocks/openlmis/data-table/data-table" import type { ResponsiveColumn } from "@/components/blocks/openlmis/data-table/responsive-columns" import { ListToolbar } from "@/components/blocks/openlmis/list-toolbar" import { type ColumnVisibility, ColumnViewOptions, } from "@/components/openlmis/column-view-options" import type { NamedOption, ProgramLink, } from "@/components/openlmis/product-editor-page/program-link-form" /** The columns a user may hide, and the room each needs before it shows by default. */ export const PROGRAM_LINK_HIDEABLE_COLUMNS = [ { id: "category", label: "Category", hideBelow: "xl" }, { id: "fullSupply", label: "Full Supply", hideBelow: "2xl" }, { id: "pricePerPack", label: "Price Per Pack", hideBelow: "lg" }, ] as const satisfies readonly (ResponsiveColumn & { label: string })[] type ProgramLinkRow = ProgramLink & { name: string; category?: string } type RowActions = { /** Without it, rows offer View instead of Edit and Remove. */ canEdit: boolean onEdit: (programId: string) => void onRemove: (programId: string) => void } const columnHelper = createColumnHelper() const price = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, }) const muted = - function createColumns(actions: RowActions) { return columnHelper.columns([ columnHelper.accessor("name", { header: ({ column }) => ( ), cell: ({ row }) => ( {row.original.name} {row.original.active === false && ( Inactive )} ), }), columnHelper.accessor("category", { header: ({ column }) => ( ), cell: ({ getValue }) => { const category = getValue() return category ? ( {category} ) : ( muted ) }, meta: { className: "@3xl/main:w-1/4" }, }), columnHelper.accessor("fullSupply", { header: ({ column }) => ( ), cell: ({ getValue }) => (getValue() ? "Yes" : "No"), meta: { className: "w-28" }, }), columnHelper.accessor("pricePerPack", { header: ({ column }) => ( ), cell: ({ getValue }) => { const value = getValue() return value == null ? ( muted ) : ( {price.format(value)} ) }, meta: { className: "w-32" }, }), columnHelper.display({ id: "actions", header: () => Actions, meta: { className: "w-16" }, cell: ({ row }) => ( ), }), ]) } function ProgramLinkActions({ link, actions, }: { link: ProgramLinkRow actions: RowActions }) { return (

} > {actions.canEdit ? ( <> actions.onEdit(link.programId)}> Edit actions.onRemove(link.programId)} variant="destructive" > Remove ) : ( actions.onEdit(link.programId)}> View )}

) } const NO_ROWS: ProgramLinkRow[] = [] const NO_OPTIONS: NamedOption[] = [] const getRowId = (row: ProgramLinkRow) => row.programId type ProductProgramLinksProps = RowActions & { /** The product's links; a skeleton shows until they are set. */ links: readonly ProgramLink[] | undefined /** Names the links' programs; a link to an unknown program shows its id. */ programs?: readonly NamedOption[] categories?: readonly NamedOption[] columnVisibility: ColumnVisibilityState /** Replaces the table, e.g. when the programs could not be loaded. */ error?: string onRetry?: () => void } /** The programs a product is offered in, by name, with Edit and Remove, or View when read only. */ export function ProductProgramLinks({ links, programs = NO_OPTIONS, categories = NO_OPTIONS, columnVisibility, error, onRetry, canEdit, onEdit, onRemove, }: ProductProgramLinksProps) { const columns = useMemo( () => createColumns({ canEdit, onEdit, onRemove }), [canEdit, onEdit, onRemove] ) const rows = useMemo(() => { if (!links) return NO_ROWS const names = new Map(programs.map((program) => [program.id, program.name])) const categoryNames = new Map( categories.map((category) => [category.id, category.name]) ) return ( links .map((link) => ({ ...link, name: names.get(link.programId) ?? link.programId, category: categoryNames.get(link.categoryId ?? ""), })) // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh array; toSorted needs the ES2023 lib .sort((a, b) => a.name.localeCompare(b.name)) ) }, [links, programs, categories]) const table = useTable({ features: dataTableFeatures, columns, data: rows, getRowId, enableSorting: false, state: { columnVisibility }, }) if (error) { return ( ) } if (!links) return return ( } title="Not In Any Program Yet" /> } table={table} /> ) } type ProgramLinksToolbarProps = { columnVisibility: ColumnVisibility onColumnVisibilityChange: (visibility: ColumnVisibility) => void onColumnReset?: () => void /** Left out when the user cannot edit the product. */ onAdd?: () => void } /** The View menu, then Add Program, which takes the whole row while the tab is narrow. */ export function ProgramLinksToolbar({ columnVisibility, onColumnVisibilityChange, onColumnReset, onAdd, }: ProgramLinksToolbarProps) { return (

{onAdd && (

)} ) }7e:Tda7,"use client" import { AlertCircleIcon, Trash2Icon } from "lucide-react" import { useRef, useState } from "react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { Button } from "@/components/ui/button" import { Spinner } from "@/components/ui/spinner" import type { NamedOption, ProgramLink, } from "@/components/openlmis/product-editor-page/program-link-form" import { useDialogTarget } from "@/components/openlmis/form-dialog/use-dialog-target" type RemoveProgramLinkDialogProps = { /** The program to remove; the dialog is open while it is set. */ programId: string | undefined /** The product's links; a program not among them shows as no longer linked. */ links: readonly ProgramLink[] programs: readonly NamedOption[] productName: string onConfirm: (programId: string) => void /** Locks the dialog and spins Remove while the save runs. */ pending?: boolean /** Why the removal failed; the dialog stays open to try again. */ error?: string onClose: () => void } export function RemoveProgramLinkDialog({ programId, links, programs, productName, onConfirm, pending = false, error, onClose, }: RemoveProgramLinkDialogProps) { const { shown, dialogProps } = useDialogTarget(programId, onClose) const cancelRef = useRef(null) const linked = links.some((link) => link.programId === shown) // Whether it was linked as the dialog opened, so the removal does not turn it into Not Found while it closes. const [opened, setOpened] = useState<{ id: string; linked: boolean }>() if (shown !== undefined && opened?.id !== shown) setOpened({ id: shown, linked }) const found = opened && opened.id === shown ? opened.linked : linked const programName = programs.find((program) => program.id === shown)?.name ?? shown return ( {found ? `Remove ${programName}?` : "Program Not Found"} {found ? `${productName} will no longer be offered in ${programName}.` : "This program is no longer linked to the product."} {error && ( Could Not Remove Program {error} )} {found ? "Cancel" : "Close"} {found && ( )} ) }63:["$","$L6d",null,{"files":[{"path":"registry/templates/openlmis/product-editor-page/components/facility-approved-products/facility-approved-products.tsx","content":"$6e","type":"registry:component","target":"components/openlmis/product-editor-page/facility-approved-products.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/facility-approved-products/remove-approval-dialog.tsx","content":"$6f","type":"registry:component","target":"components/openlmis/product-editor-page/remove-approval-dialog.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/kit-products-dialog/kit-products-dialog.tsx","content":"$70","type":"registry:component","target":"components/openlmis/product-editor-page/kit-products-dialog.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/mock-product.ts","content":"$71","type":"registry:lib","target":"components/openlmis/product-editor-page/mock-product.ts"},{"path":"registry/templates/openlmis/product-editor-page/components/product-approval-dialog/approval-form.ts","content":"$72","type":"registry:lib","target":"components/openlmis/product-editor-page/approval-form.ts"},{"path":"registry/templates/openlmis/product-editor-page/components/product-approval-dialog/product-approval-dialog.tsx","content":"$73","type":"registry:component","target":"components/openlmis/product-editor-page/product-approval-dialog.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-editor-page.tsx","content":"$74","type":"registry:component","target":"components/openlmis/product-editor-page/product-editor-page.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-form-dialog/product-form-dialog.tsx","content":"$75","type":"registry:component","target":"components/openlmis/product-editor-page/product-form-dialog.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-general-form/product-form-fields.tsx","content":"$76","type":"registry:component","target":"components/openlmis/product-editor-page/product-form-fields.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-general-form/product-form.ts","content":"$77","type":"registry:lib","target":"components/openlmis/product-editor-page/product-form.ts"},{"path":"registry/templates/openlmis/product-editor-page/components/product-general-form/product-general-form.tsx","content":"$78","type":"registry:component","target":"components/openlmis/product-editor-page/product-general-form.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-kit-unpack-list/kit-form.ts","content":"$79","type":"registry:lib","target":"components/openlmis/product-editor-page/kit-form.ts"},{"path":"registry/templates/openlmis/product-editor-page/components/product-kit-unpack-list/product-kit-unpack-list.tsx","content":"$7a","type":"registry:component","target":"components/openlmis/product-editor-page/product-kit-unpack-list.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-program-link-dialog/product-program-link-dialog.tsx","content":"$7b","type":"registry:component","target":"components/openlmis/product-editor-page/product-program-link-dialog.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-program-link-dialog/program-link-form.ts","content":"$7c","type":"registry:lib","target":"components/openlmis/product-editor-page/program-link-form.ts"},{"path":"registry/templates/openlmis/product-editor-page/components/product-program-links/product-program-links.tsx","content":"$7d","type":"registry:component","target":"components/openlmis/product-editor-page/product-program-links.tsx"},{"path":"registry/templates/openlmis/product-editor-page/components/product-program-links/remove-program-link-dialog.tsx","content":"$7e","type":"registry:component","target":"components/openlmis/product-editor-page/remove-program-link-dialog.tsx"},{"path":"registry/templates/openlmis/product-editor-page/page.tsx","content":"import { ProductEditorPage } from \"@/components/openlmis/product-editor-page/product-editor-page\"\n\n// A Next.js App Router route; in any other React app, render ProductEditorPage from your own route.\nexport default function Page() {\n return \n}","type":"registry:page","target":"app/product-editor-page/page.tsx"}],"className":"h-[70svh] min-h-80"}]