JoeBot/campaign-command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix playbook steps not rendering text

Browse Source 
Playbook steps are stored as simple string arrays in the database,
but the rendering code expected PlaybookStep objects with step/title/
description/duration fields. Handle both formats with a typeof check.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chris Olson
2026-09-03 11:58:11 -04:00
parent d946a1b9d4
commit eb13f292e4
1 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/(dashboard)/playbooks/page.tsx
View File

@@ -87,7 +87,7 @@ export default function PlaybooksPage() {
};
const advanceStep = async (p: PlaybookProgress) => {
const steps: PlaybookStep[] = selectedPlaybook ? JSON.parse(selectedPlaybook.steps_json) : [];
const steps: (string | PlaybookStep)[] = selectedPlaybook ? JSON.parse(selectedPlaybook.steps_json) : [];
const nextStep = p.current_step + 1;
const isComplete = nextStep > steps.length;
await fetch('/api/phase2', {
@@ -124,7 +124,7 @@ export default function PlaybooksPage() {
};
if (selectedPlaybook) {
const steps: PlaybookStep[] = (() => { try { return JSON.parse(selectedPlaybook.steps_json); } catch { return []; } })();
const steps: (string | PlaybookStep)[] = (() => { try { return JSON.parse(selectedPlaybook.steps_json); } catch { return []; } })();
return (
<div className="space-y-6">
@@ -162,16 +162,23 @@ export default function PlaybooksPage() {
{/* Steps Overview */}
<ChartCard title="Playbook Steps" action={<button onClick={() => startEdit(selectedPlaybook)} className="text-xs text-[#0098C7] hover:text-[#007ba3] font-medium">Edit</button>}>
<div className="space-y-3 py-1">
{steps.map((step, i) => (
<div key={i} className="flex items-start gap-3">
<div className="w-7 h-7 rounded-full bg-[#1B1D36] text-white flex items-center justify-center text-xs font-bold flex-shrink-0">{step.step}</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-semibold text-foreground">{step.title}</div>
<div className="text-xs text-muted mt-0.5">{step.description}</div>
<div className="text-[10px] text-muted mt-1">{step.duration}</div>
{steps.map((step, i) => {
const isString = typeof step === 'string';
const title = isString ? step : step.title;
const desc = isString ? null : step.description;
const dur = isString ? null : step.duration;
const num = isString ? i + 1 : step.step;
return (
<div key={i} className="flex items-start gap-3">
<div className="w-7 h-7 rounded-full bg-[#1B1D36] text-white flex items-center justify-center text-xs font-bold flex-shrink-0">{num}</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-semibold text-foreground">{title}</div>
{desc && <div className="text-xs text-muted mt-0.5">{desc}</div>}
{dur && <div className="text-[10px] text-muted mt-1">{dur}</div>}
</div>
</div>
</div>
))}
);
})}
</div>
</ChartCard>
@@ -226,7 +233,7 @@ export default function PlaybooksPage() {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{playbooks.map(pb => {
const steps: PlaybookStep[] = (() => { try { return JSON.parse(pb.steps_json); } catch { return []; } })();
const steps: (string | PlaybookStep)[] = (() => { try { return JSON.parse(pb.steps_json); } catch { return []; } })();
return (
<div
key={pb.id}