Z

[salmanshezad]

import React, { useState } from 'react';
import { Box, Typography, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Paper, Card, CardContent, Button, Select, MenuItem } from '@mui/material';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, LabelList } from 'recharts';
import { mainTableData, mainBarChartData, csbbtAdditionalTableData, cltAdditionalTableData } from './resiliencydata';

// Convert Q3 percentage strings to numbers for the bar chart
const convertQ3ToNumber = (q3: string): number => {
return q3.includes('%') ? parseFloat(q3.replace('%', '')) : 0;
};

const ResiliencyEngineering: React.FC = () => {
const [selectedGroup, setSelectedGroup] = useState<string | null>(null); // Track which group is clicked (CSBBT or CLT)
const [filters, setFilters] = useState({ application: '', cio: '', cio2: '', ccp: '', q3: '' });

// Handle filter changes
const handleFilterChange = (field: keyof typeof filters, value: string) => {
setFilters((prevFilters) => ({
...prevFilters,
[field]: value,
}));
};

// Reset all filters
const clearAllFilters = () => {
setFilters({ application: '', cio: '', cio2: '', ccp: '', q3: '' });
};

// Filter the data based on selected group and applied filters
const filteredData = selectedGroup === 'CSBBT'
? csbbtAdditionalTableData.filter((row) =>
Object.keys(filters).every((key) =>
filters[key as keyof typeof filters] === '' || row[key as keyof typeof filters] === filters[key as keyof typeof filters]
)
)
: cltAdditionalTableData.filter((row) =>
Object.keys(filters).every((key) =>
filters[key as keyof typeof filters] === '' || row[key as keyof typeof filters] === filters[key as keyof typeof filters]
)
);

const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#8dd1e1', '#d0ed57', '#a4de6c'];

return (
<Card style={{ flex: 1, margin: '0', width: '100%', padding: '0px' }}>

{/* Back to Main Page Button */}
<Box sx={{ marginBottom: '20px', display: 'flex', justifyContent: 'flex-start' }}>
<Button variant="contained" onClick={() => setSelectedGroup(null)}>Back to Main Page

    <Box sx={{ width: '100%', padding: '60px', minHeight: '20vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>

      {/* Main Table: Always present */}
      <Box sx={{ width: '50%', margin: 'auto', marginBottom: '20px' }}>
        <TableContainer component={Paper}>
          <Table aria-label="Resiliency Engineering Table" size="small">
            <TableHead>
              <TableRow>
                <TableCell>Group</TableCell>
                <TableCell>CIO</TableCell>
                <TableCell>CCP Coverage</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {mainTableData.map((row, index) => (
                <TableRow key={index}>
                  <TableCell onClick={() => setSelectedGroup(row.group)} style={{ cursor: 'pointer', color: 'blue' }}>
                    {row.group}
                  </TableCell>
                  <TableCell>{row.cio}</TableCell>
                  <TableCell>{row.ccpCoverage}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>

      {/* Main Bar Chart: Only show when no group is selected */}
      {!selectedGroup && (
        <Box sx={{ width: '70%', margin: '40px auto' }}>
          <Typography variant="h6" textAlign="center" gutterBottom>
            CCP Coverage by CIO
          </Typography>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={mainBarChartData} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="cio" />
              <YAxis domain={[0, 110]} />
              <Tooltip />
              <Bar dataKey="ccpCoverage">
                {mainBarChartData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                ))}
                <LabelList dataKey="ccpCoverage" position="top" />
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </Box>
      )}

      {/* Group-specific Tables and Charts: Only show when a group is selected */}
      {selectedGroup && (
        <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between', marginTop: '20px' }}>
          
          {/* Group Table with Filters */}
          <Box sx={{ width: '50%', margin: 'auto', marginTop: '0px', marginBottom: '20px' }}>
            <TableContainer component={Paper}>
              <Table aria-label="Group Table" size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Application List</TableCell>
                    <TableCell>CIO</TableCell>
                    <TableCell>CIO2</TableCell>
                    <TableCell>
                      <Select
                        value={filters.ccp}
                        onChange={(e) => handleFilterChange('ccp', e.target.value)}
                        displayEmpty
                      >
                        <MenuItem value="">All CCP</MenuItem>
                        <MenuItem value="Yes">Yes</MenuItem>
                        <MenuItem value="No">No</MenuItem>
                      </Select>
                    </TableCell>
                    <TableCell>Q3</TableCell>
                    <TableCell>
                      <Button onClick={clearAllFilters}>Clear All</Button>
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {filteredData.map((row, index) => (
                    <TableRow key={index}>
                      <TableCell>{row.application}</TableCell>
                      <TableCell>{row.cio}</TableCell>
                      <TableCell>{row.cio2}</TableCell>
                      <TableCell>{row.ccp}</TableCell>
                      <TableCell>{row.q3}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </Box>

          {/* Group Bar Chart */}
          <Box sx={{ width: '50%' }}>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart
                data={filteredData.map((item) => ({
                  application: item.application,
                  q3: convertQ3ToNumber(item.q3),  // Convert q3 to a number
                }))}
                margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="application" />
                <YAxis domain={[0, 110]} />
                <Tooltip />
                <Bar dataKey="q3" barSize={15}>
                  {filteredData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                  ))}
                  <LabelList dataKey="q3" position="top" />
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </Box>
        </Box>
      )}
    </Box>
  </CardContent>
</Card>

);
};

export default ResiliencyEngineering;