\n \n

{children}

\n \n \n);\n\nconst Sidebar: FC<{ active?: string }> = ({ active }) => (\n \n);\n\n// ---------------------------------------------------------------------------\n// Shared Components\n// ---------------------------------------------------------------------------\n\nexport const PageHeader: FC<{ title: string }> = ({ children, title }) => (\n

{title}

{children}

\n);\n\nexport const StatCard: FC<{ label: string; value: string; sub?: string; color?: string }> = ({ label, value, sub, color }) => (\n

{label}

{value}

\n {sub &&

{sub}

}\n

\n);\n\nexport const Empty: FC<{ message: string; actionHref?: string; actionLabel?: string }> = ({ message, actionHref, actionLabel }) => (\n

{message}

\n {actionHref && (\n \n {icons.plus(14)} {actionLabel}\n \n )}\n

\n);\n\nexport const StageBadge: FC<{ stage: string }> = ({ stage }) => {\n const colors: Record = {\n \"Prospect\": \"bg-gray-100 text-gray-700\",\n \"Qualified Lead\": \"bg-blue-100 text-blue-700\",\n \"Contacted\": \"bg-purple-100 text-purple-700\",\n \"Heard back\": \"bg-pink-100 text-pink-700\",\n \"Slack connect\": \"bg-amber-100 text-amber-700\",\n \"Active Trial\": \"bg-cyan-100 text-cyan-700\",\n \"To Close\": \"bg-yellow-100 text-yellow-700\",\n \"Won\": \"bg-emerald-100 text-emerald-700\",\n \"Lost\": \"bg-red-100 text-red-700\",\n };\n return (\n \n {stage}\n \n );\n};\n\nexport const ActivityIcon: FC<{ type: string }> = ({ type }) => {\n const colors: Record = {\n note: \"bg-indigo-100 text-indigo-600\",\n call: \"bg-emerald-100 text-emerald-600\",\n email: \"bg-blue-100 text-blue-600\",\n meeting: \"bg-amber-100 text-amber-600\",\n task: \"bg-purple-100 text-purple-600\",\n };\n return (\n

\n {(ACTIVITY_ICONS[type] || (() => icons.pin(16)))()}\n

\n );\n};\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nexport function fmtMoney(n: number) {\n return new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 }).format(n || 0);\n}\n\nexport function fmtDate(d: string | null) {\n if (!d) return \"—\";\n const normalized = d.includes(\"T\") ? d : d.replace(\" \", \"T\") + \"Z\";\n const date = new Date(normalized);\n if (isNaN(date.getTime())) return d;\n return date.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nexport function initials(first: string, last?: string | null) {\n return (first?.[0] || \"\") + (last?.[0] || \"\");\n}\n\nconst AVATAR_COLORS = [\n \"bg-purple-100 text-purple-700\",\n \"bg-blue-100 text-blue-700\",\n \"bg-emerald-100 text-emerald-700\",\n \"bg-amber-100 text-amber-700\",\n \"bg-rose-100 text-rose-700\",\n \"bg-cyan-100 text-cyan-700\",\n];\n\nexport function avatarColor(id: number) {\n return AVATAR_COLORS[id % AVATAR_COLORS.length];\n}\n","deleted","label",[100],"permalink","https://www.val.town/x/dcm31/valtown-crm/code/components.tsx","extension","actionData","errors"]