@flowuent-org/diagramming-core 1.1.0 → 1.1.2

package/packages/diagrams/src/lib/templates/cloud-arch/components/PropertiesPanel.tsx

@@ -0,0 +1,1063 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Select,
+  MenuItem,
+  Button,
+  FormControl,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  InputBase,
+  InputAdornment,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  FormControlLabel,
+  Checkbox,
+  ButtonGroup,
+  Divider,
+  Alert,
+  InputLabel,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@mui/icons-material/Search';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import ViewInArIcon from '@mui/icons-material/ViewInAr';
+import NetworkCheckIcon from '@mui/icons-material/NetworkCheck';
+import StorageIcon from '@mui/icons-material/Storage';
+import TableViewIcon from '@mui/icons-material/TableView';
+import SecurityIcon from '@mui/icons-material/Security';
+import BuildIcon from '@mui/icons-material/Build';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import AnalyticsIcon from '@mui/icons-material/Analytics';
+import AppsIcon from '@mui/icons-material/Apps';
+import RouterIcon from '@mui/icons-material/Router';
+import SchemaIcon from '@mui/icons-material/Schema';
+import DataObjectIcon from '@mui/icons-material/DataObject';
+import { Node, XYPosition } from 'reactflow';
+import { getServiceIcon } from '../utils/serviceIcons';
+import {
+  AWS_SERVICE_ICONS,
+  AZURE_SERVICE_ICONS,
+  GCP_SERVICE_ICONS,
+} from '../utils/iconMapping';
+import { AWS_CATEGORIES } from '../utils/aws-icons';
+import { AZURE_CATEGORIES } from '../utils/azure-icons';
+import { GCP_CATEGORIES } from '../utils/gcp-icons';
+import VpcIcon from '@mui/icons-material/AccountTree';
+import SubnetIcon from '@mui/icons-material/Hub';
+import AzIcon from '@mui/icons-material/Domain';
+import SecurityGroupIcon from '@mui/icons-material/Security';
+import SubscriptionIcon from '@mui/icons-material/Subscriptions';
+import ResourceGroupIcon from '@mui/icons-material/Folder';
+import VNetIcon from '@mui/icons-material/Cloud';
+import ProjectIcon from '@mui/icons-material/Business';
+import FolderIcon from '@mui/icons-material/FolderOpen';
+import AccountIcon from '@mui/icons-material/AccountBalance';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import {
+  extractNodeSemantics,
+  extractNodeRestrictions,
+  exportEnhancedDiagramData,
+} from '../utils/validationExtractor';
+import { CloudProvider } from '../types/validation';
+// Import data managers and validators
+import { diagramDataManager } from '../data/diagramManager';
+import { diagramValidator } from '../integration/diagramValidator';
+
+interface ServiceItem {
+  type: 'serviceNode' | 'subnetNode';
+  service: string;
+  label: string;
+  canBeChild?: boolean;
+  icon?: React.ReactNode;
+  description?: string;
+}
+
+interface PropertiesPanelProps {
+  onAddNode: (
+    type: string,
+    service: string,
+    position?: XYPosition,
+    cloudProvider?: 'aws' | 'azure' | 'gcp',
+  ) => void;
+  nodes: Node[];
+  edges?: any[];
+}
+
+type CategoryType =
+  | (typeof AWS_CATEGORIES)[keyof typeof AWS_CATEGORIES]
+  | (typeof AZURE_CATEGORIES)[keyof typeof AZURE_CATEGORIES]
+  | (typeof GCP_CATEGORIES)[keyof typeof GCP_CATEGORIES];
+
+const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
+  onAddNode,
+  nodes,
+  edges = [],
+}) => {
+  const [selectedProvider, setSelectedProvider] = useState<
+    'aws' | 'azure' | 'gcp' | ''
+  >('');
+  const [expandedProvider, setExpandedProvider] = useState<string | false>(
+    false,
+  );
+  const [expandedCategory, setExpandedCategory] = useState<string | false>(
+    false,
+  );
+  const [selectedAwsCategory, setSelectedAwsCategory] = useState<CategoryType>(
+    AWS_CATEGORIES.COMPUTE,
+  );
+  const [selectedAzureCategory, setSelectedAzureCategory] =
+    useState<CategoryType>(AZURE_CATEGORIES.COMPUTE);
+  const [selectedGcpCategory, setSelectedGcpCategory] =
+    useState<CategoryType>('Compute');
+  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
+  const [exportOptions, setExportOptions] = useState({
+    includeMetadata: true,
+  });
+
+  const handleProviderChange =
+    (provider: string) =>
+    (event: React.SyntheticEvent, isExpanded: boolean) => {
+      setExpandedProvider(isExpanded ? provider : false);
+    };
+
+  const handleCategoryChange =
+    (category: string) =>
+    (event: React.SyntheticEvent, isExpanded: boolean) => {
+      setExpandedCategory(isExpanded ? category : false);
+    };
+
+  // Export diagram data functionality
+  const handleExport = () => {
+    const { includeMetadata } = exportOptions;
+
+    try {
+      // Export user diagram data only
+      exportDataFile(includeMetadata);
+      console.log('User diagram data exported successfully');
+      
+      setIsExportDialogOpen(false);
+    } catch (error) {
+      console.error('Export failed:', error);
+    }
+  };
+
+
+
+  const exportDataFile = (
+    includeMetadata: boolean,
+  ) => {
+    try {
+      // Use the enhanced diagram data export function
+      const diagramData = exportEnhancedDiagramData(nodes, edges || []);
+      
+      const finalData = includeMetadata ? diagramData : diagramData.diagram;
+      const content = JSON.stringify(finalData, null, 2);
+
+      downloadFile(
+        content,
+        `cloud-architecture-data.json`,
+        'application/json',
+      );
+    } catch (error) {
+      console.error('Error exporting data:', error);
+    }
+  };
+
+  const downloadFile = (
+    content: string,
+    filename: string,
+    mimeType: string,
+  ) => {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  // Get icon for category
+  const getCategoryIcon = (category: string) => {
+    const lowerCategory = category.toLowerCase();
+    if (lowerCategory.includes('container'))
+      return <ViewInArIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('network'))
+      return <NetworkCheckIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('storage'))
+      return <StorageIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('database'))
+      return <TableViewIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('security'))
+      return <SecurityIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('compute'))
+      return <BuildIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('ai') || lowerCategory.includes('ml'))
+      return <SmartToyIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('analytics'))
+      return <AnalyticsIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('application'))
+      return <AppsIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    if (lowerCategory.includes('iot'))
+      return <RouterIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+    return <AppsIcon sx={{ color: 'gray', fontSize: '18px' }} />;
+  };
+
+  // Get categories based on selected provider
+  const getProviderCategories = () => {
+    switch (selectedProvider) {
+      case 'aws':
+        return Object.values(AWS_CATEGORIES);
+      case 'azure':
+        return Object.values(AZURE_CATEGORIES);
+      case 'gcp':
+        return Object.values(GCP_CATEGORIES);
+      default:
+        return [];
+    }
+  };
+
+  // AWS Container Nodes - Following AWS hierarchy: Account → VPC → Subnet
+  const awsContainerNodes: ServiceItem[] = [
+    {
+      type: 'subnetNode',
+      service: 'account',
+      label: 'AWS Account',
+      canBeChild: false,
+      icon: <AccountIcon sx={{ color: '#FF9900' }} />,
+      description:
+        'Root container for all AWS resources - billing and access management boundary',
+    },
+    {
+      type: 'subnetNode',
+      service: 'vpc',
+      label: 'Virtual Private Cloud (VPC)',
+      canBeChild: true,
+      icon: <VpcIcon sx={{ color: '#FF9900' }} />,
+      description: 'Isolated network environment in AWS cloud',
+    },
+    {
+      type: 'subnetNode',
+      service: 'subnet',
+      label: 'Subnet',
+      canBeChild: true,
+      icon: <SubnetIcon sx={{ color: '#FF9900' }} />,
+      description: 'Range of IP addresses within a VPC',
+    },
+    {
+      type: 'subnetNode',
+      service: 'availability-zone',
+      label: 'Availability Zone',
+      canBeChild: true,
+      icon: <AzIcon sx={{ color: '#FF9900' }} />,
+      description: 'Distinct data center location within an AWS Region',
+    },
+    {
+      type: 'subnetNode',
+      service: 'local-zone',
+      label: 'Local Zone',
+      canBeChild: true,
+      icon: <LocationOnIcon sx={{ color: '#FF9900' }} />,
+      description: 'Edge location for ultra-low latency applications',
+    },
+    {
+      type: 'subnetNode',
+      service: 'security-group',
+      label: 'Security Group',
+      canBeChild: true,
+      icon: <SecurityGroupIcon sx={{ color: '#FF9900' }} />,
+      description:
+        'Virtual firewall for controlling inbound and outbound traffic',
+    },
+  ];
+
+  // Azure Container Nodes - Following Azure hierarchy: Subscription → Resource Group → Virtual Network → Subnet
+  const azureContainerNodes: ServiceItem[] = [
+    {
+      type: 'subnetNode',
+      service: 'subscription',
+      label: 'Azure Subscription',
+      canBeChild: false,
+      icon: <SubscriptionIcon sx={{ color: '#0078D4' }} />,
+      description:
+        'Root container for all Azure resources - billing and access management boundary',
+    },
+    {
+      type: 'subnetNode',
+      service: 'resource-group',
+      label: 'Resource Group',
+      canBeChild: true,
+      icon: <ResourceGroupIcon sx={{ color: '#0078D4' }} />,
+      description:
+        'Logical container for resources that share the same lifecycle',
+    },
+    {
+      type: 'subnetNode',
+      service: 'virtual-network',
+      label: 'Virtual Network (VNet)',
+      canBeChild: true,
+      icon: <VNetIcon sx={{ color: '#4099FF' }} />,
+      description: 'Isolated network in Azure cloud - similar to AWS VPC',
+    },
+    {
+      type: 'subnetNode',
+      service: 'subnet',
+      label: 'Subnet',
+      canBeChild: true,
+      icon: <SubnetIcon sx={{ color: '#4099FF' }} />,
+      description: 'Range of IP addresses within a Virtual Network',
+    },
+    {
+      type: 'subnetNode',
+      service: 'network-security-group',
+      label: 'Network Security Group',
+      canBeChild: true,
+      icon: <SecurityGroupIcon sx={{ color: '#FF6347' }} />,
+      description: 'Virtual firewall for controlling network traffic',
+    },
+  ];
+
+  // GCP Container Nodes - Following GCP hierarchy: Project → Folder → VPC → Subnet
+  const gcpContainerNodes: ServiceItem[] = [
+    {
+      type: 'subnetNode',
+      service: 'project',
+      label: 'GCP Project',
+      canBeChild: false,
+      icon: <ProjectIcon sx={{ color: '#4285F4' }} />,
+      description:
+        'Root container for all GCP resources - billing and access management boundary',
+    },
+    {
+      type: 'subnetNode',
+      service: 'folder',
+      label: 'Folder',
+      canBeChild: true,
+      icon: <FolderIcon sx={{ color: '#34A853' }} />,
+      description: 'Optional organization unit for grouping projects',
+    },
+    {
+      type: 'subnetNode',
+      service: 'vpc',
+      label: 'VPC Network',
+      canBeChild: true,
+      icon: <VpcIcon sx={{ color: '#4285F4' }} />,
+      description: 'Global virtual network in GCP - similar to AWS VPC',
+    },
+    {
+      type: 'subnetNode',
+      service: 'subnet',
+      label: 'Subnet',
+      canBeChild: true,
+      icon: <SubnetIcon sx={{ color: '#4285F4' }} />,
+      description: 'Regional IP range within a VPC Network',
+    },
+  ];
+
+  // Get services for a specific category and provider
+  const getServicesByCategory = (category: string) => {
+    if (!selectedProvider) return [];
+
+    let services: ServiceItem[] = [];
+    let containerNodes: ServiceItem[] = [];
+
+    switch (selectedProvider) {
+      case 'aws':
+        services = Object.entries(AWS_SERVICE_ICONS)
+          .filter(([_, service]) => service.category === category)
+          .map(([key, service]) => ({
+            type: 'serviceNode',
+            service: key,
+            label: service.name,
+          }));
+        containerNodes = awsContainerNodes;
+        break;
+      case 'azure':
+        services = Object.entries(AZURE_SERVICE_ICONS)
+          .filter(([_, service]) => service.category === category)
+          .map(([key, service]) => ({
+            type: 'serviceNode',
+            service: key,
+            label: service.name,
+          }));
+        containerNodes = azureContainerNodes;
+        break;
+      case 'gcp':
+        services = Object.entries(GCP_SERVICE_ICONS)
+          .filter(([_, service]) => service.category === category)
+          .map(([key, service]) => ({
+            type: 'serviceNode',
+            service: key,
+            label: service.name,
+          }));
+        containerNodes = gcpContainerNodes;
+        break;
+    }
+
+    // For container category, include container nodes
+    if (
+      category.toLowerCase().includes('container') ||
+      category.toLowerCase().includes('compute')
+    ) {
+      return [...containerNodes, ...services];
+    }
+
+    return services;
+  };
+
+  // Get all AWS services for the selected category
+  const awsServices: ServiceItem[] = Object.entries(AWS_SERVICE_ICONS)
+    .filter(([_, service]) => service.category === selectedAwsCategory)
+    .map(([key, service]) => ({
+      type: 'serviceNode',
+      service: key,
+      label: service.name,
+    }));
+
+  // Get all Azure services for the selected category
+  const azureServices: ServiceItem[] = Object.entries(AZURE_SERVICE_ICONS)
+    .filter(([_, service]) => service.category === selectedAzureCategory)
+    .map(([key, service]) => ({
+      type: 'serviceNode',
+      service: key,
+      label: service.name,
+    }));
+
+  // Get all GCP services for the selected category
+  const gcpServices: ServiceItem[] = Object.entries(GCP_SERVICE_ICONS)
+    .filter(([_, service]) => {
+      return service.category === selectedGcpCategory;
+    })
+    .map(([key, service]) => ({
+      type: 'serviceNode',
+      service: key,
+      label: service.name,
+    }));
+
+  // Filter out container services from regular services
+  const filteredAwsServices =
+    selectedAwsCategory === AWS_CATEGORIES.NETWORKING
+      ? awsServices.filter(
+          (service) =>
+            !['vpc', 'subnet', 'security-group'].includes(service.service),
+        )
+      : awsServices;
+
+  const filteredAzureServices =
+    selectedAzureCategory === AZURE_CATEGORIES.NETWORKING
+      ? azureServices.filter(
+          (service) => !['virtual-network', 'subnet'].includes(service.service),
+        )
+      : azureServices;
+
+  const filteredGcpServices =
+    selectedGcpCategory === 'Networking'
+      ? gcpServices.filter(
+          (service) => !['vpc', 'subnet'].includes(service.service),
+        )
+      : gcpServices;
+
+  // Render services grid
+  const renderServiceGrid = (
+    services: ServiceItem[],
+    cloudProvider: 'aws' | 'azure' | 'gcp' = 'aws',
+  ) => (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: 1.5,
+        mt: 1,
+      }}
+    >
+      {services.map((service) => {
+        const icon =
+          service.icon || getServiceIcon(service.service, cloudProvider);
+
+        return (
+          <Button
+            key={service.service}
+            draggable
+            onDragStart={(e) => {
+              const dragData = {
+                service: service.service,
+                nodeType: service.type,
+                cloudProvider: cloudProvider,
+                label: service.label,
+              };
+              e.dataTransfer.setData(
+                'application/json',
+                JSON.stringify(dragData),
+              );
+              e.dataTransfer.effectAllowed = 'copy';
+
+              // Add visual feedback
+              e.currentTarget.style.opacity = '0.5';
+              e.currentTarget.style.transform = 'scale(0.95)';
+            }}
+            onDragEnd={(e) => {
+              // Reset visual feedback
+              e.currentTarget.style.opacity = '1';
+              e.currentTarget.style.transform = 'scale(1)';
+            }}
+            onClick={() =>
+              onAddNode(service.type, service.service, undefined, cloudProvider)
+            }
+            sx={{
+              p: 1,
+              border: '1px solid #333',
+              borderRadius: '8px',
+              cursor: 'grab',
+              textAlign: 'center',
+              transition: 'all 0.2s ease',
+              bgcolor: '#2a2a2a',
+              '&:hover': {
+                borderColor: '#61dafb',
+                bgcolor: 'rgba(97, 218, 251, 0.1)',
+                transform: 'translateY(-2px)',
+              },
+              '&:active': {
+                cursor: 'grabbing',
+              },
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              minHeight: '60px',
+              justifyContent: 'flex-start',
+              textTransform: 'none',
+              '& svg': {
+                width: '20px',
+                height: '20px',
+                flexShrink: 0,
+              },
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '24px',
+                height: '24px',
+                flexShrink: 0,
+              }}
+            >
+              {icon}
+            </Box>
+            <Typography
+              variant="body2"
+              sx={{
+                flexGrow: 1,
+                textAlign: 'left',
+                fontSize: '0.875rem',
+                lineHeight: 1.2,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {service.label}
+            </Typography>
+          </Button>
+        );
+      })}
+    </Box>
+  );
+
+  // Render services grid for categories
+  const renderCategoryServices = (category: string) => {
+    const services = getServicesByCategory(category);
+
+    if (services.length === 0) {
+      return (
+        <Typography
+          variant="body2"
+          sx={{ color: '#666', textAlign: 'center', py: 2 }}
+        >
+          No services available for this category
+        </Typography>
+      );
+    }
+
+    return (
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 1fr)',
+          gap: 2,
+          mt: 1,
+        }}
+      >
+        {services.map((service) => (
+          <Box
+            key={service.service}
+            draggable
+            onDragStart={(e) => {
+              const dragData = {
+                service: service.service,
+                nodeType: service.type,
+                cloudProvider:
+                  selectedProvider !== '' ? selectedProvider : 'aws',
+                label: service.label,
+              };
+              e.dataTransfer.setData(
+                'application/json',
+                JSON.stringify(dragData),
+              );
+              e.dataTransfer.effectAllowed = 'copy';
+
+              // Add visual feedback
+              e.currentTarget.style.opacity = '0.5';
+              e.currentTarget.style.transform = 'scale(0.95)';
+            }}
+            onDragEnd={(e) => {
+              // Reset visual feedback
+              e.currentTarget.style.opacity = '1';
+              e.currentTarget.style.transform = 'scale(1)';
+            }}
+            onClick={() =>
+              onAddNode(
+                service.type,
+                service.service,
+                undefined, // Let automatic assignment choose position
+                selectedProvider !== '' ? selectedProvider : undefined,
+              )
+            }
+            sx={{
+              p: 1.5,
+              border: '1px solid #333',
+              borderRadius: '8px',
+              cursor: 'grab',
+              textAlign: 'center',
+              transition: 'all 0.2s ease',
+              bgcolor: '#2a2a2a',
+              '&:hover': {
+                borderColor: '#61dafb',
+                bgcolor: 'rgba(97, 218, 251, 0.1)',
+                transform: 'translateY(-2px)',
+              },
+              '&:active': {
+                cursor: 'grabbing',
+              },
+            }}
+          >
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                mx: 'auto',
+                mb: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bgcolor: '#1a1a1a',
+                borderRadius: '4px',
+              }}
+            >
+              {service.icon ||
+                getServiceIcon(
+                  service.service,
+                  selectedProvider !== '' ? selectedProvider : 'aws',
+                )}
+            </Box>
+            <Typography
+              variant="caption"
+              sx={{
+                color: '#fff',
+                fontSize: '0.75rem',
+                fontWeight: 500,
+                lineHeight: 1.2,
+                display: 'block',
+              }}
+            >
+              {service.label}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+    );
+  };
+
+  // Render category accordions for selected provider
+  const renderCategoryAccordions = () => {
+    if (!selectedProvider) return null;
+
+    const categories = getProviderCategories();
+
+    return (
+      <Box sx={{ mt: 2 }}>
+        {categories.map((category) => (
+          <Accordion
+            key={category}
+            expanded={expandedCategory === category}
+            onChange={handleCategoryChange(category)}
+            sx={{
+              mb: 2,
+              bgcolor: 'transparent',
+              color: '#fff',
+              boxShadow: 'none',
+              '&:before': {
+                display: 'none',
+              },
+              border: 'none',
+              borderBottom: '1px solid #333',
+              borderRadius: '0 !important',
+              '&.Mui-expanded': {
+                margin: '0 0 16px 0',
+              },
+            }}
+          >
+            <AccordionSummary
+              expandIcon={
+                <ExpandMoreIcon sx={{ color: '#999', fontSize: '20px' }} />
+              }
+              sx={{
+                borderRadius: '0',
+                minHeight: '56px',
+                px: 0,
+                '&:hover': {
+                  bgcolor: 'transparent',
+                },
+                '& .MuiAccordionSummary-content': {
+                  margin: '12px 0',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 2,
+                },
+              }}
+            >
+              {getCategoryIcon(category)}
+              <Typography
+                sx={{
+                  fontWeight: 400,
+                  color: '#fff',
+                  fontSize: '1rem',
+                }}
+              >
+                {category}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails sx={{ padding: '16px' }}>
+              {renderCategoryServices(category)}
+            </AccordionDetails>
+          </Accordion>
+        ))}
+      </Box>
+    );
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          overflow: 'auto',
+          bgcolor: '#1a1a1a',
+          color: 'common.white',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {/* Scrollable Content */}
+        <Box
+          sx={{
+            flex: 1,
+            overflowY: 'auto',
+            px: 2,
+            pb: 2,
+            pt: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              mb: 2,
+            }}
+          >
+            <Button
+              variant="contained"
+              sx={{
+                bgcolor: '#4C4CFF',
+                color: 'white',
+                fontSize: '0.875rem',
+                fontWeight: 600,
+                textTransform: 'none',
+                borderRadius: '12px',
+                px: 3,
+                py: 0.5,
+                border: '2px solid #4C4CFF',
+                '&:hover': {
+                  bgcolor: '#3B3BFF',
+                  borderColor: '#3B3BFF',
+                },
+              }}
+            >
+              Templates
+            </Button>
+            <FormControl size="small" sx={{ minWidth: 140 }}>
+              <Select
+                value={selectedProvider}
+                onChange={(e) =>
+                  setSelectedProvider(
+                    e.target.value as 'aws' | 'azure' | 'gcp' | '',
+                  )
+                }
+                displayEmpty
+                sx={{
+                  color: '#fff',
+                  fontSize: '0.875rem',
+                  bgcolor: '#333',
+                  borderRadius: '12px',
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#444',
+                  },
+                  '&:hover .MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#61dafb',
+                  },
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    borderColor: '#61dafb',
+                  },
+                  '& .MuiSelect-select': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    py: 1.5,
+                    px: 2,
+                  },
+                }}
+              >
+                <MenuItem value="">
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography>Select Provider</Typography>
+                  </Box>
+                </MenuItem>
+                <MenuItem value="aws">
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Box
+                      component="img"
+                      src="/aws-icons/compute/EC2.svg"
+                      alt="AWS"
+                      sx={{ width: 20, height: 20 }}
+                    />
+                    <Typography>AWS</Typography>
+                  </Box>
+                </MenuItem>
+                <MenuItem value="azure">
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Box
+                      component="img"
+                      src="/azure-icons/compute/00195-icon-service-Maintenance-Configuration.svg"
+                      alt="Azure"
+                      sx={{ width: 20, height: 20 }}
+                    />
+                    <Typography>Azure</Typography>
+                  </Box>
+                </MenuItem>
+                <MenuItem value="gcp">
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Box
+                      component="img"
+                      src="/gcp-icons/compute/compute-engine.svg"
+                      alt="GCP"
+                      sx={{ width: 20, height: 20 }}
+                    />
+                    <Typography>GCP</Typography>
+                  </Box>
+                </MenuItem>
+              </Select>
+            </FormControl>
+          </Box>
+
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              mb: 3,
+            }}
+          >
+            <InputBase
+              placeholder="Search design resources..."
+              startAdornment={
+                <InputAdornment position="start">
+                  <SearchIcon sx={{ color: '#999', fontSize: '20px' }} />
+                </InputAdornment>
+              }
+              sx={{
+                bgcolor: '#2a2a2a',
+                borderRadius: '12px',
+                px: 2,
+                py: 1.25,
+                color: 'white',
+                width: '100%',
+                fontSize: '14px',
+                border: '1px solid #333',
+                '& .MuiInputBase-input': {
+                  padding: 0,
+                  '&::placeholder': {
+                    color: '#999',
+                    opacity: 1,
+                  },
+                },
+                '& .MuiInputAdornment-root': {
+                  marginRight: 1,
+                },
+              }}
+            />
+            <Button
+              variant="contained"
+              onClick={() => setIsExportDialogOpen(true)}
+              sx={{
+                bgcolor: '#2a2a2a',
+                borderRadius: '12px',
+                px: 2,
+                py: 1.25,
+                color: 'white',
+                border: '1px solid #333',
+                minWidth: 'auto',
+                '&:hover': {
+                  bgcolor: '#333',
+                  borderColor: '#61dafb',
+                },
+              }}
+              title="Export with schema/data separation - choose what to export and format"
+            >
+              <FileDownloadIcon sx={{ color: '#61dafb', fontSize: '20px' }} />
+            </Button>
+          </Box>
+
+          {/* Render category accordions based on selected provider */}
+          {selectedProvider && renderCategoryAccordions()}
+
+          {/* Show message when no provider is selected */}
+          {!selectedProvider && (
+            <Box
+              sx={{
+                textAlign: 'center',
+                mt: 4,
+                p: 3,
+                border: '1px dashed #444',
+                borderRadius: '8px',
+                bgcolor: '#2a2a2a',
+              }}
+            >
+              <Typography
+                variant="body1"
+                sx={{
+                  color: '#999',
+                  mb: 1,
+                }}
+              >
+                Select a cloud provider to view services
+              </Typography>
+              <Typography
+                variant="caption"
+                sx={{
+                  color: '#666',
+                }}
+              >
+                Choose AWS, Azure, or GCP from the dropdown above
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      {/* Diagram Data Export Dialog */}
+      <Dialog
+        open={isExportDialogOpen}
+        onClose={() => setIsExportDialogOpen(false)}
+        maxWidth="sm"
+        fullWidth
+        PaperProps={{
+          sx: {
+            bgcolor: '#1a1a1a',
+            color: 'white',
+            border: '1px solid #333',
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            bgcolor: '#2a2a2a',
+            borderBottom: '1px solid #333',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+          }}
+        >
+          <FileDownloadIcon sx={{ color: '#61dafb' }} />
+          Export Diagram Data
+        </DialogTitle>
+
+        <DialogContent sx={{ p: 3 }}>
+          <Box sx={{ mb: 3 }}>
+            <Typography variant="body1" sx={{ color: '#ccc', mb: 3 }}>
+              Export your diagram as JSON containing all the nodes and edges you've created.
+            </Typography>
+
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={exportOptions.includeMetadata}
+                  onChange={(e) =>
+                    setExportOptions((prev) => ({
+                      ...prev,
+                      includeMetadata: e.target.checked,
+                    }))
+                  }
+                  sx={{ color: '#61dafb' }}
+                />
+              }
+              label="Include metadata (timestamps, counts, cloud providers)"
+              sx={{ color: '#ccc', mb: 2 }}
+            />
+
+            <Typography variant="body2" sx={{ color: '#999' }}>
+              <strong>File:</strong> cloud-architecture-data.json<br/>
+              <strong>Content:</strong> Nodes, edges, positions, and diagram data
+            </Typography>
+          </Box>
+        </DialogContent>
+
+        <DialogActions
+          sx={{
+            bgcolor: '#2a2a2a',
+            borderTop: '1px solid #333',
+            p: 2,
+          }}
+        >
+          <Button
+            onClick={() => setIsExportDialogOpen(false)}
+            sx={{ color: '#999' }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleExport}
+            variant="contained"
+            sx={{
+              bgcolor: '#61dafb',
+              color: '#000',
+              '&:hover': { bgcolor: '#4fc3f7' },
+            }}
+          >
+            Export Diagram Data
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default PropertiesPanel;