[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","696fc9615e28819183ebc25106538647","versionInt","title","Sd-wan Solution Architect Decision Tool (web App)","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Switch } from \"@/components/ui/switch\";\nimport {\n Copy,\n Download,\n FileText,\n Info,\n RotateCcw,\n ShieldCheck,\n Wand2,\n} from \"lucide-react\";\nimport {\n AlignmentType,\n Document,\n HeadingLevel,\n ImageRun,\n Packer,\n Paragraph,\n Table,\n TableCell,\n TableRow,\n TextRun,\n WidthType,\n} from \"docx\";\nimport * as XLSX from \"xlsx\";\n\n/**\n * SD-WAN Solution Architect Decision Tool (Internet-first)\n * - Vendor: Cisco Meraki (MX) vs Cisco Catalyst SD-WAN (Viptela)\n * - Site Profiles: Platinum / Gold / Silver / Copper (+ RapidStart Day-0)\n * - Generates: High-Level Design (HLD) draft in DOCX (with simple diagrams)\n * - Adds: Solution validation (PASS/WARN/FAIL)\n *\n * NOTE: This is a standardized, template-driven tool by design.\n */\n\nconst NL = \"\\n\";\n\ntype VendorKey = \"meraki\" | \"catalyst\";\n\nconst VENDORS: Record = {\n meraki: {\n key: \"meraki\",\n name: \"Cisco Meraki (MX)\",\n tagline: \"Full-stack simplicity, plug-and-play, fastest deployment for distributed sites\",\n },\n catalyst: {\n key: \"catalyst\",\n name: \"Cisco Catalyst SD-WAN (Viptela)\",\n tagline: \"Advanced policy/segmentation, rich control, complex topologies\",\n },\n};\n\ntype SiteKey = \"hq\" | \"branch\" | \"small\";\nconst SITE_TYPES: { key: SiteKey; label: string }[] = [\n { key: \"hq\", label: \"HQ / Hub\" },\n { key: \"branch\", label: \"Branch\" },\n { key: \"small\", label: \"Small / Pop-up\" },\n];\n\ntype ProfileTier = \"Platinum\" | \"Gold\" | \"Silver\" | \"Copper\" | \"RapidStart\";\nconst PROFILE_TIERS: ProfileTier[] = [\"Platinum\", \"Gold\", \"Silver\", \"Copper\", \"RapidStart\"];\n\ntype Question =\n | {\n id: string;\n label: string;\n help?: string;\n type: \"select\";\n options: { value: string; label: string }[];\n defaultValue: string;\n }\n | {\n id: string;\n label: string;\n help?: string;\n type: \"switch\";\n defaultValue: boolean;\n }\n | {\n id: string;\n label: string;\n help?: string;\n type: \"number\";\n defaultValue: string;\n };\n\n// -------------------------\n// Vendor discovery questions\n// -------------------------\n\nconst VENDOR_QUESTIONS: Question[] = [\n {\n id: \"full_stack\",\n label: \"Customer wants full-stack simplicity (SD-WAN + security + LAN/Wi-Fi) as standard?\",\n help: \"Strongly favors Meraki when the customer wants standard full-stack and plug-and-play.\",\n type: \"switch\",\n defaultValue: true,\n },\n {\n id: \"plug_play\",\n label: \"Priority is fastest deployment / zero-touch / simplest operations?\",\n help: \"Strongly favors Meraki.\",\n type: \"switch\",\n defaultValue: true,\n },\n {\n id: \"segmentation\",\n label: \"Need advanced segmentation / multi-VRF / complex policy?\",\n help: \"High segmentation typically favors Catalyst SD-WAN.\",\n type: \"select\",\n options: [\n { value: \"low\", label: \"Low\" },\n { value: \"med\", label: \"Medium\" },\n { value: \"high\", label: \"High\" },\n ],\n defaultValue: \"med\",\n },\n {\n id: \"routing\",\n label: \"Routing/topology requirements\",\n help: \"Advanced routing/topology control typically favors Catalyst SD-WAN.\",\n type: \"select\",\n options: [\n { value: \"simple\", label: \"Simple\" },\n { value: \"standard\", label: \"Standard\" },\n { value: \"advanced\", label: \"Advanced\" },\n ],\n defaultValue: \"standard\",\n },\n {\n id: \"ops_model\",\n label: \"Customer operations model\",\n help: \"Lean ops and low-variance deployments favor Meraki; expert NOC/CoE can adopt Catalyst depth.\",\n type: \"select\",\n options: [\n { value: \"lean\", label: \"Lean IT / wants simplicity\" },\n { value: \"mixed\", label: \"Mixed\" },\n { value: \"expert\", label: \"Advanced network CoE\" },\n ],\n defaultValue: \"mixed\",\n },\n {\n id: \"timeline\",\n label: \"Target time-to-value\",\n type: \"select\",\n options: [\n { value: \"asap\", label: \"ASAP (weeks)\" },\n { value: \"normal\", label: \"Normal (1–3 months)\" },\n { value: \"flex\", label: \"Flexible (3+ months)\" },\n ],\n defaultValue: \"normal\",\n },\n {\n id: \"template_strict\",\n label: \"Customer accepts strict standard templates (minimal customization)?\",\n help: \"Strict standardization aligns with simplicity and repeatability.\",\n type: \"switch\",\n defaultValue: true,\n },\n];\n\nconst DEFAULT_VENDOR_ANSWERS: Record = Object.fromEntries(\n VENDOR_QUESTIONS.map((q) => [q.id, q.defaultValue])\n);\n\n// -------------------------\n// Site profile questions\n// -------------------------\n\nconst SITE_QUESTIONS: Question[] = [\n {\n id: \"criticality\",\n label: \"Business criticality\",\n type: \"select\",\n options: [\n { value: \"mission\", label: \"Mission-critical\" },\n { value: \"important\", label: \"Important\" },\n { value: \"standard\", label: \"Standard\" },\n { value: \"low\", label: \"Low\" },\n ],\n defaultValue: \"standard\",\n },\n {\n id: \"realtime\",\n label: \"Real-time apps (voice/video) used here?\",\n type: \"switch\",\n defaultValue: true,\n },\n {\n id: \"dual_inet\",\n label: \"Target end-state internet\",\n help: \"Gold/Platinum generally assume dual ISP underlay for resiliency.\",\n type: \"select\",\n options: [\n { value: \"required\", label: \"Dual internet required\" },\n { value: \"preferred\", label: \"Dual internet preferred\" },\n { value: \"single\", label: \"Single internet only\" },\n ],\n defaultValue: \"preferred\",\n },\n {\n id: \"rapidstart\",\n label: \"Need Day-0 fast delivery (RapidStart) while waiting for circuits?\",\n help: \"Use LTE/5G + best-effort broadband to turn up the site quickly; migrate to steady-state later.\",\n type: \"switch\",\n defaultValue: false,\n },\n {\n id: \"bandwidth\",\n label: \"Expected steady-state bandwidth (Mbps, rough)\",\n type: \"number\",\n defaultValue: \"100\",\n },\n];\n\nconst DEFAULT_SITE_ANSWERS: Record = Object.fromEntries(\n SITE_QUESTIONS.map((q) => [q.id, q.defaultValue])\n);\n\n// -------------------------\n// Standard profiles (internet-first)\n// -------------------------\n\nconst PROFILE_STANDARDS: Record, any> & {\n RapidStart: any;\n} = {\n Platinum: {\n intent: \"Highest availability and best application experience for mission-critical sites.\",\n underlay: \"Dual broadband (diverse ISPs) + optional LTE/5G.\",\n overlay: \"App-aware routing with aggressive failover (brownout/blackout remediation).\",\n security: \"Baseline firewall; optional IDS/IPS; optional SSE/SASE steering.\",\n lan: \"Standard LAN handoff; optional managed switching/Wi-Fi.\",\n limitations: \"Assumes dual ISP availability; higher CPE sizing and operational rigor.\",\n },\n Gold: {\n intent: \"High availability for important sites with standardized redundancy.\",\n underlay: \"Dual broadband (diverse preferred) + LTE/5G optional.\",\n overlay: \"App-aware routing; standardized policies and templates.\",\n security: \"Baseline firewall; optional IDS/IPS; optional SSE/SASE.\",\n lan: \"Standard LAN handoff; optional managed switching/Wi-Fi.\",\n limitations: \"If dual circuits are long-lead, use RapidStart to meet Day-0.\",\n },\n Silver: {\n intent: \"Balanced cost and resilience for standard branches.\",\n underlay: \"Single broadband; dual optional.\",\n overlay: \"Standard overlay and policies; simplified routing expectations.\",\n security: \"Baseline firewall; optional add-ons.\",\n lan: \"Standard LAN handoff.\",\n limitations: \"Resiliency depends on ISP unless dual is added.\",\n },\n Copper: {\n intent: \"Lowest complexity for small / pop-up / low criticality sites.\",\n underlay: \"Single broadband; LTE/5G optional.\",\n overlay: \"Standard templates with minimal local customization.\",\n security: \"Baseline firewall; minimal optionality to keep simplicity.\",\n lan: \"Standard LAN handoff.\",\n limitations: \"Not intended for complex segmentation or advanced routing.\",\n },\n RapidStart: {\n intent:\n \"Day-0 operational quickly using LTE/5G and/or best-effort broadband while long-lead circuits are pending.\",\n underlay: \"LTE/5G + best-effort broadband; migrate to steady-state circuits when delivered.\",\n overlay: \"ZTP + standard template; keep changes minimal to accelerate delivery.\",\n security: \"Baseline firewall; keep optional features minimal for speed.\",\n lan: \"Standard LAN handoff.\",\n limitations: \"Wireless/best-effort performance varies; treat as interim underlay.\",\n },\n};\n\n// Optional features catalog (with complexity)\nconst OPTIONAL_FEATURES = [\n {\n name: \"Stateful firewall at SD-WAN edge\",\n status: \"Standard\",\n complexity: \"Low\",\n note: \"Baseline security and policy enforcement.\",\n },\n {\n name: \"Direct Internet Access (DIA) local breakout\",\n status: \"Standard\",\n complexity: \"Low\",\n note: \"Internet-first assumption for SaaS and general internet.\",\n },\n {\n name: \"Dual broadband (diverse ISPs)\",\n status: \"Optional\",\n complexity: \"Low\",\n note: \"Standardized for Gold/Platinum; optional for Silver/Copper.\",\n },\n {\n name: \"4G/5G failover\",\n status: \"Optional\",\n complexity: \"Low\",\n note: \"Recommended for RapidStart and improved resiliency.\",\n },\n {\n name: \"IDS/IPS\",\n status: \"Optional\",\n complexity: \"Medium\",\n note: \"May require tuning and SOC alignment.\",\n },\n {\n name: \"Cloud SSE/SASE integration\",\n status: \"Optional\",\n complexity: \"Medium\",\n note: \"Requires identity/policy alignment and traffic steering decisions.\",\n },\n {\n name: \"Advanced segmentation (multi-VRF)\",\n status: \"Optional\",\n complexity: \"High\",\n note: \"Adds design/testing overhead; commonly Catalyst-led.\",\n },\n] as const;\n\n// Standard hardware references (internet-first, US-oriented templates)\n// NOTE: Exact SKU bundles (NA/WW), licenses/terms, optics and support are finalized in CCW / Verizon catalog.\nconst HARDWARE_REFS: Record<\n VendorKey,\n Record\n> = {\n meraki: {\n Copper: {\n edge: [\n \"Meraki MX68 (small site)\",\n \"Alt: Meraki MX75 (higher user count)\",\n \"Alt: MX67/MX68W/MX68CW variants when standardized\",\n ],\n cellular: [\"Optional: Meraki MG41 (4G LTE)\", \"Optional: Meraki MG51 or MG52 (5G)\"],\n lan: [\"Optional: Meraki MS120 (access switching)\", \"Optional: Meraki MR Wi‑Fi (full-stack)\"],\n notes:\n \"Copper targets low criticality / single-broadband. Choose larger MX if higher throughput/flows or advanced security services are enabled.\",\n },\n Silver: {\n edge: [\"Meraki MX75 (standard)\", \"Alt: Meraki MX85 (performance uplift)\"],\n cellular: [\"Optional: Meraki MG41 (4G LTE)\", \"Optional: Meraki MG51 or MG52 (5G)\"],\n lan: [\"Optional: Meraki MS120/MS130 (access switching)\", \"Optional: Meraki MR Wi‑Fi (full-stack)\"],\n notes: \"Silver targets standard branches (typically single broadband). Add dual ISP for enhanced resiliency.\",\n },\n Gold: {\n edge: [\"Meraki MX95 (standard)\", \"Alt: Meraki MX105 (higher scale)\", \"Alt: MX85 when smaller\"],\n cellular: [\"Optional: Meraki MG51 or MG52 (5G)\", \"Alt: MG41 (4G LTE)\"],\n lan: [\"Optional: Meraki MS130/MS210 (access switching)\", \"Optional: Meraki MR Wi‑Fi (full-stack)\"],\n notes: \"Gold assumes dual-broadband end-state; RapidStart is recommended when circuit lead times are long.\",\n },\n Platinum: {\n edge: [\"Meraki MX250 (HQ / hub)\", \"Alt: Meraki MX450 (large campus/DC)\"],\n cellular: [\"Optional: Meraki MG51 or MG52 (5G)\"],\n lan: [\"Optional: Meraki MS250/MS350 (aggregation)\", \"Optional: Meraki switching/wireless for full-stack\"],\n notes:\n \"Platinum targets mission-critical hubs/HQ. Final sizing depends on firewall/IDS/AMP features, VPN scale, and throughput.\",\n },\n RapidStart: {\n edge: [\"Meraki MX68/MX75 (typical Day‑0 branch)\", \"Alt: MX85 (higher bandwidth/flows)\"],\n cellular: [\"Primary Day‑0: Meraki MG51 or MG52 (5G)\", \"Alt: Meraki MG41 (4G LTE)\"],\n lan: [\"Optional: Meraki MS120/MS130\"],\n notes:\n \"RapidStart is a Day‑0 enablement using cellular/best-effort BB while long-lead circuits are pending. Migrate to steady-state circuits later.\",\n },\n },\n catalyst: {\n Copper: {\n edge: [\"Cisco Catalyst C8200L-1N-4T (controller mode for SD‑WAN)\"],\n cellular: [\"Optional: Cisco Catalyst Cellular Gateway CG418-E (4G) or CG522-E (5G)\"],\n lan: [\"Optional: Cisco Catalyst 9200L (access switching)\"],\n notes: \"Copper targets small / low criticality. Validate throughput and select modules/optics as needed.\",\n },\n Silver: {\n edge: [\"Cisco Catalyst C8200-1N-4T (controller mode for SD‑WAN)\", \"Alt: C8200L-1N-4T\"],\n cellular: [\"Optional: Cisco Catalyst Cellular Gateway CG418-E (4G) or CG522-E (5G)\"],\n lan: [\"Optional: Cisco Catalyst 9200L / 9300 (access switching)\"],\n notes: \"Silver targets standard branches. Add dual ISP for resiliency or use RapidStart for Day‑0 turn-up.\",\n },\n Gold: {\n edge: [\"Cisco Catalyst C8300-1N1S-4T2X\", \"Alt: C8300-1N1S-6T\"],\n cellular: [\"Optional: Cisco Catalyst Cellular Gateway CG522-E (5G)\"],\n lan: [\"Optional: Cisco Catalyst 9300 (access switching)\"],\n notes: \"Gold assumes dual-broadband end-state with standardized policies and templates.\",\n },\n Platinum: {\n edge: [\n \"Cisco Catalyst C8300-2N2S-6T (HQ/hub)\",\n \"Alt: C8300-2N2S-4T2X\",\n \"High-scale hub/DC: Catalyst 8500 (C8500-12X / C8500-12X4QC / C8500-20X6C)\",\n ],\n cellular: [\"Optional: Cisco Catalyst Cellular Gateway CG522-E (5G)\"],\n lan: [\"Optional: Cisco Catalyst 9300/9500 (campus/core)\"],\n notes:\n \"Platinum targets mission-critical hubs/HQ and higher scale. Final sizing depends on tunnel scale, crypto, and service insertion.\",\n },\n RapidStart: {\n edge: [\"Cisco Catalyst C8200L-1N-4T (typical Day‑0 branch)\", \"Alt: C8200-1N-4T\"],\n cellular: [\"Primary Day‑0: Cisco Catalyst Cellular Gateway CG522-E (5G)\", \"Alt: CG418-E (4G)\"],\n lan: [\"Optional: Cisco Catalyst 9200L\"],\n notes:\n \"RapidStart is a Day‑0 enablement using cellular/best-effort BB while long-lead circuits are pending. Migrate to steady-state circuits later.\",\n },\n },\n};\n\n// Sample BOMs (region relevance: US)\nconst BOM_SAMPLES: Record = {\n meraki: [\n {\n title: \"Sample CPE BOM (Meraki) — Branch Gold (dual internet + LTE/5G)\",\n region: \"US\",\n items: [\n \"SD‑WAN Edge: Meraki MX95 (standard) / MX105 (higher scale)\",\n \"Licensing: Meraki Dashboard subscription (term aligned to standard offer)\",\n \"Underlay: Dual business broadband handoffs (ISP1 + ISP2)\",\n \"RapidStart / failover: Meraki MG51 or MG52 (5G) (alt: MG41 4G LTE)\",\n \"Optional full-stack: Meraki MS access switch + MR Wi‑Fi (if in-scope)\",\n ],\n },\n {\n title: \"Sample CPE BOM (Meraki) — Small Copper (single internet)\",\n region: \"US\",\n items: [\n \"SD‑WAN Edge: Meraki MX68 (standard small) (alt: MX75)\",\n \"Licensing: Meraki Dashboard subscription (baseline)\",\n \"Underlay: Single business broadband handoff\",\n \"Optional resiliency: Meraki MG41 (4G LTE) or MG51/MG52 (5G)\",\n \"Optional: Meraki MS120 access switch\",\n ],\n },\n ],\n catalyst: [\n {\n title: \"Sample CPE BOM (Catalyst SD‑WAN) — HQ Platinum (dual internet + advanced policy)\",\n region: \"US\",\n items: [\n \"SD‑WAN Edge: Catalyst C8300-2N2S-6T (standard HQ/hub) (alt: Catalyst 8500 for high scale)\",\n \"Controllers: vManage/vSmart/vBond (Verizon managed service)\",\n \"Underlay: Dual business broadband handoffs (ISP1 + ISP2)\",\n \"Optional: Catalyst Cellular Gateway CG522-E (5G) for Day‑0/failover\",\n \"Optional LAN: Catalyst 9300/9500 switching (if in-scope)\",\n ],\n },\n {\n title: \"Sample CPE BOM (Catalyst SD‑WAN) — Branch Silver (single internet)\",\n region: \"US\",\n items: [\n \"SD‑WAN Edge: Catalyst C8200-1N-4T (alt: C8200L-1N-4T)\",\n \"Controllers: vManage/vSmart/vBond (Verizon managed service)\",\n \"Underlay: Single business broadband handoff\",\n \"Optional: Catalyst Cellular Gateway CG418-E (4G) or CG522-E (5G)\",\n \"Optional: Catalyst 9200L access switch\",\n ],\n },\n ],\n};\n\n// Licensing references (exact SKU examples).\n// - Meraki: ENT (Enterprise), SEC (Advanced Security), SDW (Secure SD‑WAN Plus)\n// - Catalyst SD‑WAN: Cisco DNA subscription PID includes management type, throughput tier, tier (Essentials/Advantage), and term.\n// Examples: DNA-C-T1-E-3Y (Cloud, Tier 1, DNA Essentials, 3-year) | DNA-C-T3-A-3Y (Cloud, Tier 3, DNA Advantage, 3-year)\nconst LICENSE_REFS: Record<\n VendorKey,\n Record\n> = {\n meraki: {\n Copper: {\n standard: \"MX68/MX75 Enterprise (example: LIC-MX68-ENT-3Y, LIC-MX75-ENT-3Y)\",\n optional: [\n \"Advanced Security (example: LIC-MX68-SEC-3Y, LIC-MX75-SEC-3Y)\",\n \"Secure SD‑WAN Plus (example: LIC-MX68-SDW-3Y, LIC-MX75-SDW-3Y)\",\n ],\n notes: \"Enterprise keeps cost/complexity low. Use SEC/SDW when IDS/IPS, advanced security services, or richer SD‑WAN analytics are required.\",\n },\n Silver: {\n standard: \"MX75/MX85 Enterprise (example: LIC-MX75-ENT-3Y, LIC-MX85-ENT-3Y)\",\n optional: [\n \"Advanced Security (example: LIC-MX75-SEC-3Y, LIC-MX85-SEC-3Y)\",\n \"Secure SD‑WAN Plus (example: LIC-MX75-SDW-3Y, LIC-MX85-SDW-3Y)\",\n ],\n notes: \"Silver assumes baseline firewall + SD‑WAN. Upgrade to SEC/SDW for IDS/IPS or tighter security posture.\",\n },\n Gold: {\n standard: \"MX95/MX105 Secure SD‑WAN Plus (example: LIC-MX95-SDW-3Y, LIC-MX105-SDW-3Y)\",\n optional: [\"Enterprise (example: LIC-MX95-ENT-3Y, LIC-MX105-ENT-3Y) if security add-ons are out-of-scope\"],\n notes: \"Gold standardizes on SDW for better application experience and optional security services without bespoke design.\",\n },\n Platinum: {\n standard: \"MX250/MX450 Secure SD‑WAN Plus (example: LIC-MX250-SDW-3Y, LIC-MX450-SDW-3Y)\",\n optional: [\"Advanced Security (example: LIC-MX250-SEC-3Y, LIC-MX450-SEC-3Y) when SDW not selected\"],\n notes: \"Platinum sites are mission-critical; default to SDW to keep the experience consistent and reduce exceptions.\",\n },\n RapidStart: {\n standard: \"Match the end-state MX license (recommended SDW for Gold/Platinum; ENT for Copper/Silver)\",\n optional: [\n \"If using RapidStart-only temporary kit, license can be short-term (1Y) aligned to the migration window\",\n ],\n notes: \"RapidStart is a Day‑0 enablement. Keep licensing aligned to the steady-state to avoid rework.\",\n },\n },\n catalyst: {\n Copper: {\n standard: \"Cisco DNA for SD‑WAN & Routing — Essentials, Tier 1 (example: DNA-C-T1-E-3Y)\",\n optional: [\n \"On-prem management option: DNA-P-T1-E-3Y\",\n \"Tier selection can be T0/T1 based on throughput entitlement\",\n ],\n notes: \"Copper is single-internet/low complexity. Use controller mode for SD‑WAN. Choose Tier based on expected encrypted throughput.\",\n },\n Silver: {\n standard: \"Cisco DNA — Essentials, Tier 1 or Tier 2 (example: DNA-C-T1-E-3Y or DNA-C-T2-E-3Y)\",\n optional: [\"On-prem management option: DNA-P-T1-E-3Y / DNA-P-T2-E-3Y\"],\n notes: \"Select Tier by throughput. Tier 2+ may require High Security (HSECK9) entitlement depending on platform.\",\n },\n Gold: {\n standard: \"Cisco DNA — Advantage, Tier 2 (example: DNA-C-T2-A-3Y)\",\n optional: [\n \"Tier 3 for higher WAN aggregation (example: DNA-C-T3-A-3Y)\",\n \"On-prem management option: DNA-P-T2-A-3Y\",\n ],\n notes: \"Gold standardizes on DNA Advantage to support richer SD‑WAN capabilities while maintaining repeatable templates.\",\n },\n Platinum: {\n standard: \"Cisco DNA — Advantage, Tier 3 (example: DNA-C-T3-A-3Y)\",\n optional: [\n \"Higher tiers (T4/T5) where supported; align with platform mapping\",\n \"On-prem management option: DNA-P-T3-A-3Y\",\n ],\n notes: \"Platinum hubs may require higher throughput tiers and Network Advantage boot level. Validate platform tier-to-throughput mapping.\",\n },\n RapidStart: {\n standard: \"Match the end-state DNA tier; optionally use Tier 1 for Day‑0 if the kit is temporary\",\n optional: [\"DNA-C-T1-E-1Y (short term) where commercially allowed\"],\n notes: \"RapidStart is interim. Keep the DNA model consistent with the steady-state deployment to reduce migration risk.\",\n },\n },\n};\n\n// -------------------------\n// Utility helpers\n// -------------------------\n\nfunction clamp(n: number, min: number, max: number) {\n return Math.max(min, Math.min(max, n));\n}\n\nfunction safeFilename(input: string) {\n const base = (input || \"Customer\").trim();\n const spaced = base.split(\" \").filter(Boolean).join(\"_\");\n const cleaned = spaced\n .split(\"\")\n .map((c) => {\n const ok =\n (c >= \"a\" && c <= \"z\") ||\n (c >= \"A\" && c <= \"Z\") ||\n (c >= \"0\" && c <= \"9\") ||\n c === \"_\" ||\n c === \"-\";\n return ok ? c : \"\";\n })\n .join(\"\");\n return cleaned || \"Customer\";\n}\n\nfunction triggerDownloadFromUrl(filename: string, url: string) {\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n a.rel = \"noopener\";\n document.body.appendChild(a);\n a.click();\n a.remove();\n}\n\nfunction triggerDownloadBlob(filename: string, blob: Blob) {\n const url = URL.createObjectURL(blob);\n try {\n triggerDownloadFromUrl(filename, url);\n } finally {\n setTimeout(() => {\n try {\n URL.revokeObjectURL(url);\n } catch {\n // no-op\n }\n }, 10_000);\n }\n}\n\nfunction createObjectUrl(blob: Blob) {\n return URL.createObjectURL(blob);\n}\n\nasync function copyToClipboard(text: string) {\n try {\n await navigator.clipboard.writeText(text);\n return true;\n } catch {\n return false;\n }\n}\n\n// -------------------------\n// Vendor scoring (Meraki preference when simplicity/full-stack/fast)\n// Negative score → Meraki, Positive score → Catalyst\n// -------------------------\n\nfunction vendorScore(a: Record) {\n let s = 0;\n s += a.full_stack ? -4 : 1;\n s += a.plug_play ? -3 : 1;\n s += a.template_strict ? -1 : 1;\n\n s += a.segmentation === \"high\" ? 3 : a.segmentation === \"med\" ? 1 : -2;\n s += a.routing === \"advanced\" ? 3 : a.routing === \"standard\" ? 0 : -2;\n s += a.ops_model === \"expert\" ? 2 : a.ops_model === \"lean\" ? -2 : 0;\n s += a.timeline === \"asap\" ? -1 : a.timeline === \"flex\" ? 1 : 0;\n return s;\n}\n\nfunction pickVendorFromScore(score: number): { pick: VendorKey; confidence: \"High\" | \"Medium\" | \"Low\" } {\n if (score <= -4) return { pick: \"meraki\", confidence: \"High\" };\n if (score <= -1) return { pick: \"meraki\", confidence: \"Medium\" };\n if (score >= 4) return { pick: \"catalyst\", confidence: \"High\" };\n if (score >= 1) return { pick: \"catalyst\", confidence: \"Medium\" };\n return { pick: \"meraki\", confidence: \"Low\" };\n}\n\nfunction keyDrivers(a: Record) {\n const out: string[] = [];\n if (a.full_stack) out.push(\"Full-stack standard platform → Meraki\");\n if (a.plug_play) out.push(\"Plug-and-play / fastest deployment → Meraki\");\n if (a.template_strict) out.push(\"Strict templates / low variance preferred\");\n if (a.segmentation === \"high\") out.push(\"Advanced segmentation / multi-VRF → Catalyst\");\n if (a.routing === \"advanced\") out.push(\"Advanced routing/topology needs → Catalyst\");\n if (a.ops_model === \"lean\") out.push(\"Lean ops model (simplicity matters)\");\n if (a.timeline === \"asap\") out.push(\"ASAP time-to-value\");\n return out.slice(0, 6);\n}\n\n// -------------------------\n// Site tiering rules (simple and deterministic)\n// -------------------------\n\nfunction siteTierFromAnswers(a: Record): Exclude {\n const crit = String(a.criticality || \"standard\");\n const realtime = !!a.realtime;\n const dual = String(a.dual_inet || \"preferred\");\n const bw = Number(a.bandwidth || 0);\n\n let score = 0;\n score += crit === \"mission\" ? 4 : crit === \"important\" ? 2 : crit === \"standard\" ? 1 : 0;\n score += realtime ? 2 : 0;\n score += dual === \"required\" ? 3 : dual === \"preferred\" ? 1 : 0;\n score += bw >= 500 ? 3 : bw >= 200 ? 2 : bw >= 100 ? 1 : 0;\n\n if (score >= 9) return \"Platinum\";\n if (score >= 6) return \"Gold\";\n if (score >= 3) return \"Silver\";\n return \"Copper\";\n}\n\nfunction rapidStartRecommended(a: Record) {\n if (a.rapidstart) return true;\n const dual = String(a.dual_inet || \"preferred\");\n const crit = String(a.criticality || \"standard\");\n // If dual is required at a high-criticality site, RapidStart is a strong recommendation.\n if (dual === \"required\" && (crit === \"mission\" || crit === \"important\")) return true;\n return false;\n}\n\n// -------------------------\n// Validation (PASS/WARN/FAIL)\n// -------------------------\n\ntype ValidationStatus = \"PASS\" | \"WARN\" | \"FAIL\";\n\ntype ValidationItem = {\n id: string;\n status: ValidationStatus;\n title: string;\n detail: string;\n};\n\nfunction validateSolution(params: {\n vendorPick: VendorKey;\n vendorAnswers: Record;\n siteResult: Record; rapid: boolean }>;\n profileCounts: Record;\n}) {\n const { vendorPick, vendorAnswers, siteResult, profileCounts } = params;\n\n const items: ValidationItem[] = [];\n\n // 1) Template standardization\n items.push({\n id: \"templates\",\n status: vendorAnswers.template_strict ? \"PASS\" : \"WARN\",\n title: \"Standard templates acceptance\",\n detail: vendorAnswers.template_strict\n ? \"Customer accepts strict standardized templates (low variance).\"\n : \"Customer may require customization; expect higher complexity and longer delivery.\",\n });\n\n // 2) Vendor fit\n if (vendorPick === \"meraki\" && vendorAnswers.segmentation === \"high\") {\n items.push({\n id: \"vendor-fit\",\n status: \"WARN\",\n title: \"Vendor fit vs segmentation\",\n detail:\n \"Meraki selected but high segmentation/multi-VRF indicated. Consider Catalyst SD-WAN if segmentation is a hard requirement.\",\n });\n } else {\n items.push({\n id: \"vendor-fit\",\n status: \"PASS\",\n title: \"Vendor fit\",\n detail: \"Selected vendor aligns with the primary drivers captured in discovery.\",\n });\n }\n\n // 3) HQ resiliency expectation\n const hq = siteResult.hq;\n if ((hq.tier === \"Platinum\" || hq.tier === \"Gold\") && !hq.rapid) {\n items.push({\n id: \"hq-rapid\",\n status: \"WARN\",\n title: \"HQ Day-0 enablement\",\n detail:\n \"HQ is Gold/Platinum. If circuit lead times are long, enabling RapidStart can accelerate Day-0 turn-up.\",\n });\n } else {\n items.push({\n id: \"hq-rapid\",\n status: \"PASS\",\n title: \"HQ Day-0 enablement\",\n detail: \"Day-0 enablement is aligned to the site criticality and transport assumptions.\",\n });\n }\n\n // 4) Dual ISP planning for high tiers\n const dualPlanned = (profileCounts.Platinum || 0) + (profileCounts.Gold || 0);\n if (dualPlanned === 0) {\n items.push({\n id: \"dual-isp\",\n status: \"WARN\",\n title: \"Dual ISP resiliency planning\",\n detail:\n \"No Gold/Platinum sites in the simulation. If mission-critical sites exist, consider Gold/Platinum with dual ISP.\",\n });\n } else {\n items.push({\n id: \"dual-isp\",\n status: \"PASS\",\n title: \"Dual ISP resiliency planning\",\n detail: `Dual ISP planned for Gold/Platinum sites (count: ${dualPlanned}).`,\n });\n }\n\n // 5) RapidStart subset sanity\n const totalSites =\n (profileCounts.Platinum || 0) +\n (profileCounts.Gold || 0) +\n (profileCounts.Silver || 0) +\n (profileCounts.Copper || 0);\n const rapid = profileCounts.RapidStart || 0;\n if (rapid > totalSites) {\n items.push({\n id: \"rapid-subset\",\n status: \"FAIL\",\n title: \"RapidStart subset check\",\n detail: \"RapidStart enablements cannot exceed total steady-state sites. Adjust the counts.\",\n });\n } else {\n items.push({\n id: \"rapid-subset\",\n status: \"PASS\",\n title: \"RapidStart subset check\",\n detail: `RapidStart enablements: ${rapid} of ${totalSites} steady-state sites (subset).`,\n });\n }\n\n return items;\n}\n\n// -------------------------\n// HLD builder\n// -------------------------\n\nfunction buildHldText(params: {\n customerName: string;\n opportunityName: string;\n region: string;\n vendor: { name: string };\n vendorConfidence: string;\n drivers: string[];\n siteResult: Record; rapid: boolean }>;\n profileCounts: Record;\n validation: ValidationItem[];\n assumptions: string;\n vendorPick: VendorKey;\n}) {\n const {\n customerName,\n opportunityName,\n region,\n vendor,\n vendorConfidence,\n drivers,\n siteResult,\n profileCounts,\n validation,\n assumptions,\n vendorPick,\n } = params;\n\n const now = new Date();\n const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, \"0\")}-${String(\n now.getDate()\n ).padStart(2, \"0\")}`;\n\n const selectedSites = SITE_TYPES.map((s) => {\n const r = siteResult[s.key];\n return `- ${s.label}: ${r.tier}${r.rapid ? \" + RapidStart Day-0\" : \"\"}`;\n }).join(NL);\n\n const validationLines = validation\n .map((v) => `- [${v.status}] ${v.title}: ${v.detail}`)\n .join(NL);\n\n const totalSites =\n (profileCounts.Platinum || 0) +\n (profileCounts.Gold || 0) +\n (profileCounts.Silver || 0) +\n (profileCounts.Copper || 0);\n const dualSites = (profileCounts.Platinum || 0) + (profileCounts.Gold || 0);\n const singleSites = (profileCounts.Silver || 0) + (profileCounts.Copper || 0);\n\n const driverLines = drivers.length ? drivers.map((d) => `- ${d}`).join(NL) : \"- (none)\";\n\n const hld =\n `HIGH LEVEL DESIGN (HLD) — Verizon Managed SD-WAN (Internet-first)${NL}${NL}` +\n `Document Control${NL}` +\n `- Version: 0.2 (auto-generated draft)${NL}` +\n `- Date: ${dateStr}${NL}` +\n `- Audience: Solution Architect / Customer Stakeholders${NL}${NL}` +\n `Customer: ${customerName || \"\"}${NL}` +\n `Opportunity / use case: ${opportunityName || \"\"}${NL}` +\n `Region relevance: ${region || \"US\"}${NL}${NL}` +\n `1. Executive Summary${NL}` +\n `This HLD provides a standardized Verizon Managed SD-WAN design focused on internet transport. It prioritizes simplicity, flexibility, rapid delivery, and an exceptional customer experience using repeatable site profiles and templates.${NL}${NL}` +\n `Recommended vendor path: ${vendor.name} (confidence: ${vendorConfidence})${NL}` +\n `Key decision drivers:${NL}${driverLines}${NL}${NL}` +\n `2. Site Types and Profile Selection${NL}` +\n `Selected profile by site type:${NL}${selectedSites}${NL}${NL}` +\n `Customer network simulation (profile mix):${NL}` +\n `- Platinum: ${profileCounts.Platinum || 0}${NL}` +\n `- Gold: ${profileCounts.Gold || 0}${NL}` +\n `- Silver: ${profileCounts.Silver || 0}${NL}` +\n `- Copper: ${profileCounts.Copper || 0}${NL}` +\n `- Total steady-state sites: ${totalSites}${NL}` +\n `- Dual-internet sites (Platinum+Gold): ${dualSites}${NL}` +\n `- Single-internet sites (Silver+Copper): ${singleSites}${NL}` +\n `- RapidStart Day-0 enablements (subset): ${profileCounts.RapidStart || 0}${NL}${NL}` +\n `3. Reference Architecture (Internet-first)${NL}` +\n `- Underlay: Business Broadband Internet (primary and secondary where applicable)${NL}` +\n `- Overlay: Encrypted SD-WAN tunnels with application-aware steering${NL}` +\n `- DIA: Local breakout (internet-first) for SaaS and general internet traffic${NL}` +\n `- Central services: Verizon managed orchestration/monitoring (standard offer)${NL}${NL}` +\n `4. Profile Network Design (per tier)${NL}` +\n `Platinum${NL}` +\n `- Underlay: ${PROFILE_STANDARDS.Platinum.underlay}${NL}` +\n `- Overlay: ${PROFILE_STANDARDS.Platinum.overlay}${NL}` +\n `- Security: ${PROFILE_STANDARDS.Platinum.security}${NL}` +\n `- LAN: ${PROFILE_STANDARDS.Platinum.lan}${NL}` +\n `Gold${NL}` +\n `- Underlay: ${PROFILE_STANDARDS.Gold.underlay}${NL}` +\n `- Overlay: ${PROFILE_STANDARDS.Gold.overlay}${NL}` +\n `- Security: ${PROFILE_STANDARDS.Gold.security}${NL}` +\n `- LAN: ${PROFILE_STANDARDS.Gold.lan}${NL}` +\n `Silver${NL}` +\n `- Underlay: ${PROFILE_STANDARDS.Silver.underlay}${NL}` +\n `- Overlay: ${PROFILE_STANDARDS.Silver.overlay}${NL}` +\n `- Security: ${PROFILE_STANDARDS.Silver.security}${NL}` +\n `- LAN: ${PROFILE_STANDARDS.Silver.lan}${NL}` +\n `Copper${NL}` +\n `- Underlay: ${PROFILE_STANDARDS.Copper.underlay}${NL}` +\n `- Overlay: ${PROFILE_STANDARDS.Copper.overlay}${NL}` +\n `- Security: ${PROFILE_STANDARDS.Copper.security}${NL}` +\n `- LAN: ${PROFILE_STANDARDS.Copper.lan}${NL}` +\n `RapidStart Day-0 (Fast delivery)${NL}` +\n `- Underlay: ${PROFILE_STANDARDS.RapidStart.underlay}${NL}` +\n `- Overlay: ${PROFILE_STANDARDS.RapidStart.overlay}${NL}` +\n `- Security: ${PROFILE_STANDARDS.RapidStart.security}${NL}${NL}` +\n `5. Solution Validation (High level)${NL}` +\n `${validationLines}${NL}${NL}` +\n `6. Network Elements (standardized)${NL}` +\n `- SD-WAN Edge CPE${NL}` +\n `- Business Broadband Internet handoff(s)${NL}` +\n `- LTE/5G Gateway/Modem (RapidStart and/or resiliency)${NL}` +\n `- Managed LAN Switch (vendor-aligned)${NL}` +\n `- Optional: IDS/IPS or SSE/SASE steering${NL}${NL}` +\n `7. Assumptions and Limitations${NL}` +\n (assumptions\n ? assumptions + NL + NL\n : `- Internet services available at sites (at least one ISP)${NL}- Customer adopts standard templates (minimal variance)${NL}- Device sizing and detailed policies finalized in LLD${NL}- RapidStart performance depends on wireless/best-effort conditions${NL}${NL}`) +\n `APPENDIX A — Standard Hardware References (by profile)${NL}` +\n PROFILE_TIERS.map((p) => {\n const hw = HARDWARE_REFS[vendorPick][p];\n const lic = LICENSE_REFS[vendorPick][p];\n const label = p === \"Copper\" ? \"Copper (Bronze)\" : p;\n return (\n `${label}${NL}` +\n `- SD-WAN Edge: ${hw.edge.join(\"; \")}${NL}` +\n `- Cellular (optional): ${hw.cellular.join(\"; \")}${NL}` +\n `- LAN (optional): ${hw.lan.join(\"; \")}${NL}` +\n `- Notes: ${hw.notes}${NL}` +\n `- License (standard): ${lic.standard}${NL}` +\n (lic.optional?.length ? `- License (optional): ${lic.optional.join(\"; \")}${NL}` : \"\") +\n `- License notes: ${lic.notes}${NL}`\n );\n }).join(NL) +\n `${NL}${NL}` +\n `APPENDIX B — Sample CPE BOM (high-level, region: US)${NL}` +\n BOM_SAMPLES[vendorPick]\n .map((b) => `${b.title}${NL}${b.items.map((i) => `- ${i}`).join(NL)}`)\n .join(NL + NL) +\n `${NL}${NL}` +\n `NOTE — Separate BOM Datasheet Export${NL}` +\n `This tool can also export a separate BOM datasheet spreadsheet (XLSX) based on the selected vendor and profile counts.${NL}${NL}` +\n `APPENDIX C — Optional Features and Complexity Impact${NL}` +\n OPTIONAL_FEATURES.map((f) => `- ${f.name}: ${f.status} | Complexity: ${f.complexity} | ${f.note}`).join(NL) +\n `${NL}`;\n\n return hld; // HLD text complete\n}\n\n\nfunction Field({\n q,\n value,\n onChange,\n}: {\n q: Question;\n value: any;\n onChange: (v: any) => void;\n}) {\n if (q.type === \"select\") {\n return (\n

{q.label}

\n {q.help ?

{q.help}

: null}\n \n

\n );\n }\n\n if (q.type === \"switch\") {\n return (\n

{q.label}

\n {q.help ?

{q.help}

: null}\n

\n \n

\n );\n }\n\n return (\n

{q.label}

\n {q.help ?

{q.help}

: null}\n {\n const raw = e.target.value;\n const cleaned = raw\n .split(\"\")\n .filter((c) => c >= \"0\" && c <= \"9\")\n .join(\"\");\n const n = cleaned === \"\" ? \"\" : clamp(Number(cleaned), 0, 100000);\n onChange(n);\n }}\n placeholder=\"e.g., 100\"\n />\n

\n );\n}\n\nfunction RecommendationCard({\n title,\n subtitle,\n badge,\n children,\n}: {\n title: string;\n subtitle?: string;\n badge?: string;\n children: React.ReactNode;\n}) {\n return (\n \n \n

\n {title}\n {badge ? {badge} : null}\n

\n {subtitle ?

{subtitle}

: null}\n \n {children}\n \n );\n}\n\nfunction ValidationBadge({ status }: { status: ValidationStatus }) {\n if (status === \"PASS\") return PASS;\n if (status === \"WARN\") return WARN;\n return FAIL;\n}\n\n\n\n// -------------------------\n// Reusable UI blocks\n// -------------------------\n\n// (RecommendationCard is defined once above. Duplicate definition removed.)\n\n// -------------------------\n// Component\n// -------------------------\n\nexport default function SdWanSaDecisionTool() {\n const [vendorAnswers, setVendorAnswers] = useState>({\n ...DEFAULT_VENDOR_ANSWERS,\n });\n\n const [siteAnswers, setSiteAnswers] = useState>>(() => ({\n hq: { ...DEFAULT_SITE_ANSWERS, criticality: \"important\", dual_inet: \"required\", bandwidth: \"500\" },\n branch: { ...DEFAULT_SITE_ANSWERS, criticality: \"standard\", dual_inet: \"preferred\", bandwidth: \"100\" },\n small: { ...DEFAULT_SITE_ANSWERS, criticality: \"low\", dual_inet: \"single\", realtime: false, bandwidth: \"50\" },\n }));\n\n const [profileCounts, setProfileCounts] = useState>({\n Platinum: 1,\n Gold: 10,\n Silver: 25,\n Copper: 5,\n RapidStart: 10,\n });\n\n const [customerName, setCustomerName] = useState(\"\");\n const [opportunityName, setOpportunityName] = useState(\"\");\n const [region, setRegion] = useState(\"US\");\n const [assumptions, setAssumptions] = useState(\"\");\n const [copied, setCopied] = useState(false);\n\n const [exporting, setExporting] = useState(false);\n const [exportError, setExportError] = useState(null);\n const [docxUrl, setDocxUrl] = useState(null);\n const [docxName, setDocxName] = useState(null);\n\n const [bomUrl, setBomUrl] = useState(null);\n const [bomName, setBomName] = useState(null);\n\n useEffect(() => {\n return () => {\n if (docxUrl) {\n try {\n URL.revokeObjectURL(docxUrl);\n } catch {\n // no-op\n }\n }\n if (bomUrl) {\n try {\n URL.revokeObjectURL(bomUrl);\n } catch {\n // no-op\n }\n }\n };\n }, [docxUrl, bomUrl]);\n\n const vendScore = useMemo(() => vendorScore(vendorAnswers), [vendorAnswers]);\n const vendorResult = useMemo(() => pickVendorFromScore(vendScore), [vendScore]);\n const vendor = VENDORS[vendorResult.pick];\n const drivers = useMemo(() => keyDrivers(vendorAnswers), [vendorAnswers]);\n\n const siteResult = useMemo(() => {\n const out: Record; rapid: boolean }> = {\n hq: { tier: \"Silver\", rapid: false },\n branch: { tier: \"Silver\", rapid: false },\n small: { tier: \"Copper\", rapid: false },\n };\n SITE_TYPES.forEach((s) => {\n const a = siteAnswers[s.key];\n out[s.key] = {\n tier: siteTierFromAnswers(a),\n rapid: rapidStartRecommended(a),\n };\n });\n return out;\n }, [siteAnswers]);\n\n const totalSites =\n (profileCounts.Platinum || 0) +\n (profileCounts.Gold || 0) +\n (profileCounts.Silver || 0) +\n (profileCounts.Copper || 0);\n const dualSites = (profileCounts.Platinum || 0) + (profileCounts.Gold || 0);\n const rapidSites = profileCounts.RapidStart || 0;\n\n const validation = useMemo(\n () =>\n validateSolution({\n vendorPick: vendorResult.pick,\n vendorAnswers,\n siteResult,\n profileCounts,\n }),\n [vendorResult.pick, vendorAnswers, siteResult, profileCounts]\n );\n\n const siteTable = useMemo(\n () => [\n { site: \"HQ/Hub\", tier: siteResult.hq.tier, rapid: siteResult.hq.rapid ? \"Yes\" : \"No\" },\n { site: \"Branch\", tier: siteResult.branch.tier, rapid: siteResult.branch.rapid ? \"Yes\" : \"No\" },\n { site: \"Small/Pop-up\", tier: siteResult.small.tier, rapid: siteResult.small.rapid ? \"Yes\" : \"No\" },\n ],\n [siteResult]\n );\n\n const profileMix = useMemo(\n () => [\n { profile: \"Platinum\", count: String(profileCounts.Platinum || 0), notes: \"Dual internet; mission-critical\" },\n { profile: \"Gold\", count: String(profileCounts.Gold || 0), notes: \"Dual internet preferred; important\" },\n { profile: \"Silver\", count: String(profileCounts.Silver || 0), notes: \"Single internet; standard\" },\n { profile: \"Copper\", count: String(profileCounts.Copper || 0), notes: \"Single internet; low criticality\" },\n {\n profile: \"RapidStart Day-0\",\n count: String(profileCounts.RapidStart || 0),\n notes: \"LTE/5G + best-effort broadband while awaiting circuits\",\n },\n ],\n [profileCounts]\n );\n\n const hldText = useMemo(\n () =>\n buildHldText({\n customerName,\n opportunityName,\n region,\n vendor,\n vendorConfidence: vendorResult.confidence,\n drivers,\n siteResult,\n profileCounts,\n validation,\n assumptions,\n vendorPick: vendorResult.pick,\n }),\n [\n customerName,\n opportunityName,\n region,\n vendor,\n vendorResult.confidence,\n drivers,\n siteResult,\n profileCounts,\n validation,\n assumptions,\n vendorResult.pick,\n ]\n );\n\n const resetAll = () => {\n setVendorAnswers({ ...DEFAULT_VENDOR_ANSWERS });\n setSiteAnswers({\n hq: { ...DEFAULT_SITE_ANSWERS, criticality: \"important\", dual_inet: \"required\", bandwidth: \"500\" },\n branch: { ...DEFAULT_SITE_ANSWERS, criticality: \"standard\", dual_inet: \"preferred\", bandwidth: \"100\" },\n small: { ...DEFAULT_SITE_ANSWERS, criticality: \"low\", dual_inet: \"single\", realtime: false, bandwidth: \"50\" },\n });\n setProfileCounts({ Platinum: 1, Gold: 10, Silver: 25, Copper: 5, RapidStart: 10 });\n setCustomerName(\"\");\n setOpportunityName(\"\");\n setRegion(\"US\");\n setAssumptions(\"\");\n setCopied(false);\n setExporting(false);\n setExportError(null);\n if (docxUrl) {\n try {\n URL.revokeObjectURL(docxUrl);\n } catch {\n // no-op\n }\n }\n setDocxUrl(null);\n setDocxName(null);\n\n if (bomUrl) {\n try {\n URL.revokeObjectURL(bomUrl);\n } catch {\n // no-op\n }\n }\n setBomUrl(null);\n setBomName(null);\n };\n\n const hasFail = validation.some((v) => v.status === \"FAIL\");\n\n return (\n

\n {/* Header */}\n

\n SD-WAN Solution Architect Decision Tool\n

\n Internet-first profiles • Standardized tiers • RapidStart Day-0 • Solution validation • HLD + BOM exports\n

\n \n

\n\n

\n {/* Column 1: Inputs */}\n

\n \n

Customer name

\n setCustomerName(e.target.value)} placeholder=\"e.g., ACME\" />\n

Opportunity / Use case

\n setOpportunityName(e.target.value)}\n placeholder=\"e.g., Branch refresh / SaaS migration\"\n />\n

Region

\n \n

\n \n\n \n

\n {VENDOR_QUESTIONS.map((q) => (\n setVendorAnswers((prev) => ({ ...prev, [q.id]: v }))}\n />\n ))}\n

\n \n\n \n

\n {SITE_TYPES.map((s) => (\n

{s.label}

\n Recommended: {siteResult[s.key].tier}\n {siteResult[s.key].rapid ? \" + RapidStart\" : \"\"}\n

\n {siteResult[s.key].tier}\n

\n \n

\n {SITE_QUESTIONS.map((q) => (\n \n setSiteAnswers((prev) => ({\n ...prev,\n [s.key]: { ...prev[s.key], [q.id]: v },\n }))\n }\n />\n ))}\n

\n ))}\n

\n \n

\n\n {/* Column 2: Simulation + Reference */}\n

\n \n

\n Selected vendor path: {vendor.name}\n

{vendor.tagline}

Key drivers

{d}
(none)

\n \n\n \n

\n {PROFILE_TIERS.map((p) => (\n

{p === \"Copper\" ? \"Copper (Bronze)\" : p}

\n {\n const cleaned = e.target.value\n .split(\"\")\n .filter((c) => c >= \"0\" && c <= \"9\")\n .join(\"\");\n const n = cleaned === \"\" ? 0 : clamp(Number(cleaned), 0, 100000);\n setProfileCounts((prev) => ({ ...prev, [p]: n }));\n }}\n />\n

\n ))}\n \n

\n Total steady-state sites: {totalSites} • Dual-internet\n sites (Gold+Platinum): {dualSites} • RapidStart subset:\n {rapidSites}\n

\n \n\n \n

\n {PROFILE_TIERS.map((p) => (\n

\n {p === \"Copper\" ? \"Copper (Bronze)\" : p}:{\" \"}\n {LICENSE_REFS[vendorResult.pick][p].standard}\n

\n ))}\n

\n License term (1/3/5/7-year) and throughput tier (Catalyst) are finalized in CCW/Verizon catalog.\n

\n \n\n \n setAssumptions(e.target.value)}\n className=\"min-h-[140px] text-sm\"\n placeholder=\"e.g., Sites have at least one broadband ISP available; customer accepts standard templates; no complex segmentation.\"\n />\n \n

\n\n {/* Column 3: Export + Validation + Preview */}\n

\n \n

\n {\n setExportError(null);\n setExporting(true);\n\n const fname = `HLD_${safeFilename(customerName)}_${vendorResult.pick}.docx`;\n const popup = window.open(\"about:blank\", \"_blank\");\n\n try {\n const blob = await hldToDocxBlob({\n hldText,\n vendorKey: vendorResult.pick,\n vendorName: vendor.name,\n siteTable,\n profileMix,\n validation,\n totalSites,\n dualSites,\n rapidSites,\n profileCounts,\n });\n\n if (docxUrl) {\n try {\n URL.revokeObjectURL(docxUrl);\n } catch {\n // no-op\n }\n }\n\n const url = createObjectUrl(blob);\n setDocxUrl(url);\n setDocxName(fname);\n\n try {\n triggerDownloadFromUrl(fname, url);\n } catch {\n // ignore\n }\n\n if (popup) {\n popup.location.href = url;\n try {\n popup.document.title = fname;\n } catch {\n // no-op\n }\n }\n } catch (e: any) {\n const msg = e?.message ? String(e.message) : \"DOCX export failed.\";\n setExportError(msg);\n if (popup) {\n try {\n popup.close();\n } catch {\n // no-op\n }\n }\n // eslint-disable-next-line no-console\n console.error(\"DOCX export failed\", e);\n } finally {\n setExporting(false);\n }\n }}\n >\n {exporting ? \"Generating…\" : \"Download HLD .docx\"}\n \n\n {\n setExportError(null);\n\n const xname = `BOM_${safeFilename(customerName)}_${vendorResult.pick}.xlsx`;\n const popup = window.open(\"about:blank\", \"_blank\");\n\n try {\n const wb = createBomWorkbook({\n vendorPick: vendorResult.pick,\n region,\n customerName,\n opportunityName,\n profileCounts,\n });\n const xlsxBlob = workbookToXlsxBlob(wb);\n\n if (bomUrl) {\n try {\n URL.revokeObjectURL(bomUrl);\n } catch {\n // no-op\n }\n }\n\n const url = createObjectUrl(xlsxBlob);\n setBomUrl(url);\n setBomName(xname);\n\n try {\n triggerDownloadFromUrl(xname, url);\n } catch {\n // ignore\n }\n\n if (popup) {\n popup.location.href = url;\n try {\n popup.document.title = xname;\n } catch {\n // no-op\n }\n }\n } catch (e: any) {\n const msg = e?.message ? String(e.message) : \"BOM XLSX export failed.\";\n setExportError(msg);\n if (popup) {\n try {\n popup.close();\n } catch {\n // no-op\n }\n }\n // eslint-disable-next-line no-console\n console.error(\"BOM XLSX export failed\", e);\n }\n }}\n >\n Download BOM .xlsx\n \n\n {\n const ok = await copyToClipboard(hldText);\n setCopied(ok);\n setTimeout(() => setCopied(false), 1500);\n }}\n >\n {copied ? \"Copied\" : \"Copy HLD\"}\n \n

\n\n {exportError ?

Export error: {exportError}

: null}\n\n {docxUrl && docxName ? (\n

HLD download link (use this if downloads are blocked):

\n \n Click to download\n \n \n Open in new tab\n \n

\n ) : null}\n\n {bomUrl && bomName ? (\n

BOM XLSX link (use this if downloads are blocked):

\n \n Click to download\n \n \n Open in new tab\n \n

\n ) : null}\n\n

\n {hasFail ? \"Resolve validation FAIL items before exporting.\" : \"Exports are template-based and standardized.\"}\n

\n \n\n \n

\n {validation.map((v) => (\n

\n {v.title}\n

{v.detail}

\n \n

\n ))}\n

\n \n\n \n

\n Updates as you change answers.\n

\n            </RecommendationCard>\n          </div>\n        </div>\n\n        <div className=\"text-xs text-muted-foreground pb-8\">\n          Disclaimer: This is a standardized decision aid to select SD-WAN profiles and generate a draft HLD. It does not\n          replace detailed validation (addressing, HA design, circuit feasibility, security policy, and performance testing).\n        </div>\n      </div>\n    </div>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","3674090870442585067","traceTime",1777716049624]
</article></body></html>