NEW PRODUCT DEVELOPMENT

Welcome back

Enter your name to track new product development.

YOUR NAME setName(e.target.value)} onKeyDown={e=>e.key==="Enter"&&name.trim()&&onLogin(name.trim(),role)} placeholder="e.g. Louisa" style={{width:"100%",padding:"13px 16px",background:C.ivory,border:`1px solid ${C.ivoryD}`,borderRadius:"3px",color:C.black,fontSize:"15px",outline:"none",transition:"border-color .2s"}} onFocus={e=>e.target.style.borderColor=C.brick} onBlur={e=>e.target.style.borderColor=C.ivoryD}/>

YOUR ROLE

Your individuality is our inspiration.

); } function StagePill({ stage, active, done, locked }) { const bg = done?C.moss:active?C.brick:locked?"transparent":C.ivoryD; const border = done?C.moss:active?C.brick:C.ivoryDD; const color = done?C.ivory:active?C.ivory:locked?C.mutedL:C.muted; return (

{done?"✓":stage.id}

{stage.short}

); } function ProductCard({ product, onClick }) { const pct = overallProgress(product); const stageIdx = STAGES.findIndex(s=>s.id===product.currentStage); const currentStage = STAGES[stageIdx]; const isComplete = stageIdx===STAGES.length-1 && stageComplete(product, product.currentStage); return (

{e.currentTarget.style.transform="translateY(-2px)";e.currentTarget.style.boxShadow="0 10px 30px rgba(128,58,43,0.08)";e.currentTarget.style.borderColor=C.brick}} onMouseLeave={e=>{e.currentTarget.style.transform="";e.currentTarget.style.boxShadow="";e.currentTarget.style.borderColor=C.ivoryD}}>

{product.name}

{product.sku && SKU · {product.sku}} {product.supplier && · {product.supplier}}

{pct}%

{STAGES.map((s,i)=>{ const done = istageIdx; return (

{i}

); })}

{isComplete?"Complete":`Stage ${currentStage?.id} · ${currentStage?.label}`} {currentStage?.new && NEW}

{product.createdBy}

); } function AddProductModal({ user, onAdd, onClose }) { const [name, setName] = useState(""); const [sku, setSku] = useState(""); const [supplier, setSupplier] = useState(""); const inp = {width:"100%",padding:"12px 14px",background:C.ivory,border:`1px solid ${C.ivoryD}`,borderRadius:"3px",fontSize:"14px",color:C.black,outline:"none",transition:"border-color .2s"}; return (

NEW PRODUCT

Start a workflow

Initiate a new product through the Hawthorne NPD process.

{[["PRODUCT NAME *",name,setName,"e.g. Alva 3-Seat Sofa"],["CIN7 SKU",sku,setSku,"e.g. SOF-ALV-3S"],["SUPPLIER",supplier,setSupplier,"e.g. Guangzhou Furniture Co."]].map(([label,val,setVal,ph])=>(

{label} setVal(e.target.value)} placeholder={ph} style={inp} onFocus={e=>e.target.style.borderColor=C.brick} onBlur={e=>e.target.style.borderColor=C.ivoryD}/>

))}

); } function CheckItem({ item, onToggle, onNote, canCheck }) { const [expanded, setExpanded] = useState(false); const isBrandingQC = item.text.startsWith("BRANDING QC"); const displayText = item.text.replace("BRANDING QC — ", ""); return (

{isBrandingQC && BRANDING QC} {displayText}

{item.checked && item.checkedBy &&

✓ {item.checkedBy} · {fmtDate(item.checkedAt)}

}

{expanded && (

onNote(item.id,e.target.value)} placeholder="Add a note or N/A reason…" rows={2}
            style={{width:"100%",padding:"9px 12px",background:C.ivory,border:`1px solid ${C.ivoryD}`,borderRadius:"3px",fontSize:"13px",color:C.black,resize:"vertical",outline:"none"}}/>
        </div>
      )}
    </div>
  );
}

<div style={{maxWidth:"1100px",margin:"0 auto",padding:"32px 22px"}}>
        <div style={{marginBottom:"28px"}}>
          <div style={{fontSize:"10px",color:C.brick,letterSpacing:"0.25em",fontWeight:700,marginBottom:"6px"}}>NEW PRODUCT DEVELOPMENT</div>
          <div style={{fontSize:"32px",fontWeight:300,color:C.black,letterSpacing:"-0.02em",lineHeight:1.1}}>Your individuality<br/><span style={{color:C.brick,fontStyle:"italic"}}>is our inspiration</span></div>
        </div>

<div className="stats-grid" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:"14px",marginBottom:"28px"}}>
          {[["Total",stats.total,C.black],["In Progress",stats.active,C.brick],["Branding Review",stats.branding,C.rust],["Complete",stats.complete,C.moss]].map(([label,val,color])=>(
            <div key={label} className="fade-up" style={{background:C.white,borderRadius:"4px",padding:"18px 20px",border:`1px solid ${C.ivoryD}`,position:"relative",overflow:"hidden"}}>
              <div style={{position:"absolute",left:0,top:0,bottom:0,width:"2px",background:color}}/>
              <div style={{fontSize:"30px",fontWeight:300,color,letterSpacing:"-0.02em",lineHeight:1}}>{val}</div>
              <div style={{fontSize:"10px",color:C.muted,marginTop:"6px",letterSpacing:"0.15em",fontWeight:700}}>{label.toUpperCase()}</div>
            </div>
          ))}
        </div>

<div className="toolbar" style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"18px",flexWrap:"wrap",gap:"12px"}}>
          <div style={{display:"flex",gap:"4px",flexWrap:"wrap"}}>
            {[["all","All"],["active","Active"],["branding","Branding"],["complete","Complete"]].map(([val,label])=>(
              <button key={val} onClick={()=>setFilter(val)}
                style={{padding:"8px 16px",borderRadius:"3px",border:`1px solid ${filter===val?C.brick:C.ivoryD}`,background:filter===val?C.brick:C.white,color:filter===val?C.ivory:C.muted,fontSize:"12px",fontWeight:filter===val?700:500,cursor:"pointer",letterSpacing:"0.08em",transition:"all .2s"}}>
                {label.toUpperCase()}
              </button>
            ))}
          </div>
          <button onClick={()=>setShowAdd(true)}
            style={{padding:"10px 20px",background:C.black,color:C.ivory,border:"none",borderRadius:"3px",fontSize:"12px",fontWeight:700,cursor:"pointer",letterSpacing:"0.18em",transition:"background .2s"}}
            onMouseEnter={e=>e.target.style.background=C.inkSoft}
            onMouseLeave={e=>e.target.style.background=C.black}>
            + NEW PRODUCT
          </button>
        </div>

{stats.branding>0 && (
          <div className="fade-up" style={{background:C.rust+"14",border:`1px solid ${C.rust}40`,borderRadius:"3px",padding:"14px 18px",marginBottom:"18px",borderLeft:`3px solid ${C.rust}`}}>
            <span style={{fontSize:"10px",letterSpacing:"0.18em",fontWeight:700,color:C.rust}}>BRANDING REVIEW REQUIRED · </span>
            <span style={{fontSize:"13px",color:C.black,fontWeight:600}}>{stats.branding} product{stats.branding!==1?"s":""} awaiting Stage 3B sign-off</span>
            <span style={{color:C.muted,fontSize:"13px"}}> — Marketing Manager action required</span>
          </div>
        )}

{filtered.length===0 ? (
          <div style={{textAlign:"center",padding:"64px 24px",color:C.muted,background:C.white,borderRadius:"4px",border:`1px solid ${C.ivoryD}`}}>
            <div style={{display:"flex",justifyContent:"center",opacity:0.4}}><BrandMark size={56}/></div>
            <div style={{fontSize:"24px",marginTop:"16px",marginBottom:"6px",color:C.black,fontWeight:300,letterSpacing:"-0.01em"}}>No products here</div>
            <div style={{fontSize:"13px",fontStyle:"italic"}}>Add your first product to start a workflow</div>
          </div>
        ) : (
          <div className="product-grid" style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(460px,1fr))",gap:"14px"}}>
            {filtered.map(p=><ProductCard key={p.id} product={p} onClick={()=>onSelect(p.id)}/>)}
          </div>
        )}
      </div>

<div style={{maxWidth:"1100px",margin:"40px auto 0",padding:"24px 22px",borderTop:`1px solid ${C.ivoryD}`,display:"flex",justifyContent:"space-between",alignItems:"center"}}>
        <div style={{display:"flex",alignItems:"center",gap:"10px"}}>
          <BrandMark size={20} color={C.muted}/>
          <div style={{fontSize:"11px",color:C.muted,letterSpacing:"0.05em"}}>Hawthorne Group · hawthornegroup.co.nz</div>
        </div>
        <div style={{fontSize:"10px",color:C.muted,letterSpacing:"0.18em",fontWeight:700}}>NPD WORKFLOW v2.0</div>
      </div>

{showAdd && <AddProductModal user={user} onAdd={(p)=>{onAdd(p);setShowAdd(false);}} onClose={()=>setShowAdd(false)}/>}
    </div>
  );
}

function App() {
  const [user, setUser] = useState(null);
  const [products, setProducts] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
  const [loading, setLoading] = useState(true);

// Restore user from localStorage (so they don't sign in every visit)
  useEffect(()=>{
    try { const saved = localStorage.getItem(USER_KEY); if (saved) setUser(JSON.parse(saved)); } catch {}
  },[]);

// Load shared state from Cloudflare KV, poll for updates
  useEffect(()=>{
    let cancelled = false;
    const load = async () => {
      const state = await loadState();
      if (!cancelled) { setProducts(state.products || []); setLoading(false); }
    };
    load();
    const interval = setInterval(load, 8000);
    return () => { cancelled = true; clearInterval(interval); };
  },[]);

const persist = async (newProducts) => {
    setProducts(newProducts);
    await saveState({ products: newProducts });
  };

if (loading) {
    return (
      <div style={{minHeight:"100vh",background:C.ivory,display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",gap:"20px"}}>
        <div className="pulse"><BrandMark size={64}/></div>
        <Wordmark height={20} color={C.muted}/>
      </div>
    );
  }
  if (!user) return <LoginScreen onLogin={handleLogin}/>;
  const selected = selectedId ? products.find(p=>p.id===selectedId) : null;
  if (selected) return <ProductDetail product={selected} user={user} onUpdate={handleUpdate} onBack={()=>setSelectedId(null)}/>;
  return <Dashboard user={user} products={products} onSelect={setSelectedId} onAdd={handleAdd} onSignOut={handleSignOut}/>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);