feat: services and business units

.gitignore

@@ -44,3 +44,4 @@ yarn-error.log*
 
 # Sentry Auth Token
 .sentryclirc
+components/dashboard-demo/

components/TopBar.jsx

@@ -49,9 +49,9 @@ function Topbar({
 
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
           </Typography>
-          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none', fontSize: '20pt'  }} onClick={(event) => handleMenuOpen(event, 'compliance')} >Compliance</Button>
-          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none', fontSize: '20pt' }} onClick={(event) => handleMenuOpen(event, 'applications')} >Applications</Button>
-          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none', fontSize: '20pt' }} onClick={(event) => handleMenuOpen(event, 'content')} >Collaborate</Button>
+          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none', fontSize: '18pt'  }} onClick={(event) => handleMenuOpen(event, 'catalogue')} >Catalogue</Button>
+          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none', fontSize: '18pt' }} onClick={(event) => handleMenuOpen(event, 'applications')} >Applications</Button>
+          <Button color="inherit" endIcon={<ExpandMoreIcon />} sx={{ fontWeight: 'light', textTransform: 'none', fontSize: '18pt' }} onClick={(event) => handleMenuOpen(event, 'content')} >Collaborate</Button>
           <Menu
             id="menu-content"
             anchorEl={anchorEl}
@@ -65,6 +65,37 @@ function Topbar({
               </MenuItem>
             </Link>
           </Menu>
+          <Menu
+            id="menu-catalogue"
+            anchorEl={anchorEl}
+            open={activeMenu === 'catalogue'}
+            onClose={handleMenuClose}
+            onClick={handleMenuClose}
+          >
+            <Link href="/services" sx={{ textDecoration: 'none' }}>
+              <MenuItem>
+              Cloud Services
+              </MenuItem>
+            </Link>
+          </Menu>
+          <Menu
+            id="menu-applications"
+            anchorEl={anchorEl}
+            open={activeMenu === 'applications'}
+            onClose={handleMenuClose}
+            onClick={handleMenuClose}
+          >
+            <Link href="/applications" sx={{ textDecoration: 'none' }}>
+              <MenuItem>
+                Business Applications
+              </MenuItem>
+            </Link>
+            <Link href="/business-units" sx={{ textDecoration: 'none' }}>
+              <MenuItem>
+                Business Units
+              </MenuItem>
+            </Link>
+          </Menu>
 
         </Toolbar>
       </AppBar>

components/dashboard/Cards/Stats.js

@@ -0,0 +1,95 @@
+
+
+// @mui material components
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+
+export function MiniStatisticsCard({ bgColor, color = 'primary', title, count, percentage = null, icon, direction = 'left' }) {
+    // const [controller] = useArgonController();
+    // const { darkMode } = controller;
+    const darkMode = false;
+    const iconcolor = icon.color + '.main'
+
+    return (
+        <Box
+            sx={{
+                // bgcolor: 'background.paper',
+                borderColor: 'error', //icon.color,
+                boxShadow: 0,
+                border: 1,
+                borderRadius: 2,
+                p: 2,
+                // minWidth: 300,
+            }}
+        >
+            <Grid container alignItems="center">
+                {direction === "left" ? (
+                    <Grid item>
+                        <Box
+                            color={iconcolor}
+                            width="3rem"
+                            height="3rem"
+                            borderRadius="section"
+                            display="flex"
+                            justifyContent="center"
+                            alignItems="center"
+                        >
+                            {/* <Icon fontSize="small" color="inherit"> */}
+                            <FontAwesomeIcon icon={['fas', 'fa-' + icon.icon]} style={{ width: "40px", height: "40px" }} />
+                            {/* </Icon> */}
+                        </Box>
+                    </Grid>
+                ) : null}
+                <Grid item xs={8}>
+                    <Box ml={direction === "left" ? 2 : 0} lineHeight={1}>
+
+
+                        <Box sx={{ fontSize: 16, color: 'text.secondary' }}>{title}</Box>
+                        <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
+                            {count}
+                        </Box>
+                       {percentage.value && <Box
+                            sx={{
+                                color: iconcolor,
+                                display: 'inline',
+                                fontWeight: 'bold',
+                                mx: 0.5,
+                                fontSize: 14,
+                            }}
+                        >
+                            {percentage?.value}
+                        </Box>}
+                        <Box sx={{ color: iconcolor, display: 'inline', fontSize: 14 }}>
+                            {percentage?.text}
+                        </Box>
+                    </Box>
+                </Grid>
+                {direction === "right" ? (
+                    <Grid item xs={4}>
+                        <Box
+                            color={color}
+                            width="3rem"
+                            height="3rem"
+                            marginLeft="auto"
+                            borderRadius="section"
+                            display="flex"
+                            justifyContent="center"
+                            alignItems="center"
+                        >
+                            {/* <Icon fontSize="small" color="inherit"> */}
+                            <FontAwesomeIcon icon={['fas', 'fa-' + icon.icon]} style={{ color: icon.color, width: "40px", height: "40px" }} />
+                            {/* </Icon> */}
+                        </Box>
+                    </Grid>
+                ) : null}
+            </Grid>
+        </Box>
+    );
+}
+

components/dashboard/index.js

@@ -0,0 +1 @@
+export { MiniStatisticsCard } from "./Cards/Stats";

content/services/azure/azure_services.js

@@ -0,0 +1,84 @@
+const https = require('https');
+const fs = require('fs');
+
+// Fetch the list of Azure services
+function fetchAzureServices() {
+  return new Promise((resolve, reject) => {
+    const options = {
+      hostname: 'management.azure.com',
+      path: '/providers?api-version=2020-01-01',
+      method: 'GET'
+    };
+
+    const req = https.request(options, res => {
+      let data = '';
+
+      res.on('data', chunk => {
+        data += chunk;
+      });
+
+      res.on('end', () => {
+        if (res.statusCode === 200) {
+          const result = JSON.parse(data);
+
+          if (result && result.value) {
+            const azureServices = result.value.map(provider => {
+              return provider.resourceTypes.map(resourceType => {
+                return {
+                  name: resourceType.displayName,
+                  identifier: resourceType.resourceType,
+                  description: resourceType.description || '',
+                };
+              });
+            }).flat();
+
+            resolve(azureServices);
+          } else {
+            reject(new Error('Invalid response format'));
+          }
+        } else {
+          reject(new Error(`Failed to fetch Azure services. Status code: ${res.statusCode}`));
+        }
+      });
+    });
+
+    req.on('error', error => {
+      reject(error);
+    });
+
+    req.end();
+  });
+}
+
+// Create the file structure
+async function createFileStructure() {
+  const azureServices = await fetchAzureServices();
+
+  azureServices.forEach(service => {
+    const folderName = service.name.toLowerCase().replace(/ /g, '_');
+    const filePath = `${folderName}/index.mdx`;
+
+    // Create the folder
+    fs.mkdirSync(folderName, { recursive: true });
+
+    // Create the index.mdx file
+    const frontmatter = `---
+title: ${service.name}
+identifier: ${service.identifier}
+approved: false
+---
+
+${service.description}`;
+
+    fs.writeFileSync(filePath, frontmatter);
+
+    console.log(`Created ${filePath}`);
+  });
+
+  console.log('File structure generation completed.');
+}
+
+// Run the script
+createFileStructure().catch(error => {
+  console.error('An error occurred:', error);
+});

content/services/azure/storage_account/index.mdx

@@ -1,15 +1,23 @@
 ---
 title: Storage Accounts
-name: "Microsoft.Storage/StorageAccounts - Non Data Lake Features"
-id: "StorageAccounts"
-csp: "Azure"
-Data_At_Rest_Classification: "Highly Restricted"
-Data_At_Rest_Rationale: "Support for Customer Managed Key (CMK), Infrastructure at rest encryption, Blob Client-Side Encryption and Disable Public Access"
-SLA: "99.9%"
-Data_Redundancy: "Geo-Zone-Redundant-Storage"
+name: Microsoft.Storage/StorageAccounts - Non Data Lake Features
+id: StorageAccounts
+csp: Azure
+status: approved
+data_classification:
+    - highly_restricted: RSA-HSM backed KEK
+    - internal: No encryption required
+    - public: No encryption required.
+
+resilience:
+    - availability: 99.9%
+    - redundancy: Geo-Zone-Redundant-Storage
+links: 
+    - "https://learn.microsoft.com/en-us/azure/storage/blobs/client-side-encryption?tabs=dotnet"
+    - "https://learn.microsoft.com/en-us/azure/storage/common/storage-service-encryption"
+
 ---
 
-
 **STO-USECASE-1** Client-Side Encryption for Azure Storage Account Blobs and Azure Key Vault for Microsoft Azure Storage (.NET)
 
 The Azure Storage Client Library for .NET see [LINK] supports encrypting data within client applications before uploading to Azure Storage, and decrypting data while downloading to the client. The library also supports integration with Azure Key Vault see [LINK] for Key Vault security requirements.

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.