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","badge","button","dropdown-menu","field","skeleton","spinner","table","tabs","utils","https://registry.soldevelo.com/r/openlmis-callout.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-page-breadcrumbs.json","https://registry.soldevelo.com/r/openlmis-password-requirements.json","https://registry.soldevelo.com/r/openlmis-role-assignments.json","https://registry.soldevelo.com/r/openlmis-settings-list.json","https://registry.soldevelo.com/r/openlmis-status-badge.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:T10db,"use client" import { revalidateLogic } from "@tanstack/react-form" import { type ReactNode, useId, useMemo } 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 { PasswordRequirements } from "@/components/openlmis/password-requirements/password-requirements" import type { PasswordOwner } from "@/components/openlmis/password-requirements/password-rules" import { newPasswordSchema } from "@/components/openlmis/password-requirements/password-schema" // Re-exported so existing imports from this block keep working. export { newPasswordSchema } type ChangePasswordDialogProps = { open: boolean /** Whose password it is; its username also lets a password manager file the new one. */ user: PasswordOwner /** Called with the new password; change it, then close, e.g. by signing out. */ onSubmit: (password: string) => void /** Keeps the dialog open and shows a spinner while the password is changed. */ pending?: boolean /** Shown above the fields, e.g. why the change was refused. */ error?: ReactNode onClose: () => void } export function ChangePasswordDialog({ open, user, onSubmit, pending = false, error, onClose, }: ChangePasswordDialogProps) { const { shown, dialogProps } = useDialogTarget( open ? true : undefined, onClose ) return ( {shown && ( )} ) } function ChangePasswordForm({ user, onSubmit, pending, error, }: Pick & { pending: boolean }) { const requirementsId = useId() const schema = useMemo(() => newPasswordSchema(user), [user]) const form = useAppForm({ defaultValues: { password: "", confirm: "" }, // 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(value.password), }) return ( Change Password After changing it you will be signed out, so you can sign in with the new password. {error && ( )} {/* Lets password managers file the new password under the right account. */} {(field) => (

)} {(field) => ( )} Change Password ) }6f:T10a1,// A mock signed-in user, their roles and notification settings, so the page runs with no backend. import type { Profile } from "@/components/openlmis/profile-page/profile" import type { DigestConfiguration, DigestSubscription, } from "@/components/openlmis/profile-page/digest" import type { Facility, Program, Role, RoleAssignment, SupervisoryNode, } from "@/components/blocks/openlmis/role-assignments/role-assignments" export const MOCK_PROFILE: Profile = { user: { id: "user-divo1", username: "divo1", firstName: "Grace", lastName: "Banda", jobTitle: "District Immunization Officer", homeFacility: "HC02 - Comfort Health Clinic", }, contact: { email: "grace.banda@example.org", emailVerified: true, phoneNumber: "+265 999 123 456", allowNotify: true, }, } export const MOCK_HOME_FACILITY_ID = "facility-hc02" export const MOCK_ROLES: Role[] = [ { id: "role-storeroom", name: "Storeroom Manager", description: "Creates and submits requisitions for a facility.", rights: [ { name: "REQUISITION_CREATE", type: "SUPERVISION" }, { name: "REQUISITION_VIEW", type: "SUPERVISION" }, { name: "REQUISITION_DELETE", type: "SUPERVISION" }, ], }, { id: "role-approver", name: "Program Supervisor", description: "Authorizes and approves requisitions under a node.", rights: [ { name: "REQUISITION_AUTHORIZE", type: "SUPERVISION" }, { name: "REQUISITION_APPROVE", type: "SUPERVISION" }, { name: "REQUISITION_VIEW", type: "SUPERVISION" }, ], }, { id: "role-warehouse", name: "Warehouse Manager", description: "Fulfills orders and records proofs of delivery.", rights: [ { name: "ORDERS_VIEW", type: "ORDER_FULFILLMENT" }, { name: "ORDERS_EDIT", type: "ORDER_FULFILLMENT" }, { name: "PODS_MANAGE", type: "ORDER_FULFILLMENT" }, ], }, { id: "role-reports", name: "Report Viewer", description: "Views reporting rate and stock reports.", rights: [{ name: "REPORTS_VIEW", type: "REPORTS" }], }, ] export const MOCK_PROGRAMS: Program[] = [ { id: "program-family", name: "Family Planning" }, { id: "program-epi", name: "EPI" }, { id: "program-essential", name: "Essential Meds" }, ] export const MOCK_FACILITIES: Facility[] = [ { id: "facility-hc02", code: "HC02", name: "Comfort Health Clinic" }, { id: "facility-dh01", code: "DH01", name: "Balaka District Hospital" }, { id: "facility-ww01", code: "WH01", name: "Ninitall Warehouse" }, { id: "facility-ww02", code: "WH02", name: "Balaka District Warehouse" }, ] export const MOCK_NODES: SupervisoryNode[] = [ { id: "node-fp-approval", name: "FP Approval Point", facility: { id: "facility-dh01" }, }, { id: "node-epi-southern", name: "EPI Southern Region", facility: { id: "facility-dh01" }, }, ] export const MOCK_ASSIGNMENTS: RoleAssignment[] = [ { roleId: "role-storeroom", programId: "program-family" }, { roleId: "role-storeroom", programId: "program-essential" }, { roleId: "role-approver", programId: "program-family", supervisoryNodeId: "node-fp-approval", }, { roleId: "role-approver", programId: "program-epi", supervisoryNodeId: "node-epi-southern", }, { roleId: "role-warehouse", warehouseId: "facility-ww01" }, { roleId: "role-warehouse", warehouseId: "facility-ww02" }, { roleId: "role-reports" }, ] export const MOCK_DIGEST_CONFIGURATIONS: DigestConfiguration[] = [ { id: "digest-action-required", tag: "requisition-actionRequired" }, { id: "digest-status-update", tag: "requisition-statusUpdate" }, { id: "digest-order-shipped", tag: "order-shipped" }, { id: "digest-low-stock", tag: "stockEvent-lowStock" }, ] export const MOCK_SUBSCRIPTIONS: DigestSubscription[] = [ { digestConfiguration: { id: "digest-action-required" }, preferredChannel: "EMAIL", useDigest: true, cronExpression: "0 0 8 * * 1", }, { digestConfiguration: { id: "digest-status-update" }, preferredChannel: "SMS", useDigest: false, }, { digestConfiguration: { id: "digest-order-shipped" }, preferredChannel: "EMAIL", useDigest: true, cronExpression: "0 0 7 * * *", }, ]70:T29bf,"use client" import { revalidateLogic, useStore } from "@tanstack/react-form" import { MailIcon } from "lucide-react" import { type ReactNode, useEffect, useId, useRef } from "react" import { Alert, AlertAction, AlertDescription, AlertTitle, } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { Spinner } from "@/components/ui/spinner" import { cn } from "@/lib/utils" import { FormDialogError } from "@/components/openlmis/form-dialog/form-dialog" import { useAppForm } from "@/components/openlmis/form-fields/form" import { FieldLabelText } from "@/components/openlmis/form-fields/form-fields" import { SettingsItem, SettingsList, SettingsRowFrame, } from "@/components/blocks/openlmis/settings-list" import { StatusBadge } from "@/components/openlmis/status-badge" import { type Profile, type ProfileFormValues, countProfileChanges, profileFormSchema, toProfileFormValues, } from "@/components/openlmis/profile-page/profile" import { type FormActionState as ProfileFormActions, FormActions as ProfileFormButtons, } from "@/components/openlmis/form-actions" type ProfileBasicInformationProps = { /** A skeleton of every row shows until it is set. */ profile: Profile | undefined /** Called with the values when something changed; save them, then pass the saved profile back. */ onSubmit: (values: ProfileFormValues, profile: Profile) => void /** Disables the buttons and shows a spinner while the profile is saved. */ pending?: boolean /** Shown above the rows, e.g. why the save failed. */ error?: ReactNode /** A new address waiting for its verification link to be opened. */ pendingEmail?: string | null /** Sends the verification link again; Resend Link is hidden without it. */ onResendEmail?: () => void resendPending?: boolean /** Tells the page how many fields have unsaved changes, e.g. to ask before leaving. */ onChangesChange?: (changes: number) => void onCancel?: () => void /** Places Cancel and Save; by default they sit in a row under the form. */ renderActions?: (actions: ProfileFormActions) => ReactNode } /** The user's own details as rows of settings: what an administrator set, then what they can edit. */ export function ProfileBasicInformation({ profile, ...props }: ProfileBasicInformationProps) { if (!profile) return return } function ProfileForm({ profile, onSubmit, pending = false, error, pendingEmail, onResendEmail, resendPending = false, onChangesChange, onCancel, renderActions, }: ProfileBasicInformationProps & { profile: Profile }) { const formId = useId() const { user, contact } = profile const emailVerified = contact?.emailVerified ?? false const savedEmail = contact?.email ?? "" const form = useAppForm({ defaultValues: toProfileFormValues(profile), // Quiet until the first submit, then each field re-checks as it is corrected. validationLogic: revalidateLogic({ mode: "submit", modeAfterSubmission: "change", }), validators: { onDynamic: profileFormSchema }, onSubmit: ({ value }) => onSubmit(value, profile), }) // Only whether anything changed, so typing re-renders this page, not every part of it. const changes = useStore(form.store, (state) => countProfileChanges(profile, state.values) ) const changed = changes > 0 const savedSignature = JSON.stringify([user.id, toProfileFormValues(profile)]) const lastSaved = useRef(savedSignature) // Equivalent props must not replace a draft when a parent renders again. useEffect(() => { if (lastSaved.current === savedSignature) return lastSaved.current = savedSignature form.reset(toProfileFormValues(profile)) }, [form, profile, savedSignature]) useEffect(() => { onChangesChange?.(changes) }, [changes, onChangesChange]) const actions: ProfileFormActions = { formId, changed, pending, cancel: () => { form.reset(toProfileFormValues(profile)) onCancel?.() }, } return ( <>

{ event.preventDefault() if (changed) void form.handleSubmit() }} > {error && ( )} {pendingEmail && ( Email Change Pending {pendingEmail} is waiting to be verified. Open the link sent to it to start using it. {onResendEmail && ( )} )} {user.username} {user.jobTitle || } {user.homeFacility || } {(field) => ( )} {(field) => ( )} {(field) => { const typed = field.state.value.trim() // The saved address shows whether it is verified; a new one, that it waits for its link. const isSaved = typed !== "" && typed === savedEmail return ( } description={ typed && !isSaved && "A link to confirm this address will be sent to it. Your current address stays in use until then." } dir="ltr" label="Email" layout="row" type="email" /> ) }} {(field) => ( )} state.values.email.trim() !== ""} > {(hasEmail) => ( {(field) => ( )} )} {renderActions ? ( renderActions(actions) ) : (

)} ) } function EmailStatus({ verified }: { verified: boolean }) { return verified ? ( Verified ) : ( Not Verified ) } function None() { return None } const SKELETON_INPUTS = [ { label: "First Name", required: true }, { label: "Last Name", required: true }, { label: "Email" }, { label: "Phone Number" }, ] /** The rows while the profile loads: every row under its real label, with placeholders for the values. */ export function ProfileBasicInformationSkeleton() { return (

{SKELETON_INPUTS.map(({ label, required }) => ( } value="control" > ))} } label={Allow Notifications} > {/* A plain element, since Skeleton owns its corner radius and a switch is round. */}

) } /** A bar inside one line of small text, so it takes the room the text will. */ function SkeletonText({ className }: { className: string }) { return ( ) }71:Tcc3,import { z } from "zod" /** The signed-in user as the profile shows them; an administrator sets the read-only parts. */ export type ProfileUser = { id: string username: string firstName: string lastName: string jobTitle?: string | null /** The home facility as display text, e.g. "HC01 - Balaka District Hospital". */ homeFacility?: string | null } export type ProfileContact = { email: string | null emailVerified: boolean phoneNumber: string | null allowNotify: boolean } /** The user and their contact details; a user without contact details has `null`. */ export type Profile = { user: ProfileUser contact: ProfileContact | null } const requiredText = (message: string) => z.string().trim().min(1, message) export const profileFormSchema = z.object({ firstName: requiredText("Enter a first name."), lastName: requiredText("Enter a last name."), email: z .string() .trim() .refine( (email) => email === "" || z.email().safeParse(email).success, "Enter a valid email address." ), phoneNumber: z.string(), allowNotify: z.boolean(), }) export type ProfileFormValues = z.input export function toProfileFormValues({ user, contact, }: Profile): ProfileFormValues { return { firstName: user.firstName, lastName: user.lastName, email: contact?.email ?? "", phoneNumber: contact?.phoneNumber ?? "", allowNotify: contact?.allowNotify ?? false, } } const orNull = (value: string) => value.trim() || null /** Which parts of the profile the form changed, so a save sends only those. */ export function profileChanges( { user, contact }: Profile, values: ProfileFormValues ) { const email = orNull(values.email) !== (contact?.email ?? null) return { user: values.firstName.trim() !== user.firstName || values.lastName.trim() !== user.lastName, contact: email || orNull(values.phoneNumber) !== (contact?.phoneNumber ?? null) || values.allowNotify !== (contact?.allowNotify ?? false), email, } } /** The profile as a successful save leaves it; a new email waits for its link, so the old one stays. */ export function applySaved( profile: Profile, values: ProfileFormValues ): Profile { const email = orNull(values.email) return { user: { ...profile.user, firstName: values.firstName.trim(), lastName: values.lastName.trim(), }, contact: { email: profile.contact?.email ?? null, emailVerified: profile.contact?.emailVerified ?? false, phoneNumber: orNull(values.phoneNumber), // Nothing can be sent without an address, as the legacy UI has it. allowNotify: values.allowNotify && email !== null, }, } } /** How many fields differ from the saved profile, e.g. for a discard prompt. */ export function countProfileChanges( profile: Profile, values: ProfileFormValues ): number { const saved = toProfileFormValues(profile) const keys = Object.keys(saved) as (keyof ProfileFormValues)[] return keys.filter((key) => { const before = saved[key] const after = values[key] return typeof before === "string" && typeof after === "string" ? before.trim() !== after.trim() : before !== after }).length }72:T14e2,import { z } from "zod" export const NOTIFICATION_CHANNELS = ["EMAIL", "SMS"] as const export type NotificationChannel = (typeof NOTIFICATION_CHANNELS)[number] /** A kind of notification that can be gathered into a digest, e.g. `requisition-actionRequired`. */ export type DigestConfiguration = { id: string tag: string } export type DigestSubscription = { digestConfiguration: { id: string } preferredChannel: NotificationChannel useDigest: boolean cronExpression?: string | null } export const FREQUENCIES = ["daily", "weekly", "custom"] as const export type Frequency = (typeof FREQUENCIES)[number] export const FREQUENCY_LABELS: Record = { daily: "Daily", weekly: "Weekly", custom: "Custom", } /** A schedule as the form edits it; `weekday` is Sunday 0 to Saturday 6, as in cron. */ const scheduleSchema = z.object({ frequency: z.enum(FREQUENCIES), weekday: z.string(), time: z.string(), cron: z.string(), }) const rowFields = z.object({ configurationId: z.string(), tag: z.string(), channel: z.enum(NOTIFICATION_CHANNELS), useDigest: z.boolean(), schedule: scheduleSchema, }) type Schedule = z.infer export type DigestRow = z.infer export const WEEKDAYS = ["0", "1", "2", "3", "4", "5", "6"] as const // Seconds, minutes, hours, day of month, month, day of week: the Spring cron OpenLMIS reads. const SIMPLE_CRON = /^0 (\d{1,2}) (\d{1,2}) \* \* (\*|[0-6])$/ const CRON_FIELD = /^[\dA-Za-z*?/,#-]+$/ const TIME = /^(\d{2}):(\d{2})$/ const pad = (value: number) => String(value).padStart(2, "0") /** Daily or weekly at a time when the expression is that simple, otherwise custom. */ export function parseSchedule(cron: string | null | undefined): Schedule { if (!cron) return { frequency: "daily", weekday: "0", time: "08:00", cron: "" } const [, minute, hour, weekday] = SIMPLE_CRON.exec(cron) ?? [] if ( !minute || !hour || !weekday || Number(minute) > 59 || Number(hour) > 23 ) { return { frequency: "custom", weekday: "0", time: "08:00", cron } } return { frequency: weekday === "*" ? "daily" : "weekly", weekday: weekday === "*" ? "0" : weekday, time: `${pad(Number(hour))}:${pad(Number(minute))}`, cron, } } export function toCron({ frequency, weekday, time, cron }: Schedule): string { if (frequency === "custom") return cron.trim() const [, hour = "0", minute = "0"] = TIME.exec(time) ?? [] return `0 ${Number(minute)} ${Number(hour)} * * ${frequency === "daily" ? "*" : weekday}` } /** Six fields of cron characters; the server checks the values themselves. */ export function isValidCron(cron: string): boolean { const fields = cron.trim().split(/\s+/) return fields.length === 6 && fields.every((field) => CRON_FIELD.test(field)) } /** `requisition-actionRequired` as "Requisition - Action Required". */ export function tagLabel(tag: string): string { return tag .split("-") .map((part) => part .replace(/([a-z])([A-Z])/g, "$1 $2") .replace(/(^|\s)\S/g, (letter) => letter.toUpperCase()) ) .join(" - ") } /** One row per configuration; one the user never subscribed to is email without a digest. */ export function toDigestRows( configurations: readonly DigestConfiguration[], subscriptions: readonly DigestSubscription[] ): DigestRow[] { const byId = new Map( subscriptions.map((item) => [item.digestConfiguration.id, item]) ) return configurations.map(({ id, tag }) => { const subscription = byId.get(id) return { configurationId: id, tag, channel: subscription?.preferredChannel ?? "EMAIL", useDigest: subscription?.useDigest ?? false, schedule: parseSchedule(subscription?.cronExpression), } }) } export function toSubscriptions( rows: readonly DigestRow[] ): DigestSubscription[] { return rows.map(({ configurationId, channel, useDigest, schedule }) => ({ digestConfiguration: { id: configurationId }, preferredChannel: channel, useDigest, ...(useDigest && { cronExpression: toCron(schedule) }), })) } /** How many notifications would save differently from how they were loaded. */ export function countDigestChanges( saved: readonly DigestRow[], rows: readonly DigestRow[] ): number { const before = toSubscriptions(saved).map((item) => JSON.stringify(item)) return toSubscriptions(rows).filter( (item, index) => JSON.stringify(item) !== before[index] ).length } const rowSchema = rowFields.superRefine( ({ useDigest, channel, schedule }, context) => { if (!useDigest) return if (channel !== "EMAIL") { context.addIssue({ code: "custom", path: ["channel"], message: "Digests are sent by email only.", }) } if (schedule.frequency === "custom") { if (!isValidCron(schedule.cron)) { context.addIssue({ code: "custom", path: ["schedule", "cron"], message: "Enter six fields: seconds, minutes, hours, day, month and weekday.", }) } } else if (!TIME.test(schedule.time)) { context.addIssue({ code: "custom", path: ["schedule", "time"], message: "Enter a time.", }) } } ) export const digestFormSchema = z.object({ rows: z.array(rowSchema) })73:T383a,"use client" import { revalidateLogic, useStore } from "@tanstack/react-form" import { BellOffIcon, MailXIcon } from "lucide-react" import { type ReactNode, useEffect, useId, useMemo, useRef } from "react" import { Skeleton } from "@/components/ui/skeleton" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { DataTableCard, DataTableEmpty, DataTableError, } from "@/components/blocks/openlmis/data-table/data-table" import { type FormActionState as ProfileFormActions, FormActions as ProfileFormButtons, } from "@/components/openlmis/form-actions" import { FormDialogError } from "@/components/openlmis/form-dialog/form-dialog" import { useAppForm } from "@/components/openlmis/form-fields/form" import { countDigestChanges, type DigestConfiguration, type DigestRow, type DigestSubscription, digestFormSchema, FREQUENCIES, FREQUENCY_LABELS, type Frequency, tagLabel, toCron, toDigestRows, toSubscriptions, WEEKDAYS, } from "@/components/openlmis/profile-page/digest" // Isolated left to right with no-break spaces, so it reads the same, on one line, inside right-to-left text. const CRON_EXAMPLE = "⁦0 0 8 * * MON-FRI⁩" // Roomier than a list's rows, since every row holds controls. const TABLE_CLASSES = "[&_td]:px-4 [&_td]:py-3 [&_td]:align-top [&_th]:h-10 [&_th]:px-4" const FREQUENCY_ITEMS = FREQUENCIES.map((value) => ({ value, label: FREQUENCY_LABELS[value], })) const channels = (useDigest: boolean) => [ { value: "EMAIL", label: "Email" }, { value: "SMS", label: "SMS", disabled: useDigest }, ] type ProfileNotificationSettingsProps = { /** Every kind of notification that can be gathered into a digest; a skeleton shows until it is set. */ configurations: readonly DigestConfiguration[] | undefined /** What the user chose so far; a skeleton shows until it is set. */ subscriptions: readonly DigestSubscription[] | undefined /** Subscriptions belong to the contact details, so a user without them has none to set. */ hasContactDetails?: boolean /** The settings could not be loaded; shows an error with Try Again. */ failed?: boolean onRetry?: () => void /** Called with every subscription when something changed; save them, then pass them back. */ onSubmit: (subscriptions: DigestSubscription[]) => void pending?: boolean /** Shown above the table, e.g. why the save failed. */ error?: ReactNode /** The language weekdays are named in. */ locale?: string /** Tells the page how many notifications have unsaved changes, e.g. to ask before leaving. */ onChangesChange?: (changes: number) => void onCancel?: () => void /** Places Cancel and Save Settings; by default they sit in a row under the table. */ renderActions?: (actions: ProfileFormActions) => ReactNode } /** How each notification reaches the user: its channel, and whether it is gathered into a scheduled digest. */ export function ProfileNotificationSettings({ configurations, subscriptions, hasContactDetails = true, failed = false, onRetry, ...props }: ProfileNotificationSettingsProps) { if (!hasContactDetails) { return ( } title="No Contact Details Yet" /> ) } if (failed) { return ( ) } if (!configurations || !subscriptions) { return } return ( ) } type DigestFormProps = Omit< ProfileNotificationSettingsProps, "configurations" | "subscriptions" | "hasContactDetails" | "failed" > & { configurations: readonly DigestConfiguration[] subscriptions: readonly DigestSubscription[] } function DigestForm({ configurations, subscriptions, onSubmit, pending = false, error, locale = "en-US", onChangesChange, onCancel, renderActions, }: DigestFormProps) { const formId = useId() const savedRows = useMemo( () => toDigestRows(configurations, subscriptions), [configurations, subscriptions] ) const form = useAppForm({ defaultValues: { rows: savedRows }, // Quiet until the first submit, then each field re-checks as it is corrected. validationLogic: revalidateLogic({ mode: "submit", modeAfterSubmission: "change", }), validators: { onDynamic: digestFormSchema }, onSubmit: ({ value }) => onSubmit(toSubscriptions(value.rows)), // A refused cell may be scrolled out of the table, so the first one takes focus. onSubmitInvalid: () => requestAnimationFrame(() => document .getElementById(formId) ?.querySelector('[aria-invalid="true"]') ?.focus() ), }) const rows = useStore(form.store, (state) => state.values.rows) const changes = countDigestChanges(savedRows, rows) const savedSignature = JSON.stringify(savedRows) const lastSaved = useRef(savedSignature) // Equivalent rows must not replace a draft when a parent renders again. useEffect(() => { if (lastSaved.current === savedSignature) return lastSaved.current = savedSignature form.reset({ rows: savedRows }) }, [form, savedRows, savedSignature]) useEffect(() => { onChangesChange?.(changes) }, [changes, onChangesChange]) const weekdays = useMemo(() => { const format = new Intl.DateTimeFormat(locale, { weekday: "long" }) // 7 January 2024 was a Sunday, day 0 in cron. return WEEKDAYS.map((day) => ({ value: day, label: format.format(new Date(2024, 0, 7 + Number(day))), })) }, [locale]) // Inline, so the fields keep the type the form infers. const renderRow = (row: DigestRow, index: number) => { const label = tagLabel(row.tag) // Every row has the same controls, so each is named after its notification too. const named = (control: string) => `${label} ${control}` return ( {label}

{(field) => ( )}

{ if ( value && form.getFieldValue(`rows[${index}].channel`) !== "EMAIL" ) form.setFieldValue(`rows[${index}].channel`, "EMAIL") }, }} name={`rows[${index}].useDigest`} > {(field) => ( )}

{row.useDigest ? (

{ // A custom schedule starts from the simple one it replaces. if ( value === "custom" && row.schedule.frequency !== "custom" ) form.setFieldValue( `rows[${index}].schedule.cron`, toCron(row.schedule) ) }, }} name={`rows[${index}].schedule.frequency`} > {(field) => ( )}

{row.schedule.frequency === "weekly" && (

{(field) => ( )}

)} {row.schedule.frequency === "custom" ? (

{(field) => ( )}

) : (

{(field) => ( )}

)}

) : ( - )} ) } if (rows.length === 0) { return ( } title="No Notifications To Set Up" /> ) } const actions: ProfileFormActions = { formId, changed: changes > 0, pending, cancel: () => { form.reset({ rows: savedRows }) onCancel?.() }, } return ( <>

{ event.preventDefault() if (changes > 0) void form.handleSubmit() }} > {error && ( )} Notification Channel Use Digest Schedule {rows.map((row, index) => renderRow(row, index))}

{rows.some((row) => row.useDigest) && (

{rows.some( (row) => row.useDigest && row.schedule.frequency === "custom" ) ? `Digests are sent by email only. A custom schedule has six fields: seconds, minutes, hours, day, month and weekday, e.g. ${CRON_EXAMPLE}.` : "Digests are sent by email only."}

)} {renderActions ? ( renderActions(actions) ) : (

)} ) } const SKELETON_ROWS = ["a", "b", "c", "d"] /** The table while the settings load: its real columns, with placeholder rows of controls. */ export function ProfileNotificationSettingsSkeleton() { return (

Notification Channel Use Digest Schedule {SKELETON_ROWS.map((row) => ( {/* A plain element, since Skeleton owns its corner radius and a switch is round. */} ))}

) }74:T2aa7,"use client" import { KeyRoundIcon, UserRoundIcon } from "lucide-react" import { useMemo, useState } from "react" import { createPortal } from "react-dom" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ChangePasswordDialog } from "@/components/openlmis/profile-page/change-password-dialog" import { applySaved, profileChanges } from "@/components/openlmis/profile-page/profile" import { ProfileBasicInformation } from "@/components/openlmis/profile-page/profile-basic-information" import { type FormActionState as ProfileFormActions, FormActions as ProfileFormButtons, } from "@/components/openlmis/form-actions" import { ProfileNotificationSettings } from "@/components/openlmis/profile-page/profile-notification-settings" import { assignmentKey, byId, countByType, ROLE_TABS, type RoleTab, toRoleRows, } from "@/components/blocks/openlmis/role-assignments/role-assignments" import { RoleAssignmentsTable } from "@/components/blocks/openlmis/role-assignments/role-assignments-table" import { Workspace, WorkspaceActions, WorkspaceContent, WorkspaceDescription, WorkspaceFooter, WorkspaceHeader, WorkspaceHeading, WorkspaceIcon, WorkspaceLayout, WorkspaceTitle, } from "@/components/blocks/openlmis/workspace" import { Callout } from "@/components/openlmis/callout" import { DiscardChangesDialog } from "@/components/openlmis/discard-changes-dialog" import { PageBreadcrumbs } from "@/components/openlmis/page-breadcrumbs" import { WorkspaceTabs, WorkspaceTabsContent, WorkspaceTabsList, WorkspaceTabsTrigger, } from "@/components/openlmis/workspace-tabs" import { MOCK_ASSIGNMENTS, MOCK_DIGEST_CONFIGURATIONS, MOCK_FACILITIES, MOCK_HOME_FACILITY_ID, MOCK_NODES, MOCK_PROFILE, MOCK_PROGRAMS, MOCK_ROLES, MOCK_SUBSCRIPTIONS, } from "@/components/openlmis/profile-page/mock-profile" const PROFILE_TABS = [ { value: "basic", label: "Basic Information" }, { value: "roles", label: "Role Assignments" }, { value: "notifications", label: "Notification Settings" }, ] as const type ProfileTab = (typeof PROFILE_TABS)[number]["value"] /** Leaving the open tab, or signing out after a new password, both lose unsaved changes. */ type Leaving = { kind: "tab"; tab: ProfileTab } | { kind: "sign-out" } type Notice = { title: string; description: string } /** The signed-in user's profile screen; mount it from any route, e.g. the `page.tsx` this template ships. */ export function ProfilePage() { const [profile, setProfile] = useState(MOCK_PROFILE) const [profileRevision, setProfileRevision] = useState(0) const [subscriptions, setSubscriptions] = useState(MOCK_SUBSCRIPTIONS) const [pendingEmail, setPendingEmail] = useState(null) const [tab, setTab] = useState("basic") const [changes, setChanges] = useState(0) const [leaving, setLeaving] = useState() const [passwordOpen, setPasswordOpen] = useState(false) const [notice, setNotice] = useState() // The footer's buttons belong to the open tab's form, so the tab renders them into it. const [footer, setFooter] = useState(null) const { user } = profile const openTab = (next: ProfileTab) => { // Inactive tabs unmount, so switching throws the open form's changes away. setChanges(0) setNotice(undefined) setTab(next) } const signOut = () => { setProfileRevision((revision) => revision + 1) setChanges(0) setPasswordOpen(false) setNotice({ title: "Password Changed", description: "Sign in with your new password.", }) } const toFooter = (saveLabel: string) => (actions: ProfileFormActions) => footer && createPortal( , footer ) return ( Profile Signed in as {user.username}. {notice && ( {notice.description} )} { const next = value as ProfileTab if (changes > 0) setLeaving({ kind: "tab", tab: next }) else openTab(next) }} value={tab} > {PROFILE_TABS.map((item) => ( {item.label} ))} setNotice(undefined)} onChangesChange={setChanges} onResendEmail={() => setNotice({ title: "Verification Link Sent", description: `A new verification link is on its way to ${pendingEmail}.`, }) } onSubmit={(values, current) => { const newEmail = profileChanges(current, values).email ? values.email.trim() : "" if (newEmail) setPendingEmail(newEmail) setProfile(applySaved(current, values)) setProfileRevision((revision) => revision + 1) setNotice({ title: "Profile Saved", description: newEmail ? `Open the link sent to ${newEmail} to start using it.` : "Your profile is up to date.", }) }} pendingEmail={pendingEmail} profile={profile} renderActions={toFooter("Save Profile")} /> setNotice(undefined)} configurations={MOCK_DIGEST_CONFIGURATIONS} hasContactDetails={profile.contact !== null} onChangesChange={setChanges} onSubmit={(next) => { setSubscriptions(next) setNotice({ title: "Notification Settings Saved", description: "Your notifications will follow the new settings.", }) }} renderActions={toFooter("Save Settings")} subscriptions={subscriptions} /> {tab !== "roles" && (

)} setPasswordOpen(false)} onSubmit={() => { // A new password signs the user out, so unsaved changes on the page are asked about first. if (changes > 0) setLeaving({ kind: "sign-out" }) else signOut() }} open={passwordOpen} user={user} /> { if (leaving?.kind === "tab") openTab(leaving.tab) else signOut() setLeaving(undefined) }} onKeepEditing={() => setLeaving(undefined)} open={leaving !== undefined} subject="your profile" /> ) } const ALL_READY = { nodes: "ready", facilities: "ready" } as const /** What the user may do, by role type, read only: an administrator assigns roles. */ function ProfileRoles() { const [roleTab, setRoleTab] = useState(ROLE_TABS[0]) const lookups = useMemo( () => ({ roles: byId(MOCK_ROLES), programs: byId(MOCK_PROGRAMS), nodes: byId(MOCK_NODES), facilities: byId(MOCK_FACILITIES), }), [] ) const savedKeys = useMemo( () => new Set(MOCK_ASSIGNMENTS.map(assignmentKey)), [] ) const counts = useMemo( () => countByType(MOCK_ASSIGNMENTS, lookups.roles), [lookups.roles] ) const rows = useMemo( () => toRoleRows(MOCK_ASSIGNMENTS, roleTab.type, { lookups, savedKeys, homeFacilityId: MOCK_HOME_FACILITY_ID, }), [roleTab.type, lookups, savedKeys] ) return ( setRoleTab(ROLE_TABS.find((item) => item.id === value) ?? ROLE_TABS[0]) } value={roleTab.id} > {/* A size container, so the tabs go two by two when four do not fit in a row. */}

{ROLE_TABS.map((item) => ( {item.label} {counts[item.type]} ))}

{ROLE_TABS.map((item) => ( {item.id === roleTab.id && ( )} ))} ) }63:["$","$L6d",null,{"files":[{"path":"registry/templates/openlmis/profile-page/components/change-password-dialog/change-password-dialog.tsx","content":"$6e","type":"registry:component","target":"components/openlmis/profile-page/change-password-dialog.tsx"},{"path":"registry/templates/openlmis/profile-page/components/mock-profile.ts","content":"$6f","type":"registry:lib","target":"components/openlmis/profile-page/mock-profile.ts"},{"path":"registry/templates/openlmis/profile-page/components/profile-basic-information/profile-basic-information.tsx","content":"$70","type":"registry:component","target":"components/openlmis/profile-page/profile-basic-information.tsx"},{"path":"registry/templates/openlmis/profile-page/components/profile-basic-information/profile.ts","content":"$71","type":"registry:lib","target":"components/openlmis/profile-page/profile.ts"},{"path":"registry/templates/openlmis/profile-page/components/profile-notification-settings/digest.ts","content":"$72","type":"registry:lib","target":"components/openlmis/profile-page/digest.ts"},{"path":"registry/templates/openlmis/profile-page/components/profile-notification-settings/profile-notification-settings.tsx","content":"$73","type":"registry:component","target":"components/openlmis/profile-page/profile-notification-settings.tsx"},{"path":"registry/templates/openlmis/profile-page/components/profile-page.tsx","content":"$74","type":"registry:component","target":"components/openlmis/profile-page/profile-page.tsx"},{"path":"registry/templates/openlmis/profile-page/page.tsx","content":"import { ProfilePage } from \"@/components/openlmis/profile-page/profile-page\"\n\n// A Next.js App Router route; in any other React app, render ProfilePage from your own route.\nexport default function Page() {\n return \n}","type":"registry:page","target":"app/profile-page/page.tsx"}],"className":"h-[70svh] min-h-80"}]