${scope.title}

Generated on: ${new Date(scope.generatedDate).toLocaleDateString()}

${Object.values(scope.areas).map( (area) => `

${area.name}

${area.description}

Risk Level: ${area.riskLevel}

Estimated Duration: ${area.estimatedDuration} days

Controls:

${control.name} (${control.riskRating} Risk)
${control.description}
${control.assignedTo ? `Assigned to: ${control.assignedTo}
` : ""} ${control.notes ? `Notes: ${control.notes}` : ""}

` ).join("")}

`; }; const generateReport = async () => { setLoading(true); try { const response = await fetch("/api/audit-planning", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ operation: "generateReport", framework: selectedFramework, reportType: selectedReport }) }); if (!response.ok) { throw new Error("Failed to generate report"); } const data = await response.json(); setReportData(data.reportData); } catch (err) { console.error(err); setError("Failed to generate report"); } finally { setLoading(false); } }; const getRiskBadgeColor = (risk) => { switch (risk?.toLowerCase()) { case "high": return "bg-red-100 text-red-800"; case "medium": return "bg-yellow-100 text-yellow-800"; case "low": return "bg-green-100 text-green-800"; default: return "bg-gray-100 text-gray-800"; } }; return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-7xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-8" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-bold" }, "Internal Audit Scope Planner"), /* @__PURE__ */ React.createElement("div", { className: "flex space-x-4" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("planning"), className: `px-4 py-2 rounded ${activeTab === "planning" ? "bg-blue-500 text-white" : "bg-white text-gray-700 hover:bg-gray-50"}` }, "Planning" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("execution"), className: `px-4 py-2 rounded ${activeTab === "execution" ? "bg-blue-500 text-white" : "bg-white text-gray-700 hover:bg-gray-50"}` }, "Execution" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("reporting"), className: `px-4 py-2 rounded ${activeTab === "reporting" ? "bg-blue-500 text-white" : "bg-white text-gray-700 hover:bg-gray-50"}` }, "Reporting" ))), error && /* @__PURE__ */ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" }, error), activeTab === "planning" && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "col-span-1" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4" }, "1. Select Framework"), /* @__PURE__ */ React.createElement( "select", { value: selectedFramework, onChange: (e) => setSelectedFramework(e.target.value), className: "w-full p-2 border rounded" }, /* @__PURE__ */ React.createElement("option", { value: "ISO 27001" }, "ISO 27001"), /* @__PURE__ */ React.createElement("option", { value: "SOC 2" }, "SOC 2"), /* @__PURE__ */ React.createElement("option", { value: "PCI DSS" }, "PCI DSS"), /* @__PURE__ */ React.createElement("option", { value: "NIST CSF" }, "NIST CSF"), /* @__PURE__ */ React.createElement("option", { value: "GDPR" }, "GDPR"), /* @__PURE__ */ React.createElement("option", { value: "CCPA" }, "CCPA"), /* @__PURE__ */ React.createElement("option", { value: "COBIT" }, "COBIT"), /* @__PURE__ */ React.createElement("option", { value: "ITIL" }, "ITIL"), /* @__PURE__ */ React.createElement("option", { value: "SOX" }, "SOX"), /* @__PURE__ */ React.createElement("option", { value: "HIPAA" }, "HIPAA") )), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4" }, "2. Select Areas"), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, areas.map((area) => /* @__PURE__ */ React.createElement("div", { key: area.id, className: "border rounded p-4" }, /* @__PURE__ */ React.createElement("label", { className: "flex items-start" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", className: "mt-1", checked: selectedAreas.includes(area.id), onChange: () => { const newSelected = selectedAreas.includes(area.id) ? selectedAreas.filter((id) => id !== area.id) : [...selectedAreas, area.id]; setSelectedAreas(newSelected); if (!controls[area.id]) { fetchControls(area.id); } } } ), /* @__PURE__ */ React.createElement("div", { className: "ml-3 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium" }, area.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(area.risk_level)}` }, area.risk_level )), /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500" }, area.description), /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500 mt-1" }, "Est. Duration: ", area.estimated_duration, " days")))))))), /* @__PURE__ */ React.createElement("div", { className: "col-span-2" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4" }, "3. Review Controls"), /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, selectedAreas.map((areaId) => { const area = areas.find((a) => a.id === areaId); return /* @__PURE__ */ React.createElement("div", { key: areaId, className: "border rounded p-4" }, /* @__PURE__ */ React.createElement("h3", { className: "font-medium text-lg mb-3" }, area.name), controls[areaId] && /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, controls[areaId].map((control) => /* @__PURE__ */ React.createElement( "div", { key: control.id, className: "bg-gray-50 p-4 rounded" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start mb-2" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium" }, control.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(control.risk_rating)}` }, control.risk_rating )), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600 mb-2" }, control.description), editingControl === control.id ? /* @__PURE__ */ React.createElement("div", { className: "space-y-3 mt-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Assigned To"), /* @__PURE__ */ React.createElement( "input", { type: "text", className: "w-full p-2 border rounded", value: control.assigned_to || "", onChange: (e) => setControls((prev) => ({ ...prev, [areaId]: prev[areaId].map( (c) => c.id === control.id ? { ...c, assigned_to: e.target.value } : c ) })) } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Risk Rating"), /* @__PURE__ */ React.createElement( "select", { className: "w-full p-2 border rounded", value: control.risk_rating || "", onChange: (e) => setControls((prev) => ({ ...prev, [areaId]: prev[areaId].map( (c) => c.id === control.id ? { ...c, risk_rating: e.target.value } : c ) })) }, /* @__PURE__ */ React.createElement("option", { value: "High" }, "High"), /* @__PURE__ */ React.createElement("option", { value: "Medium" }, "Medium"), /* @__PURE__ */ React.createElement("option", { value: "Low" }, "Low") )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Notes"), /* @__PURE__ */ React.createElement( "textarea", { className: "w-full p-2 border rounded", value: control.notes || "", onChange: (e) => setControls((prev) => ({ ...prev, [areaId]: prev[areaId].map( (c) => c.id === control.id ? { ...c, notes: e.target.value } : c ) })) } )), /* @__PURE__ */ React.createElement("div", { className: "flex justify-end space-x-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setEditingControl(null), className: "px-3 py-1 text-sm border rounded hover:bg-gray-50" }, "Cancel" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => updateControl(control.id, { assigned_to: control.assigned_to, risk_rating: control.risk_rating, notes: control.notes }), className: "px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600" }, "Save" ))) : /* @__PURE__ */ React.createElement("div", { className: "space-y-2 mt-3" }, control.assigned_to && /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Assigned to:"), " ", control.assigned_to), control.notes && /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Notes:"), " ", control.notes), /* @__PURE__ */ React.createElement( "button", { onClick: () => setEditingControl(control.id), className: "text-sm text-blue-500 hover:text-blue-600" }, "Edit Details" )) )))); }))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold" }, "4. Generate & Export"), /* @__PURE__ */ React.createElement("div", { className: "space-x-3" }, /* @__PURE__ */ React.createElement( "button", { onClick: generateScope, disabled: loading || selectedAreas.length === 0, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:bg-gray-400" }, loading ? "Generating..." : "Generate Scope" ), scope && /* @__PURE__ */ React.createElement( "button", { onClick: exportToPDF, className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600" }, "Export as PDF" ))), scope && /* @__PURE__ */ React.createElement("div", { className: "border rounded p-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold mb-2" }, scope.title), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500 mb-4" }, "Generated on:", " ", new Date(scope.generatedDate).toLocaleDateString()), Object.values(scope.areas).map((area) => /* @__PURE__ */ React.createElement("div", { key: area.name, className: "mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start mb-2" }, /* @__PURE__ */ React.createElement("h4", { className: "font-medium" }, area.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(area.riskLevel)}` }, area.riskLevel )), /* @__PURE__ */ React.createElement("p", { className: "text-sm mb-2" }, area.description), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500 mb-2" }, "Estimated Duration: ", area.estimatedDuration, " days"), /* @__PURE__ */ React.createElement("h5", { className: "font-medium text-sm mb-2" }, "Controls:"), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, area.controls.map((control) => /* @__PURE__ */ React.createElement( "div", { key: control.name, className: "bg-gray-50 p-3 rounded" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start mb-1" }, /* @__PURE__ */ React.createElement("strong", { className: "text-sm" }, control.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(control.riskRating)}` }, control.riskRating )), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600" }, control.description), control.assignedTo && /* @__PURE__ */ React.createElement("p", { className: "text-sm mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Assigned to:"), " ", control.assignedTo), control.notes && /* @__PURE__ */ React.createElement("p", { className: "text-sm mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Notes:"), " ", control.notes) ))))))))), activeTab === "execution" && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4" }, "Audit Timeline"), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, areas.map((area) => /* @__PURE__ */ React.createElement("div", { key: area.id, className: "border rounded p-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start mb-2" }, /* @__PURE__ */ React.createElement("h3", { className: "font-medium" }, area.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(area.risk_level)}` }, area.risk_level )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Start Date"), /* @__PURE__ */ React.createElement( "input", { type: "date", className: "w-full p-2 border rounded", value: area.start_date || "", onChange: (e) => updateArea(area.id, { start_date: e.target.value }) } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "End Date"), /* @__PURE__ */ React.createElement( "input", { type: "date", className: "w-full p-2 border rounded", value: area.end_date || "", onChange: (e) => updateArea(area.id, { end_date: e.target.value }) } ))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Status"), /* @__PURE__ */ React.createElement( "select", { className: "w-full p-2 border rounded", value: area.status || "Planned", onChange: (e) => updateArea(area.id, { status: e.target.value }) }, /* @__PURE__ */ React.createElement("option", { value: "Planned" }, "Planned"), /* @__PURE__ */ React.createElement("option", { value: "In Progress" }, "In Progress"), /* @__PURE__ */ React.createElement("option", { value: "Under Review" }, "Under Review"), /* @__PURE__ */ React.createElement("option", { value: "Completed" }, "Completed") )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Priority"), /* @__PURE__ */ React.createElement( "select", { className: "w-full p-2 border rounded", value: area.priority || 3, onChange: (e) => updateArea(area.id, { priority: parseInt(e.target.value) }) }, /* @__PURE__ */ React.createElement("option", { value: 1 }, "High"), /* @__PURE__ */ React.createElement("option", { value: 2 }, "Medium"), /* @__PURE__ */ React.createElement("option", { value: 3 }, "Low") ))))))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4" }, "Control Testing"), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, selectedAreas.map((areaId) => { const area = areas.find((a) => a.id === areaId); return controls[areaId]?.map((control) => /* @__PURE__ */ React.createElement("div", { key: control.id, className: "border rounded p-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start mb-2" }, /* @__PURE__ */ React.createElement("h3", { className: "font-medium" }, control.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(control.risk_rating)}` }, control.risk_rating )), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Test Procedure"), /* @__PURE__ */ React.createElement( "textarea", { className: "w-full p-2 border rounded", value: control.test_procedure || "", onChange: (e) => updateControl(control.id, { test_procedure: e.target.value }) } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Evidence Required"), /* @__PURE__ */ React.createElement( "input", { type: "text", className: "w-full p-2 border rounded", value: control.evidence_required?.join(", ") || "", onChange: (e) => updateControl(control.id, { evidence_required: e.target.value.split(",").map((s) => s.trim()) }), placeholder: "Comma-separated list of required evidence" } )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Last Tested"), /* @__PURE__ */ React.createElement( "input", { type: "date", className: "w-full p-2 border rounded", value: control.last_tested || "", onChange: (e) => updateControl(control.id, { last_tested: e.target.value }) } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Effectiveness Score"), /* @__PURE__ */ React.createElement( "select", { className: "w-full p-2 border rounded", value: control.effectiveness_score || "", onChange: (e) => updateControl(control.id, { effectiveness_score: parseInt(e.target.value) }) }, /* @__PURE__ */ React.createElement("option", { value: "" }, "Select Score"), [1, 2, 3, 4, 5].map((score) => /* @__PURE__ */ React.createElement("option", { key: score, value: score }, score)) ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Remediation Plan"), /* @__PURE__ */ React.createElement( "textarea", { className: "w-full p-2 border rounded", value: control.remediation_plan || "", onChange: (e) => updateControl(control.id, { remediation_plan: e.target.value }) } ))))); })))), activeTab === "reporting" && /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold" }, "Generate Reports"), /* @__PURE__ */ React.createElement("div", { className: "flex space-x-4" }, /* @__PURE__ */ React.createElement( "select", { value: selectedReport, onChange: (e) => setSelectedReport(e.target.value), className: "p-2 border rounded" }, /* @__PURE__ */ React.createElement("option", { value: "compliance" }, "Compliance Status"), /* @__PURE__ */ React.createElement("option", { value: "risk" }, "Risk Assessment"), /* @__PURE__ */ React.createElement("option", { value: "timeline" }, "Timeline Overview") ), /* @__PURE__ */ React.createElement( "button", { onClick: generateReport, disabled: loading, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:bg-gray-400" }, loading ? "Generating..." : "Generate Report" ))), reportData && /* @__PURE__ */ React.createElement("div", { className: "border rounded p-4" }, selectedReport === "compliance" && /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, reportData.map((item, index) => /* @__PURE__ */ React.createElement("div", { key: index, className: "border-b pb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "font-medium mb-2" }, item.area_name), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-3 gap-4 text-sm" }, /* @__PURE__ */ React.createElement("div", null, item.control_name), /* @__PURE__ */ React.createElement( "div", { className: `px-2 py-1 rounded text-center ${item.compliance_status === "Compliant" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}` }, item.compliance_status ), /* @__PURE__ */ React.createElement("div", null, "Last tested:", " ", new Date(item.last_tested).toLocaleDateString()))))), selectedReport === "risk" && /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, reportData.map((item, index) => /* @__PURE__ */ React.createElement("div", { key: index, className: "border-b pb-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React.createElement("h3", { className: "font-medium" }, item.area_name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(item.area_risk)}` }, item.area_risk )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-3 gap-4 text-sm" }, /* @__PURE__ */ React.createElement("div", null, item.control_name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(item.control_risk)}` }, item.control_risk ), /* @__PURE__ */ React.createElement("div", null, "Effectiveness: ", item.effectiveness_score, "/5"))))), selectedReport === "timeline" && /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, reportData.map((item, index) => /* @__PURE__ */ React.createElement("div", { key: index, className: "border-b pb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "font-medium mb-2" }, item.area_name), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-4 gap-4 text-sm" }, /* @__PURE__ */ React.createElement("div", null, item.start_date ? new Date(item.start_date).toLocaleDateString() : "Not started", " - ", item.end_date ? new Date(item.end_date).toLocaleDateString() : "No end date"), /* @__PURE__ */ React.createElement("div", null, "Duration: ", item.estimated_duration, " days"), /* @__PURE__ */ React.createElement("div", null, "Controls: ", item.control_count), /* @__PURE__ */ React.createElement( "div", { className: `px-2 py-1 rounded text-center ${item.status === "Completed" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800"}` }, item.status ))))))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold" }, "Scope Document"), /* @__PURE__ */ React.createElement( "button", { onClick: exportToPDF, disabled: !scope, className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 disabled:bg-gray-400" }, "Export as PDF" )), scope && /* @__PURE__ */ React.createElement("div", { className: "border rounded p-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold mb-2" }, scope.title), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500 mb-4" }, "Generated on:", " ", new Date(scope.generatedDate).toLocaleDateString()), Object.values(scope.areas).map((area) => /* @__PURE__ */ React.createElement("div", { key: area.name, className: "mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start mb-2" }, /* @__PURE__ */ React.createElement("h4", { className: "font-medium" }, area.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(area.riskLevel)}` }, area.riskLevel )), /* @__PURE__ */ React.createElement("p", { className: "text-sm mb-2" }, area.description), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500 mb-2" }, "Estimated Duration: ", area.estimatedDuration, " days"), /* @__PURE__ */ React.createElement("h5", { className: "font-medium text-sm mb-2" }, "Controls:"), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, area.controls.map((control) => /* @__PURE__ */ React.createElement( "div", { key: control.name, className: "bg-gray-50 p-3 rounded" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-start mb-1" }, /* @__PURE__ */ React.createElement("strong", { className: "text-sm" }, control.name), /* @__PURE__ */ React.createElement( "span", { className: `text-xs px-2 py-1 rounded ${getRiskBadgeColor(control.riskRating)}` }, control.riskRating )), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600" }, control.description), control.assignedTo && /* @__PURE__ */ React.createElement("p", { className: "text-sm mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Assigned to:"), " ", control.assignedTo), control.notes && /* @__PURE__ */ React.createElement("p", { className: "text-sm mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Notes:"), " ", control.notes) )))))))))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();