Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | 7x 22x | import React from "react";
import { formatCurrency } from "../../../utils/formatUtils";
/**
* Props for SecurityBusinessTab component
*/
export interface SecurityBusinessTabProps {
businessMaturityLevel: string;
businessMaturityDescription: string;
securityScore: number;
costDetails: {
totalCapex: number;
totalOpex: number;
totalCost: number;
};
testId: string;
roiEstimate: string;
}
/**
* Business Value tab component for SecuritySummaryWidget
* Displays business impact, ROI, costs, and business enablement
*/
export const SecurityBusinessTab: React.FC<SecurityBusinessTabProps> = ({
businessMaturityLevel,
businessMaturityDescription,
securityScore,
costDetails,
testId,
roiEstimate,
}) => {
return (
<div data-testid={`${testId}-content-business`} className="space-y-4">
{/* Business Value content */}
<div className="p-3 bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg mb-4">
<p className="text-sm">
This section summarizes the business value and financial impact of
your selected security levels, helping justify security investments to
stakeholders.
</p>
</div>
{/* Business Impact Summary */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-100 dark:border-gray-700">
<h3 className="text-lg font-medium mb-3 text-gray-800 dark:text-gray-100">
Business Value Summary
</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* Business Maturity */}
<div className="p-3 bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg">
<h4 className="font-medium text-blue-700 dark:text-blue-300">
Business Maturity Level
</h4>
<div className="text-xl font-bold text-blue-600 dark:text-blue-400 mt-2">
{businessMaturityLevel}
</div>
<p className="text-sm text-blue-600 dark:text-blue-400 mt-1">
{businessMaturityDescription}
</p>
</div>
{/* ROI Estimation */}
<div className="p-3 bg-green-50 dark:bg-green-900 dark:bg-opacity-20 rounded-lg">
<h4 className="font-medium text-green-700 dark:text-green-300">
Estimated ROI
</h4>
<div className="text-xl font-bold text-green-600 dark:text-green-400 mt-2">
{roiEstimate}
</div>
<p className="text-sm text-green-600 dark:text-green-400 mt-1">
{securityScore >= 80
? "Strong return from security investments"
: securityScore >= 60
? "Good return from security investments"
: securityScore >= 40
? "Basic return, primarily risk avoidance"
: "Minimal return on investment"}
</p>
</div>
</div>
</div>
{/* Cost Summary */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-100 dark:border-gray-700">
<h3 className="text-lg font-medium mb-3 text-gray-800 dark:text-gray-100">
Cost Summary
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Implementation Cost */}
<div className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div className="text-sm font-medium mb-1">Implementation Cost</div>
<div className="text-xl font-bold text-blue-600 dark:text-blue-400">
{formatCurrency(costDetails.totalCapex)}
</div>
<div className="text-xs text-gray-600 dark:text-gray-400">
One-time investment
</div>
</div>
{/* Operational Cost */}
<div className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div className="text-sm font-medium mb-1">Operational Cost</div>
<div className="text-xl font-bold text-green-600 dark:text-green-400">
{formatCurrency(costDetails.totalOpex)}
</div>
<div className="text-xs text-gray-600 dark:text-gray-400">
Annual expense
</div>
</div>
{/* Total Cost */}
<div className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div className="text-sm font-medium mb-1">
Total First-Year Cost
</div>
<div className="text-xl font-bold text-purple-600 dark:text-purple-400">
{formatCurrency(costDetails.totalCost)}
</div>
<div className="text-xs text-gray-600 dark:text-gray-400">
Combined implementation and operational costs
</div>
</div>
</div>
</div>
{/* Business Enablement */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-100 dark:border-gray-700">
<h3 className="text-lg font-medium mb-3 text-gray-800 dark:text-gray-100">
Business Enablement
</h3>
<div className="space-y-3">
<div className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<h4 className="text-sm font-medium mb-2">Business Capabilities</h4>
<ul className="list-disc pl-5 space-y-1 text-sm">
{securityScore >= 80 ? (
<>
<li>Enables digital transformation initiatives</li>
<li>Supports secure cloud adoption</li>
<li>Facilitates secure partner integrations</li>
<li>
Provides competitive advantage through security as a value
</li>
</>
) : securityScore >= 60 ? (
<>
<li>Supports most digital business initiatives</li>
<li>Enables secure customer data handling</li>
<li>Allows controlled partner access</li>
<li>Meets most customer security requirements</li>
</>
) : securityScore >= 40 ? (
<>
<li>Supports basic business operations</li>
<li>Enables limited partner interactions</li>
<li>Meets minimum customer expectations</li>
</>
) : (
<>
<li>Limited security capabilities</li>
<li>May restrict business opportunities</li>
<li>Potential compliance limitations</li>
</>
)}
</ul>
</div>
</div>
</div>
</div>
);
};
|