@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,1063 +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;
+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;