Merge pull request #3227 from bluewave-labs/fix/plugin-management-ui-tweaks

UI: clean up plugin management page

Author: gorkem-bwl

Clients/src/presentation/components/PluginCard/index.tsx

@@ -246,15 +246,15 @@ const PluginCard: React.FC<PluginCardProps> = ({
             sx={(theme) => ({
               color: theme.palette.text.secondary,
               fontSize: '13px',
-              mb: 0.5,
+              mb: "8px",
             })}
           >
             {plugin.description}
           </Typography>
 
           {/* Framework Type Badge */}
           {plugin.frameworkType && (
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: "8px", mb: "8px" }}>
               <Chip
                 size="small"
                 icon={
@@ -291,7 +291,7 @@ const PluginCard: React.FC<PluginCardProps> = ({
           )}
 
           {/* Plugin Features */}
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 2 }}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: "8px" }}>
             {plugin.features.slice(0, 2).map((feature, index) => (
               <Chip
                 key={index}

Clients/src/presentation/pages/Plugins/PluginManagement/index.tsx

@@ -28,10 +28,6 @@ import {
   FileSpreadsheet as FileSpreadsheetIcon,
   Package as PackageIcon,
   Database as DatabaseIcon,
-  Globe as GlobeIcon,
-  Building2 as BuildingIcon,
-  Layers as LayersIcon,
-  BookOpen as BookOpenIcon,
 } from "lucide-react";
 import { PageBreadcrumbs } from "../../../components/breadcrumbs/PageBreadcrumbs";
 import PageHeader from "../../../components/Layout/PageHeader";
@@ -93,26 +89,6 @@ const PluginManagement: React.FC = () => {
 
   const isAdmin = userRoleName === "Admin";
 
-  // Helper function to get flag emoji from region
-  const getRegionFlag = (region?: string): string => {
-    if (!region) return "🌐";
-    const regionFlags: Record<string, string> = {
-      "European Union": "🇪🇺",
-      "United States": "🇺🇸",
-      "United Kingdom": "🇬🇧",
-      "Canada": "🇨🇦",
-      "Australia": "🇦🇺",
-      "Brazil": "🇧🇷",
-      "Singapore": "🇸🇬",
-      "Japan": "🇯🇵",
-      "South Korea": "🇰🇷",
-      "China": "🇨🇳",
-      "India": "🇮🇳",
-      "Global": "🌐",
-    };
-    return regionFlags[region] || "🌐";
-  };
-
   // Check if plugin is a compliance/framework plugin
   const isFrameworkPlugin = plugin?.category === "compliance";
 
@@ -463,33 +439,23 @@ const PluginManagement: React.FC = () => {
                     <Divider />
                     <Box>
                       <Typography variant="subtitle2" fontWeight={600} fontSize={14} mb={2}>
-                        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                          <BookOpenIcon size={16} color="#13715B" />
-                          Framework Details
-                        </Box>
+                        Framework Details
                       </Typography>
                       <Box sx={frameworkDetailsGrid}>
                         {/* Region */}
                         <Box sx={frameworkDetailItem}>
                           <Box component="span" sx={frameworkDetailLabel}>
-                            <Box component="span" sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                              <GlobeIcon size={12} />
-                              Region
-                            </Box>
+                            Region
                           </Box>
                           <Box component="span" sx={frameworkDetailValue}>
-                            <span style={{ fontSize: "18px" }}>{getRegionFlag(plugin.region)}</span>
                             {plugin.region || "Global"}
                           </Box>
                         </Box>
 
                         {/* Framework Type */}
                         <Box sx={frameworkDetailItem}>
                           <Box component="span" sx={frameworkDetailLabel}>
-                            <Box component="span" sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                              {plugin.frameworkType === "organizational" ? <BuildingIcon size={12} /> : <LayersIcon size={12} />}
-                              Framework Type
-                            </Box>
+                            Framework Type
                           </Box>
                           <Box>
                             <MuiChip
@@ -651,7 +617,7 @@ const PluginManagement: React.FC = () => {
           {/* Configuration Card - Only show for installed plugins that require configuration */}
           {plugin.installationStatus === PluginInstallationStatus.INSTALLED && plugin.requiresConfiguration !== false && (
             <Card sx={cardStyles.base(theme)}>
-              <CardContent sx={{ p: 3 }}>
+              <CardContent sx={{ p: "16px" }}>
                 <Stack spacing={3}>
                   {/* Configuration Header */}
                   <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>

Clients/src/presentation/pages/Plugins/PluginManagement/style.ts

@@ -131,7 +131,7 @@ export const frameworkDetailItem: SxProps<Theme> = {
   display: "flex",
   flexDirection: "column",
   gap: 0.5,
-  p: 2,
+  p: "16px",
   backgroundColor: "#f9fafb",
   borderRadius: "8px",
   border: "1px solid #eaecf0",

Clients/src/presentation/pages/Plugins/index.tsx

@@ -264,7 +264,7 @@ const Plugins: React.FC = () => {
       />
 
       <TabContext value={activeTab}>
-        <Box sx={{ borderBottom: 1, borderColor: "#d0d5dd" }}>
+        <Box>
           <TabBar
             tabs={[
               { label: "Marketplace", value: "marketplace", icon: "Store" },