Mayur Shinde
276 lines
18 KiB
React
276 lines
18 KiB
React
/**
|
|
* EstimateWizardAdmin — internal admin controls + analytics (spec §14, §16, §18).
|
|
*
|
|
* Tenant-controls (no hard-coded pricing/copy): feature kill-switch, AI toggle,
|
|
* conservative mode, per-package price + base discount + service life, and report
|
|
* branding. Persists as overrides via saveConfigOverrides(). Also shows a funnel
|
|
* summary built from completed-session submissions (spec §16).
|
|
*/
|
|
import React, { useMemo, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { Save, RotateCcw, Power, Sparkles, ShieldCheck, BarChart3, Package, History } from 'lucide-react';
|
|
import {
|
|
getTenantConfig, loadConfigOverrides, publishConfigOverrides, resetConfigOverrides,
|
|
} from './data/tenantConfig';
|
|
import { loadSubmissions } from './api/crmHandoff';
|
|
|
|
const PKG_LABEL = { GOOD: 'Good', BETTER: 'Better', BEST: 'Best' };
|
|
|
|
const Toggle = ({ label, desc, checked, onChange, icon: Icon }) => (
|
|
<label className="flex items-start justify-between gap-3 rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4 cursor-pointer">
|
|
<div className="flex items-start gap-2.5">
|
|
{Icon && <Icon size={18} className="text-amber-500 mt-0.5" />}
|
|
<div>
|
|
<div className="font-semibold text-zinc-900 dark:text-white">{label}</div>
|
|
<div className="text-xs text-zinc-500 dark:text-zinc-400">{desc}</div>
|
|
</div>
|
|
</div>
|
|
<input type="checkbox" className="mt-1 h-5 w-5 accent-amber-500 shrink-0" checked={checked} onChange={(e) => onChange(e.target.checked)} />
|
|
</label>
|
|
);
|
|
|
|
const numInput = 'w-full rounded-lg border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500';
|
|
|
|
const textInput = numInput;
|
|
const areaInput = numInput + ' min-h-[64px] resize-y leading-relaxed';
|
|
|
|
const EstimateWizardAdmin = () => {
|
|
const initial = useMemo(() => getTenantConfig(), []);
|
|
const [cfg, setCfg] = useState(initial);
|
|
const [versionInfo, setVersionInfo] = useState(() => {
|
|
const o = loadConfigOverrides();
|
|
return { version: initial.version, versionedAt: o.versionedAt || null, history: o.versionHistory || [] };
|
|
});
|
|
|
|
const submissions = useMemo(() => loadSubmissions(), []);
|
|
const analytics = useMemo(() => {
|
|
const total = submissions.length;
|
|
const dist = (key) => submissions.reduce((m, s) => { const k = s[key]; if (k) m[k] = (m[k] || 0) + 1; return m; }, {});
|
|
const booked = submissions.filter((s) => s.report?.appointmentBooked).length;
|
|
const addonAttach = total ? (submissions.reduce((n, s) => n + (s.selectedAddons?.length || 0), 0) / total) : 0;
|
|
return { total, recommended: dist('recommendedPackage'), selected: dist('selectedPackage'), booked, addonAttach };
|
|
}, [submissions]);
|
|
|
|
const setFlag = (k, v) => setCfg((c) => ({ ...c, [k]: v }));
|
|
const setPkg = (type, field, value) => setCfg((c) => ({
|
|
...c,
|
|
packages: c.packages.map((p) => (p.type === type ? { ...p, [field]: value } : p)),
|
|
}));
|
|
// Included scope is edited as one item per line.
|
|
const setScope = (type, text) => setPkg(type, 'scope', text.split('\n').map((s) => s.trim()).filter(Boolean));
|
|
const setDiscount = (type, value) => setCfg((c) => ({
|
|
...c,
|
|
discountScenarios: { ...c.discountScenarios, [type]: { ...c.discountScenarios[type], base: value } },
|
|
}));
|
|
const setBranding = (field, value) => setCfg((c) => ({ ...c, branding: { ...c.branding, [field]: value } }));
|
|
|
|
const handleSave = () => {
|
|
const prev = loadConfigOverrides();
|
|
const overrides = {
|
|
...prev,
|
|
featureEnabled: cfg.featureEnabled,
|
|
aiExplanationsEnabled: cfg.aiExplanationsEnabled,
|
|
conservativeMode: cfg.conservativeMode,
|
|
branding: cfg.branding,
|
|
discountScenarios: cfg.discountScenarios,
|
|
// Full Good/Better/Best content is tenant-controlled (spec §4/§14).
|
|
packages: cfg.packages.map((p) => ({
|
|
type: p.type,
|
|
name: p.name,
|
|
category: p.category,
|
|
warrantyLabel: p.warrantyLabel,
|
|
hailResistance: p.hailResistance,
|
|
position: p.position,
|
|
fit: p.fit,
|
|
scope: p.scope,
|
|
pricePerSquare: p.pricePerSquare,
|
|
serviceLifeYears: p.serviceLifeYears,
|
|
})),
|
|
};
|
|
const saved = publishConfigOverrides(overrides); // bumps version + history
|
|
setVersionInfo({ version: saved.version, versionedAt: saved.versionedAt, history: saved.versionHistory });
|
|
setCfg((c) => ({ ...c, version: saved.version }));
|
|
toast.success(`Published ${saved.version}`);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
resetConfigOverrides();
|
|
const fresh = getTenantConfig();
|
|
setCfg(fresh);
|
|
setVersionInfo({ version: fresh.version, versionedAt: null, history: [] });
|
|
toast.message('Reset to defaults');
|
|
};
|
|
|
|
return (
|
|
<div className="h-full overflow-auto bg-zinc-50 dark:bg-[#09090b]">
|
|
<div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-zinc-900 dark:text-white flex items-center gap-2">
|
|
<span className="w-2 h-6 bg-amber-500 rounded-full" /> Estimate Wizard — Admin
|
|
</h1>
|
|
<p className="text-zinc-500 dark:text-zinc-400 text-sm ml-4">
|
|
Tenant controls for package content, pricing, discounts, AI, branding, and analytics.
|
|
</p>
|
|
<div className="ml-4 mt-1.5 flex items-center gap-2 text-[11px]">
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-zinc-100 dark:bg-white/5 px-2 py-0.5 font-mono font-semibold text-zinc-600 dark:text-zinc-300">
|
|
<History size={11} /> {versionInfo.version}
|
|
</span>
|
|
{versionInfo.versionedAt && (
|
|
<span className="text-zinc-400">
|
|
published {new Date(versionInfo.versionedAt).toLocaleString()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button onClick={handleReset} className="rounded-xl border border-zinc-200 dark:border-white/10 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:border-amber-400 flex items-center gap-1.5">
|
|
<RotateCcw size={15} /> Reset
|
|
</button>
|
|
<button onClick={handleSave} className="rounded-xl bg-gradient-to-r from-amber-400 to-orange-500 text-white px-4 py-2 text-sm font-semibold flex items-center gap-1.5 shadow-lg shadow-amber-500/25">
|
|
<Save size={15} /> Save & publish
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feature flags */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<Toggle icon={Power} label="Feature enabled" desc="Master kill-switch for the public wizard." checked={cfg.featureEnabled} onChange={(v) => setFlag('featureEnabled', v)} />
|
|
<Toggle icon={Sparkles} label="AI explanations" desc="Use AI copy (off = deterministic text)." checked={cfg.aiExplanationsEnabled} onChange={(v) => setFlag('aiExplanationsEnabled', v)} />
|
|
<Toggle icon={ShieldCheck} label="Conservative mode" desc="Hide customer-facing savings claims." checked={cfg.conservativeMode} onChange={(v) => setFlag('conservativeMode', v)} />
|
|
</div>
|
|
|
|
{/* Good / Better / Best content — fully tenant-controlled (spec §4/§14) */}
|
|
<section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
|
|
<h2 className="font-semibold text-zinc-900 dark:text-white mb-1 flex items-center gap-2">
|
|
<Package size={17} className="text-amber-500" /> Good / Better / Best content
|
|
</h2>
|
|
<p className="text-[11px] text-zinc-400 mb-4">
|
|
Every customer-facing field is editable here — nothing is hard-coded. Saving publishes a new version.
|
|
</p>
|
|
<div className="space-y-5">
|
|
{cfg.packages.map((p) => (
|
|
<div key={p.type} className="rounded-xl border border-zinc-200 dark:border-white/10 p-3.5">
|
|
<div className="text-xs font-bold uppercase tracking-wide text-amber-600 dark:text-amber-400 mb-3">{PKG_LABEL[p.type]}</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Package name
|
|
<input className={textInput} value={p.name} onChange={(e) => setPkg(p.type, 'name', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Category / description
|
|
<input className={textInput} value={p.category} onChange={(e) => setPkg(p.type, 'category', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Warranty label
|
|
<input className={textInput} value={p.warrantyLabel} onChange={(e) => setPkg(p.type, 'warrantyLabel', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Hail resistance label
|
|
<input className={textInput} value={p.hailResistance} onChange={(e) => setPkg(p.type, 'hailResistance', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400 sm:col-span-2">Positioning / upgrade copy
|
|
<input className={textInput} value={p.position} onChange={(e) => setPkg(p.type, 'position', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400 sm:col-span-2">Best-fit description
|
|
<textarea className={areaInput} value={p.fit} onChange={(e) => setPkg(p.type, 'fit', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400 sm:col-span-2">Included scope (one item per line)
|
|
<textarea className={areaInput} value={(p.scope || []).join('\n')} onChange={(e) => setScope(p.type, e.target.value)} />
|
|
</label>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-3 mt-3">
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Price / square ($)
|
|
<input type="number" className={numInput} value={p.pricePerSquare} onChange={(e) => setPkg(p.type, 'pricePerSquare', Number(e.target.value))} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Service life (yrs)
|
|
<input type="number" className={numInput} value={p.serviceLifeYears} onChange={(e) => setPkg(p.type, 'serviceLifeYears', Number(e.target.value))} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Base discount (%)
|
|
<input type="number" className={numInput} value={cfg.discountScenarios[p.type]?.base ?? 0} onChange={(e) => setDiscount(p.type, Number(e.target.value))} />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-[11px] text-zinc-400 mt-3">Customer copy always states discounts are illustrative — "ask your carrier to confirm."</p>
|
|
</section>
|
|
|
|
{/* Branding */}
|
|
<section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
|
|
<h2 className="font-semibold text-zinc-900 dark:text-white mb-3">Report branding</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Company
|
|
<input className={numInput} value={cfg.branding.company} onChange={(e) => setBranding('company', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Phone
|
|
<input className={numInput} value={cfg.branding.phone} onChange={(e) => setBranding('phone', e.target.value)} />
|
|
</label>
|
|
<label className="text-xs text-zinc-500 dark:text-zinc-400">Primary color
|
|
<input className={numInput} value={cfg.branding.primaryColor} onChange={(e) => setBranding('primaryColor', e.target.value)} />
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Analytics */}
|
|
<section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
|
|
<h2 className="font-semibold text-zinc-900 dark:text-white mb-3 flex items-center gap-2">
|
|
<BarChart3 size={17} className="text-amber-500" /> Funnel analytics
|
|
</h2>
|
|
{analytics.total === 0 ? (
|
|
<p className="text-sm text-zinc-500 dark:text-zinc-400">No completed estimates yet. Finish a wizard run to populate metrics.</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
<Metric label="Completed reports" value={analytics.total} />
|
|
<Metric label="Appointments booked" value={analytics.booked} />
|
|
<Metric label="Avg add-ons / report" value={analytics.addonAttach.toFixed(1)} />
|
|
<Metric label="Best recommended" value={analytics.recommended.BEST || 0} />
|
|
<DistRow label="Recommended split" dist={analytics.recommended} />
|
|
<DistRow label="Customer-selected split" dist={analytics.selected} />
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Version history */}
|
|
<section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
|
|
<h2 className="font-semibold text-zinc-900 dark:text-white mb-3 flex items-center gap-2">
|
|
<History size={17} className="text-amber-500" /> Version history
|
|
</h2>
|
|
{(!versionInfo.history || versionInfo.history.length === 0) ? (
|
|
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
|
No published changes yet — currently on defaults ({versionInfo.version}).
|
|
Each save publishes a new version that reports are stamped with.
|
|
</p>
|
|
) : (
|
|
<ul className="space-y-1.5">
|
|
{versionInfo.history.map((h) => (
|
|
<li key={h.version} className="flex items-center justify-between text-sm border-b border-zinc-100 dark:border-white/5 pb-1.5 last:border-0">
|
|
<span className="font-mono font-semibold text-zinc-700 dark:text-zinc-200">{h.version}</span>
|
|
<span className="text-xs text-zinc-400">{new Date(h.versionedAt).toLocaleString()}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Metric = ({ label, value }) => (
|
|
<div className="rounded-xl bg-zinc-50 dark:bg-white/5 p-3">
|
|
<div className="text-xs text-zinc-400">{label}</div>
|
|
<div className="text-xl font-bold text-zinc-900 dark:text-white mt-0.5">{value}</div>
|
|
</div>
|
|
);
|
|
|
|
const DistRow = ({ label, dist }) => (
|
|
<div className="rounded-xl bg-zinc-50 dark:bg-white/5 p-3 col-span-2">
|
|
<div className="text-xs text-zinc-400 mb-1">{label}</div>
|
|
<div className="flex gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-200">
|
|
{['GOOD', 'BETTER', 'BEST'].map((t) => (
|
|
<span key={t}>{PKG_LABEL[t]}: <span className="text-amber-600 dark:text-amber-400">{dist[t] || 0}</span></span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default EstimateWizardAdmin;
|