mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +00:00
saridsa2
00c28e642b
Ramaiah's product team owns their setup; end-user admins shouldn't see a dead-end Settings nav + Resume Setup banner. Flag is read from /api/config/ui-flags at app boot. - use-ui-flags: module-scoped cache + useUiFlags hook + getUiFlags helper for non-component callers - main.tsx: /setup redirects when managed; RequireSelfServeSetup guard blocks /settings/* - resume-setup-banner: suppressed when managed - login.tsx: skip first-run /setup redirect when managed - settings.tsx: remove orphan popup-modal scaffolding left over from an earlier 'contact product team' approach - section-card: support onClick-or-href (kept for future use)
86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import { Link } from 'react-router';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faArrowRight, faCircleCheck, faCircleExclamation } from '@fortawesome/pro-duotone-svg-icons';
|
|
import { cx } from '@/utils/cx';
|
|
|
|
type SectionStatus = 'complete' | 'incomplete' | 'unknown';
|
|
|
|
type SectionCardProps = {
|
|
title: string;
|
|
description: string;
|
|
icon: any;
|
|
iconColor?: string;
|
|
// Either navigate (href) OR intercept the click (onClick). When onClick
|
|
// is provided, href is ignored and the card renders as a button. Used
|
|
// while self-serve setup is disabled — all clicks go through a
|
|
// "contact product team" modal in settings.tsx.
|
|
href?: string;
|
|
onClick?: () => void;
|
|
status?: SectionStatus;
|
|
};
|
|
|
|
// Settings hub card. Each card represents one setup-able section (Branding,
|
|
// Clinics, Doctors, Team, Telephony, AI, Widget, Rules) and either links to
|
|
// its dedicated page or triggers a parent-owned callback.
|
|
export const SectionCard = ({
|
|
title,
|
|
description,
|
|
icon,
|
|
iconColor = 'text-brand-primary',
|
|
href,
|
|
onClick,
|
|
status = 'unknown',
|
|
}: SectionCardProps) => {
|
|
const className = cx(
|
|
'group block w-full text-left rounded-xl border border-secondary bg-primary p-5 shadow-xs transition hover:border-brand hover:shadow-md',
|
|
);
|
|
const body = (
|
|
<>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-secondary">
|
|
<FontAwesomeIcon icon={icon} className={cx('size-5', iconColor)} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h3 className="text-sm font-semibold text-primary">{title}</h3>
|
|
<p className="mt-1 text-xs text-tertiary">{description}</p>
|
|
</div>
|
|
</div>
|
|
<FontAwesomeIcon
|
|
icon={faArrowRight}
|
|
className="size-4 shrink-0 text-quaternary transition group-hover:translate-x-0.5 group-hover:text-brand-primary"
|
|
/>
|
|
</div>
|
|
|
|
{status !== 'unknown' && (
|
|
<div className="mt-4 flex items-center gap-2 border-t border-secondary pt-3">
|
|
{status === 'complete' ? (
|
|
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-success-primary">
|
|
<FontAwesomeIcon icon={faCircleCheck} className="size-3.5" />
|
|
Configured
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-warning-primary">
|
|
<FontAwesomeIcon icon={faCircleExclamation} className="size-3.5" />
|
|
Setup needed
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
if (onClick) {
|
|
return (
|
|
<button type="button" onClick={onClick} className={className}>
|
|
{body}
|
|
</button>
|
|
);
|
|
}
|
|
return (
|
|
<Link to={href ?? '#'} className={className}>
|
|
{body}
|
|
</Link>
|
|
);
|
|
};
|