gistfile1.txt

import React from ‘react’;
import { Box, Typography, Chip, Link, Paper } from ‘@mui/material’;
import { PieChart, Pie, Cell, ResponsiveContainer } from ‘recharts’;

const ExpandedCodeCoverageContent = ({ data }) => {
// Transform coverage percentage for the donut chart
const chartData = [
{ name: ‘Covered’, value: data.coverage },
{ name: ‘Uncovered’, value: 100 - data.coverage }
];

const COLORS = [’#4ade80’, ‘#374151’]; // Green for covered, gray for uncovered

return (
<Paper
elevation={0}
sx={{
bgcolor: ‘grey.700’, // Using theme color
borderRadius: 2,
p: 3,
color: ‘white’
}}
>
<Box sx={{ display: ‘flex’, alignItems: ‘center’, mb: 3 }}>
<Typography
variant=“subtitle1”
sx={{
fontWeight: 600,
letterSpacing: 1,
textTransform: ‘uppercase’
}}
>
SONAR COVERAGE
</Typography>
</Box>

```
  <Box sx={{ display: 'flex', gap: 4 }}>
    {/* Donut Chart */}
    <Box sx={{ position: 'relative', width: 200, height: 200 }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={chartData}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={80}
            startAngle={90}
            endAngle={450}
            dataKey="value"
          >
            {chartData.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index]} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      {/* Center percentage text */}
      <Box
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          textAlign: 'center'
        }}
      >
        <Typography 
          variant="h4" 
          sx={{ 
            fontWeight: 700, 
            color: 'text.primary'
          }}
        >
          {data.coverage.toFixed(2)} %
        </Typography>
      </Box>
    </Box>

    {/* Stats Section */}
    <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography sx={{ color: 'text.secondary' }}>
          Last Scanned on :
        </Typography>
        <Typography sx={{ color: 'text.primary', fontStyle: 'italic' }}>
          {data.lastScanned}
        </Typography>
      </Box>

      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography sx={{ color: 'text.secondary' }}>
          In Scope :
        </Typography>
        <Typography sx={{ color: 'text.primary' }}>
          {data.inScope ? 'Yes' : 'No'}
        </Typography>
      </Box>

      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography sx={{ color: 'text.secondary' }}>
          Code Smells :
        </Typography>
        <Typography sx={{ color: 'text.primary' }}>
          {data.codeSmells}
        </Typography>
      </Box>

      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography sx={{ color: 'text.secondary' }}>
          Code Quality :
        </Typography>
        <Chip 
          label={data.codeQuality} 
          size="small"
          sx={{ 
            backgroundColor: 'transparent',
            color: 'error.main',
            border: 1,
            borderColor: 'error.main',
            fontWeight: 600
          }}
        />
      </Box>

      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography sx={{ color: 'text.secondary' }}>
          Code Coverage Report :
        </Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Link
            href={data.reportLink}
            underline="hover"
            sx={{ color: 'primary.main', cursor: 'pointer' }}
          >
            {data.reportText}
          </Link>
          <Typography sx={{ color: 'primary.main' }}>
            ↗
          </Typography>
        </Box>
      </Box>

      <Typography sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
        (SonarQube)
      </Typography>
    </Box>
  </Box>
</Paper>
```

);
};

// Example usage with hardcoded data
const App = () => {
const mockData = {
coverage: 97.00,
lastScanned: ‘April 28, 2025 at 8:38 PM EDT’,
inScope: true,
codeSmells: 512,
codeQuality: ‘Failed’,
reportLink: ‘#’,
reportText: ‘Sonar Scan for AP140438’
};

return (
<Box sx={{ p: 4, bgcolor: ‘background.default’, minHeight: ‘100vh’ }}>
<ExpandedCodeCoverageContent data={mockData} />
</Box>
);
};

export default App;