// Sidebar — left rail navigation with stacked icon+label pattern const { useState: useSidebarState, useEffect: useSidebarEffect, useRef: useSidebarRef } = React; const FlyoutIcon = { add: , zillow: Z, realtor: R, list: , snapshot: , owner: , update: , refresh: , message: , photo: , search: , inbox: , doc: , blueprint: , chart: , palette: , home: , qr: , video: , feedback: , }; function FlyoutFrame({ title, subtitle, label, className = "", onClose, onMouseEnter, onMouseLeave, children }) { const ref = useSidebarRef(null); useSidebarEffect(() => { function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) onClose(); } function onKey(e) { if (e.key === "Escape") onClose(); } document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [onClose]); return (
); } function NewFlyout({ onClose, onMouseEnter, onMouseLeave }) { const startProperty = [ { key: "address", label: "Address Search", icon: FlyoutIcon.add }, { key: "zillow", label: "Zillow Link", icon: FlyoutIcon.zillow }, { key: "realtor", label: "Realtor Import", icon: FlyoutIcon.realtor }, ]; const workflows = [ { key: "strategy", label: "Listing Strategy", icon: FlyoutIcon.list }, { key: "snapshot", label: "Property Snapshot", icon: FlyoutIcon.snapshot }, { key: "owner", label: "Owner Contact", icon: FlyoutIcon.owner }, { key: "update", label: "Seller Update", icon: FlyoutIcon.update }, { key: "refresh", label: "Marketing Refresh", icon: FlyoutIcon.refresh }, { key: "message", label: "Seller Message", icon: FlyoutIcon.message }, ]; const recent = ["1409 Westbrook Lane", "193 Crossings Pl"]; return (
Start a Property
{startProperty.map(it => ( ))}
Workflows
{workflows.map(it => ( ))}
Recent
{recent.map(r => ( ))}
); } function ToolsFlyout({ onClose, onMouseEnter, onMouseLeave }) { const groups = [ { title: "Property Research", tools: [ { key: "snapshot-report", label: "Property Snapshot Report", description: "Property value, equity, owner details, and market status.", icon: FlyoutIcon.snapshot }, { key: "owner-contact", label: "Owner Contact Finder", description: "Verified phones, emails, mailing addresses, and ownership details.", icon: FlyoutIcon.owner }, { key: "contact-enrichment", label: "Contact Enrichment", description: "Look up phone numbers to get owner names, addresses, and alternate phones.", icon: FlyoutIcon.search }, ], }, { title: "Strategy & Outreach", tools: [ { key: "listing-strategy", label: "Listing Strategy Blueprints", description: "Generate and manage listing blueprints and market reports.", icon: FlyoutIcon.chart, href: "../workflow/index.html" }, { key: "buyer-strategy", label: "Buyer Strategy Blueprints", description: "Create, edit, and share buyer strategy blueprints.", icon: FlyoutIcon.blueprint }, { key: "ai-recommend", label: "See If AI Recommends You or Your Competition", description: "Check how buyers and sellers see you in AI answers.", icon: FlyoutIcon.search }, { key: "seller-zestimate", label: "Seller Zestimate Outreach", description: "Generate personalized homeowner emails based on Zillow Zestimate.", icon: FlyoutIcon.home }, ], }, { title: "Marketing & Messaging", tools: [ { key: "listing-description", label: "Listing Description Engine", description: "Create MLS-ready listing descriptions that highlight key features.", icon: FlyoutIcon.doc }, { key: "website-copy", label: "Website Copy Engine", description: "Create high-performing web pages that engage and convert.", icon: FlyoutIcon.list }, { key: "smart-message", label: "Smart Message Builder", description: "Craft texts and emails that feel personal and get replies.", icon: FlyoutIcon.message }, { key: "inbox", label: "AI for Your Inbox", description: "Forward emails to get summaries, reply drafts, or direct assistance.", icon: FlyoutIcon.inbox }, { key: "qr-code", label: "QR Code Builder", description: "Create customized QR codes with your brand colors and logo.", icon: FlyoutIcon.qr }, ], }, { title: "Creative Studio", tools: [ { key: "photo-editor", label: "AI Photo Editor", description: "Retouch photos, apply filters, and make professional adjustments.", icon: FlyoutIcon.photo }, { key: "virtual-staging", label: "Virtual Staging Pro", description: "Edit listing photos with AI-powered retouching and staging.", icon: FlyoutIcon.home }, { key: "watercolor", label: "Watercolor Studio", description: "Turn listing photos into watercolor-style images.", icon: FlyoutIcon.palette }, { key: "video-generator", label: "AI Video Generator", description: "Create videos from text prompts and images using DakLab AI.", icon: FlyoutIcon.video }, ], }, { title: "Documents & Platform", tools: [ { key: "contract-analyzer", label: "Contract Analyzer", description: "Advanced contract analysis with document intelligence.", icon: FlyoutIcon.doc }, { key: "inspection-analyzer", label: "Inspection Report Analyzer", description: "Summarize inspection reports, cost estimates, and negotiation strategies.", icon: FlyoutIcon.doc }, { key: "feedback", label: "Give Feedback", description: "Help improve DakLab with your thoughts and suggestions.", icon: FlyoutIcon.feedback }, ], }, ]; return ( {groups.map(group => (
{group.title}
{group.tools.map(tool => ( ))}
))} ); } function Sidebar({ active = "home", onSelect }) { const [flyoutOpen, setFlyoutOpen] = useSidebarState(null); const closeTimer = useSidebarRef(null); const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }; const scheduleClose = () => { cancelClose(); closeTimer.current = setTimeout(() => setFlyoutOpen(null), 140); }; const openNow = (flyout) => { cancelClose(); setFlyoutOpen(flyout); }; useSidebarEffect(() => () => cancelClose(), []); useSidebarEffect(() => { document.body.classList.toggle("ph-flyout-active", Boolean(flyoutOpen)); return () => document.body.classList.remove("ph-flyout-active"); }, [flyoutOpen]); const items = [ { key: "new", label: "New", flyout: "new", icon: }, { key: "home", label: "Home", href: "../home/index.html", icon: }, { key: "properties", label: "Properties", icon: }, { key: "contacts", label: "Contacts", icon: }, { key: "tools", label: "Tools", flyout: "tools", icon: }, { key: "workflow", label: "Workflow", href: "../workflow/index.html", icon: }, { key: "more", label: "More", icon: }, ]; return ( <> {flyoutOpen === "new" && ( setFlyoutOpen(null)} onMouseEnter={() => openNow("new")} onMouseLeave={scheduleClose} /> )} {flyoutOpen === "tools" && ( setFlyoutOpen(null)} onMouseEnter={() => openNow("tools")} onMouseLeave={scheduleClose} /> )} ); } window.Sidebar = Sidebar;