From 0f5440d0e026a72f1a6760a3b93cd716650ba987 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 9 May 2025 18:54:55 +0500
Subject: [PATCH 01/37] Add managed/unmanged filtering on column

---
 .../setting/environments/utils/columnFactories.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx b/client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx
index b33685ab7..45c69c580 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx
@@ -69,6 +69,13 @@ export function createManagedColumn<T extends DeployableItem>(
   return {
     title: 'Managed',
     key: 'managed',
+    filterMode: 'menu',
+    filters: [
+      { text: 'Managed', value: true },
+      { text: 'Unmanaged', value: false },
+    ],
+    onFilter: (value, record) => record.managed === value,
+    filterMultiple: false,
     render: (_, record: T) => (
       <Space>
         <Tag color={record.managed ? 'green' : 'default'}>
@@ -178,6 +185,13 @@ export function createPublishedColumn<T extends { published?: boolean }>(): Colu
     title: 'Status',
     dataIndex: 'published',
     key: 'published',
+    filterMode: 'menu',
+    filters: [
+      { text: 'Published', value: true },
+      { text: 'Unpublished', value: false },
+    ],
+    onFilter: (value, record) => record.published === value,
+    filterMultiple: false,
     render: (published: boolean) => (
       <Tag color={published ? 'green' : 'orange'}>
         {published ? 'Published' : 'Unpublished'}

From 8e0f94b9bb7a3f2fbb4d906612eb9dcbdea737fd Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 9 May 2025 19:29:27 +0500
Subject: [PATCH 02/37] Add search filter for the objects

---
 .../components/DeployableItemsList.tsx        | 61 +++++++++++++------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx
index 63f8dda72..bed49855d 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx
@@ -1,12 +1,14 @@
 // components/DeployableItemsList.tsx
-import React from 'react';
-import { Table, Tag, Empty, Spin, Switch, Space, Button, Tooltip } from 'antd';
-import { CloudUploadOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { Table, Tag, Empty, Spin, Switch, Space, Button, Tooltip, Input } from 'antd';
+import { CloudUploadOutlined, SearchOutlined } from '@ant-design/icons';
 import history from '@lowcoder-ee/util/history';
 import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
 import { Environment } from '../types/environment.types';
 import { useDeployModal } from '../context/DeployModalContext';
 
+const { Search } = Input;
+
 interface DeployableItemsListProps<T extends DeployableItem, S extends BaseStats> {
   items: T[];
   loading: boolean;
@@ -30,6 +32,14 @@ function DeployableItemsList<T extends DeployableItem, S extends BaseStats>({
 }: DeployableItemsListProps<T, S>) {
 
   const { openDeployModal } = useDeployModal();
+  const [searchText, setSearchText] = useState('');
+  
+  // Filter items based on search
+  const filteredItems = searchText
+    ? items.filter(item => 
+        item.name.toLowerCase().includes(searchText.toLowerCase()) || 
+        item.id.toLowerCase().includes(searchText.toLowerCase()))
+    : items;
 
   // Handle row click for navigation
   const handleRowClick = (item: T) => {
@@ -53,8 +63,7 @@ function DeployableItemsList<T extends DeployableItem, S extends BaseStats>({
     onToggleManaged,
     openDeployModal,
     additionalParams 
-    }) 
-    
+    });
 
   if (loading) {
     return (
@@ -76,18 +85,36 @@ function DeployableItemsList<T extends DeployableItem, S extends BaseStats>({
   const hasNavigation = config.buildDetailRoute({}) !== '#';
 
   return (
-    <Table
-      columns={columns}
-      dataSource={items}
-      rowKey={config.idField}
-      pagination={{ pageSize: 10 }}
-      size="middle"
-      scroll={{ x: 'max-content' }} 
-      onRow={(record) => ({
-        onClick: hasNavigation ? () => handleRowClick(record) : undefined,
-        style: hasNavigation ? { cursor: 'pointer' } : undefined,
-      })}
-    />
+    <>
+      {/* Search Bar */}
+      <div style={{ marginBottom: 16 }}>
+        <Search
+          placeholder={`Search ${config.pluralLabel} by name or ID`}
+          allowClear
+          onSearch={value => setSearchText(value)}
+          onChange={e => setSearchText(e.target.value)}
+          style={{ width: 300 }}
+        />
+        {searchText && filteredItems.length !== items.length && (
+          <div style={{ marginTop: 8 }}>
+            Showing {filteredItems.length} of {items.length} {config.pluralLabel.toLowerCase()}
+          </div>
+        )}
+      </div>
+      
+      <Table
+        columns={columns}
+        dataSource={filteredItems}
+        rowKey={config.idField}
+        pagination={{ pageSize: 10 }}
+        size="middle"
+        scroll={{ x: 'max-content' }} 
+        onRow={(record) => ({
+          onClick: hasNavigation ? () => handleRowClick(record) : undefined,
+          style: hasNavigation ? { cursor: 'pointer' } : undefined,
+        })}
+      />
+    </>
   );
 }
 

From 9883336f591df05288ff594ac0c4baa0d61be66c Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 9 May 2025 23:44:55 +0500
Subject: [PATCH 03/37] Improve the Environment Not Found UI

---
 .../environments/EnvironmentDetail.tsx        | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index b772bf373..a3a15ec03 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -93,12 +93,37 @@ const EnvironmentDetail: React.FC = () => {
 
   if (error || !environment) {
     return (
-      <Alert
-        message="Error loading environment"
-        description={error || "Environment not found"}
-        type="error"
-        showIcon
-      />
+      <div style={{ padding: "24px", flex: 1 }}>
+        <Breadcrumb style={{ marginBottom: "16px" }}>
+          <Breadcrumb.Item>
+            <span
+              style={{ cursor: "pointer" }}
+              onClick={() => history.push("/setting/environments")}
+            >
+              <HomeOutlined /> Environments
+            </span>
+          </Breadcrumb.Item>
+          <Breadcrumb.Item>Not Found</Breadcrumb.Item>
+        </Breadcrumb>
+        
+        <Card>
+          <div style={{ textAlign: "center", padding: "40px 0" }}>
+            <Title level={3} style={{ color: "#ff4d4f" }}>
+              Environment Not Found
+            </Title>
+            <Text type="secondary" style={{ display: "block", margin: "16px 0" }}>
+              {error || "The environment you're looking for doesn't exist or you don't have permission to view it."}
+            </Text>
+            <Button 
+              type="primary"
+              onClick={() => history.push("/setting/environments")}
+              style={{ marginTop: "16px" }}
+            >
+              Return to Environments List
+            </Button>
+          </div>
+        </Card>
+      </div>
     );
   }
   

From b6d74d26d05e22d46a1085496e034b731a605b73 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 12 May 2025 17:10:38 +0500
Subject: [PATCH 04/37] create a util function and add tags in Deployment Modal

---
 .../components/DeployItemModal.tsx            | 25 +++++++++-
 .../components/EnvironmentsTable.tsx          | 18 ++------
 .../environments/utils/environmentUtils.ts    | 46 +++++++++++++++++++
 3 files changed, 72 insertions(+), 17 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
index a58ac7d78..b7ae9bb06 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
@@ -1,9 +1,11 @@
 // components/DeployItemModal.tsx
 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Checkbox, Button, message, Spin, Input } from 'antd';
+import { Modal, Form, Select, Checkbox, Button, message, Spin, Input, Tag, Space } from 'antd';
 import { Environment } from '../types/environment.types';
 import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
 import { useEnvironmentContext } from '../context/EnvironmentContext';
+import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
+
 interface DeployItemModalProps<T extends DeployableItem, S extends BaseStats> {
   visible: boolean;
   item: T | null;
@@ -84,6 +86,18 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
           form={form}
           layout="vertical"
         >
+          {/* Source environment display */}
+          <Form.Item label="Source Environment">
+            <Space>
+              <strong>{sourceEnvironment.environmentName}</strong>
+              {sourceEnvironment.environmentType && (
+                <Tag color={getEnvironmentTagColor(sourceEnvironment.environmentType)}>
+                  {formatEnvironmentType(sourceEnvironment.environmentType)}
+                </Tag>
+              )}
+            </Space>
+          </Form.Item>
+
           <Form.Item
             name="targetEnvId"
             label="Target Environment"
@@ -92,7 +106,14 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
             <Select placeholder="Select target environment">
               {targetEnvironments.map((env) => (
                 <Select.Option key={env.environmentId} value={env.environmentId}>
-                  {env.environmentName}
+                  <Space>
+                    {env.environmentName}
+                    {env.environmentType && (
+                      <Tag color={getEnvironmentTagColor(env.environmentType)}>
+                        {formatEnvironmentType(env.environmentType)}
+                      </Tag>
+                    )}
+                  </Space>
                 </Select.Option>
               ))}
             </Select>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
index 0208932d7..4f9150a9b 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Table, Tag, Button, Tooltip, Space } from 'antd';
 import { EditOutlined, AuditOutlined} from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
+import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
 
 
 
@@ -20,19 +21,6 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
   loading,
   onRowClick,
 }) => {
-  // Get color for environment type/stage
-  const getTypeColor = (type: string): string => {
-    if (!type) return 'default'; 
-    
-    switch (type.toUpperCase()) {
-      case 'DEV': return 'blue';
-      case 'TEST': return 'orange';
-      case 'PREPROD': return 'purple';
-      case 'PROD': return 'green';
-      default: return 'default';
-    }
-  };
-
    // Open audit page in new tab
    const openAuditPage = (environmentId: string, e: React.MouseEvent) => {
     e.stopPropagation(); // Prevent row click from triggering
@@ -65,8 +53,8 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
       dataIndex: 'environmentType',
       key: 'environmentType',
       render: (type: string) => (
-        <Tag color={getTypeColor(type || '')}>
-          {type ? type.toUpperCase() : 'UNKNOWN'}
+        <Tag color={getEnvironmentTagColor(type)}>
+          {formatEnvironmentType(type)}
         </Tag>
       ),
     },
diff --git a/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts b/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts
new file mode 100644
index 000000000..f3f5d5c1b
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts
@@ -0,0 +1,46 @@
+/**
+ * Utility functions for environment-related features
+ */
+
+/**
+ * Get the appropriate color for an environment tag based on its type
+ * @param envType The environment type/stage (e.g. 'PROD', 'DEV', 'STAGING')
+ * @returns A color string to use with Ant Design's Tag component
+ */
+export const getEnvironmentTagColor = (envType: string | undefined): string => {
+  if (!envType) return 'default';
+  
+  // Normalize to uppercase for consistent comparison
+  const type = envType.toUpperCase();
+  
+  switch (type) {
+    // Production environment
+    case 'PROD':
+      return 'red'; // Red for production - indicates caution
+    
+    // Pre-production environment
+    case 'PREPROD':
+      return 'orange'; // Orange for pre-production
+    
+    // Test environment
+    case 'TEST':
+      return 'purple'; // Purple for test environment
+    
+    // Development environment
+    case 'DEV':
+      return 'green'; // Green for development - safe to use
+      
+    default:
+      return 'default'; // Default gray for unknown types
+  }
+};
+
+/**
+ * Format an environment type for display
+ * @param envType The environment type string
+ * @returns Formatted environment type string
+ */
+export const formatEnvironmentType = (envType: string | undefined): string => {
+  if (!envType) return 'UNKNOWN';
+  return envType.toUpperCase();
+}; 
\ No newline at end of file

From bb81f1fcef61c536570bf906423065f4b2b1e287 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 00:41:20 +0500
Subject: [PATCH 05/37] fix endpoint for DS and ql

---
 .../setting/environments/services/datasources.service.ts | 9 ++++++++-
 .../pages/setting/environments/services/query.service.ts | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
index b1fe06745..71d6929ac 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
@@ -152,7 +152,14 @@ export async function getMergedWorkspaceDataSources(
 // Function to deploy a data source to another environment
 export async function deployDataSource(params: DeployDataSourceParams): Promise<boolean> {
   try {
-    const response = await axios.post('/api/plugins/enterprise/datasource/deploy', params);
+    const response = await axios.post('/api/plugins/enterprise/datasource/deploy', null, {
+      params: {
+        envId: params.envId,
+        targetEnvId: params.targetEnvId,
+        datasourceId: params.datasourceId,
+        updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false
+      }
+    });
     return response.status === 200;
   } catch (error) {
     console.error('Error deploying data source:', error);
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
index 39eda0235..8f5ad6892 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
@@ -78,7 +78,14 @@ export interface MergedQueriesResult {
 
   export async function deployQuery(params: DeployQueryParams): Promise<boolean> {
     try {
-      const response = await axios.post('/api/plugins/enterprise/qlQuery/deploy', params);
+      const response = await axios.post('/api/plugins/enterprise/qlQuery/deploy', null, {
+        params: {
+          envId: params.envId,
+          targetEnvId: params.targetEnvId,
+          queryId: params.queryId,
+          updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false
+        }
+      });
       return response.status === 200;
     } catch (error) {
       console.error('Error deploying query:', error);

From b5647a7e68c83528e44253ddc62164742541fb52 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 18:55:47 +0500
Subject: [PATCH 06/37] updated managed endpoints

---
 .../environments/config/apps.config.tsx       |  17 +-
 .../config/data-sources.config.tsx            |  15 +-
 .../environments/config/query.config.tsx      |  15 +-
 .../environments/config/workspace.config.tsx  |  15 +-
 .../environments/context/WorkspaceContext.tsx |  17 +-
 .../services/managed-objects.service.ts       | 162 ++++++++++++++++++
 6 files changed, 223 insertions(+), 18 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts

diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
index 90b673f34..293baf4cc 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
@@ -5,7 +5,8 @@ import { AppstoreOutlined, AuditOutlined } from '@ant-design/icons';
 import {DeployableItemConfig } from '../types/deployable-item.types';
 import { Environment } from '../types/environment.types';
 import { getMergedWorkspaceApps, deployApp } from '../services/apps.service';
-import { connectManagedApp, unconnectManagedApp } from '../services/enterprise.service';
+import { connectManagedApp, unconnectManagedApp } from '../services/enterprise.service'; 
+import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { App, AppStats } from '../types/app.types';
 
 
@@ -161,11 +162,19 @@ export const appsConfig: DeployableItemConfig<App, AppStats> = {
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        await connectManagedApp(environment.environmentId, item.name, item.applicationGid!);
+        return await setManagedObject(
+          item.applicationGid!,
+          environment.environmentId,
+          ManagedObjectType.APP,
+          item.name
+        );
       } else {
-        await unconnectManagedApp(item.applicationGid!);
+        return await unsetManagedObject(
+          item.applicationGid!,
+          environment.environmentId,
+          ManagedObjectType.APP
+        );
       }
-      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
index 567e460a7..069b820c5 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
@@ -7,6 +7,7 @@ import { DataSource, DataSourceStats } from '../types/datasource.types';
 import { Environment } from '../types/environment.types';
 import { getMergedWorkspaceDataSources, deployDataSource } from '../services/datasources.service';
 import { connectManagedDataSource, unconnectManagedDataSource } from '../services/enterprise.service';
+import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { 
   createNameColumn, 
   createTypeColumn,
@@ -150,11 +151,19 @@ export const dataSourcesConfig: DeployableItemConfig<DataSource, DataSourceStats
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        await connectManagedDataSource(environment.environmentId, item.name, item.gid);
+        return await setManagedObject(
+          item.gid,
+          environment.environmentId,
+          ManagedObjectType.DATASOURCE,
+          item.name
+        );
       } else {
-        await unconnectManagedDataSource(item.gid);
+        return await unsetManagedObject(
+          item.gid,
+          environment.environmentId,
+          ManagedObjectType.DATASOURCE
+        );
       }
-      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
index 00721f033..11f1fb1a5 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
@@ -6,6 +6,7 @@ import { DeployableItemConfig } from '../types/deployable-item.types';
 import { Query } from '../types/query.types';
 import { connectManagedQuery, unconnectManagedQuery } from '../services/enterprise.service';
 import { getMergedWorkspaceQueries, deployQuery } from '../services/query.service';
+import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { Environment } from '../types/environment.types';
 
 import { 
@@ -145,11 +146,19 @@ export const queryConfig: DeployableItemConfig<Query, QueryStats> = {
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        await connectManagedQuery(environment.environmentId, item.name, item.gid);
+        return await setManagedObject(
+          item.gid,
+          environment.environmentId,
+          ManagedObjectType.QUERY,
+          item.name
+        );
       } else {
-        await unconnectManagedQuery(item.gid);
+        return await unsetManagedObject(
+          item.gid,
+          environment.environmentId,
+          ManagedObjectType.QUERY
+        );
       }
-      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
index c6d3a7dc2..e68260f1b 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
@@ -7,6 +7,7 @@ import { Environment } from '../types/environment.types';
 import { buildEnvironmentWorkspaceId } from '@lowcoder-ee/constants/routesURL';
 import { getMergedEnvironmentWorkspaces, deployWorkspace } from '../services/workspace.service';
 import { connectManagedWorkspace, unconnectManagedWorkspace } from '../services/enterprise.service';
+import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { 
   createNameColumn, 
   createIdColumn, 
@@ -135,11 +136,19 @@ export const workspaceConfig: DeployableItemConfig<Workspace, WorkspaceStats> =
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        await connectManagedWorkspace(environment.environmentId, item.name, item.gid!);
+        return await setManagedObject(
+          item.gid!,
+          environment.environmentId,
+          ManagedObjectType.ORG,
+          item.name
+        );
       } else {
-        await unconnectManagedWorkspace(item.gid!);
+        return await unsetManagedObject(
+          item.gid!,
+          environment.environmentId,
+          ManagedObjectType.ORG
+        );
       }
-      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx b/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
index 72c7ef356..7ad259aeb 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
@@ -12,7 +12,8 @@ import React, {
   import { useSingleEnvironmentContext } from "./SingleEnvironmentContext";
   import { fetchWorkspaceById } from "../services/environments.service";
   import { Workspace } from "../types/workspace.types";
-  import { getManagedWorkspaces, connectManagedWorkspace, unconnectManagedWorkspace } from "../services/enterprise.service";
+  import { getManagedWorkspaces } from "../services/enterprise.service";
+  import { ManagedObjectType, setManagedObject, unsetManagedObject } from "../services/managed-objects.service";
   
   interface WorkspaceContextState {
     // Workspace data
@@ -113,14 +114,20 @@ import React, {
       try {
         if (checked) {
           // Connect the workspace as managed
-          await connectManagedWorkspace(
+          await setManagedObject(
+            workspace.gid!,
             environment.environmentId,
-            workspace.name,
-            workspace.gid!
+            ManagedObjectType.ORG,
+            workspace.name
+          
           );
         } else {
           // Disconnect the managed workspace
-          await unconnectManagedWorkspace(workspace.gid!);
+          await unsetManagedObject(
+            workspace.gid!,
+            environment.environmentId, 
+            ManagedObjectType.ORG 
+          );
         }
         
         // Update local state
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
new file mode 100644
index 000000000..173f1006c
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
@@ -0,0 +1,162 @@
+import axios from "axios";
+import { message } from "antd";
+
+// Object types that can be managed
+export enum ManagedObjectType {
+  ORG = "ORG",
+  APP = "APP",
+  QUERY = "QUERY",
+  DATASOURCE = "DATASOURCE"
+}
+
+/**
+ * Check if an object is managed
+ * @param objGid - Object's global ID
+ * @param environmentId - Environment ID
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @returns Promise with boolean indicating if object is managed
+ */
+export async function isManagedObject(
+  objGid: string,
+  environmentId: string,
+  objType: ManagedObjectType
+): Promise<boolean> {
+  try {
+    if (!objGid || !environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const response = await axios.get(`/api/plugins/enterprise/managed-obj`, {
+      params: {
+        objGid,
+        environmentId,
+        objType
+      }
+    });
+
+    return response.data.managed === true;
+  } catch (error) {
+    // If the object doesn't exist as managed, it's not an error
+    if (axios.isAxiosError(error) && error.response?.status === 404) {
+      return false;
+    }
+    
+    const errorMessage = error instanceof Error ? error.message : "Failed to check managed status";
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
+/**
+ * Set an object as managed
+ * @param objGid - Object's global ID
+ * @param environmentId - Environment ID
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @param objName - Object name (optional)
+ * @param objTags - Object tags (optional)
+ * @returns Promise with operation result
+ */
+export async function setManagedObject(
+  objGid: string,
+  environmentId: string,
+  objType: ManagedObjectType,
+  objName?: string,
+  objTags: string[] = []
+): Promise<boolean> {
+  try {
+    if (!objGid || !environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const response = await axios.post(`/api/plugins/enterprise/managed-obj`, 
+      // Include optional parameters in the request body instead of query params
+      {
+        objName,
+        objTags: objTags.length > 0 ? objTags : undefined
+      },
+      {
+        params: {
+          objGid,
+          environmentId,
+          objType
+        }
+      }
+    );
+
+    return response.status === 200;
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : `Failed to set ${objType} as managed`;
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
+/**
+ * Set an object as unmanaged
+ * @param objGid - Object's global ID
+ * @param environmentId - Environment ID
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @returns Promise with operation result
+ */
+export async function unsetManagedObject(
+  objGid: string,
+  environmentId: string,
+  objType: ManagedObjectType
+): Promise<boolean> {
+  try {
+    if (!objGid || !environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const response = await axios.delete(`/api/plugins/enterprise/managed-obj`, {
+      params: {
+        objGid,
+        environmentId,
+        objType
+      }
+    });
+
+    return response.status === 200;
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : `Failed to remove ${objType} from managed`;
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
+/**
+ * Get all managed objects of a specific type for an environment
+ * NOTE: This function is commented out as the endpoint is not yet implemented
+ * TODO: Uncomment when the /managed-obj/list endpoint is available
+ * 
+ * @param environmentId - Environment ID 
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @returns Promise with an array of managed objects
+ */
+/*
+export async function getManagedObjects(
+  environmentId: string,
+  objType: ManagedObjectType
+): Promise<any[]> {
+  try {
+    if (!environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const response = await axios.get(`/api/plugins/enterprise/managed-obj/list`, {
+      params: {
+        environmentId,
+        objType
+      }
+    });
+
+    return response.data.data || [];
+  } catch (error) {
+    const errorMessage = error instanceof Error 
+      ? error.message 
+      : `Failed to fetch managed ${objType.toLowerCase()}s`;
+    message.error(errorMessage);
+    throw error;
+  }
+}
+*/ 
\ No newline at end of file

From d08218f178a62e1a62175bc0fc9e1a7dca2aac52 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 19:06:45 +0500
Subject: [PATCH 07/37] fix switch for objects

---
 .../src/pages/setting/environments/config/apps.config.tsx  | 7 +++++--
 .../setting/environments/config/data-sources.config.tsx    | 7 +++++--
 .../src/pages/setting/environments/config/query.config.tsx | 7 +++++--
 .../pages/setting/environments/config/workspace.config.tsx | 7 +++++--
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
index 293baf4cc..6d787010c 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
@@ -162,19 +162,22 @@ export const appsConfig: DeployableItemConfig<App, AppStats> = {
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        return await setManagedObject(
+        // Connect the app as managed
+        await setManagedObject(
           item.applicationGid!,
           environment.environmentId,
           ManagedObjectType.APP,
           item.name
         );
       } else {
-        return await unsetManagedObject(
+        // Disconnect the managed app
+        await unsetManagedObject(
           item.applicationGid!,
           environment.environmentId,
           ManagedObjectType.APP
         );
       }
+      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
index 069b820c5..6a0ed6022 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
@@ -151,19 +151,22 @@ export const dataSourcesConfig: DeployableItemConfig<DataSource, DataSourceStats
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        return await setManagedObject(
+        // Connect the data source as managed
+        await setManagedObject(
           item.gid,
           environment.environmentId,
           ManagedObjectType.DATASOURCE,
           item.name
         );
       } else {
-        return await unsetManagedObject(
+        // Disconnect the managed data source
+        await unsetManagedObject(
           item.gid,
           environment.environmentId,
           ManagedObjectType.DATASOURCE
         );
       }
+      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
index 11f1fb1a5..641d0f41f 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
@@ -146,19 +146,22 @@ export const queryConfig: DeployableItemConfig<Query, QueryStats> = {
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        return await setManagedObject(
+        // Connect the query as managed
+        await setManagedObject(
           item.gid,
           environment.environmentId,
           ManagedObjectType.QUERY,
           item.name
         );
       } else {
-        return await unsetManagedObject(
+        // Disconnect the managed query
+        await unsetManagedObject(
           item.gid,
           environment.environmentId,
           ManagedObjectType.QUERY
         );
       }
+      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
index e68260f1b..9174ac662 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
@@ -136,19 +136,22 @@ export const workspaceConfig: DeployableItemConfig<Workspace, WorkspaceStats> =
   toggleManaged: async ({ item, checked, environment }) => {
     try {
       if (checked) {
-        return await setManagedObject(
+        // Connect the workspace as managed
+        await setManagedObject(
           item.gid!,
           environment.environmentId,
           ManagedObjectType.ORG,
           item.name
         );
       } else {
-        return await unsetManagedObject(
+        // Disconnect the managed workspace
+        await unsetManagedObject(
           item.gid!,
           environment.environmentId,
           ManagedObjectType.ORG
         );
       }
+      return true;
     } catch (error) {
       console.error('Error toggling managed status:', error);
       return false;

From c1a74fe0ca29e7036f3a6c57566fc4089f28049e Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 20:42:41 +0500
Subject: [PATCH 08/37] refactor AppsTab component

---
 .../setting/environments/WorkspaceDetail.tsx  |  16 +-
 .../environments/components/AppsTab.tsx       | 292 ++++++++++++++++++
 2 files changed, 300 insertions(+), 8 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index 79b861882..eeeed6815 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -34,6 +34,7 @@ import { appsConfig } from "./config/apps.config";
 import { dataSourcesConfig } from "./config/data-sources.config";
 import { queryConfig } from "./config/query.config";
 
+import AppsTab from "./components/AppsTab";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -160,14 +161,13 @@ const WorkspaceDetail: React.FC = () => {
 
       {/* Tabs for Apps, Data Sources, and Queries */}
       <Tabs defaultActiveKey="apps">
-        <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
-          <DeployableItemsTab
-            environment={environment}
-            config={appsConfig}
-            additionalParams={{ workspaceId: workspace.id }}
-            title="Apps in this Workspace"
-          />
-        </TabPane>
+      // Replace the Apps TabPane in WorkspaceDetail.tsx with this:
+          <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
+            <AppsTab
+              environment={environment}
+              workspace={workspace}
+            />
+          </TabPane>
 
         <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
           <DeployableItemsTab
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
new file mode 100644
index 000000000..f5ca4b388
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
+import { SyncOutlined, CloudUploadOutlined, SearchOutlined } from '@ant-design/icons';
+import Title from 'antd/lib/typography/Title';
+import { Environment } from '../types/environment.types';
+import { Workspace } from '../types/workspace.types';
+import { App, AppStats } from '../types/app.types';
+import { getMergedWorkspaceApps } from '../services/apps.service';
+import { Switch, Spin, Empty } from 'antd';
+import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
+import { useDeployModal } from '../context/DeployModalContext';
+import { appsConfig } from '../config/apps.config';
+
+const { Search } = Input;
+
+interface AppsTabProps {
+  environment: Environment;
+  workspace: Workspace;
+}
+
+const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
+  const [apps, setApps] = useState<App[]>([]);
+  const [stats, setStats] = useState<AppStats>({
+    total: 0,
+    published: 0,
+    managed: 0,
+    unmanaged: 0
+  });
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState('');
+  const { openDeployModal } = useDeployModal();
+
+  // Fetch apps
+  const fetchApps = async () => {
+    if (!workspace.id || !environment) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const result = await getMergedWorkspaceApps(
+        workspace.id,
+        environment.environmentId,
+        environment.environmentApikey,
+        environment.environmentApiServiceUrl!
+      );
+      
+      setApps(result.apps);
+      
+      // Calculate stats
+      const total = result.apps.length;
+      const published = result.apps.filter(app => app.published).length;
+      const managed = result.apps.filter(app => app.managed).length;
+      
+      setStats({
+        total,
+        published,
+        managed,
+        unmanaged: total - managed
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch apps");
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchApps();
+  }, [environment, workspace]);
+
+  // Handle refresh
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchApps();
+  };
+
+  // Toggle managed status
+  const handleToggleManaged = async (app: App, checked: boolean) => {
+    setRefreshing(true);
+    try {
+      if (checked) {
+        await setManagedObject(
+          app.applicationGid,
+          environment.environmentId,
+          ManagedObjectType.APP,
+          app.name
+        );
+      } else {
+        await unsetManagedObject(
+          app.applicationGid,
+          environment.environmentId,
+          ManagedObjectType.APP
+        );
+      }
+      
+      // Update the app in state
+      const updatedApps = apps.map(item => {
+        if (item.applicationId === app.applicationId) {
+          return { ...item, managed: checked };
+        }
+        return item;
+      });
+      
+      setApps(updatedApps);
+      
+      // Update stats
+      const managed = updatedApps.filter(app => app.managed).length;
+      setStats(prev => ({
+        ...prev,
+        managed,
+        unmanaged: prev.total - managed
+      }));
+      
+      message.success(`${app.name} is now ${checked ? 'Managed' : 'Unmanaged'}`);
+      return true;
+    } catch (error) {
+      message.error(`Failed to change managed status for ${app.name}`);
+      return false;
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  // Filter apps based on search
+  const filteredApps = searchText
+    ? apps.filter(app => 
+        app.name.toLowerCase().includes(searchText.toLowerCase()) || 
+        app.applicationId.toLowerCase().includes(searchText.toLowerCase()))
+    : apps;
+
+  // Table columns
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: string) => <span className="app-name">{text}</span>
+    },
+    {
+      title: 'ID',
+      dataIndex: 'applicationId',
+      key: 'applicationId', 
+      ellipsis: true,
+    },
+    {
+      title: 'Published',
+      dataIndex: 'published',
+      key: 'published',
+      render: (published: boolean) => (
+        <Tag color={published ? 'green' : 'default'}>
+          {published ? 'Published' : 'Draft'}
+        </Tag>
+      ),
+    },
+    {
+      title: 'Managed',
+      key: 'managed',
+      render: (_: any, app: App) => (
+        <Switch
+          checked={!!app.managed}
+          onChange={(checked: boolean) => handleToggleManaged(app, checked)}
+          loading={refreshing}
+          size="small"
+        />
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (_: any, app: App) => (
+        <Space onClick={(e) => e.stopPropagation()}>
+          <Tooltip title={!app.managed ? "App must be managed before it can be deployed" : "Deploy this app to another environment"}>
+            <Button
+              type="primary"
+              size="small"
+              icon={<CloudUploadOutlined />}
+              onClick={() => openDeployModal(app, appsConfig, environment)}
+              disabled={!app.managed}
+            >
+              Deploy
+            </Button>
+          </Tooltip>
+        </Space>
+      ),
+    }
+  ];
+
+  return (
+    <Card>
+      {/* Header with refresh button */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+        <Title level={5}>Apps in this Workspace</Title>
+        <Button 
+          icon={<SyncOutlined spin={refreshing} />} 
+          onClick={handleRefresh}
+          loading={loading}
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {/* Stats display */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Apps</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Published Apps</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.published}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed Apps</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged Apps</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
+        </div>
+      </div>
+
+      <Divider style={{ margin: "16px 0" }} />
+
+      {/* Error display */}
+      {error && (
+        <Alert
+          message="Error loading apps"
+          description={error}
+          type="error"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Configuration warnings */}
+      {(!environment.environmentApikey || !environment.environmentApiServiceUrl) && !error && (
+        <Alert
+          message="Configuration Issue"
+          description="Missing required configuration: API key or API service URL"
+          type="warning"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Content */}
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
+          <Spin tip="Loading apps..." />
+        </div>
+      ) : apps.length === 0 ? (
+        <Empty
+          description={error || "No apps found in this workspace"}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <>
+          {/* Search Bar */}
+          <div style={{ marginBottom: 16 }}>
+            <Search
+              placeholder="Search apps by name or ID"
+              allowClear
+              onSearch={value => setSearchText(value)}
+              onChange={e => setSearchText(e.target.value)}
+              style={{ width: 300 }}
+            />
+            {searchText && filteredApps.length !== apps.length && (
+              <div style={{ marginTop: 8 }}>
+                Showing {filteredApps.length} of {apps.length} apps
+              </div>
+            )}
+          </div>
+          
+          <Table
+            columns={columns}
+            dataSource={filteredApps}
+            rowKey="applicationId"
+            pagination={{ pageSize: 10 }}
+            size="middle"
+            scroll={{ x: 'max-content' }}
+          />
+        </>
+      )}
+    </Card>
+  );
+};
+
+export default AppsTab;
\ No newline at end of file

From 0a1879be9a70e203d5decdc34c042af9c0421022 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 20:49:18 +0500
Subject: [PATCH 09/37] Seperate DS tab

---
 .../setting/environments/WorkspaceDetail.tsx  |   7 +-
 .../components/DataSourcesTab.tsx             | 279 ++++++++++++++++++
 2 files changed, 282 insertions(+), 4 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index eeeed6815..25bd2f3a2 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -35,6 +35,7 @@ import { dataSourcesConfig } from "./config/data-sources.config";
 import { queryConfig } from "./config/query.config";
 
 import AppsTab from "./components/AppsTab";
+import DataSourcesTab from "./components/DataSourcesTab";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -170,11 +171,9 @@ const WorkspaceDetail: React.FC = () => {
           </TabPane>
 
         <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
-          <DeployableItemsTab
+          <DataSourcesTab
             environment={environment}
-            config={dataSourcesConfig}
-            additionalParams={{ workspaceId: workspace.id }}
-            title="Data Sources in this Workspace"
+            workspace={workspace}
           />
         </TabPane>
 
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
new file mode 100644
index 000000000..2eba3050e
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -0,0 +1,279 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
+import { SyncOutlined, CloudUploadOutlined, DatabaseOutlined } from '@ant-design/icons';
+import Title from 'antd/lib/typography/Title';
+import { Environment } from '../types/environment.types';
+import { Workspace } from '../types/workspace.types';
+import { DataSource } from '../types/datasource.types';
+import { getMergedWorkspaceDataSources } from '../services/datasources.service';
+import { Switch, Spin, Empty } from 'antd';
+import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
+import { useDeployModal } from '../context/DeployModalContext';
+import { dataSourcesConfig } from '../config/data-sources.config';
+
+const { Search } = Input;
+
+interface DataSourcesTabProps {
+  environment: Environment;
+  workspace: Workspace;
+}
+
+const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace }) => {
+  const [dataSources, setDataSources] = useState<DataSource[]>([]);
+  const [stats, setStats] = useState({
+    total: 0,
+    types: 0,
+    managed: 0,
+    unmanaged: 0
+  });
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState('');
+  const { openDeployModal } = useDeployModal();
+
+  // Fetch data sources
+  const fetchDataSources = async () => {
+    if (!workspace.id || !environment) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const result = await getMergedWorkspaceDataSources(
+        workspace.id,
+        environment.environmentId,
+        environment.environmentApikey,
+        environment.environmentApiServiceUrl!
+      );
+      
+      setDataSources(result.dataSources);
+      setStats(result.stats);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch data sources");
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDataSources();
+  }, [environment, workspace]);
+
+  // Handle refresh
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchDataSources();
+  };
+
+  // Toggle managed status
+  const handleToggleManaged = async (dataSource: DataSource, checked: boolean) => {
+    setRefreshing(true);
+    try {
+      if (checked) {
+        await setManagedObject(
+          dataSource.gid,
+          environment.environmentId,
+          ManagedObjectType.DATASOURCE,
+          dataSource.name
+        );
+      } else {
+        await unsetManagedObject(
+          dataSource.gid,
+          environment.environmentId,
+          ManagedObjectType.DATASOURCE
+        );
+      }
+      
+      // Update the data source in state
+      const updatedDataSources = dataSources.map(item => {
+        if (item.id === dataSource.id) {
+          return { ...item, managed: checked };
+        }
+        return item;
+      });
+      
+      setDataSources(updatedDataSources);
+      
+      // Update stats
+      const managed = updatedDataSources.filter(ds => ds.managed).length;
+      setStats(prev => ({
+        ...prev,
+        managed,
+        unmanaged: prev.total - managed
+      }));
+      
+      message.success(`${dataSource.name} is now ${checked ? 'Managed' : 'Unmanaged'}`);
+      return true;
+    } catch (error) {
+      message.error(`Failed to change managed status for ${dataSource.name}`);
+      return false;
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  // Filter data sources based on search
+  const filteredDataSources = searchText
+    ? dataSources.filter(ds => 
+        ds.name.toLowerCase().includes(searchText.toLowerCase()) || 
+        ds.id.toString().toLowerCase().includes(searchText.toLowerCase()))
+    : dataSources;
+
+  // Table columns
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: string) => <span className="datasource-name">{text}</span>
+    },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      ellipsis: true,
+    },
+    {
+      title: 'Type',
+      dataIndex: 'type',
+      key: 'type',
+      render: (type: string) => (
+        <Tag color="blue">{type}</Tag>
+      ),
+    },
+    {
+      title: 'Managed',
+      key: 'managed',
+      render: (_: any, dataSource: DataSource) => (
+        <Switch
+          checked={!!dataSource.managed}
+          onChange={(checked: boolean) => handleToggleManaged(dataSource, checked)}
+          loading={refreshing}
+          size="small"
+        />
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (_: any, dataSource: DataSource) => (
+        <Space onClick={(e) => e.stopPropagation()}>
+          <Tooltip title={!dataSource.managed ? "Data source must be managed before it can be deployed" : "Deploy this data source to another environment"}>
+            <Button
+              type="primary"
+              size="small"
+              icon={<CloudUploadOutlined />}
+              onClick={() => openDeployModal(dataSource, dataSourcesConfig, environment)}
+              disabled={!dataSource.managed}
+            >
+              Deploy
+            </Button>
+          </Tooltip>
+        </Space>
+      ),
+    }
+  ];
+
+  return (
+    <Card>
+      {/* Header with refresh button */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+        <Title level={5}>Data Sources in this Workspace</Title>
+        <Button 
+          icon={<SyncOutlined spin={refreshing} />} 
+          onClick={handleRefresh}
+          loading={loading}
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {/* Stats display */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Data Sources</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Types</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.types}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
+        </div>
+      </div>
+
+      <Divider style={{ margin: "16px 0" }} />
+
+      {/* Error display */}
+      {error && (
+        <Alert
+          message="Error loading data sources"
+          description={error}
+          type="error"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Configuration warnings */}
+      {(!environment.environmentApikey || !environment.environmentApiServiceUrl) && !error && (
+        <Alert
+          message="Configuration Issue"
+          description="Missing required configuration: API key or API service URL"
+          type="warning"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Content */}
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
+          <Spin tip="Loading data sources..." />
+        </div>
+      ) : dataSources.length === 0 ? (
+        <Empty
+          description={error || "No data sources found in this workspace"}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <>
+          {/* Search Bar */}
+          <div style={{ marginBottom: 16 }}>
+            <Search
+              placeholder="Search data sources by name or ID"
+              allowClear
+              onSearch={value => setSearchText(value)}
+              onChange={e => setSearchText(e.target.value)}
+              style={{ width: 300 }}
+            />
+            {searchText && filteredDataSources.length !== dataSources.length && (
+              <div style={{ marginTop: 8 }}>
+                Showing {filteredDataSources.length} of {dataSources.length} data sources
+              </div>
+            )}
+          </div>
+          
+          <Table
+            columns={columns}
+            dataSource={filteredDataSources}
+            rowKey="id"
+            pagination={{ pageSize: 10 }}
+            size="middle"
+            scroll={{ x: 'max-content' }}
+          />
+        </>
+      )}
+    </Card>
+  );
+};
+
+export default DataSourcesTab;
\ No newline at end of file

From dffc68353b4b89346fc965e8d090de6c9723cafe Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 21:20:45 +0500
Subject: [PATCH 10/37] Seperate Queries Tab

---
 .../setting/environments/WorkspaceDetail.tsx  |  10 +-
 .../environments/components/QueriesTab.tsx    | 271 ++++++++++++++++++
 2 files changed, 276 insertions(+), 5 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index 25bd2f3a2..4b12fe652 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -36,6 +36,8 @@ import { queryConfig } from "./config/query.config";
 
 import AppsTab from "./components/AppsTab";
 import DataSourcesTab from "./components/DataSourcesTab";
+import QueriesTab from "./components/QueriesTab";
+
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -176,15 +178,13 @@ const WorkspaceDetail: React.FC = () => {
             workspace={workspace}
           />
         </TabPane>
-
         <TabPane tab={<span><CodeOutlined /> Queries</span>} key="queries">
-          <DeployableItemsTab
+          <QueriesTab
             environment={environment}
-            config={queryConfig}
-            additionalParams={{ workspaceId: workspace.id }}
-            title="Queries in this Workspace"
+            workspace={workspace}
           />
         </TabPane>
+        
       </Tabs>
     </div>
   );
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
new file mode 100644
index 000000000..ad01dddd5
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
+import { SyncOutlined, CloudUploadOutlined, CodeOutlined } from '@ant-design/icons';
+import Title from 'antd/lib/typography/Title';
+import { Environment } from '../types/environment.types';
+import { Workspace } from '../types/workspace.types';
+import { Query } from '../types/query.types';
+import { getMergedWorkspaceQueries } from '../services/query.service';
+import { Switch, Spin, Empty } from 'antd';
+import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
+import { useDeployModal } from '../context/DeployModalContext';
+import { queryConfig } from '../config/query.config';
+
+const { Search } = Input;
+
+interface QueriesTabProps {
+  environment: Environment;
+  workspace: Workspace;
+}
+
+const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
+  const [queries, setQueries] = useState<Query[]>([]);
+  const [stats, setStats] = useState({
+    total: 0,
+    managed: 0,
+    unmanaged: 0
+  });
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState('');
+  const { openDeployModal } = useDeployModal();
+
+  // Fetch queries
+  const fetchQueries = async () => {
+    if (!workspace.id || !environment) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const result = await getMergedWorkspaceQueries(
+        workspace.id,
+        environment.environmentId,
+        environment.environmentApikey,
+        environment.environmentApiServiceUrl!
+      );
+      
+      setQueries(result.queries);
+      setStats(result.stats);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch queries");
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchQueries();
+  }, [environment, workspace]);
+
+  // Handle refresh
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchQueries();
+  };
+
+  // Toggle managed status
+  const handleToggleManaged = async (query: Query, checked: boolean) => {
+    setRefreshing(true);
+    try {
+      if (checked) {
+        await setManagedObject(
+          query.gid,
+          environment.environmentId,
+          ManagedObjectType.QUERY,
+          query.name
+        );
+      } else {
+        await unsetManagedObject(
+          query.gid,
+          environment.environmentId,
+          ManagedObjectType.QUERY
+        );
+      }
+      
+      // Update the query in state
+      const updatedQueries = queries.map(item => {
+        if (item.id === query.id) {
+          return { ...item, managed: checked };
+        }
+        return item;
+      });
+      
+      setQueries(updatedQueries);
+      
+      // Update stats
+      const managed = updatedQueries.filter(q => q.managed).length;
+      setStats(prev => ({
+        ...prev,
+        managed,
+        unmanaged: prev.total - managed
+      }));
+      
+      message.success(`${query.name} is now ${checked ? 'Managed' : 'Unmanaged'}`);
+      return true;
+    } catch (error) {
+      message.error(`Failed to change managed status for ${query.name}`);
+      return false;
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  // Filter queries based on search
+  const filteredQueries = searchText
+    ? queries.filter(query => 
+        query.name.toLowerCase().includes(searchText.toLowerCase()) || 
+        query.id.toLowerCase().includes(searchText.toLowerCase()))
+    : queries;
+
+  // Table columns
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: string) => <span className="query-name">{text}</span>
+    },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      ellipsis: true,
+    },
+    {
+      title: 'Creator',
+      dataIndex: 'creatorName',
+      key: 'creatorName',
+    },
+    {
+      title: 'Managed',
+      key: 'managed',
+      render: (_: any, query: Query) => (
+        <Switch
+          checked={!!query.managed}
+          onChange={(checked: boolean) => handleToggleManaged(query, checked)}
+          loading={refreshing}
+          size="small"
+        />
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (_: any, query: Query) => (
+        <Space onClick={(e) => e.stopPropagation()}>
+          <Tooltip title={!query.managed ? "Query must be managed before it can be deployed" : "Deploy this query to another environment"}>
+            <Button
+              type="primary"
+              size="small"
+              icon={<CloudUploadOutlined />}
+              onClick={() => openDeployModal(query, queryConfig, environment)}
+              disabled={!query.managed}
+            >
+              Deploy
+            </Button>
+          </Tooltip>
+        </Space>
+      ),
+    }
+  ];
+
+  return (
+    <Card>
+      {/* Header with refresh button */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+        <Title level={5}>Queries in this Workspace</Title>
+        <Button 
+          icon={<SyncOutlined spin={refreshing} />} 
+          onClick={handleRefresh}
+          loading={loading}
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {/* Stats display */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Queries</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
+        </div>
+      </div>
+
+      <Divider style={{ margin: "16px 0" }} />
+
+      {/* Error display */}
+      {error && (
+        <Alert
+          message="Error loading queries"
+          description={error}
+          type="error"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Configuration warnings */}
+      {(!environment.environmentApikey || !environment.environmentApiServiceUrl) && !error && (
+        <Alert
+          message="Configuration Issue"
+          description="Missing required configuration: API key or API service URL"
+          type="warning"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Content */}
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
+          <Spin tip="Loading queries..." />
+        </div>
+      ) : queries.length === 0 ? (
+        <Empty
+          description={error || "No queries found in this workspace"}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <>
+          {/* Search Bar */}
+          <div style={{ marginBottom: 16 }}>
+            <Search
+              placeholder="Search queries by name or ID"
+              allowClear
+              onSearch={value => setSearchText(value)}
+              onChange={e => setSearchText(e.target.value)}
+              style={{ width: 300 }}
+            />
+            {searchText && filteredQueries.length !== queries.length && (
+              <div style={{ marginTop: 8 }}>
+                Showing {filteredQueries.length} of {queries.length} queries
+              </div>
+            )}
+          </div>
+          
+          <Table
+            columns={columns}
+            dataSource={filteredQueries}
+            rowKey="id"
+            pagination={{ pageSize: 10 }}
+            size="middle"
+            scroll={{ x: 'max-content' }}
+          />
+        </>
+      )}
+    </Card>
+  );
+};
+
+export default QueriesTab;
\ No newline at end of file

From 741076551ddfc08fb4eec6b61698c5b8f41750ce Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 21:45:00 +0500
Subject: [PATCH 11/37] Add seperate workspace and usergroups tab

---
 .../environments/EnvironmentDetail.tsx        |  22 +-
 .../environments/components/UserGroupsTab.tsx | 222 ++++++++++++++++++
 .../environments/components/WorkspacesTab.tsx | 217 +++++++++++++++++
 3 files changed, 447 insertions(+), 14 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index a3a15ec03..e42c3db64 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -25,7 +25,8 @@ import DeployableItemsTab from "./components/DeployableItemsTab";
 import EditEnvironmentModal from "./components/EditEnvironmentModal";
 import { Environment } from "./types/environment.types";
 import history from "@lowcoder-ee/util/history";
-
+import WorkspacesTab from "./components/WorkspacesTab";
+import UserGroupsTab from "./components/UserGroupsTab";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -227,13 +228,10 @@ const EnvironmentDetail: React.FC = () => {
       {/* Tabs for Workspaces and User Groups */}
       <Tabs defaultActiveKey="workspaces">
         <TabPane tab="Workspaces" key="workspaces">
-          {/* Using our new generic component with the workspace config */}
-          <DeployableItemsTab
-            environment={environment}
-            config={workspaceConfig}
-            title="Workspaces in this Environment"
-          />
+          {/* Using our new standalone WorkspacesTab component */}
+          <WorkspacesTab environment={environment} />
         </TabPane>
+
         <TabPane
           tab={
             <span>
@@ -242,15 +240,11 @@ const EnvironmentDetail: React.FC = () => {
           }
           key="userGroups"
         >
-          {/* Using our new generic component with the user group config */}
-          <DeployableItemsTab
-            environment={environment}
-            config={userGroupsConfig}
-            title="User Groups in this Environment"
-          />
+          {/* Now using our standalone UserGroupsTab component */}
+          <UserGroupsTab environment={environment} />
         </TabPane>
       </Tabs>
-      
+
       {/* Edit Environment Modal */}
       {environment && (
         <EditEnvironmentModal
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
new file mode 100644
index 000000000..9d0150192
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
@@ -0,0 +1,222 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space } from 'antd';
+import { SyncOutlined, TeamOutlined } from '@ant-design/icons';
+import Title from 'antd/lib/typography/Title';
+import { Environment } from '../types/environment.types';
+import { UserGroup } from '../types/userGroup.types';
+import { getEnvironmentUserGroups } from '../services/environments.service';
+import { Spin, Empty } from 'antd';
+
+const { Search } = Input;
+
+interface UserGroupsTabProps {
+  environment: Environment;
+}
+
+const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
+  const [userGroups, setUserGroups] = useState<UserGroup[]>([]);
+  const [stats, setStats] = useState({
+    total: 0,
+    active: 0,
+    inactive: 0
+  });
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState('');
+
+  // Fetch user groups
+  const fetchUserGroups = async () => {
+    if (!environment) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      // Check for required environment properties
+      if (!environment.environmentApikey || !environment.environmentApiServiceUrl) {
+        setError('Missing required configuration: API key or API service URL');
+        setLoading(false);
+        return;
+      }
+      
+      const groups = await getEnvironmentUserGroups(
+        environment.environmentId,
+        environment.environmentApikey,
+        environment.environmentApiServiceUrl
+      );
+      
+      setUserGroups(groups);
+      
+      // Calculate stats
+      const total = groups.length;
+      const active = groups.filter(group => group.state === 'ACTIVE').length;
+      
+      setStats({
+        total,
+        active,
+        inactive: total - active
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch user groups");
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUserGroups();
+  }, [environment]);
+
+  // Handle refresh
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchUserGroups();
+  };
+
+  // Filter user groups based on search
+  const filteredUserGroups = searchText
+    ? userGroups.filter(group => 
+        group.name.toLowerCase().includes(searchText.toLowerCase()) || 
+        group.id.toLowerCase().includes(searchText.toLowerCase()))
+    : userGroups;
+
+  // Table columns
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: string) => <span className="group-name">{text}</span>
+    },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      ellipsis: true,
+    },
+    {
+      title: 'Type',
+      dataIndex: 'type',
+      key: 'type',
+      render: (type: string) => (
+        <Tag color={type === 'USER' ? 'blue' : 'purple'}>
+          {type}
+        </Tag>
+      ),
+    },
+    {
+      title: 'Status',
+      dataIndex: 'state',
+      key: 'state',
+      render: (state: string) => (
+        <Tag color={state === 'ACTIVE' ? 'green' : 'red'}>
+          {state}
+        </Tag>
+      ),
+    },
+    {
+      title: 'Member Count',
+      dataIndex: 'memberCount',
+      key: 'memberCount',
+    }
+  ];
+
+  return (
+    <Card>
+      {/* Header with refresh button */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+        <Title level={5}>User Groups in this Environment</Title>
+        <Button 
+          icon={<SyncOutlined spin={refreshing} />} 
+          onClick={handleRefresh}
+          loading={loading}
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {/* Stats display */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Groups</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Active</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.active}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Inactive</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.inactive}</div>
+        </div>
+      </div>
+
+      <Divider style={{ margin: "16px 0" }} />
+
+      {/* Error display */}
+      {error && (
+        <Alert
+          message="Error loading user groups"
+          description={error}
+          type="error"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Configuration warnings */}
+      {(!environment.environmentApikey || !environment.environmentApiServiceUrl) && !error && (
+        <Alert
+          message="Configuration Issue"
+          description="Missing required configuration: API key or API service URL"
+          type="warning"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Content */}
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
+          <Spin tip="Loading user groups..." />
+        </div>
+      ) : userGroups.length === 0 ? (
+        <Empty
+          description={error || "No user groups found in this environment"}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <>
+          {/* Search Bar */}
+          <div style={{ marginBottom: 16 }}>
+            <Search
+              placeholder="Search user groups by name or ID"
+              allowClear
+              onSearch={value => setSearchText(value)}
+              onChange={e => setSearchText(e.target.value)}
+              style={{ width: 300 }}
+            />
+            {searchText && filteredUserGroups.length !== userGroups.length && (
+              <div style={{ marginTop: 8 }}>
+                Showing {filteredUserGroups.length} of {userGroups.length} user groups
+              </div>
+            )}
+          </div>
+          
+          <Table
+            columns={columns}
+            dataSource={filteredUserGroups}
+            rowKey="id"
+            pagination={{ pageSize: 10 }}
+            size="middle"
+            scroll={{ x: 'max-content' }}
+          />
+        </>
+      )}
+    </Card>
+  );
+};
+
+export default UserGroupsTab;
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
new file mode 100644
index 000000000..f2f8b408c
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
@@ -0,0 +1,217 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
+import { SyncOutlined, CloudUploadOutlined } from '@ant-design/icons';
+import Title from 'antd/lib/typography/Title';
+import { Environment } from '../types/environment.types';
+import { Workspace } from '../types/workspace.types';
+import { getMergedEnvironmentWorkspaces } from '../services/workspace.service';
+import { Spin, Empty } from 'antd';
+
+import history from '@lowcoder-ee/util/history';
+
+const { Search } = Input;
+
+interface WorkspacesTabProps {
+  environment: Environment;
+}
+
+const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [stats, setStats] = useState({
+    total: 0,
+    managed: 0,
+    unmanaged: 0
+  });
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState('');
+
+  // Fetch workspaces
+  const fetchWorkspaces = async () => {
+    if (!environment) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      // Check for required environment properties
+      if (!environment.environmentApikey || !environment.environmentApiServiceUrl) {
+        setError('Missing required configuration: API key or API service URL');
+        setLoading(false);
+        return;
+      }
+      
+      const result = await getMergedEnvironmentWorkspaces(
+        environment.environmentId,
+        environment.environmentApikey,
+        environment.environmentApiServiceUrl
+      );
+      
+      setWorkspaces(result.workspaces);
+      setStats(result.stats);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch workspaces");
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchWorkspaces();
+  }, [environment]);
+
+  // Handle refresh
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchWorkspaces();
+  };
+
+  // Toggle managed status
+
+
+  // Handle row click for navigation
+  const handleRowClick = (workspace: Workspace) => {
+    history.push(`/setting/environments/${environment.environmentId}/workspaces/${workspace.id}`);
+  };
+
+  // Filter workspaces based on search
+  const filteredWorkspaces = searchText
+    ? workspaces.filter(workspace => 
+        workspace.name.toLowerCase().includes(searchText.toLowerCase()) || 
+        workspace.id.toLowerCase().includes(searchText.toLowerCase()))
+    : workspaces;
+
+  // Table columns
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: string) => <span className="workspace-name">{text}</span>
+    },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      ellipsis: true,
+    },
+    {
+      title: 'Role',
+      dataIndex: 'role',
+      key: 'role',
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: string) => (
+        <Tag color={status === 'ACTIVE' ? 'green' : 'red'}>
+          {status}
+        </Tag>
+      ),
+    },
+  ];
+
+  return (
+    <Card>
+      {/* Header with refresh button */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+        <Title level={5}>Workspaces in this Environment</Title>
+        <Button 
+          icon={<SyncOutlined spin={refreshing} />} 
+          onClick={handleRefresh}
+          loading={loading}
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {/* Stats display */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Workspaces</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
+        </div>
+      </div>
+
+      <Divider style={{ margin: "16px 0" }} />
+
+      {/* Error display */}
+      {error && (
+        <Alert
+          message="Error loading workspaces"
+          description={error}
+          type="error"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Configuration warnings */}
+      {(!environment.environmentApikey || !environment.environmentApiServiceUrl) && !error && (
+        <Alert
+          message="Configuration Issue"
+          description="Missing required configuration: API key or API service URL"
+          type="warning"
+          showIcon
+          style={{ marginBottom: "16px" }}
+        />
+      )}
+
+      {/* Content */}
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
+          <Spin tip="Loading workspaces..." />
+        </div>
+      ) : workspaces.length === 0 ? (
+        <Empty
+          description={error || "No workspaces found in this environment"}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <>
+          {/* Search Bar */}
+          <div style={{ marginBottom: 16 }}>
+            <Search
+              placeholder="Search workspaces by name or ID"
+              allowClear
+              onSearch={value => setSearchText(value)}
+              onChange={e => setSearchText(e.target.value)}
+              style={{ width: 300 }}
+            />
+            {searchText && filteredWorkspaces.length !== workspaces.length && (
+              <div style={{ marginTop: 8 }}>
+                Showing {filteredWorkspaces.length} of {workspaces.length} workspaces
+              </div>
+            )}
+          </div>
+          
+          <Table
+            columns={columns}
+            dataSource={filteredWorkspaces}
+            rowKey="id"
+            pagination={{ pageSize: 10 }}
+            size="middle"
+            scroll={{ x: 'max-content' }}
+            onRow={(record) => ({
+              onClick: () => handleRowClick(record),
+              style: { cursor: 'pointer' }
+            })}
+          />
+        </>
+      )}
+    </Card>
+  );
+};
+
+export default WorkspacesTab;
\ No newline at end of file

From 6383d7fa3d0fe43903f6a8a9c7c1e4bb1ec6e451 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 15 May 2025 23:16:43 +0500
Subject: [PATCH 12/37] remove unnecessary code

---
 .../environments/EnvironmentDetail.tsx        |   3 -
 .../setting/environments/WorkspaceDetail.tsx  |   5 -
 .../environments/components/AppsTab.tsx       |   2 +-
 .../components/DeployItemModal.tsx            |  18 +-
 .../components/DeployableItemsList.tsx        | 121 -------
 .../components/DeployableItemsTab.tsx         | 126 -------
 .../environments/components/UserGroupsTab.tsx |  83 +++--
 .../environments/config/apps.config.tsx       | 186 +---------
 .../config/data-sources.config.tsx            | 172 +---------
 .../environments/config/query.config.tsx      | 166 +--------
 .../environments/config/usergroups.config.tsx | 169 ---------
 .../environments/config/workspace.config.tsx  | 171 +---------
 .../context/DeployModalContext.tsx            |  18 +-
 .../environments/hooks/useDeployableItems.ts  | 146 --------
 .../environments/services/apps.service.ts     |   8 +-
 .../environments/services/query.service.ts    |   8 +-
 .../setting/environments/types/app.types.ts   |  10 +-
 .../environments/types/datasource.types.ts    |   8 +-
 .../types/deployable-item.types.ts            |  91 +----
 .../setting/environments/types/query.types.ts |   7 +-
 .../environments/types/userGroup.types.ts     |  54 ++-
 .../environments/utils/columnFactories.tsx    | 323 ------------------
 22 files changed, 127 insertions(+), 1768 deletions(-)
 delete mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx
 delete mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsTab.tsx
 delete mode 100644 client/packages/lowcoder/src/pages/setting/environments/config/usergroups.config.tsx
 delete mode 100644 client/packages/lowcoder/src/pages/setting/environments/hooks/useDeployableItems.ts
 delete mode 100644 client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index e42c3db64..16dc4470a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -19,9 +19,6 @@ import {
 } from "@ant-design/icons";
 
 import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
-import { workspaceConfig } from "./config/workspace.config";
-import { userGroupsConfig } from "./config/usergroups.config";
-import DeployableItemsTab from "./components/DeployableItemsTab";
 import EditEnvironmentModal from "./components/EditEnvironmentModal";
 import { Environment } from "./types/environment.types";
 import history from "@lowcoder-ee/util/history";
diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index 4b12fe652..8c87b2ef6 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -28,12 +28,7 @@ import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext"
 import { useWorkspaceContext } from "./context/WorkspaceContext";
 import { useDeployModal } from "./context/DeployModalContext";
 
-import DeployableItemsTab from "./components/DeployableItemsTab";
 import { workspaceConfig } from "./config/workspace.config";
-import { appsConfig } from "./config/apps.config";
-import { dataSourcesConfig } from "./config/data-sources.config";
-import { queryConfig } from "./config/query.config";
-
 import AppsTab from "./components/AppsTab";
 import DataSourcesTab from "./components/DataSourcesTab";
 import QueriesTab from "./components/QueriesTab";
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index f5ca4b388..70e0d68ec 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, SearchOutlined } from '@ant-design/icons';
+import { SyncOutlined, CloudUploadOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
index b7ae9bb06..5f5ebc67f 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
@@ -2,27 +2,27 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Form, Select, Checkbox, Button, message, Spin, Input, Tag, Space } from 'antd';
 import { Environment } from '../types/environment.types';
-import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
+import { DeployableItemConfig } from '../types/deployable-item.types';
 import { useEnvironmentContext } from '../context/EnvironmentContext';
 import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
 
-interface DeployItemModalProps<T extends DeployableItem, S extends BaseStats> {
+interface DeployItemModalProps {
   visible: boolean;
-  item: T | null;
+  item: any | null;
   sourceEnvironment: Environment;
-  config: DeployableItemConfig<T, S>;
+  config: DeployableItemConfig;
   onClose: () => void;
   onSuccess?: () => void;
 }
 
-function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
+function DeployItemModal({
   visible,
   item,
   sourceEnvironment,
   config,
   onClose,
   onSuccess
-}: DeployItemModalProps<T, S>) {
+}: DeployItemModalProps) {
   const [form] = Form.useForm();
   const { environments, isLoading } = useEnvironmentContext();
   const [deploying, setDeploying] = useState(false);
@@ -39,7 +39,7 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
   );
   
   const handleDeploy = async () => {
-    if (!config.deploy?.enabled || !item) return;
+      if (!config.deploy || !item) return;
     
     try {
       const values = await form.validateFields();
@@ -63,7 +63,7 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
       onClose();
     } catch (error) {
       console.error('Deployment error:', error);
-      message.error(`Failed to deploy ${config.singularLabel.toLowerCase()}`);
+      message.error(`Failed to deploy ${config.deploy.singularLabel.toLowerCase()}`);
     } finally {
       setDeploying(false);
     }
@@ -71,7 +71,7 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
   
   return (
     <Modal
-      title={`Deploy ${config.singularLabel}: ${item?.name || ''}`}
+      title={`Deploy ${config.deploy.singularLabel}: ${item?.name || ''}`}
       open={visible}
       onCancel={onClose}
       footer={null}
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx
deleted file mode 100644
index bed49855d..000000000
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsList.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-// components/DeployableItemsList.tsx
-import React, { useState } from 'react';
-import { Table, Tag, Empty, Spin, Switch, Space, Button, Tooltip, Input } from 'antd';
-import { CloudUploadOutlined, SearchOutlined } from '@ant-design/icons';
-import history from '@lowcoder-ee/util/history';
-import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
-import { Environment } from '../types/environment.types';
-import { useDeployModal } from '../context/DeployModalContext';
-
-const { Search } = Input;
-
-interface DeployableItemsListProps<T extends DeployableItem, S extends BaseStats> {
-  items: T[];
-  loading: boolean;
-  refreshing: boolean;
-  error?: string | null;
-  environment: Environment;
-  config: DeployableItemConfig<T, S>;
-  onToggleManaged?: (item: T, checked: boolean) => Promise<boolean>;
-  additionalParams?: Record<string, any>;
-}
-
-function DeployableItemsList<T extends DeployableItem, S extends BaseStats>({
-  items,
-  loading,
-  refreshing,
-  error,
-  environment,
-  config,
-  onToggleManaged,
-  additionalParams = {}
-}: DeployableItemsListProps<T, S>) {
-
-  const { openDeployModal } = useDeployModal();
-  const [searchText, setSearchText] = useState('');
-  
-  // Filter items based on search
-  const filteredItems = searchText
-    ? items.filter(item => 
-        item.name.toLowerCase().includes(searchText.toLowerCase()) || 
-        item.id.toLowerCase().includes(searchText.toLowerCase()))
-    : items;
-
-  // Handle row click for navigation
-  const handleRowClick = (item: T) => {
-    // Skip navigation if the route is just '#' (for non-navigable items)
-    if (config.buildDetailRoute({}) === '#') return;
-    
-    // Build the route using the config and navigate
-    const route = config.buildDetailRoute({
-      environmentId: environment.environmentId,
-      itemId: item[config.idField] as string,
-      ...additionalParams
-    });
-    
-    history.push(route);
-  };
-
-  // Get columns from config
-  const columns = config.getColumns({
-    environment,
-    refreshing,
-    onToggleManaged,
-    openDeployModal,
-    additionalParams 
-    });
-
-  if (loading) {
-    return (
-      <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
-        <Spin tip={`Loading ${config.pluralLabel.toLowerCase()}...`} />
-      </div>
-    );
-  }
-
-  if (!items || items.length === 0 || error) {
-    return (
-      <Empty
-        description={error || `No ${config.pluralLabel.toLowerCase()} found`}
-        image={Empty.PRESENTED_IMAGE_SIMPLE}
-      />
-    );
-  }
-
-  const hasNavigation = config.buildDetailRoute({}) !== '#';
-
-  return (
-    <>
-      {/* Search Bar */}
-      <div style={{ marginBottom: 16 }}>
-        <Search
-          placeholder={`Search ${config.pluralLabel} by name or ID`}
-          allowClear
-          onSearch={value => setSearchText(value)}
-          onChange={e => setSearchText(e.target.value)}
-          style={{ width: 300 }}
-        />
-        {searchText && filteredItems.length !== items.length && (
-          <div style={{ marginTop: 8 }}>
-            Showing {filteredItems.length} of {items.length} {config.pluralLabel.toLowerCase()}
-          </div>
-        )}
-      </div>
-      
-      <Table
-        columns={columns}
-        dataSource={filteredItems}
-        rowKey={config.idField}
-        pagination={{ pageSize: 10 }}
-        size="middle"
-        scroll={{ x: 'max-content' }} 
-        onRow={(record) => ({
-          onClick: hasNavigation ? () => handleRowClick(record) : undefined,
-          style: hasNavigation ? { cursor: 'pointer' } : undefined,
-        })}
-      />
-    </>
-  );
-}
-
-export default DeployableItemsList;
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsTab.tsx
deleted file mode 100644
index 4e50a873c..000000000
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DeployableItemsTab.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-// components/DeployableItemsTab.tsx
-import React from 'react';
-import { Card, Button, Divider, Alert, message } from 'antd';
-import { SyncOutlined } from '@ant-design/icons';
-import Title from 'antd/lib/typography/Title';
-import { Environment } from '../types/environment.types';
-import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
-import { useDeployableItems } from '../hooks/useDeployableItems';
-import DeployableItemsList from './DeployableItemsList';
-
-interface DeployableItemsTabProps<T extends DeployableItem, S extends BaseStats> {
-  environment: Environment;
-  config: DeployableItemConfig<T, S>;
-  additionalParams?: Record<string, any>;
-  title?: string;
-}
-
-function DeployableItemsTab<T extends DeployableItem, S extends BaseStats>({
-  environment,
-  config,
-  additionalParams = {},
-  title
-}: DeployableItemsTabProps<T, S>) {
-  // Use our generic hook with the provided config
-  const {
-    items,
-    stats,
-    loading,
-    error,
-    refreshing,
-    toggleManagedStatus,
-    refreshItems
-  } = useDeployableItems<T, S>(config, environment, additionalParams);
-
-  // Handle toggling managed status
-  const handleToggleManaged = async (item: T, checked: boolean) => {
-    const success = await toggleManagedStatus(item, checked);
-    
-    if (success) {
-      message.success(`${item.name} is now ${checked ? 'Managed' : 'Unmanaged'}`);
-    } else {
-      message.error(`Failed to toggle managed state for ${item.name}`);
-    }
-
-    return success;
-  };
-
-  // Handle refresh button click
-  const handleRefresh = () => {
-    refreshItems();
-    message.info(`Refreshing ${config.pluralLabel.toLowerCase()}...`);
-  };
-
-  // Check for missing required environment properties
-  const missingProps = config.requiredEnvProps.filter(
-    prop => !environment[prop as keyof Environment]
-  );
-
-  return (
-    <Card>
-      {/* Header with refresh button */}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "16px",
-        }}
-      >
-        <Title level={5}>
-          {title || `${config.pluralLabel} in this Environment`}
-        </Title>
-        <Button 
-          icon={<SyncOutlined spin={refreshing} />} 
-          onClick={handleRefresh}
-          loading={loading}
-        >
-          Refresh
-        </Button>
-      </div>
-
-      {/* Render stats using the config's renderStats function */}
-      {config.renderStats(stats)}
-
-      <Divider style={{ margin: "16px 0" }} />
-
-      {/* Show error if loading failed */}
-      {error && (
-        <Alert
-          message={`Error loading ${config.pluralLabel.toLowerCase()}`}
-          description={error}
-          type="error"
-          showIcon
-          style={{ marginBottom: "16px" }}
-        />
-      )}
-
-      {/* Configuration warnings based on required props */}
-      {missingProps.length > 0 && !error && (
-        <Alert
-          message="Configuration Issue"
-          description={
-            `Missing required configuration: ${missingProps.join(', ')}`
-          }
-          type="warning"
-          showIcon
-          style={{ marginBottom: "16px" }}
-        />
-      )}
-
-      {/* Items List */}
-      <DeployableItemsList
-        items={items}
-        loading={loading && !error}
-        refreshing={refreshing}
-        error={error}
-        environment={environment}
-        config={config}
-        onToggleManaged={config.enableManaged ? handleToggleManaged : undefined}
-        additionalParams={additionalParams}
-      />
-    </Card>
-  );
-}
-
-export default DeployableItemsTab;
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
index 9d0150192..701dcd43d 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
@@ -3,7 +3,7 @@ import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space } from
 import { SyncOutlined, TeamOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
-import { UserGroup } from '../types/userGroup.types';
+import { UserGroup, UserGroupsTabStats } from '../types/userGroup.types';
 import { getEnvironmentUserGroups } from '../services/environments.service';
 import { Spin, Empty } from 'antd';
 
@@ -15,10 +15,11 @@ interface UserGroupsTabProps {
 
 const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
   const [userGroups, setUserGroups] = useState<UserGroup[]>([]);
-  const [stats, setStats] = useState({
+  const [stats, setStats] = useState<UserGroupsTabStats>({
     total: 0,
-    active: 0,
-    inactive: 0
+    allUsers: 0,
+    developers: 0,
+    custom: 0
   });
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
@@ -40,22 +41,28 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
         return;
       }
       
-      const groups = await getEnvironmentUserGroups(
+      const response = await getEnvironmentUserGroups(
         environment.environmentId,
         environment.environmentApikey,
         environment.environmentApiServiceUrl
       );
       
+      // Extract the groups from the data array in the response
+      const groups = response|| [];
+      
       setUserGroups(groups);
       
       // Calculate stats
       const total = groups.length;
-      const active = groups.filter(group => group.state === 'ACTIVE').length;
+      const allUsers = groups.filter((group: UserGroup) => group.allUsersGroup).length;
+      const developers = groups.filter((group: UserGroup) => group.devGroup).length;
+      const custom = total - (allUsers + developers);
       
       setStats({
         total,
-        active,
-        inactive: total - active
+        allUsers,
+        developers,
+        custom
       });
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to fetch user groups");
@@ -78,48 +85,48 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
   // Filter user groups based on search
   const filteredUserGroups = searchText
     ? userGroups.filter(group => 
-        group.name.toLowerCase().includes(searchText.toLowerCase()) || 
-        group.id.toLowerCase().includes(searchText.toLowerCase()))
+        group.groupName.toLowerCase().includes(searchText.toLowerCase()) || 
+        group.groupId.toLowerCase().includes(searchText.toLowerCase()))
     : userGroups;
 
   // Table columns
   const columns = [
     {
       title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'groupName',
+      key: 'groupName',
       render: (text: string) => <span className="group-name">{text}</span>
     },
     {
       title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
+      dataIndex: 'groupId',
+      key: 'groupId',
       ellipsis: true,
     },
     {
       title: 'Type',
-      dataIndex: 'type',
       key: 'type',
-      render: (type: string) => (
-        <Tag color={type === 'USER' ? 'blue' : 'purple'}>
-          {type}
-        </Tag>
-      ),
+      render: (_: any, group: UserGroup) => {
+        if (group.allUsersGroup) return <Tag color="blue">All Users</Tag>;
+        if (group.devGroup) return <Tag color="purple">Developers</Tag>;
+        return <Tag color="default">Custom</Tag>;
+      },
+    },
+    {
+      title: 'Members',
+      key: 'members',
+      render: (_: any, group: UserGroup) => group.stats?.userCount || 0,
     },
     {
-      title: 'Status',
-      dataIndex: 'state',
-      key: 'state',
-      render: (state: string) => (
-        <Tag color={state === 'ACTIVE' ? 'green' : 'red'}>
-          {state}
-        </Tag>
-      ),
+      title: 'Admin Members',
+      key: 'adminMembers',
+      render: (_: any, group: UserGroup) => group.stats?.adminUserCount || 0,
     },
     {
-      title: 'Member Count',
-      dataIndex: 'memberCount',
-      key: 'memberCount',
+      title: 'Created',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (createTime: number) => new Date(createTime).toLocaleDateString(),
     }
   ];
 
@@ -144,12 +151,16 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
           <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
         </div>
         <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Active</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.active}</div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>All Users Groups</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.allUsers}</div>
+        </div>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Developer Groups</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.developers}</div>
         </div>
         <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Inactive</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.inactive}</div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Custom Groups</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.custom}</div>
         </div>
       </div>
 
@@ -208,7 +219,7 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
           <Table
             columns={columns}
             dataSource={filteredUserGroups}
-            rowKey="id"
+            rowKey="groupId"
             pagination={{ pageSize: 10 }}
             size="middle"
             scroll={{ x: 'max-content' }}
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
index 6d787010c..1a09691c2 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
@@ -1,192 +1,20 @@
 // config/apps.config.tsx
-import React from 'react';
-import { Row, Col, Statistic, Tag, Space, Button, Tooltip } from 'antd';
-import { AppstoreOutlined, AuditOutlined } from '@ant-design/icons';
-import {DeployableItemConfig } from '../types/deployable-item.types';
+import { DeployableItemConfig } from '../types/deployable-item.types';
 import { Environment } from '../types/environment.types';
-import { getMergedWorkspaceApps, deployApp } from '../services/apps.service';
-import { connectManagedApp, unconnectManagedApp } from '../services/enterprise.service'; 
-import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
-import { App, AppStats } from '../types/app.types';
+import { deployApp } from '../services/apps.service';
 
+import { App } from '../types/app.types';
 
-import { 
-  createNameColumn, 
-  createDescriptionColumn, 
-  createPublishedColumn, 
-  createManagedColumn, 
-  createDeployColumn,
-  createAuditColumn, 
-  createIdColumn
-} from '../utils/columnFactories';
-
-// Define AppStats interface if not already defined
 
 
-export const appsConfig: DeployableItemConfig<App, AppStats> = {
-  // Basic info
-  type: 'apps',
-  singularLabel: 'App',
-  pluralLabel: 'Apps',
-  icon: <AppstoreOutlined />,
-  idField: 'id', // or applicationId if you prefer to use that directly
-  
-  // Navigation
-  buildDetailRoute: () => '#',
+// Define AppStats interface if not already defined
 
-  
-  // Configuration
-  requiredEnvProps: ['environmentApikey', 'environmentApiServiceUrl'],
-  
-  // Stats rendering
-  renderStats: (stats) => (
-    <Row gutter={16}>
-      <Col span={6}>
-        <Statistic title="Total Apps" value={stats.total} prefix={<AppstoreOutlined />} />
-      </Col>
-      <Col span={6}>
-        <Statistic title="Published Apps" value={stats.published} prefix={<AppstoreOutlined />} />
-      </Col>
-      <Col span={6}>
-        <Statistic title="Managed Apps" value={stats.managed} prefix={<AppstoreOutlined />} />
-      </Col>
-      <Col span={6}>
-        <Statistic title="Unmanaged Apps" value={stats.unmanaged} prefix={<AppstoreOutlined />} />
-      </Col>
-    </Row>
-  ),
-  
-  // Stats calculation
-  calculateStats: (apps) => {
-    const total = apps.length;
-    const published = apps.filter(app => app.published).length;
-    const managed = apps.filter(app => app.managed).length;
-    
-    return {
-      total,
-      published,
-      managed,
-      unmanaged: total - managed
-    };
-  },
-  
-  // Table configuration
-  getColumns: ({ environment, refreshing, onToggleManaged, openDeployModal, additionalParams }) => {
-    const columns = [
-      createIdColumn<App>(),
-      createNameColumn<App>(),
-      createPublishedColumn<App>(),
-    ];
-    
-    // Add managed column if enabled
-    if (appsConfig.enableManaged && onToggleManaged) {
-      columns.push(createManagedColumn(onToggleManaged, refreshing));
-    }
-    
-    // Add deploy column if enabled
-    if (appsConfig.deploy?.enabled && openDeployModal) {
-      columns.push(createDeployColumn(appsConfig, environment, openDeployModal));
-    }
-    
-    // Add audit column if enabled
-    if (appsConfig.audit?.enabled) {
-      columns.push(createAuditColumn(appsConfig, environment, additionalParams));
-    }
-    
-    return columns;
-  },
 
-  columns: [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-      ellipsis: true,
-    },
-    {
-      title: 'Role',
-      dataIndex: 'role',
-      key: 'role',
-      render: (role: string) => <span>{role}</span>,
-    },
-   
-    {
-      title: 'Status',
-      dataIndex: 'status',
-      key: 'status',
-      render: (status: string) => (
-        <Tag color={status === 'ACTIVE' ? 'green' : 'red'} className="status-tag">
-          {status}
-        </Tag>
-      ),
-    }
-  ],
-  
-  // Deployment options
-  enableManaged: true,
-  
-  // Service functions
-  fetchItems: async ({ environment, workspaceId }) => {
-    if (!workspaceId) {
-      throw new Error("Workspace ID is required to fetch apps");
-    }
-    
-    const result = await getMergedWorkspaceApps(
-      workspaceId,
-      environment.environmentId,
-      environment.environmentApikey,
-      environment.environmentApiServiceUrl!
-    );
-    
-    // Map to ensure proper id field
-    return result.apps.map(app => ({
-      ...app,
-      id: app.applicationId // Map applicationId to id for DeployableItem compatibility
-    }));
-  },
-  audit: {
-    enabled: true,
-    icon: <AuditOutlined />,
-    label: 'Audit',
-    tooltip: 'View audit logs for this app',
-    getAuditUrl: (item, environment, additionalParams) => {
-      console.log("Additional params:", additionalParams);
-      return `/setting/audit?environmentId=${environment.environmentId}&orgId=${item.id}&appId=${additionalParams?.workspaceId}&pageSize=100&pageNum=1`
-    }
-  },
-  toggleManaged: async ({ item, checked, environment }) => {
-    try {
-      if (checked) {
-        // Connect the app as managed
-        await setManagedObject(
-          item.applicationGid!,
-          environment.environmentId,
-          ManagedObjectType.APP,
-          item.name
-        );
-      } else {
-        // Disconnect the managed app
-        await unsetManagedObject(
-          item.applicationGid!,
-          environment.environmentId,
-          ManagedObjectType.APP
-        );
-      }
-      return true;
-    } catch (error) {
-      console.error('Error toggling managed status:', error);
-      return false;
-    }
-  },
-  // deployment options
+export const appsConfig: DeployableItemConfig = {
+ 
 
   deploy: {
-    enabled: true,
+    singularLabel: 'App',
     fields: [
       {
         name: 'updateDependenciesIfNeeded',
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
index 6a0ed6022..11e9e54fc 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
@@ -1,179 +1,15 @@
 // config/data-sources.config.tsx
 import React from 'react';
-import { Row, Col, Statistic, Tag, Space, Button, Tooltip } from 'antd';
-import { DatabaseOutlined, CloudUploadOutlined } from '@ant-design/icons';
 import { DeployableItemConfig } from '../types/deployable-item.types';
-import { DataSource, DataSourceStats } from '../types/datasource.types';
+import { DataSource} from '../types/datasource.types';
 import { Environment } from '../types/environment.types';
-import { getMergedWorkspaceDataSources, deployDataSource } from '../services/datasources.service';
-import { connectManagedDataSource, unconnectManagedDataSource } from '../services/enterprise.service';
-import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
-import { 
-  createNameColumn, 
-  createTypeColumn,
-  createDatabaseColumn,
-  createDatasourceStatusColumn,
-  createManagedColumn, 
-  createDeployColumn,
-  createAuditColumn 
-} from '../utils/columnFactories';
+import { deployDataSource, DataSourceStats } from '../services/datasources.service';
 
 
-export const dataSourcesConfig: DeployableItemConfig<DataSource, DataSourceStats> = {
-  // Basic info
-  type: 'dataSources',
-  singularLabel: 'Data Source',
-  pluralLabel: 'Data Sources',
-  icon: <DatabaseOutlined />,
-  idField: 'id',
-  
-  // Navigation
-  buildDetailRoute: (params) => "#",
-  
-  // Configuration
-  requiredEnvProps: ['environmentApikey', 'environmentApiServiceUrl'],
-  
-  // Stats rendering
-  renderStats: (stats) => (
-    <Row gutter={16}>
-      <Col span={8}>
-        <Statistic title="Total Data Sources" value={stats.total} prefix={<DatabaseOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Managed Data Sources" value={stats.managed} prefix={<DatabaseOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Unmanaged Data Sources" value={stats.unmanaged} prefix={<DatabaseOutlined />} />
-      </Col>
-    </Row>
-  ),
-  
-  // Stats calculation
-  calculateStats: (dataSources) => {
-    const total = dataSources.length;
-    const managed = dataSources.filter(ds => ds.managed).length;
-    
-    // Calculate counts by type
-    const byType = dataSources.reduce((acc, ds) => {
-      const type = ds.type || 'Unknown';
-      acc[type] = (acc[type] || 0) + 1;
-      return acc;
-    }, {} as Record<string, number>);
-    
-    return {
-      total,
-      managed,
-      unmanaged: total - managed,
-      byType
-    };
-  },
-  
-  // Table configuration - Customize based on your existing UI
-  columns: [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: 'Type',
-      dataIndex: 'type',
-      key: 'type',
-      render: (type: string) => (
-        <Tag color="blue">{type || 'Unknown'}</Tag>
-      ),
-    },
-    {
-      title: 'Database',
-      key: 'database',
-      render: (_, record: DataSource) => (
-        <span>{record.datasourceConfig?.database || 'N/A'}</span>
-      ),
-    },
-    {
-      title: 'Status',
-      dataIndex: 'datasourceStatus',
-      key: 'status',
-      render: (status: string) => (
-        <Tag color={status === 'NORMAL' ? 'green' : 'red'}>
-          {status}
-        </Tag>
-      ),
-    },
-  ],
-  
-  // Deployment options
-  enableManaged: true,
-  
-  // Service functions
-  fetchItems: async ({ environment, workspaceId }) => {
-    if (!workspaceId) {
-      throw new Error("Workspace ID is required to fetch data sources");
-    }
-    
-    const result = await getMergedWorkspaceDataSources(
-      workspaceId,
-      environment.environmentId,
-      environment.environmentApikey,
-      environment.environmentApiServiceUrl!
-    );
-    
-    return result.dataSources;
-  },
 
-  getColumns: ({ environment, refreshing, onToggleManaged, openDeployModal, additionalParams }) => {
-    const columns = [
-      createNameColumn<DataSource>(),
-      createTypeColumn<DataSource>(),
-      createDatabaseColumn<DataSource>(),
-      createDatasourceStatusColumn<DataSource>(),
-    ];
-    
-    // Add managed column if enabled
-    if (dataSourcesConfig.enableManaged && onToggleManaged) {
-      columns.push(createManagedColumn(onToggleManaged, refreshing));
-    }
-    
-    // Add deploy column if enabled
-    if (dataSourcesConfig.deploy?.enabled && openDeployModal) {
-      columns.push(createDeployColumn(dataSourcesConfig, environment, openDeployModal));
-    }
-    
-    // Add audit column if enabled
-    if (dataSourcesConfig.audit?.enabled) {
-      columns.push(createAuditColumn(dataSourcesConfig, environment, additionalParams));
-    }
-    
-    return columns;
-  },
-  
-  
-  toggleManaged: async ({ item, checked, environment }) => {
-    try {
-      if (checked) {
-        // Connect the data source as managed
-        await setManagedObject(
-          item.gid,
-          environment.environmentId,
-          ManagedObjectType.DATASOURCE,
-          item.name
-        );
-      } else {
-        // Disconnect the managed data source
-        await unsetManagedObject(
-          item.gid,
-          environment.environmentId,
-          ManagedObjectType.DATASOURCE
-        );
-      }
-      return true;
-    } catch (error) {
-      console.error('Error toggling managed status:', error);
-      return false;
-    }
-  },
+export const dataSourcesConfig: DeployableItemConfig = {
   deploy: {
-    enabled: true,
+    singularLabel: 'Data Source',
     fields: [
       {
         name: 'updateDependenciesIfNeeded',
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
index 641d0f41f..5396bd877 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/query.config.tsx
@@ -1,174 +1,16 @@
 // config/query.config.tsx
-import React from 'react';
-import { Row, Col, Statistic, Tag } from 'antd';
-import { ApiOutlined } from '@ant-design/icons';
 import { DeployableItemConfig } from '../types/deployable-item.types';
 import { Query } from '../types/query.types';
-import { connectManagedQuery, unconnectManagedQuery } from '../services/enterprise.service';
-import { getMergedWorkspaceQueries, deployQuery } from '../services/query.service';
-import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
+import { deployQuery } from '../services/query.service';
 import { Environment } from '../types/environment.types';
 
-import { 
-  createNameColumn, 
-  createCreatorColumn,
-  createDateColumn,
-  createQueryTypeColumn,
-  createManagedColumn, 
-  createDeployColumn,
-  createAuditColumn 
-} from '../utils/columnFactories';
 
-// Define QueryStats interface
-export interface QueryStats {
-  total: number;
-  managed: number;
-  unmanaged: number;
-}
 
-export const queryConfig: DeployableItemConfig<Query, QueryStats> = {
-  // Basic info
-  type: 'queries',
-  singularLabel: 'Query',
-  pluralLabel: 'Queries',
-  icon: <ApiOutlined />,
-  idField: 'id',
-  
-  // Navigation - queries don't have detail pages in this implementation
-  buildDetailRoute: () => '#',
-  
-  // Configuration
-  requiredEnvProps: ['environmentApikey', 'environmentApiServiceUrl'],
-  
-  // Stats rendering
-  renderStats: (stats) => (
-    <Row gutter={16}>
-      <Col span={8}>
-        <Statistic title="Total Queries" value={stats.total} prefix={<ApiOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Managed Queries" value={stats.managed} prefix={<ApiOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Unmanaged Queries" value={stats.unmanaged} prefix={<ApiOutlined />} />
-      </Col>
-    </Row>
-  ),
-  
-  // Stats calculation
-  calculateStats: (queries) => {
-    const total = queries.length;
-    const managed = queries.filter(q => q.managed).length;
-    
-    return {
-      total,
-      managed,
-      unmanaged: total - managed
-    };
-  },
-  columns: [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: 'Type',
-      dataIndex: 'type',
-      key: 'type',
-      render: (type: string) => (
-        <Tag color="blue">{type || 'Unknown'}</Tag>
-      ),
-    },
-    {
-      title: 'Database',
-      key: 'database',
-      render: (_, record: Query) => (
-        <span>{record.datasourceConfig?.database || 'N/A'}</span>
-      ),
-    },
-    {
-      title: 'Status',
-      dataIndex: 'datasourceStatus',
-      key: 'status',
-      render: (status: string) => (
-        <Tag color={status === 'NORMAL' ? 'green' : 'red'}>
-          {status}
-        </Tag>
-      ),
-    },
-  ],
-  getColumns: ({ environment, refreshing, onToggleManaged, openDeployModal, additionalParams }) => {
-    const columns = [
-      createNameColumn<Query>(),
-      createCreatorColumn<Query>(),
-      createDateColumn<Query>('createTime', 'Creation Date'),
-      createQueryTypeColumn<Query>(),
-    ];
-    
-    // Add managed column if enabled
-    if (queryConfig.enableManaged && onToggleManaged) {
-      columns.push(createManagedColumn(onToggleManaged, refreshing));
-    }
-    
-    // Add deploy column if enabled
-    if (queryConfig.deploy?.enabled && openDeployModal) {
-      columns.push(createDeployColumn(queryConfig, environment, openDeployModal));
-    }
-    
-    // Add audit column if enabled
-    if (queryConfig.audit?.enabled) {
-      columns.push(createAuditColumn(queryConfig, environment, additionalParams));
-    }
-    
-    return columns;
-  },
-  
-  // Deployment options
-  enableManaged: true,
-  
-  // Service functions
-  fetchItems: async ({ environment, workspaceId }) => {
-    if (!workspaceId) {
-      throw new Error("Workspace ID is required to fetch queries");
-    }
-    
-    const result = await getMergedWorkspaceQueries(
-      workspaceId,
-      environment.environmentId,
-      environment.environmentApikey,
-      environment.environmentApiServiceUrl!
-    );
-    
-    return result.queries;
-  },
+
+export const queryConfig: DeployableItemConfig = {
   
-  toggleManaged: async ({ item, checked, environment }) => {
-    try {
-      if (checked) {
-        // Connect the query as managed
-        await setManagedObject(
-          item.gid,
-          environment.environmentId,
-          ManagedObjectType.QUERY,
-          item.name
-        );
-      } else {
-        // Disconnect the managed query
-        await unsetManagedObject(
-          item.gid,
-          environment.environmentId,
-          ManagedObjectType.QUERY
-        );
-      }
-      return true;
-    } catch (error) {
-      console.error('Error toggling managed status:', error);
-      return false;
-    }
-  },
   deploy: {
-    enabled: true,
+    singularLabel: 'Query',
     fields: [
       {
         name: 'updateDependenciesIfNeeded',
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/usergroups.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/usergroups.config.tsx
deleted file mode 100644
index 8ae041320..000000000
--- a/client/packages/lowcoder/src/pages/setting/environments/config/usergroups.config.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-// config/usergroups.config.tsx
-import React from 'react';
-import { Row, Col, Statistic, Tag, Badge } from 'antd';
-import { TeamOutlined, UserOutlined } from '@ant-design/icons';
-import { getEnvironmentUserGroups } from '../services/environments.service';
-import { UserGroup, UserGroupStats } from '../types/userGroup.types';
-import { DeployableItemConfig } from '../types/deployable-item.types';
-import { 
-  createUserGroupNameColumn,
-  createGroupIdColumn,
-  createUserCountColumn, 
-  createDateColumn,
-  createGroupTypeColumn,
-  createAuditColumn 
-} from '../utils/columnFactories';
-
-const formatDate = (timestamp: number): string => {
-  if (!timestamp) return 'N/A';
-  const date = new Date(timestamp);
-  return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
-};
-
-
-export const userGroupsConfig: DeployableItemConfig<UserGroup, UserGroupStats> = {
-  // Basic info
-  type: 'userGroups',
-  singularLabel: 'User Group',
-  pluralLabel: 'User Groups',
-  icon: <TeamOutlined />,
-  idField: 'id',
-  
-  // Navigation - No navigation for user groups, provide a dummy function
-  buildDetailRoute: () => '#',
-  
-  // Configuration
-  requiredEnvProps: ['environmentApikey', 'environmentApiServiceUrl'],
-  
-  // Stats rendering - Custom for user groups
-  renderStats: (stats) => (
-    <Row gutter={16}>
-      <Col span={8}>
-        <Statistic title="Total User Groups" value={stats.total} prefix={<TeamOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Total Users" value={stats.totalUsers} prefix={<UserOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Admin Users" value={stats.adminUsers} prefix={<UserOutlined />} />
-      </Col>
-    </Row>
-  ),
-  
-  // Stats calculation - Custom for user groups
-  calculateStats: (userGroups) => {
-    const total = userGroups.length;
-    const totalUsers = userGroups.reduce(
-      (sum, group) => sum + (group.stats?.userCount ?? 0), 
-      0
-    );
-    const adminUsers = userGroups.reduce(
-      (sum, group) => sum + (group.stats?.adminUserCount ?? 0), 
-      0
-    );
-    
-    return {
-      total,
-      managed: 0, // User groups don't have managed/unmanaged state
-      unmanaged: 0, // User groups don't have managed/unmanaged state
-      totalUsers,
-      adminUsers
-    };
-  },
-  
-  // Table configuration
-  columns: [
-    {
-      title: 'Name',
-      dataIndex: 'groupName',
-      key: 'groupName',
-      render: (name: string, record: UserGroup) => (
-        <div>
-          <span>{record.groupName}</span>
-          {record.allUsersGroup && (
-            <Tag color="blue" style={{ marginLeft: 8 }}>All Users</Tag>
-          )}
-          {record.devGroup && (
-            <Tag color="orange" style={{ marginLeft: 8 }}>Dev</Tag>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: 'ID',
-      dataIndex: 'groupId',
-      key: 'groupId',
-      ellipsis: true,
-    },
-    {
-      title: 'Users',
-      key: 'userCount',
-      render: (_, record: UserGroup) => (
-        <div>
-          <Badge count={record.stats.userCount} showZero style={{ backgroundColor: '#52c41a' }} />
-          <span style={{ marginLeft: 8 }}>
-            ({record.stats.adminUserCount} admin{record.stats.adminUserCount !== 1 ? 's' : ''})
-          </span>
-        </div>
-      ),
-    },
-    {
-      title: 'Created',
-      key: 'createTime',
-      render: (_, record: UserGroup) => formatDate(record.createTime),
-    },
-    {
-      title: 'Type',
-      key: 'type',
-      render: (_, record: UserGroup) => {
-        if (record.allUsersGroup) return <Tag color="blue">Global</Tag>;
-        if (record.devGroup) return <Tag color="orange">Dev</Tag>;
-        if (record.syncGroup) return <Tag color="purple">Sync</Tag>;
-        return <Tag color="default">Standard</Tag>;
-      },
-    }
-  ],
-  
-  // No managed status for user groups
-  enableManaged: false,
-  
-  getColumns: ({ environment, additionalParams }) => {
-    const columns = [
-      createGroupIdColumn<UserGroup>(),
-      createUserGroupNameColumn<UserGroup>(),
-    
-      createUserCountColumn<UserGroup>(),
-      createDateColumn<UserGroup>('createTime', 'Created'),
-      createGroupTypeColumn<UserGroup>(),
-    ];
-    
-    // User groups aren't managed, so we don't add the managed column
-    
-    // Add audit column if enabled
-    if (userGroupsConfig.audit?.enabled) {
-      columns.push(createAuditColumn(userGroupsConfig, environment, additionalParams));
-    }
-    
-    return columns;
-  },
-  // Service functions
-  fetchItems: async ({ environment }) => {
-    const userGroups = await getEnvironmentUserGroups(
-      environment.environmentId,
-      environment.environmentApikey,
-      environment.environmentApiServiceUrl!
-    );
-    
-    // Map the required properties to satisfy DeployableItem interface
-    return userGroups.map(group => ({
-      ...group,
-      id: group.groupId,      // Map groupId to id
-      name: group.groupName   // Map groupName to name
-    }));
-  },
-  
-  // Dummy function for toggleManaged (will never be called since enableManaged is false)
-  toggleManaged: async () => {
-    return false;
-  }
-};
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
index 9174ac662..4b55b4257 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
@@ -1,176 +1,17 @@
 // config/workspace.config.tsx
-import React from 'react';
-import { Row, Col, Statistic, Tag } from 'antd';
-import { ClusterOutlined, AuditOutlined } from '@ant-design/icons';
-import { Workspace, WorkspaceStats, DeployableItemConfig } from '../types/deployable-item.types';
+
+import { DeployableItemConfig } from '../types/deployable-item.types';
 import { Environment } from '../types/environment.types';
-import { buildEnvironmentWorkspaceId } from '@lowcoder-ee/constants/routesURL';
-import { getMergedEnvironmentWorkspaces, deployWorkspace } from '../services/workspace.service';
-import { connectManagedWorkspace, unconnectManagedWorkspace } from '../services/enterprise.service';
-import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
-import { 
-  createNameColumn, 
-  createIdColumn, 
-  createRoleColumn, 
-  createDateColumn, 
-  createStatusColumn, 
-  createManagedColumn, 
-  createAuditColumn 
-} from '../utils/columnFactories';
+import { deployWorkspace } from '../services/workspace.service';
+import { Workspace } from '../types/workspace.types';
 
-export const workspaceConfig: DeployableItemConfig<Workspace, WorkspaceStats> = {
-  // Basic info
-  type: 'workspaces',
-  singularLabel: 'Workspace',
-  pluralLabel: 'Workspaces',
-  icon: <ClusterOutlined />,
-  idField: 'id',
-  
-  // Navigation
-  buildDetailRoute: (params) => buildEnvironmentWorkspaceId(params.environmentId, params.itemId),
-  
-  // Configuration
-  requiredEnvProps: ['environmentApikey', 'environmentApiServiceUrl'],
-  
-  // Stats rendering
-  renderStats: (stats) => (
-    <Row gutter={16}>
-      <Col span={8}>
-        <Statistic title="Total Workspaces" value={stats.total} prefix={<ClusterOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Managed Workspaces" value={stats.managed} prefix={<ClusterOutlined />} />
-      </Col>
-      <Col span={8}>
-        <Statistic title="Unmanaged Workspaces" value={stats.unmanaged} prefix={<ClusterOutlined />} />
-      </Col>
-    </Row>
-  ),
-  
-  // Stats calculation
-  calculateStats: (workspaces) => {
-    const total = workspaces.length;
-    const managed = workspaces.filter(w => w.managed).length;
-    return {
-      total,
-      managed,
-      unmanaged: total - managed
-    };
-  },
-  
-  // Original columns for backward compatibility
-  columns: [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-      ellipsis: true,
-    },
-    {
-      title: 'Role',
-      dataIndex: 'role',
-      key: 'role',
-      render: (role: string) => <span>{role}</span>,
-    },
-    {
-      title: 'Creation Date',
-      key: 'creationDate',
-      render: (_, record: Workspace) => {
-        if (!record.creationDate) return 'N/A';
-        const date = new Date(record.creationDate);
-        return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
-      },
-    },
-    {
-      title: 'Status',
-      dataIndex: 'status',
-      key: 'status',
-      render: (status: string) => (
-        <Tag color={status === 'ACTIVE' ? 'green' : 'red'} className="status-tag">
-          {status}
-        </Tag>
-      ),
-    }
-  ],
-  
-  // New getColumns method
-  getColumns: ({ environment, refreshing, onToggleManaged, additionalParams }) => {
-    const columns = [
-      createIdColumn<Workspace>(),
-      createNameColumn<Workspace>(),
-      createRoleColumn<Workspace>(),
-      createManagedColumn<Workspace>(),
-      createDateColumn<Workspace>('creationDate', 'Creation Date'),
-      createStatusColumn<Workspace>()
 
-    ];
-    
 
-    // Add audit column if enabled
-    if (workspaceConfig.audit?.enabled) {
-      columns.push(createAuditColumn(workspaceConfig, environment, additionalParams));
-    }
-    
-    return columns;
-  },
-  
-  // Enable managed functionality
-  enableManaged: true,
-  
-  // Fetch function
-  fetchItems: async ({ environment }) => {
-    const result = await getMergedEnvironmentWorkspaces(
-      environment.environmentId,
-      environment.environmentApikey,
-      environment.environmentApiServiceUrl!
-    );
-    return result.workspaces;
-  },
-  
-  // Toggle managed status
-  toggleManaged: async ({ item, checked, environment }) => {
-    try {
-      if (checked) {
-        // Connect the workspace as managed
-        await setManagedObject(
-          item.gid!,
-          environment.environmentId,
-          ManagedObjectType.ORG,
-          item.name
-        );
-      } else {
-        // Disconnect the managed workspace
-        await unsetManagedObject(
-          item.gid!,
-          environment.environmentId,
-          ManagedObjectType.ORG
-        );
-      }
-      return true;
-    } catch (error) {
-      console.error('Error toggling managed status:', error);
-      return false;
-    }
-  },
-  
-  // Audit configuration
-  audit: {
-    enabled: true,
-    icon: <AuditOutlined />,
-    label: 'Audit',
-    tooltip: 'View audit logs for this workspace',
-    getAuditUrl: (item, environment) => 
-      `/setting/audit?environmentId=${environment.environmentId}&orgId=${item.id}&pageSize=100&pageNum=1`
-  },
+export const workspaceConfig: DeployableItemConfig = {
   
   // Deploy configuration
   deploy: {
-    enabled: true,
+    singularLabel: 'Workspace',
     fields: [],
     prepareParams: (item: Workspace, values: any, sourceEnv: Environment, targetEnv: Environment) => {
       if (!item.gid) {
diff --git a/client/packages/lowcoder/src/pages/setting/environments/context/DeployModalContext.tsx b/client/packages/lowcoder/src/pages/setting/environments/context/DeployModalContext.tsx
index 7084e9405..904ab62c6 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/context/DeployModalContext.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/context/DeployModalContext.tsx
@@ -1,13 +1,13 @@
 // context/DeployModalContext.tsx
 import React, { createContext, useContext, useState } from 'react';
-import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
+import { DeployableItemConfig } from '../types/deployable-item.types';
 import { Environment } from '../types/environment.types';
 import DeployItemModal from '../components/DeployItemModal';
 
 interface DeployModalContextType {
-  openDeployModal: <T extends DeployableItem, S extends BaseStats>(
-    item: T,
-    config: DeployableItemConfig<T, S>,
+  openDeployModal: (
+    item: any,
+    config: DeployableItemConfig,
     sourceEnvironment: Environment,
     onSuccess?: () => void
   ) => void;
@@ -18,8 +18,8 @@ const DeployModalContext = createContext<DeployModalContextType | undefined>(und
 export const DeployModalProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
   const [modalState, setModalState] = useState<{
     visible: boolean;
-    item: DeployableItem | null;
-    config: DeployableItemConfig<any, any> | null;
+    item: any | null;
+    config: DeployableItemConfig | null;
     sourceEnvironment: Environment | null;
     onSuccess?: () => void;
   }>({
@@ -29,9 +29,9 @@ export const DeployModalProvider: React.FC<{children: React.ReactNode}> = ({ chi
     sourceEnvironment: null
   });
   
-  const openDeployModal = <T extends DeployableItem, S extends BaseStats>(
-    item: T,
-    config: DeployableItemConfig<T, S>,
+  const openDeployModal = (
+    item: any,
+    config: DeployableItemConfig,
     sourceEnvironment: Environment,
     onSuccess?: () => void
   ) => {
diff --git a/client/packages/lowcoder/src/pages/setting/environments/hooks/useDeployableItems.ts b/client/packages/lowcoder/src/pages/setting/environments/hooks/useDeployableItems.ts
deleted file mode 100644
index bb04cf54f..000000000
--- a/client/packages/lowcoder/src/pages/setting/environments/hooks/useDeployableItems.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-// hooks/useDeployableItems.ts
-import { useState, useEffect, useCallback } from "react";
-import { DeployableItem, BaseStats, DeployableItemConfig } from "../types/deployable-item.types";
-import { Environment } from "../types/environment.types";
-
-interface UseDeployableItemsState<T extends DeployableItem, S extends BaseStats> {
-  items: T[];
-  stats: S;
-  loading: boolean;
-  error: string | null;
-  refreshing: boolean;
-}
-
-export interface UseDeployableItemsResult<T extends DeployableItem, S extends BaseStats> {
-  items: T[];
-  stats: S;
-  loading: boolean;
-  error: string | null;
-  refreshing: boolean;
-  toggleManagedStatus: (item: T, checked: boolean) => Promise<boolean>;
-  refreshItems: () => Promise<void>;
-}
-
-export const useDeployableItems = <T extends DeployableItem, S extends BaseStats>(
-  config: DeployableItemConfig<T, S>,
-  environment: Environment | null,
-  additionalParams: Record<string, any> = {}
-): UseDeployableItemsResult<T, S> => {
-  // Create a default empty stats object based on the config's calculateStats method
-  const createEmptyStats = (): S => {
-    return config.calculateStats([]) as S;
-  };
-  
-  const [state, setState] = useState<UseDeployableItemsState<T, S>>({
-    items: [],
-    stats: createEmptyStats(),
-    loading: false,
-    error: null,
-    refreshing: false
-  });
-
-  const fetchItems = useCallback(async () => {
-    if (!environment) return;
-
-    // Check for required environment properties
-    const missingProps = config.requiredEnvProps.filter(prop => !environment[prop as keyof Environment]);
-    
-    if (missingProps.length > 0) {
-      setState(prev => ({ 
-        ...prev, 
-        loading: false, 
-        error: `Missing required configuration: ${missingProps.join(', ')}` 
-      }));
-      return;
-    }
-
-    setState(prev => ({ ...prev, loading: true, error: null }));
-
-    try {
-      // Call the fetchItems function from the config
-      const items = await config.fetchItems({
-        environment,
-        ...additionalParams
-      });
-      
-      // Calculate stats using the config's function
-      const stats = config.calculateStats(items);
-      
-      // Update state with items and stats
-      setState({
-        items,
-        stats,
-        loading: false,
-        error: null,
-        refreshing: false
-      });
-    } catch (err) {
-      setState(prev => ({
-        ...prev,
-        loading: false,
-        refreshing: false,
-        error: err instanceof Error ? err.message : "Failed to fetch items"
-      }));
-    }
-  }, [environment, config]);
-
-  useEffect(() => {
-    if (environment) {
-      fetchItems();
-    }
-  }, [environment, fetchItems]);
-
-  const toggleManagedStatus = async (item: T, checked: boolean): Promise<boolean> => {
-    if (!config.enableManaged) return false;
-    if (!environment) return false;
-    
-    setState(prev => ({ ...prev, refreshing: true }));
-    
-    try {
-      // Call the toggleManaged function from the config
-      const success = await config.toggleManaged({
-        item, 
-        checked, 
-        environment
-      });
-      
-      if (success) {
-        // Optimistically update the state
-        setState(prev => {
-          // Update items with the new managed status
-          const updatedItems = prev.items.map(i =>
-            i[config.idField] === item[config.idField] ? { ...i, managed: checked } : i
-          );
-          
-          // Recalculate stats
-          const stats = config.calculateStats(updatedItems);
-          
-          return {
-            ...prev,
-            items: updatedItems,
-            stats,
-            refreshing: false
-          };
-        });
-      } else {
-        setState(prev => ({ ...prev, refreshing: false }));
-      }
-      
-      return success;
-    } catch (err) {
-      setState(prev => ({ ...prev, refreshing: false }));
-      return false;
-    }
-  };
-
-  const refreshItems = async (): Promise<void> => {
-    setState(prev => ({ ...prev, refreshing: true }));
-    await fetchItems();
-  };
-
-  return {
-    ...state,
-    toggleManagedStatus,
-    refreshItems
-  };
-};
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
index 52528b4d0..570084f39 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
@@ -2,15 +2,9 @@
 import { message } from "antd";
 import { getWorkspaceApps } from "./environments.service";
 import { getManagedApps } from "./enterprise.service";
-import { App } from "../types/app.types";
+import { App, AppStats } from "../types/app.types";
 import axios from "axios";
 
-export interface AppStats {
-  total: number;
-  published: number;
-  managed: number;
-  unmanaged: number;
-}
 
 export interface MergedAppsResult {
   apps: App[];
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
index 8f5ad6892..f48d038d5 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
@@ -4,14 +4,10 @@
 import axios from 'axios';
 import { getManagedQueries } from './enterprise.service';
 import { getWorkspaceQueries } from './environments.service';
-import { Query } from '../types/query.types';
+import { Query, QueryStats } from '../types/query.types';
 export interface MergedQueriesResult {
     queries: Query[];
-    stats: {
-      total: number;
-      managed: number;
-      unmanaged: number;
-    };
+    stats: QueryStats;
   }
 
   export interface DeployQueryParams {
diff --git a/client/packages/lowcoder/src/pages/setting/environments/types/app.types.ts b/client/packages/lowcoder/src/pages/setting/environments/types/app.types.ts
index b3af252b5..775a589fb 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/types/app.types.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/types/app.types.ts
@@ -1,6 +1,5 @@
-import { DeployableItem, BaseStats } from "./deployable-item.types";
 
-export interface App extends DeployableItem {
+export interface App  {
     orgId: string;
     applicationId: string;
     applicationGid: string;
@@ -28,6 +27,9 @@ export interface App extends DeployableItem {
     id: string
   }
 
-  export interface AppStats extends BaseStats {
-    published: number
+  export interface AppStats {
+    total: number;
+    published: number;
+    managed: number;
+    unmanaged: number;
   }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/types/datasource.types.ts b/client/packages/lowcoder/src/pages/setting/environments/types/datasource.types.ts
index f4f03072d..b33e14e86 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/types/datasource.types.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/types/datasource.types.ts
@@ -1,8 +1,6 @@
 /**
  * Represents a DataSource configuration
  */
-
-import { DeployableItem, BaseStats } from "./deployable-item.types";
 export interface DataSourceConfig {
     usingUri: boolean;
     srvMode: boolean;
@@ -18,7 +16,7 @@ export interface DataSourceConfig {
   /**
    * Represents a DataSource entity
    */
-  export interface DataSource extends DeployableItem {
+  export interface DataSource {
     id: string;
     createdBy: string;
     gid: string;
@@ -41,7 +39,3 @@ export interface DataSourceConfig {
     edit: boolean;
     creatorName: string;
   }
-
-  export interface DataSourceStats extends BaseStats {
-    byType: Record<string, number>; // Count by each type
-  }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/types/deployable-item.types.ts b/client/packages/lowcoder/src/pages/setting/environments/types/deployable-item.types.ts
index ac223c63d..55964eefe 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/types/deployable-item.types.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/types/deployable-item.types.ts
@@ -1,45 +1,7 @@
 // types/deployable-item.types.ts
-import { ReactNode } from 'react';
 import { Environment } from './environment.types';
-import { ColumnType } from 'antd/lib/table';
 
 
-// Base interface for all deployable items
-export interface AuditConfig {
-  enabled: boolean;
-  icon?: React.ReactNode;
-  label?: string;
-  tooltip?: string;
-  getAuditUrl: (item: any, environment: Environment, additionalParams?: Record<string, any>) => string;
-}
-export interface DeployableItem {
-  id: string;
-  name: string;
-  managed?: boolean;
-  [key: string]: any; // Allow for item-specific properties
-}
-
-// Workspace specific implementation
-export interface Workspace extends DeployableItem {
-  id: string;
-  name: string;
-  role?: string;
-  creationDate?: number;
-  status?: string;
-  managed?: boolean;
-  gid?: string;
-}
-
-// Stats interface that can be extended for specific item types
-// Base interface for stats
-export interface BaseStats {
-  total: number;
-  managed: number;
-  unmanaged: number;
-  [key: string]: any;
-}
-export interface WorkspaceStats extends BaseStats {}
-
 
 export interface DeployField {
   name: string;
@@ -50,56 +12,11 @@ export interface DeployField {
   options?: Array<{label: string, value: any}>; // For select fields
 }
 // Configuration for each deployable item type
-export interface DeployableItemConfig<T extends DeployableItem, S extends BaseStats> {
-  // Identifying info
-  type: string; // e.g., 'workspaces'
-  singularLabel: string; // e.g., 'Workspace'
-  pluralLabel: string; // e.g., 'Workspaces'
-  
-  // UI elements
-  icon: ReactNode; // Icon to use in stats
-  
-  // Navigation
-  buildDetailRoute: (params: Record<string, string>) => string;
-  
-  // Configuration
-  requiredEnvProps: string[]; // Required environment properties
-  
-  // Customization
-  idField: string; // Field to use as the ID (e.g., 'id')
-  
-  // Stats
-  renderStats: (stats: S) => ReactNode;
-  calculateStats: (items: T[]) => S;
-
-  // Original columns (will be deprecated)
-  columns: ColumnType<T>[];
-  
-  // New method to generate columns
-  getColumns: (params: {
-    environment: Environment;
-    refreshing: boolean;
-    onToggleManaged?: (item: T, checked: boolean) => Promise<boolean>;
-    openDeployModal?: (item: T, config: DeployableItemConfig<T, S>, environment: Environment) => void;
-    additionalParams?: Record<string, any>;
-  }) => ColumnType<T>[];
-
-  // Add audit configuration
-  audit?: AuditConfig;
-  
-  
-  
-  // Deployable configuration
-  enableManaged: boolean;
-  
-  // Service functions
-  fetchItems: (params: { environment: Environment, [key: string]: any }) => Promise<T[]>;
-  toggleManaged: (params: { item: T; checked: boolean; environment: Environment }) => Promise<boolean>;
-
-  deploy?: {
-    enabled: boolean;
+export interface DeployableItemConfig {
+  deploy: {
+    singularLabel: string;
     fields: DeployField[];
-    prepareParams: (item: T, values: any, sourceEnv: Environment, targetEnv: Environment) => any;
+    prepareParams: (item: any, values: any, sourceEnv: Environment, targetEnv: Environment) => any;
     execute: (params: any) => Promise<any>;
   };
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/types/query.types.ts b/client/packages/lowcoder/src/pages/setting/environments/types/query.types.ts
index 5d38385b0..212efeaac 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/types/query.types.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/types/query.types.ts
@@ -1,5 +1,4 @@
 // types/query.types.ts
-import { DeployableItem, BaseStats } from './deployable-item.types';
 
 export interface LibraryQueryDSL {
   query: {
@@ -32,11 +31,10 @@ export interface LibraryQueryDSL {
     cancelPrevious: boolean;
     depQueryName: string;
     delayTime: string;
-    managed?: boolean;
   };
 }
 
-export interface Query extends DeployableItem {
+export interface Query  {
   id: string;
   gid: string;
   organizationId: string;
@@ -44,9 +42,10 @@ export interface Query extends DeployableItem {
   libraryQueryDSL: LibraryQueryDSL;
   createTime: number;
   creatorName: string;
+  managed?: boolean;
 }
 
-export interface QueryStats extends BaseStats {
+export interface QueryStats  {
   total: number;
   managed: number;
   unmanaged: number;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/types/userGroup.types.ts b/client/packages/lowcoder/src/pages/setting/environments/types/userGroup.types.ts
index 6a1938bcc..5791204c8 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/types/userGroup.types.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/types/userGroup.types.ts
@@ -1,34 +1,26 @@
-/**
- * Represents a User Group entity in an environment
-*/
+export interface UserGroupStats {
+  users: string[];
+  adminUserCount: number;
+  userCount: number;
+}
 
-import { DeployableItem, BaseStats } from "./deployable-item.types";
+export interface UserGroup {
+  groupId: string;
+  groupGid: string;
+  groupName: string;
+  allUsersGroup: boolean;
+  visitorRole: string;
+  createTime: number;
+  dynamicRule: any;
+  stats: UserGroupStats;
+  syncDelete: boolean;
+  devGroup: boolean;
+  syncGroup: boolean;
+}
 
-export interface UserGroup extends DeployableItem {
-    groupId: string;
-    groupGid: string;
-    groupName: string;
-    allUsersGroup: boolean;
-    visitorRole: string;
-    createTime: number;
-    dynamicRule: any;
-    stats: {
-      users: string[];
-      userCount: number;
-      adminUserCount: number;
-    };
-    syncDelete: boolean;
-    devGroup: boolean;
-    syncGroup: boolean;
-    id: string;
-    name: string;
-  }
-
-
-  /**
- * Statistics for User Groups
- */
-export interface UserGroupStats extends BaseStats {
-  totalUsers: number;
-  adminUsers: number;
+export interface UserGroupsTabStats {
+  total: number;
+  allUsers: number;
+  developers: number;
+  custom: number;
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx b/client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx
deleted file mode 100644
index 45c69c580..000000000
--- a/client/packages/lowcoder/src/pages/setting/environments/utils/columnFactories.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-// utils/columnFactories.tsx
-import React from 'react';
-import { Tag, Space, Switch, Button, Tooltip, Badge} from 'antd';
-import { CloudUploadOutlined, AuditOutlined } from '@ant-design/icons';
-import { ColumnType } from 'antd/lib/table';
-import { DeployableItem, DeployableItemConfig, BaseStats } from '../types/deployable-item.types';
-import { Environment } from '../types/environment.types';
-
-// Base columns for workspace
-export function createNameColumn<T extends { name: string }>(): ColumnType<T> {
-  return {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-  };
-}
-
-export function createIdColumn<T extends { id: string }>(): ColumnType<T> {
-  return {
-    title: 'ID',
-    dataIndex: 'id',
-    key: 'id',
-    ellipsis: true,
-  };
-}
-
-export function createRoleColumn<T extends { role?: string }>(): ColumnType<T> {
-  return {
-    title: 'Role',
-    dataIndex: 'role',
-    key: 'role',
-    render: (role: string) => <span>{role}</span>,
-  };
-}
-
-export function createDateColumn<T>(
-  dateField: string,
-  title: string
-): ColumnType<T> {
-  return {
-    title: title,
-    key: dateField,
-    render: (_, record: any) => {
-      if (!record[dateField]) return 'N/A';
-      const date = new Date(record[dateField]);
-      return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
-    },
-  };
-}
-
-export function createStatusColumn<T extends { status?: string }>(): ColumnType<T> {
-  return {
-    title: 'Status',
-    dataIndex: 'status',
-    key: 'status',
-    render: (status: string) => (
-      <Tag color={status === 'ACTIVE' ? 'green' : 'red'} className="status-tag">
-        {status}
-      </Tag>
-    ),
-  };
-}
-
-// Feature columns
-export function createManagedColumn<T extends DeployableItem>(
-  onToggleManaged?: (item: T, checked: boolean) => Promise<boolean>,
-  refreshing: boolean = false
-): ColumnType<T> {
-  return {
-    title: 'Managed',
-    key: 'managed',
-    filterMode: 'menu',
-    filters: [
-      { text: 'Managed', value: true },
-      { text: 'Unmanaged', value: false },
-    ],
-    onFilter: (value, record) => record.managed === value,
-    filterMultiple: false,
-    render: (_, record: T) => (
-      <Space>
-        <Tag color={record.managed ? 'green' : 'default'}>
-          {record.managed ? 'Managed' : 'Unmanaged'}
-        </Tag>
-        {onToggleManaged && (
-          <Switch
-            size="small"
-            checked={!!record.managed}
-            loading={refreshing}
-            onClick={(checked, e) => {
-              e.stopPropagation(); // Stop row click event
-              onToggleManaged(record, checked);
-            }}
-            onChange={() => {}}
-          />
-        )}
-      </Space>
-    ),
-  };
-}
-
-export function createAuditColumn<T extends DeployableItem>(
-  config: DeployableItemConfig<T, any>,
-  environment: Environment,
-  additionalParams: Record<string, any> = {}
-): ColumnType<T> {
-  return {
-    title: 'Audit',
-    key: 'audit',
-    render: (_, record: T) => {
-      const openAuditPage = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (config.audit?.getAuditUrl) {
-          const auditUrl = config.audit.getAuditUrl(record, environment, additionalParams);
-          window.open(auditUrl, '_blank');
-        }
-      };
-      
-      return (
-        <Tooltip title={config.audit?.tooltip || `View audit logs`}>
-          <Button
-            icon={config.audit?.icon || <AuditOutlined />}
-            onClick={openAuditPage}
-          >
-            {config.audit?.label || 'Audit'}
-          </Button>
-        </Tooltip>
-      );
-    },
-  };
-}
-
-
-export function createDescriptionColumn<T extends { description?: string }>(): ColumnType<T> {
-  return {
-    title: 'Description',
-    dataIndex: 'description',
-    key: 'description',
-    ellipsis: true,
-  };
-}
-
-
-export function createDeployColumn<T extends DeployableItem, S extends BaseStats>(
-  config: DeployableItemConfig<T, S>,
-  environment: Environment,
-  openDeployModal: (item: T, config: DeployableItemConfig<T, S>, environment: Environment) => void
-): ColumnType<T> {
-  return {
-    title: 'Actions',
-    key: 'actions',
-    render: (_, record: T) => {
-      // Check if the item is managed
-      const isManaged = record.managed === true;
-      
-      return (
-        <Space>
-          <Tooltip title={isManaged 
-            ? `Deploy this ${config.singularLabel.toLowerCase()} to another environment` 
-            : `Item must be managed before it can be deployed`}
-          >
-            <Button
-              icon={<CloudUploadOutlined />}
-              onClick={(e) => {
-                e.stopPropagation(); // Prevent row click navigation
-                if (isManaged) {
-                  openDeployModal(record, config, environment);
-                }
-              }}
-              type="primary"
-              ghost
-              disabled={!isManaged}
-            >
-              Deploy
-            </Button>
-          </Tooltip>
-        </Space>
-      );
-    },
-  };
-}
-
-// App-specific columns
-export function createPublishedColumn<T extends { published?: boolean }>(): ColumnType<T> {
-  return {
-    title: 'Status',
-    dataIndex: 'published',
-    key: 'published',
-    filterMode: 'menu',
-    filters: [
-      { text: 'Published', value: true },
-      { text: 'Unpublished', value: false },
-    ],
-    onFilter: (value, record) => record.published === value,
-    filterMultiple: false,
-    render: (published: boolean) => (
-      <Tag color={published ? 'green' : 'orange'}>
-        {published ? 'Published' : 'Unpublished'}
-      </Tag>
-    ),
-  };
-}
-
-// Data Source specific columns
-export function createTypeColumn<T extends { type?: string }>(): ColumnType<T> {
-  return {
-    title: 'Type',
-    dataIndex: 'type',
-    key: 'type',
-    render: (type: string) => (
-      <Tag color="blue">{type || 'Unknown'}</Tag>
-    ),
-  };
-}
-
-export function createDatabaseColumn<T extends { datasourceConfig?: { database?: string | null } }>(): ColumnType<T> {
-  return {
-    title: 'Database',
-    key: 'database',
-    render: (_, record: T) => (
-      <span>{record.datasourceConfig?.database || 'N/A'}</span>
-    ),
-  };
-}
-
-export function createDatasourceStatusColumn<T extends { datasourceStatus?: string }>(): ColumnType<T> {
-  return {
-    title: 'Status',
-    dataIndex: 'datasourceStatus',
-    key: 'status',
-    render: (status: string) => (
-      <Tag color={status === 'NORMAL' ? 'green' : 'red'}>
-        {status}
-      </Tag>
-    ),
-  };
-}
-
-
-// Query-specific column factories to add to columnFactories.tsx
-export function createCreatorColumn<T extends { creatorName?: string }>(): ColumnType<T> {
-  return {
-    title: 'Creator',
-    dataIndex: 'creatorName',
-    key: 'creatorName',
-  };
-}
-
-export function createQueryTypeColumn<T extends { libraryQueryDSL?: { query?: { compType?: string } } }>(): ColumnType<T> {
-  return {
-    title: 'Query Type',
-    key: 'queryType',
-    render: (_, record: T) => {
-      const queryType = record.libraryQueryDSL?.query?.compType || 'Unknown';
-      return <Tag color="blue">{queryType}</Tag>;
-    },
-  };
-}
-
-export function createUserGroupNameColumn<T extends { 
-  groupName?: string; 
-  allUsersGroup?: boolean; 
-  devGroup?: boolean;
-}>(): ColumnType<T> {
-  return {
-    title: 'Name',
-    dataIndex: 'groupName',
-    key: 'groupName',
-    render: (name: string, record: T) => (
-      <div>
-        <span>{record.groupName}</span>
-        {record.allUsersGroup && (
-          <Tag color="blue" style={{ marginLeft: 8 }}>All Users</Tag>
-        )}
-        {record.devGroup && (
-          <Tag color="orange" style={{ marginLeft: 8 }}>Dev</Tag>
-        )}
-      </div>
-    ),
-  };
-}
-
-export function createGroupIdColumn<T extends { groupId?: string }>(): ColumnType<T> {
-  return {
-    title: 'ID',
-    dataIndex: 'groupId',
-    key: 'groupId',
-    ellipsis: true,
-  };
-}
-
-export function createUserCountColumn<T extends { 
-  stats?: { userCount: number; adminUserCount: number; }
-}>(): ColumnType<T> {
-  return {
-    title: 'Users',
-    key: 'userCount',
-    render: (_, record: T) => (
-      <div>
-        <Badge count={record.stats?.userCount || 0} showZero style={{ backgroundColor: '#52c41a' }} />
-        <span style={{ marginLeft: 8 }}>
-          ({record.stats?.adminUserCount || 0} admin{(record.stats?.adminUserCount || 0) !== 1 ? 's' : ''})
-        </span>
-      </div>
-    ),
-  };
-}
-
-export function createGroupTypeColumn<T extends { 
-  allUsersGroup?: boolean; 
-  devGroup?: boolean;
-  syncGroup?: boolean;
-}>(): ColumnType<T> {
-  return {
-    title: 'Type',
-    key: 'type',
-    render: (_, record: T) => {
-      if (record.allUsersGroup) return <Tag color="blue">Global</Tag>;
-      if (record.devGroup) return <Tag color="orange">Dev</Tag>;
-      if (record.syncGroup) return <Tag color="purple">Sync</Tag>;
-      return <Tag color="default">Standard</Tag>;
-    },
-  };
-}
\ No newline at end of file

From 199c869755f34ff91a13c4acba8318ab96beca50 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 00:07:12 +0500
Subject: [PATCH 13/37] add audit buttons in tabs

---
 .../environments/components/AppsTab.tsx       | 16 +++++++++-
 .../components/DataSourcesTab.tsx             | 16 +++++++++-
 .../environments/components/QueriesTab.tsx    | 16 +++++++++-
 .../environments/components/WorkspacesTab.tsx | 32 ++++++++++++++++++-
 4 files changed, 76 insertions(+), 4 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index 70e0d68ec..b943b83a2 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined } from '@ant-design/icons';
+import { SyncOutlined, CloudUploadOutlined, AuditOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
@@ -10,6 +10,7 @@ import { Switch, Spin, Empty } from 'antd';
 import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { useDeployModal } from '../context/DeployModalContext';
 import { appsConfig } from '../config/apps.config';
+import history from "@lowcoder-ee/util/history";
 
 const { Search } = Input;
 
@@ -173,6 +174,19 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
       key: 'actions',
       render: (_: any, app: App) => (
         <Space onClick={(e) => e.stopPropagation()}>
+          <Tooltip title="View Audit Logs">
+            <Button
+              icon={<AuditOutlined />}
+              size="small"
+              onClick={(e) => {
+                e.stopPropagation();
+                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&appId=${app.applicationId}&pageSize=100&pageNum=1`;
+                window.open(auditUrl, '_blank');
+              }}
+            >
+              Audit
+            </Button>
+          </Tooltip>
           <Tooltip title={!app.managed ? "App must be managed before it can be deployed" : "Deploy this app to another environment"}>
             <Button
               type="primary"
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index 2eba3050e..3d4c7ed6f 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, DatabaseOutlined } from '@ant-design/icons';
+import { SyncOutlined, CloudUploadOutlined, DatabaseOutlined, AuditOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
@@ -10,6 +10,7 @@ import { Switch, Spin, Empty } from 'antd';
 import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { useDeployModal } from '../context/DeployModalContext';
 import { dataSourcesConfig } from '../config/data-sources.config';
+import history from "@lowcoder-ee/util/history";
 
 const { Search } = Input;
 
@@ -160,6 +161,19 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
       key: 'actions',
       render: (_: any, dataSource: DataSource) => (
         <Space onClick={(e) => e.stopPropagation()}>
+          <Tooltip title="View Audit Logs">
+            <Button
+              icon={<AuditOutlined />}
+              size="small"
+              onClick={(e) => {
+                e.stopPropagation();
+                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`;
+                window.open(auditUrl, '_blank');
+              }}
+            >
+              Audit
+            </Button>
+          </Tooltip>
           <Tooltip title={!dataSource.managed ? "Data source must be managed before it can be deployed" : "Deploy this data source to another environment"}>
             <Button
               type="primary"
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
index ad01dddd5..e811f3071 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, CodeOutlined } from '@ant-design/icons';
+import { SyncOutlined, CloudUploadOutlined, CodeOutlined, AuditOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
@@ -10,6 +10,7 @@ import { Switch, Spin, Empty } from 'antd';
 import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { useDeployModal } from '../context/DeployModalContext';
 import { queryConfig } from '../config/query.config';
+import history from "@lowcoder-ee/util/history";
 
 const { Search } = Input;
 
@@ -156,6 +157,19 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
       key: 'actions',
       render: (_: any, query: Query) => (
         <Space onClick={(e) => e.stopPropagation()}>
+          <Tooltip title="View Audit Logs">
+            <Button
+              icon={<AuditOutlined />}
+              size="small"
+              onClick={(e) => {
+                e.stopPropagation();
+                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&queryId=${query.id}&pageSize=100&pageNum=1`;
+                window.open(auditUrl, '_blank');
+              }}
+            >
+              Audit
+            </Button>
+          </Tooltip>
           <Tooltip title={!query.managed ? "Query must be managed before it can be deployed" : "Deploy this query to another environment"}>
             <Button
               type="primary"
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
index f2f8b408c..90a22619d 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined } from '@ant-design/icons';
+import { SyncOutlined, CloudUploadOutlined, AuditOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
@@ -112,6 +112,36 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
         </Tag>
       ),
     },
+    {
+      title: 'Managed',
+      key: 'managed',
+      render: (_: any, workspace: Workspace) => (
+        <Tag color={workspace.managed ? 'blue' : 'default'}>
+          {workspace.managed ? 'Managed' : 'Unmanaged'}
+        </Tag>
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (_: any, workspace: Workspace) => (
+        <Space onClick={(e) => e.stopPropagation()}>
+          <Tooltip title="View Audit Logs">
+            <Button
+              icon={<AuditOutlined />}
+              size="small"
+              onClick={(e) => {
+                e.stopPropagation();
+                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&pageSize=100&pageNum=1`;
+                window.open(auditUrl, '_blank');
+              }}
+            >
+              Audit
+            </Button>
+          </Tooltip>
+        </Space>
+      ),
+    },
   ];
 
   return (

From f4fba8e3cfc10c2d96aa8d40c00501ea9c6edca4 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 00:31:02 +0500
Subject: [PATCH 14/37] Update Apps UI

---
 .../environments/components/AppsTab.tsx       | 271 ++++++++++++------
 1 file changed, 184 insertions(+), 87 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index b943b83a2..b2fde8d7a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, AuditOutlined } from '@ant-design/icons';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col } from 'antd';
+import { SyncOutlined, CloudUploadOutlined, AuditOutlined, AppstoreOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
 import { App, AppStats } from '../types/app.types';
 import { getMergedWorkspaceApps } from '../services/apps.service';
-import { Switch, Spin, Empty } from 'antd';
+import { Switch, Spin, Empty, Avatar } from 'antd';
 import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { useDeployModal } from '../context/DeployModalContext';
 import { appsConfig } from '../config/apps.config';
@@ -136,25 +136,43 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
   // Table columns
   const columns = [
     {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      render: (text: string) => <span className="app-name">{text}</span>
-    },
-    {
-      title: 'ID',
-      dataIndex: 'applicationId',
-      key: 'applicationId', 
-      ellipsis: true,
+      title: 'App',
+      key: 'app',
+      render: (app: App) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Avatar 
+            style={{ 
+              backgroundColor: stringToColor(app.name),
+              marginRight: 12
+            }}
+            shape="square"
+          >
+            {app.name.charAt(0).toUpperCase()}
+          </Avatar>
+          <div>
+            <div style={{ fontWeight: 500 }}>{app.name}</div>
+            <div style={{ fontSize: 12, color: '#8c8c8c', marginTop: 4 }}>
+              {app.applicationId}
+            </div>
+          </div>
+        </div>
+      ),
     },
     {
-      title: 'Published',
-      dataIndex: 'published',
-      key: 'published',
-      render: (published: boolean) => (
-        <Tag color={published ? 'green' : 'default'}>
-          {published ? 'Published' : 'Draft'}
-        </Tag>
+      title: 'Status',
+      key: 'status',
+      render: (app: App) => (
+        <Space direction="vertical" size={0}>
+          <Tag color={app.published ? 'success' : 'default'} style={{ borderRadius: '12px' }}>
+            {app.published ? <CheckCircleFilled /> : null} {app.published ? 'Published' : 'Draft'}
+          </Tag>
+          <Tag 
+            color={app.managed ? 'processing' : 'default'} 
+            style={{ marginTop: 8, borderRadius: '12px' }}
+          >
+            {app.managed ? <CloudServerOutlined /> : <DisconnectOutlined />} {app.managed ? 'Managed' : 'Unmanaged'}
+          </Tag>
+        </Space>
       ),
     },
     {
@@ -165,7 +183,6 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
           checked={!!app.managed}
           onChange={(checked: boolean) => handleToggleManaged(app, checked)}
           loading={refreshing}
-          size="small"
         />
       ),
     },
@@ -177,7 +194,6 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
           <Tooltip title="View Audit Logs">
             <Button
               icon={<AuditOutlined />}
-              size="small"
               onClick={(e) => {
                 e.stopPropagation();
                 const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&appId=${app.applicationId}&pageSize=100&pageNum=1`;
@@ -190,7 +206,6 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
           <Tooltip title={!app.managed ? "App must be managed before it can be deployed" : "Deploy this app to another environment"}>
             <Button
               type="primary"
-              size="small"
               icon={<CloudUploadOutlined />}
               onClick={() => openDeployModal(app, appsConfig, environment)}
               disabled={!app.managed}
@@ -203,42 +218,78 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
     }
   ];
 
+  // Helper function to generate colors from strings
+  const stringToColor = (str: string) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  // Stat card component
+  const StatCard = ({ title, value, icon }: { title: string; value: number; icon: React.ReactNode }) => (
+    <Card 
+      style={{ 
+        height: '100%', 
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c', marginBottom: '8px' }}>{title}</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{value}</div>
+        </div>
+        <div style={{ 
+          fontSize: '28px', 
+          opacity: 0.8, 
+          color: '#1890ff',
+          padding: '12px',
+          backgroundColor: 'rgba(24, 144, 255, 0.1)',
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          {icon}
+        </div>
+      </div>
+    </Card>
+  );
+
   return (
-    <Card>
-      {/* Header with refresh button */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
-        <Title level={5}>Apps in this Workspace</Title>
+    <div style={{ padding: '16px 0' }}>
+      {/* Header */}
+      <div style={{ 
+        display: "flex", 
+        justifyContent: "space-between", 
+        alignItems: "center", 
+        marginBottom: "24px",
+        background: 'linear-gradient(135deg, #1890ff 0%, #722ed1 100%)',
+        padding: '20px 24px',
+        borderRadius: '8px',
+        color: 'white'
+      }}>
+        <div>
+          <Title level={4} style={{ color: 'white', margin: 0 }}>
+            <AppstoreOutlined style={{ marginRight: 10 }} /> Apps
+          </Title>
+          <p style={{ marginBottom: 0 }}>Manage your workspace applications</p>
+        </div>
         <Button 
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
+          type="primary"
+          ghost
         >
           Refresh
         </Button>
       </div>
 
-      {/* Stats display */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Apps</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Published Apps</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.published}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed Apps</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged Apps</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
-        </div>
-      </div>
-
-      <Divider style={{ margin: "16px 0" }} />
-
       {/* Error display */}
       {error && (
         <Alert
@@ -246,7 +297,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
           description={error}
           type="error"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
@@ -257,49 +308,95 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
           description="Missing required configuration: API key or API service URL"
           type="warning"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
+      {/* Stats display */}
+      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Total Apps" 
+            value={stats.total} 
+            icon={<AppstoreOutlined />} 
+          />
+        </Col>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Published Apps" 
+            value={stats.published} 
+            icon={<CheckCircleFilled />} 
+          />
+        </Col>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Managed Apps" 
+            value={stats.managed} 
+            icon={<CloudServerOutlined />} 
+          />
+        </Col>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Unmanaged Apps" 
+            value={stats.unmanaged} 
+            icon={<DisconnectOutlined />} 
+          />
+        </Col>
+      </Row>
+
       {/* Content */}
-      {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
-          <Spin tip="Loading apps..." />
-        </div>
-      ) : apps.length === 0 ? (
-        <Empty
-          description={error || "No apps found in this workspace"}
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      ) : (
-        <>
-          {/* Search Bar */}
-          <div style={{ marginBottom: 16 }}>
-            <Search
-              placeholder="Search apps by name or ID"
-              allowClear
-              onSearch={value => setSearchText(value)}
-              onChange={e => setSearchText(e.target.value)}
-              style={{ width: 300 }}
-            />
-            {searchText && filteredApps.length !== apps.length && (
-              <div style={{ marginTop: 8 }}>
-                Showing {filteredApps.length} of {apps.length} apps
-              </div>
-            )}
+      <Card 
+        style={{ 
+          borderRadius: '8px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+        }}
+      >
+        {loading ? (
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
+            <Spin size="large" tip="Loading apps..." />
           </div>
-          
-          <Table
-            columns={columns}
-            dataSource={filteredApps}
-            rowKey="applicationId"
-            pagination={{ pageSize: 10 }}
-            size="middle"
-            scroll={{ x: 'max-content' }}
+        ) : apps.length === 0 ? (
+          <Empty
+            description={error || "No apps found in this workspace"}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
           />
-        </>
-      )}
-    </Card>
+        ) : (
+          <>
+            {/* Search Bar */}
+            <div style={{ marginBottom: 20 }}>
+              <Search
+                placeholder="Search apps by name or ID"
+                allowClear
+                onSearch={value => setSearchText(value)}
+                onChange={e => setSearchText(e.target.value)}
+                style={{ width: 300 }}
+                size="large"
+              />
+              {searchText && filteredApps.length !== apps.length && (
+                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                  Showing {filteredApps.length} of {apps.length} apps
+                </div>
+              )}
+            </div>
+            
+            <Table
+              columns={columns}
+              dataSource={filteredApps}
+              rowKey="applicationId"
+              pagination={{ 
+                pageSize: 10,
+                showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} apps`
+              }}
+              rowClassName={() => 'app-row'}
+              style={{ 
+                borderRadius: '8px', 
+                overflow: 'hidden'
+              }}
+            />
+          </>
+        )}
+      </Card>
+    </div>
   );
 };
 

From c3a770eb3cdd8bfc42139167f30b493ae2c04ef3 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 01:29:37 +0500
Subject: [PATCH 15/37] update UI for DS and queries

---
 .../components/DataSourcesTab.tsx             | 281 +++++++++++++-----
 .../environments/components/QueriesTab.tsx    | 271 ++++++++++++-----
 2 files changed, 395 insertions(+), 157 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index 3d4c7ed6f..068552232 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -1,12 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, DatabaseOutlined, AuditOutlined } from '@ant-design/icons';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col } from 'antd';
+import { 
+  SyncOutlined, 
+  CloudUploadOutlined, 
+  DatabaseOutlined, 
+  AuditOutlined,
+  ApiOutlined,
+  CheckCircleFilled,
+  CloudServerOutlined,
+  DisconnectOutlined
+} from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
 import { DataSource } from '../types/datasource.types';
 import { getMergedWorkspaceDataSources } from '../services/datasources.service';
-import { Switch, Spin, Empty } from 'antd';
+import { Switch, Spin, Empty, Avatar } from 'antd';
 import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { useDeployModal } from '../context/DeployModalContext';
 import { dataSourcesConfig } from '../config/data-sources.config';
@@ -125,23 +134,47 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
   // Table columns
   const columns = [
     {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      render: (text: string) => <span className="datasource-name">{text}</span>
-    },
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-      ellipsis: true,
+      title: 'Data Source',
+      key: 'datasource',
+      render: (dataSource: DataSource) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Avatar 
+            style={{ 
+              backgroundColor: getDataSourceColor(dataSource.type),
+              marginRight: 12
+            }}
+            shape="square"
+            icon={<DatabaseOutlined />}
+          />
+          <div>
+            <div style={{ fontWeight: 500 }}>{dataSource.name}</div>
+            <div style={{ fontSize: 12, color: '#8c8c8c', marginTop: 4 }}>
+              {dataSource.id}
+            </div>
+          </div>
+        </div>
+      ),
     },
     {
       title: 'Type',
       dataIndex: 'type',
       key: 'type',
       render: (type: string) => (
-        <Tag color="blue">{type}</Tag>
+        <Tag color={getDataSourceColor(type)} style={{ borderRadius: '12px', padding: '2px 12px' }}>
+          {type}
+        </Tag>
+      ),
+    },
+    {
+      title: 'Status',
+      key: 'status',
+      render: (dataSource: DataSource) => (
+        <Tag 
+          color={dataSource.managed ? 'processing' : 'default'} 
+          style={{ borderRadius: '12px' }}
+        >
+          {dataSource.managed ? <CloudServerOutlined /> : <DisconnectOutlined />} {dataSource.managed ? 'Managed' : 'Unmanaged'}
+        </Tag>
       ),
     },
     {
@@ -152,7 +185,6 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
           checked={!!dataSource.managed}
           onChange={(checked: boolean) => handleToggleManaged(dataSource, checked)}
           loading={refreshing}
-          size="small"
         />
       ),
     },
@@ -164,7 +196,6 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
           <Tooltip title="View Audit Logs">
             <Button
               icon={<AuditOutlined />}
-              size="small"
               onClick={(e) => {
                 e.stopPropagation();
                 const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`;
@@ -177,7 +208,6 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
           <Tooltip title={!dataSource.managed ? "Data source must be managed before it can be deployed" : "Deploy this data source to another environment"}>
             <Button
               type="primary"
-              size="small"
               icon={<CloudUploadOutlined />}
               onClick={() => openDeployModal(dataSource, dataSourcesConfig, environment)}
               disabled={!dataSource.managed}
@@ -190,42 +220,85 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
     }
   ];
 
+  // Helper function to get color based on data source type
+  const getDataSourceColor = (type: string) => {
+    const colorMap: {[key: string]: string} = {
+      'mysql': '#4479A1',
+      'postgres': '#336791',
+      'mongodb': '#4DB33D',
+      'redis': '#DC382D',
+      'rest': '#FF6C37',
+      'graphql': '#E10098',
+      'elasticsearch': '#005571',
+      'oracle': '#F80000',
+      'mssql': '#CC2927',
+      'snowflake': '#29B5E8'
+    };
+    
+    return colorMap[type.toLowerCase()] || '#1890ff';
+  };
+
+  // Stat card component
+  const StatCard = ({ title, value, icon }: { title: string; value: number; icon: React.ReactNode }) => (
+    <Card 
+      style={{ 
+        height: '100%', 
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c', marginBottom: '8px' }}>{title}</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{value}</div>
+        </div>
+        <div style={{ 
+          fontSize: '28px', 
+          opacity: 0.8, 
+          color: '#1890ff',
+          padding: '12px',
+          backgroundColor: 'rgba(24, 144, 255, 0.1)',
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          {icon}
+        </div>
+      </div>
+    </Card>
+  );
+
   return (
-    <Card>
-      {/* Header with refresh button */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
-        <Title level={5}>Data Sources in this Workspace</Title>
+    <div style={{ padding: '16px 0' }}>
+      {/* Header */}
+      <div style={{ 
+        display: "flex", 
+        justifyContent: "space-between", 
+        alignItems: "center", 
+        marginBottom: "24px",
+        background: 'linear-gradient(135deg, #1890ff 0%, #13c2c2 100%)',
+        padding: '20px 24px',
+        borderRadius: '8px',
+        color: 'white'
+      }}>
+        <div>
+          <Title level={4} style={{ color: 'white', margin: 0 }}>
+            <DatabaseOutlined style={{ marginRight: 10 }} /> Data Sources
+          </Title>
+          <p style={{ marginBottom: 0 }}>Manage your workspace data connections</p>
+        </div>
         <Button 
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
+          type="primary"
+          ghost
         >
           Refresh
         </Button>
       </div>
 
-      {/* Stats display */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Data Sources</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Types</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.types}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
-        </div>
-      </div>
-
-      <Divider style={{ margin: "16px 0" }} />
-
       {/* Error display */}
       {error && (
         <Alert
@@ -233,7 +306,7 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
           description={error}
           type="error"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
@@ -244,49 +317,95 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
           description="Missing required configuration: API key or API service URL"
           type="warning"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
+      {/* Stats display */}
+      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Total Data Sources" 
+            value={stats.total} 
+            icon={<DatabaseOutlined />} 
+          />
+        </Col>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Available Types" 
+            value={stats.types} 
+            icon={<ApiOutlined />} 
+          />
+        </Col>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Managed" 
+            value={stats.managed} 
+            icon={<CloudServerOutlined />} 
+          />
+        </Col>
+        <Col xs={12} sm={12} md={6}>
+          <StatCard 
+            title="Unmanaged" 
+            value={stats.unmanaged} 
+            icon={<DisconnectOutlined />} 
+          />
+        </Col>
+      </Row>
+
       {/* Content */}
-      {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
-          <Spin tip="Loading data sources..." />
-        </div>
-      ) : dataSources.length === 0 ? (
-        <Empty
-          description={error || "No data sources found in this workspace"}
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      ) : (
-        <>
-          {/* Search Bar */}
-          <div style={{ marginBottom: 16 }}>
-            <Search
-              placeholder="Search data sources by name or ID"
-              allowClear
-              onSearch={value => setSearchText(value)}
-              onChange={e => setSearchText(e.target.value)}
-              style={{ width: 300 }}
-            />
-            {searchText && filteredDataSources.length !== dataSources.length && (
-              <div style={{ marginTop: 8 }}>
-                Showing {filteredDataSources.length} of {dataSources.length} data sources
-              </div>
-            )}
+      <Card 
+        style={{ 
+          borderRadius: '8px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+        }}
+      >
+        {loading ? (
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
+            <Spin size="large" tip="Loading data sources..." />
           </div>
-          
-          <Table
-            columns={columns}
-            dataSource={filteredDataSources}
-            rowKey="id"
-            pagination={{ pageSize: 10 }}
-            size="middle"
-            scroll={{ x: 'max-content' }}
+        ) : dataSources.length === 0 ? (
+          <Empty
+            description={error || "No data sources found in this workspace"}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
           />
-        </>
-      )}
-    </Card>
+        ) : (
+          <>
+            {/* Search Bar */}
+            <div style={{ marginBottom: 20 }}>
+              <Search
+                placeholder="Search data sources by name or ID"
+                allowClear
+                onSearch={value => setSearchText(value)}
+                onChange={e => setSearchText(e.target.value)}
+                style={{ width: 300 }}
+                size="large"
+              />
+              {searchText && filteredDataSources.length !== dataSources.length && (
+                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                  Showing {filteredDataSources.length} of {dataSources.length} data sources
+                </div>
+              )}
+            </div>
+            
+            <Table
+              columns={columns}
+              dataSource={filteredDataSources}
+              rowKey="id"
+              pagination={{ 
+                pageSize: 10,
+                showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} data sources`
+              }}
+              rowClassName={() => 'datasource-row'}
+              style={{ 
+                borderRadius: '8px', 
+                overflow: 'hidden'
+              }}
+            />
+          </>
+        )}
+      </Card>
+    </div>
   );
 };
 
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
index e811f3071..ff1e01e39 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -1,12 +1,22 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, CodeOutlined, AuditOutlined } from '@ant-design/icons';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col } from 'antd';
+import { 
+  SyncOutlined, 
+  CloudUploadOutlined, 
+  CodeOutlined, 
+  AuditOutlined, 
+  UserOutlined,
+  CloudServerOutlined,
+  DisconnectOutlined,
+  ApiOutlined,
+  ThunderboltOutlined
+} from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
 import { Query } from '../types/query.types';
 import { getMergedWorkspaceQueries } from '../services/query.service';
-import { Switch, Spin, Empty } from 'antd';
+import { Switch, Spin, Empty, Avatar } from 'antd';
 import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { useDeployModal } from '../context/DeployModalContext';
 import { queryConfig } from '../config/query.config';
@@ -121,24 +131,68 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
         query.id.toLowerCase().includes(searchText.toLowerCase()))
     : queries;
 
+  // Helper function to generate colors from strings
+  const stringToColor = (str: string) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
   // Table columns
   const columns = [
     {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      render: (text: string) => <span className="query-name">{text}</span>
-    },
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-      ellipsis: true,
+      title: 'Query',
+      key: 'query',
+      render: (query: Query) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Avatar 
+            style={{ 
+              backgroundColor: stringToColor(query.name),
+              marginRight: 12
+            }}
+            shape="square"
+            icon={<CodeOutlined />}
+          >
+          </Avatar>
+          <div>
+            <div style={{ fontWeight: 500 }}>{query.name}</div>
+            <div style={{ fontSize: 12, color: '#8c8c8c', marginTop: 4 }}>
+              {query.id}
+            </div>
+          </div>
+        </div>
+      ),
     },
     {
       title: 'Creator',
       dataIndex: 'creatorName',
       key: 'creatorName',
+      render: (creatorName: string) => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <Avatar 
+            size="small" 
+            icon={<UserOutlined />} 
+            style={{ backgroundColor: '#1890ff' }} 
+          />
+          {creatorName}
+        </div>
+      )
+    },
+    {
+      title: 'Status',
+      key: 'status',
+      render: (query: Query) => (
+        <Tag 
+          color={query.managed ? 'processing' : 'default'} 
+          style={{ borderRadius: '12px' }}
+        >
+          {query.managed ? <CloudServerOutlined /> : <DisconnectOutlined />} {query.managed ? 'Managed' : 'Unmanaged'}
+        </Tag>
+      ),
     },
     {
       title: 'Managed',
@@ -148,7 +202,6 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
           checked={!!query.managed}
           onChange={(checked: boolean) => handleToggleManaged(query, checked)}
           loading={refreshing}
-          size="small"
         />
       ),
     },
@@ -160,7 +213,6 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
           <Tooltip title="View Audit Logs">
             <Button
               icon={<AuditOutlined />}
-              size="small"
               onClick={(e) => {
                 e.stopPropagation();
                 const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&queryId=${query.id}&pageSize=100&pageNum=1`;
@@ -173,7 +225,6 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
           <Tooltip title={!query.managed ? "Query must be managed before it can be deployed" : "Deploy this query to another environment"}>
             <Button
               type="primary"
-              size="small"
               icon={<CloudUploadOutlined />}
               onClick={() => openDeployModal(query, queryConfig, environment)}
               disabled={!query.managed}
@@ -186,38 +237,67 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
     }
   ];
 
+  // Stat card component
+  const StatCard = ({ title, value, icon }: { title: string; value: number; icon: React.ReactNode }) => (
+    <Card 
+      style={{ 
+        height: '100%', 
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c', marginBottom: '8px' }}>{title}</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{value}</div>
+        </div>
+        <div style={{ 
+          fontSize: '28px', 
+          opacity: 0.8, 
+          color: '#1890ff',
+          padding: '12px',
+          backgroundColor: 'rgba(24, 144, 255, 0.1)',
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          {icon}
+        </div>
+      </div>
+    </Card>
+  );
+
   return (
-    <Card>
-      {/* Header with refresh button */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
-        <Title level={5}>Queries in this Workspace</Title>
+    <div style={{ padding: '16px 0' }}>
+      {/* Header */}
+      <div style={{ 
+        display: "flex", 
+        justifyContent: "space-between", 
+        alignItems: "center", 
+        marginBottom: "24px",
+        background: 'linear-gradient(135deg, #722ed1 0%, #eb2f96 100%)',
+        padding: '20px 24px',
+        borderRadius: '8px',
+        color: 'white'
+      }}>
+        <div>
+          <Title level={4} style={{ color: 'white', margin: 0 }}>
+            <ThunderboltOutlined style={{ marginRight: 10 }} /> Queries
+          </Title>
+          <p style={{ marginBottom: 0 }}>Manage your workspace API queries</p>
+        </div>
         <Button 
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
+          type="primary"
+          ghost
         >
           Refresh
         </Button>
       </div>
 
-      {/* Stats display */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Queries</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
-        </div>
-      </div>
-
-      <Divider style={{ margin: "16px 0" }} />
-
       {/* Error display */}
       {error && (
         <Alert
@@ -225,7 +305,7 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
           description={error}
           type="error"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
@@ -236,49 +316,88 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
           description="Missing required configuration: API key or API service URL"
           type="warning"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
+      {/* Stats display */}
+      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+        <Col xs={24} sm={8}>
+          <StatCard 
+            title="Total Queries" 
+            value={stats.total} 
+            icon={<CodeOutlined />} 
+          />
+        </Col>
+        <Col xs={24} sm={8}>
+          <StatCard 
+            title="Managed" 
+            value={stats.managed} 
+            icon={<CloudServerOutlined />} 
+          />
+        </Col>
+        <Col xs={24} sm={8}>
+          <StatCard 
+            title="Unmanaged" 
+            value={stats.unmanaged} 
+            icon={<DisconnectOutlined />} 
+          />
+        </Col>
+      </Row>
+
       {/* Content */}
-      {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
-          <Spin tip="Loading queries..." />
-        </div>
-      ) : queries.length === 0 ? (
-        <Empty
-          description={error || "No queries found in this workspace"}
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      ) : (
-        <>
-          {/* Search Bar */}
-          <div style={{ marginBottom: 16 }}>
-            <Search
-              placeholder="Search queries by name or ID"
-              allowClear
-              onSearch={value => setSearchText(value)}
-              onChange={e => setSearchText(e.target.value)}
-              style={{ width: 300 }}
-            />
-            {searchText && filteredQueries.length !== queries.length && (
-              <div style={{ marginTop: 8 }}>
-                Showing {filteredQueries.length} of {queries.length} queries
-              </div>
-            )}
+      <Card 
+        style={{ 
+          borderRadius: '8px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+        }}
+      >
+        {loading ? (
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
+            <Spin size="large" tip="Loading queries..." />
           </div>
-          
-          <Table
-            columns={columns}
-            dataSource={filteredQueries}
-            rowKey="id"
-            pagination={{ pageSize: 10 }}
-            size="middle"
-            scroll={{ x: 'max-content' }}
+        ) : queries.length === 0 ? (
+          <Empty
+            description={error || "No queries found in this workspace"}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
           />
-        </>
-      )}
-    </Card>
+        ) : (
+          <>
+            {/* Search Bar */}
+            <div style={{ marginBottom: 20 }}>
+              <Search
+                placeholder="Search queries by name or ID"
+                allowClear
+                onSearch={value => setSearchText(value)}
+                onChange={e => setSearchText(e.target.value)}
+                style={{ width: 300 }}
+                size="large"
+              />
+              {searchText && filteredQueries.length !== queries.length && (
+                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                  Showing {filteredQueries.length} of {queries.length} queries
+                </div>
+              )}
+            </div>
+            
+            <Table
+              columns={columns}
+              dataSource={filteredQueries}
+              rowKey="id"
+              pagination={{ 
+                pageSize: 10,
+                showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} queries`
+              }}
+              rowClassName={() => 'query-row'}
+              style={{ 
+                borderRadius: '8px', 
+                overflow: 'hidden'
+              }}
+            />
+          </>
+        )}
+      </Card>
+    </div>
   );
 };
 

From 3e35b5d0fde3da88eb05ba7a8ae89bd019476d49 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 13:39:18 +0500
Subject: [PATCH 16/37] update UI for workspaces tab

---
 .../environments/components/WorkspacesTab.tsx | 258 ++++++++++++------
 1 file changed, 176 insertions(+), 82 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
index 90a22619d..2068ccf8b 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, AuditOutlined } from '@ant-design/icons';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col, Avatar } from 'antd';
+import { SyncOutlined, AuditOutlined, TeamOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
@@ -68,9 +68,6 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
     fetchWorkspaces();
   };
 
-  // Toggle managed status
-
-
   // Handle row click for navigation
   const handleRowClick = (workspace: Workspace) => {
     history.push(`/setting/environments/${environment.environmentId}/workspaces/${workspace.id}`);
@@ -83,19 +80,72 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
         workspace.id.toLowerCase().includes(searchText.toLowerCase()))
     : workspaces;
 
+  // Helper function to generate colors from strings
+  const stringToColor = (str: string) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  // Stat card component
+  const StatCard = ({ title, value, icon }: { title: string; value: number; icon: React.ReactNode }) => (
+    <Card 
+      style={{ 
+        height: '100%', 
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c', marginBottom: '8px' }}>{title}</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{value}</div>
+        </div>
+        <div style={{ 
+          fontSize: '28px', 
+          opacity: 0.8, 
+          color: '#52c41a',
+          padding: '12px',
+          backgroundColor: 'rgba(82, 196, 26, 0.1)',
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          {icon}
+        </div>
+      </div>
+    </Card>
+  );
+
   // Table columns
   const columns = [
     {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      render: (text: string) => <span className="workspace-name">{text}</span>
-    },
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-      ellipsis: true,
+      title: 'Workspace',
+      key: 'workspace',
+      render: (workspace: Workspace) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Avatar 
+            style={{ 
+              backgroundColor: stringToColor(workspace.name),
+              marginRight: 12
+            }}
+            shape="square"
+          >
+            {workspace.name.charAt(0).toUpperCase()}
+          </Avatar>
+          <div>
+            <div style={{ fontWeight: 500 }}>{workspace.name}</div>
+            <div style={{ fontSize: 12, color: '#8c8c8c', marginTop: 4 }}>
+              {workspace.id}
+            </div>
+          </div>
+        </div>
+      ),
     },
     {
       title: 'Role',
@@ -107,7 +157,8 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
       dataIndex: 'status',
       key: 'status',
       render: (status: string) => (
-        <Tag color={status === 'ACTIVE' ? 'green' : 'red'}>
+        <Tag color={status === 'ACTIVE' ? 'green' : 'red'} style={{ borderRadius: '12px' }}>
+          {status === 'ACTIVE' ? <CheckCircleFilled style={{ marginRight: 4 }} /> : null}
           {status}
         </Tag>
       ),
@@ -116,7 +167,14 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
       title: 'Managed',
       key: 'managed',
       render: (_: any, workspace: Workspace) => (
-        <Tag color={workspace.managed ? 'blue' : 'default'}>
+        <Tag 
+          color={workspace.managed ? 'processing' : 'default'}
+          style={{ borderRadius: '12px' }}
+        >
+          {workspace.managed 
+            ? <CloudServerOutlined style={{ marginRight: 4 }} /> 
+            : <DisconnectOutlined style={{ marginRight: 4 }} />
+          }
           {workspace.managed ? 'Managed' : 'Unmanaged'}
         </Tag>
       ),
@@ -129,7 +187,6 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
           <Tooltip title="View Audit Logs">
             <Button
               icon={<AuditOutlined />}
-              size="small"
               onClick={(e) => {
                 e.stopPropagation();
                 const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&pageSize=100&pageNum=1`;
@@ -145,37 +202,35 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
   ];
 
   return (
-    <Card>
-      {/* Header with refresh button */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
-        <Title level={5}>Workspaces in this Environment</Title>
+    <div style={{ padding: '16px 0' }}>
+      {/* Header */}
+      <div style={{ 
+        display: "flex", 
+        justifyContent: "space-between", 
+        alignItems: "center", 
+        marginBottom: "24px",
+        background: 'linear-gradient(135deg, #52c41a 0%, #13c2c2 100%)',
+        padding: '20px 24px',
+        borderRadius: '8px',
+        color: 'white'
+      }}>
+        <div>
+          <Title level={4} style={{ color: 'white', margin: 0 }}>
+            <TeamOutlined style={{ marginRight: 10 }} /> Workspaces
+          </Title>
+          <p style={{ marginBottom: 0 }}>Manage workspaces in this environment</p>
+        </div>
         <Button 
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
+          type="primary"
+          ghost
         >
           Refresh
         </Button>
       </div>
 
-      {/* Stats display */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Workspaces</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Managed</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.managed}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Unmanaged</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.unmanaged}</div>
-        </div>
-      </div>
-
-      <Divider style={{ margin: "16px 0" }} />
-
       {/* Error display */}
       {error && (
         <Alert
@@ -183,7 +238,7 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
           description={error}
           type="error"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
@@ -194,53 +249,92 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
           description="Missing required configuration: API key or API service URL"
           type="warning"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
+      {/* Stats display */}
+      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+        <Col xs={24} sm={8}>
+          <StatCard 
+            title="Total Workspaces" 
+            value={stats.total} 
+            icon={<TeamOutlined />} 
+          />
+        </Col>
+        <Col xs={24} sm={8}>
+          <StatCard 
+            title="Managed Workspaces" 
+            value={stats.managed} 
+            icon={<CloudServerOutlined />} 
+          />
+        </Col>
+        <Col xs={24} sm={8}>
+          <StatCard 
+            title="Unmanaged Workspaces" 
+            value={stats.unmanaged} 
+            icon={<DisconnectOutlined />} 
+          />
+        </Col>
+      </Row>
+
       {/* Content */}
-      {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
-          <Spin tip="Loading workspaces..." />
-        </div>
-      ) : workspaces.length === 0 ? (
-        <Empty
-          description={error || "No workspaces found in this environment"}
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      ) : (
-        <>
-          {/* Search Bar */}
-          <div style={{ marginBottom: 16 }}>
-            <Search
-              placeholder="Search workspaces by name or ID"
-              allowClear
-              onSearch={value => setSearchText(value)}
-              onChange={e => setSearchText(e.target.value)}
-              style={{ width: 300 }}
-            />
-            {searchText && filteredWorkspaces.length !== workspaces.length && (
-              <div style={{ marginTop: 8 }}>
-                Showing {filteredWorkspaces.length} of {workspaces.length} workspaces
-              </div>
-            )}
+      <Card 
+        style={{ 
+          borderRadius: '8px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+        }}
+      >
+        {loading ? (
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
+            <Spin size="large" tip="Loading workspaces..." />
           </div>
-          
-          <Table
-            columns={columns}
-            dataSource={filteredWorkspaces}
-            rowKey="id"
-            pagination={{ pageSize: 10 }}
-            size="middle"
-            scroll={{ x: 'max-content' }}
-            onRow={(record) => ({
-              onClick: () => handleRowClick(record),
-              style: { cursor: 'pointer' }
-            })}
+        ) : workspaces.length === 0 ? (
+          <Empty
+            description={error || "No workspaces found in this environment"}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
           />
-        </>
-      )}
-    </Card>
+        ) : (
+          <>
+            {/* Search Bar */}
+            <div style={{ marginBottom: 20 }}>
+              <Search
+                placeholder="Search workspaces by name or ID"
+                allowClear
+                onSearch={value => setSearchText(value)}
+                onChange={e => setSearchText(e.target.value)}
+                style={{ width: 300 }}
+                size="large"
+              />
+              {searchText && filteredWorkspaces.length !== workspaces.length && (
+                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                  Showing {filteredWorkspaces.length} of {workspaces.length} workspaces
+                </div>
+              )}
+            </div>
+            
+            <Table
+              columns={columns}
+              dataSource={filteredWorkspaces}
+              rowKey="id"
+              pagination={{ 
+                pageSize: 10,
+                showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} workspaces`
+              }}
+              style={{ 
+                borderRadius: '8px', 
+                overflow: 'hidden'
+              }}
+              onRow={(record) => ({
+                onClick: () => handleRowClick(record),
+                style: { cursor: 'pointer' }
+              })}
+              rowClassName={() => 'workspace-row'}
+            />
+          </>
+        )}
+      </Card>
+    </div>
   );
 };
 

From 548e73b3586959c15cfbf68823f7b4c989909d85 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 13:46:08 +0500
Subject: [PATCH 17/37] update UI user groups tab

---
 .../environments/components/UserGroupsTab.tsx | 285 +++++++++++++-----
 1 file changed, 203 insertions(+), 82 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
index 701dcd43d..b9c2606e8 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space } from 'antd';
-import { SyncOutlined, TeamOutlined } from '@ant-design/icons';
+import { Card, Button, Alert, message, Table, Tag, Input, Space, Row, Col, Avatar, Tooltip } from 'antd';
+import { SyncOutlined, TeamOutlined, UserOutlined, UsergroupAddOutlined, SettingOutlined, CodeOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { UserGroup, UserGroupsTabStats } from '../types/userGroup.types';
@@ -89,83 +89,158 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
         group.groupId.toLowerCase().includes(searchText.toLowerCase()))
     : userGroups;
 
+  // Helper function to generate colors from strings
+  const stringToColor = (str: string) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  // Stat card component
+  const StatCard = ({ title, value, icon }: { title: string; value: number; icon: React.ReactNode }) => (
+    <Card 
+      style={{ 
+        height: '100%', 
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ fontSize: '14px', color: '#8c8c8c', marginBottom: '8px' }}>{title}</div>
+          <div style={{ fontSize: '24px', fontWeight: 600 }}>{value}</div>
+        </div>
+        <div style={{ 
+          fontSize: '28px', 
+          opacity: 0.8, 
+          color: '#722ed1',
+          padding: '12px',
+          backgroundColor: 'rgba(114, 46, 209, 0.1)',
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          {icon}
+        </div>
+      </div>
+    </Card>
+  );
+
   // Table columns
   const columns = [
     {
-      title: 'Name',
-      dataIndex: 'groupName',
-      key: 'groupName',
-      render: (text: string) => <span className="group-name">{text}</span>
-    },
-    {
-      title: 'ID',
-      dataIndex: 'groupId',
-      key: 'groupId',
-      ellipsis: true,
+      title: 'User Group',
+      key: 'group',
+      render: (group: UserGroup) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Avatar 
+            style={{ 
+              backgroundColor: stringToColor(group.groupName),
+              marginRight: 12
+            }}
+            shape="square"
+          >
+            {group.groupName.charAt(0).toUpperCase()}
+          </Avatar>
+          <div>
+            <div style={{ fontWeight: 500 }}>{group.groupName}</div>
+            <div style={{ fontSize: 12, color: '#8c8c8c', marginTop: 4 }}>
+              {group.groupId}
+            </div>
+          </div>
+        </div>
+      ),
     },
     {
       title: 'Type',
       key: 'type',
       render: (_: any, group: UserGroup) => {
-        if (group.allUsersGroup) return <Tag color="blue">All Users</Tag>;
-        if (group.devGroup) return <Tag color="purple">Developers</Tag>;
-        return <Tag color="default">Custom</Tag>;
+        if (group.allUsersGroup) return (
+          <Tag color="blue" style={{ borderRadius: '12px' }}>
+            <UserOutlined style={{ marginRight: 4 }} /> All Users
+          </Tag>
+        );
+        if (group.devGroup) return (
+          <Tag color="purple" style={{ borderRadius: '12px' }}>
+            <CodeOutlined style={{ marginRight: 4 }} /> Developers
+          </Tag>
+        );
+        return (
+          <Tag color="default" style={{ borderRadius: '12px' }}>
+            <SettingOutlined style={{ marginRight: 4 }} /> Custom
+          </Tag>
+        );
       },
     },
     {
       title: 'Members',
       key: 'members',
-      render: (_: any, group: UserGroup) => group.stats?.userCount || 0,
+      render: (_: any, group: UserGroup) => (
+        <Tooltip title="Total number of members in this group">
+          <Tag style={{ borderRadius: '12px', backgroundColor: '#f6f6f6', color: '#333' }}>
+            <UserOutlined style={{ marginRight: 4 }} /> {group.stats?.userCount || 0}
+          </Tag>
+        </Tooltip>
+      ),
     },
     {
       title: 'Admin Members',
       key: 'adminMembers',
-      render: (_: any, group: UserGroup) => group.stats?.adminUserCount || 0,
+      render: (_: any, group: UserGroup) => (
+        <Tooltip title="Number of admin users in this group">
+          <Tag style={{ borderRadius: '12px', backgroundColor: '#fff1f0', color: '#cf1322' }}>
+            <UserOutlined style={{ marginRight: 4 }} /> {group.stats?.adminUserCount || 0}
+          </Tag>
+        </Tooltip>
+      ),
     },
     {
       title: 'Created',
       dataIndex: 'createTime',
       key: 'createTime',
-      render: (createTime: number) => new Date(createTime).toLocaleDateString(),
+      render: (createTime: number) => (
+        <span style={{ color: '#8c8c8c' }}>
+          {new Date(createTime).toLocaleDateString()}
+        </span>
+      ),
     }
   ];
 
   return (
-    <Card>
-      {/* Header with refresh button */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
-        <Title level={5}>User Groups in this Environment</Title>
+    <div style={{ padding: '16px 0' }}>
+      {/* Header */}
+      <div style={{ 
+        display: "flex", 
+        justifyContent: "space-between", 
+        alignItems: "center", 
+        marginBottom: "24px",
+        background: 'linear-gradient(135deg, #722ed1 0%, #eb2f96 100%)',
+        padding: '20px 24px',
+        borderRadius: '8px',
+        color: 'white'
+      }}>
+        <div>
+          <Title level={4} style={{ color: 'white', margin: 0 }}>
+            <UsergroupAddOutlined style={{ marginRight: 10 }} /> User Groups
+          </Title>
+          <p style={{ marginBottom: 0 }}>Manage user groups in this environment</p>
+        </div>
         <Button 
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
+          type="primary"
+          ghost
         >
           Refresh
         </Button>
       </div>
 
-      {/* Stats display */}
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '16px' }}>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Total Groups</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.total}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>All Users Groups</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.allUsers}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Developer Groups</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.developers}</div>
-        </div>
-        <div>
-          <div style={{ fontSize: '14px', color: '#8c8c8c' }}>Custom Groups</div>
-          <div style={{ fontSize: '24px', fontWeight: 600 }}>{stats.custom}</div>
-        </div>
-      </div>
-
-      <Divider style={{ margin: "16px 0" }} />
-
       {/* Error display */}
       {error && (
         <Alert
@@ -173,7 +248,7 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
           description={error}
           type="error"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
@@ -184,49 +259,95 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
           description="Missing required configuration: API key or API service URL"
           type="warning"
           showIcon
-          style={{ marginBottom: "16px" }}
+          style={{ marginBottom: "20px" }}
         />
       )}
 
+      {/* Stats display */}
+      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+        <Col xs={24} sm={12} md={6}>
+          <StatCard 
+            title="Total Groups" 
+            value={stats.total} 
+            icon={<TeamOutlined />} 
+          />
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <StatCard 
+            title="All Users Groups" 
+            value={stats.allUsers} 
+            icon={<UserOutlined />} 
+          />
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <StatCard 
+            title="Developer Groups" 
+            value={stats.developers} 
+            icon={<CodeOutlined />} 
+          />
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <StatCard 
+            title="Custom Groups" 
+            value={stats.custom} 
+            icon={<SettingOutlined />} 
+          />
+        </Col>
+      </Row>
+
       {/* Content */}
-      {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
-          <Spin tip="Loading user groups..." />
-        </div>
-      ) : userGroups.length === 0 ? (
-        <Empty
-          description={error || "No user groups found in this environment"}
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      ) : (
-        <>
-          {/* Search Bar */}
-          <div style={{ marginBottom: 16 }}>
-            <Search
-              placeholder="Search user groups by name or ID"
-              allowClear
-              onSearch={value => setSearchText(value)}
-              onChange={e => setSearchText(e.target.value)}
-              style={{ width: 300 }}
-            />
-            {searchText && filteredUserGroups.length !== userGroups.length && (
-              <div style={{ marginTop: 8 }}>
-                Showing {filteredUserGroups.length} of {userGroups.length} user groups
-              </div>
-            )}
+      <Card 
+        style={{ 
+          borderRadius: '8px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+        }}
+      >
+        {loading ? (
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
+            <Spin size="large" tip="Loading user groups..." />
           </div>
-          
-          <Table
-            columns={columns}
-            dataSource={filteredUserGroups}
-            rowKey="groupId"
-            pagination={{ pageSize: 10 }}
-            size="middle"
-            scroll={{ x: 'max-content' }}
+        ) : userGroups.length === 0 ? (
+          <Empty
+            description={error || "No user groups found in this environment"}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
           />
-        </>
-      )}
-    </Card>
+        ) : (
+          <>
+            {/* Search Bar */}
+            <div style={{ marginBottom: 20 }}>
+              <Search
+                placeholder="Search user groups by name or ID"
+                allowClear
+                onSearch={value => setSearchText(value)}
+                onChange={e => setSearchText(e.target.value)}
+                style={{ width: 300 }}
+                size="large"
+              />
+              {searchText && filteredUserGroups.length !== userGroups.length && (
+                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                  Showing {filteredUserGroups.length} of {userGroups.length} user groups
+                </div>
+              )}
+            </div>
+            
+            <Table
+              columns={columns}
+              dataSource={filteredUserGroups}
+              rowKey="groupId"
+              pagination={{ 
+                pageSize: 10,
+                showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} user groups`
+              }}
+              style={{ 
+                borderRadius: '8px', 
+                overflow: 'hidden'
+              }}
+              rowClassName={() => 'group-row'}
+            />
+          </>
+        )}
+      </Card>
+    </div>
   );
 };
 

From 7f4d11f7f9e9cf2d175b1ba739ef01a6d046424f Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 14:32:38 +0500
Subject: [PATCH 18/37] update environment detail header

---
 .../environments/EnvironmentDetail.tsx        | 150 ++++++++++--------
 .../components/EnvironmentHeader.tsx          | 111 +++++++++++++
 .../components/ModernBreadcrumbs.tsx          |  48 ++++++
 3 files changed, 240 insertions(+), 69 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index 16dc4470a..ed5b3d8ce 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -3,19 +3,19 @@ import {
   Spin,
   Typography,
   Card,
-  Tag,
   Tabs,
   Alert,
   Descriptions,
   Menu,
   Button,
-  Breadcrumb,
+  Tag,
 } from "antd";
 import {
   LinkOutlined,
-  TeamOutlined,
+  HomeOutlined,
+  AppstoreOutlined,
+  UsergroupAddOutlined,
   EditOutlined,
-  HomeOutlined
 } from "@ant-design/icons";
 
 import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
@@ -24,6 +24,8 @@ import { Environment } from "./types/environment.types";
 import history from "@lowcoder-ee/util/history";
 import WorkspacesTab from "./components/WorkspacesTab";
 import UserGroupsTab from "./components/UserGroupsTab";
+import EnvironmentHeader from "./components/EnvironmentHeader";
+import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -42,6 +44,7 @@ const EnvironmentDetail: React.FC = () => {
   
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
+  const [activeTab, setActiveTab] = useState('workspaces');
   
   // Handle edit menu item click
   const handleEditClick = () => {
@@ -90,21 +93,27 @@ const EnvironmentDetail: React.FC = () => {
   }
 
   if (error || !environment) {
+    const errorItems = [
+      {
+        key: 'environments',
+        title: (
+          <span>
+            <HomeOutlined /> Environments
+          </span>
+        ),
+        onClick: () => history.push("/setting/environments")
+      },
+      {
+        key: 'notFound',
+        title: 'Not Found'
+      }
+    ];
+
     return (
       <div style={{ padding: "24px", flex: 1 }}>
-        <Breadcrumb style={{ marginBottom: "16px" }}>
-          <Breadcrumb.Item>
-            <span
-              style={{ cursor: "pointer" }}
-              onClick={() => history.push("/setting/environments")}
-            >
-              <HomeOutlined /> Environments
-            </span>
-          </Breadcrumb.Item>
-          <Breadcrumb.Item>Not Found</Breadcrumb.Item>
-        </Breadcrumb>
+        <ModernBreadcrumbs items={errorItems} />
         
-        <Card>
+        <Card style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
           <div style={{ textAlign: "center", padding: "40px 0" }}>
             <Title level={3} style={{ color: "#ff4d4f" }}>
               Environment Not Found
@@ -124,58 +133,53 @@ const EnvironmentDetail: React.FC = () => {
       </div>
     );
   }
+
+  const breadcrumbItems = [
+    {
+      key: 'environments',
+      title: (
+        <span>
+          <HomeOutlined /> Environments
+        </span>
+      ),
+      onClick: () => history.push("/setting/environments")
+    },
+    {
+      key: 'currentEnvironment',
+      title: environment.environmentName
+    }
+  ];
   
+  // Get environment type tag color
+  const getEnvironmentTypeColor = () => {
+    switch(environment.environmentType) {
+      case 'production':
+        return 'red';
+      case 'testing':
+        return 'orange';
+      default:
+        return 'blue';
+    }
+  };
+
   return (
     <div
       className="environment-detail-container"
       style={{ padding: "24px", flex: 1 }}
     >
-      <Breadcrumb style={{ marginBottom: "16px" }}>
-        <Breadcrumb.Item>
-          <span
-            style={{ cursor: "pointer" }}
-            onClick={() => history.push("/setting/environments")}
-          >
-            <HomeOutlined /> Environments
-          </span>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
-      </Breadcrumb>
+      <ModernBreadcrumbs items={breadcrumbItems} />
 
-      {/* Header with environment name and controls */}
-      <div
-        className="environment-header"
-        style={{
-          marginBottom: "24px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "flex-start",
-          flexWrap: "wrap",
-          gap: "16px",
-        }}
-      >
-        <div style={{ flex: "1 1 auto", minWidth: "200px" }}>
-          <Title level={3} style={{ margin: 0, wordBreak: "break-word" }}>
-            {environment.environmentName || "Unnamed Environment"}
-          </Title>
-          <Text type="secondary">ID: {environment.environmentId}</Text>
-        </div>
-        <div style={{ flexShrink: 0 }}>
-          <Button
-            icon={<EditOutlined />}
-            onClick={handleEditClick}
-            type="primary"
-          >
-            Edit Environment
-          </Button>
-        </div>
-      </div>
+      {/* Environment Header Component */}
+      <EnvironmentHeader 
+        environment={environment} 
+        onEditClick={handleEditClick} 
+      />
 
       {/* Basic Environment Information Card - improved responsiveness */}
       <Card
         title="Environment Overview"
-        style={{ marginBottom: "24px" }}
-        extra={environment.isMaster && <Tag color="green">Master</Tag>}
+        style={{ marginBottom: "24px", borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}
+        className="environment-overview-card"
       >
         <Descriptions
           bordered
@@ -198,22 +202,17 @@ const EnvironmentDetail: React.FC = () => {
           </Descriptions.Item>
           <Descriptions.Item label="Environment Type">
             <Tag
-              color={
-                environment.environmentType === "production"
-                  ? "red"
-                  : environment.environmentType === "testing"
-                    ? "orange"
-                    : "blue"
-              }
+              color={getEnvironmentTypeColor()}
+              style={{ borderRadius: '12px' }}
             >
               {environment.environmentType}
             </Tag>
           </Descriptions.Item>
           <Descriptions.Item label="API Key Status">
             {environment.environmentApikey ? (
-              <Tag color="green">Configured</Tag>
+              <Tag color="green" style={{ borderRadius: '12px' }}>Configured</Tag>
             ) : (
-              <Tag color="red">Not Configured</Tag>
+              <Tag color="red" style={{ borderRadius: '12px' }}>Not Configured</Tag>
             )}
           </Descriptions.Item>
           <Descriptions.Item label="Master Environment">
@@ -223,8 +222,21 @@ const EnvironmentDetail: React.FC = () => {
       </Card>
 
       {/* Tabs for Workspaces and User Groups */}
-      <Tabs defaultActiveKey="workspaces">
-        <TabPane tab="Workspaces" key="workspaces">
+      <Tabs 
+        defaultActiveKey="workspaces"
+        activeKey={activeTab}
+        onChange={setActiveTab}
+        className="modern-tabs"
+        type="card"
+      >
+        <TabPane 
+          tab={
+            <span>
+              <AppstoreOutlined /> Workspaces
+            </span>
+          } 
+          key="workspaces"
+        >
           {/* Using our new standalone WorkspacesTab component */}
           <WorkspacesTab environment={environment} />
         </TabPane>
@@ -232,7 +244,7 @@ const EnvironmentDetail: React.FC = () => {
         <TabPane
           tab={
             <span>
-              <TeamOutlined /> User Groups
+              <UsergroupAddOutlined /> User Groups
             </span>
           }
           key="userGroups"
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
new file mode 100644
index 000000000..78a3e93ca
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Button, Tag, Typography, Row, Col } from 'antd';
+import { EditOutlined, EnvironmentOutlined } from '@ant-design/icons';
+import { Environment } from '../types/environment.types';
+
+const { Title, Text } = Typography;
+
+interface EnvironmentHeaderProps {
+  environment: Environment;
+  onEditClick: () => void;
+}
+
+/**
+ * Header component for environment details
+ * Displays environment name, ID, type, and controls
+ */
+const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({ 
+  environment, 
+  onEditClick 
+}) => {
+  // Determine header gradient based on environment type
+  const getHeaderGradient = () => {
+    switch(environment.environmentType) {
+      case 'production':
+        return 'linear-gradient(135deg, #f5222d 0%, #fa8c16 100%)';
+      case 'testing':
+        return 'linear-gradient(135deg, #fa8c16 0%, #faad14 100%)';
+      default:
+        return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
+    }
+  };
+
+  // Get environment type tag color
+  const getEnvironmentTypeColor = () => {
+    switch(environment.environmentType) {
+      case 'production':
+        return 'red';
+      case 'testing':
+        return 'orange';
+      default:
+        return 'blue';
+    }
+  };
+
+  return (
+    <div
+      className="environment-header"
+      style={{
+        marginBottom: "24px",
+        background: getHeaderGradient(),
+        padding: '20px 24px',
+        borderRadius: '8px',
+        color: 'white',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+      }}
+    >
+      <Row justify="space-between" align="middle" gutter={[16, 16]}>
+        <Col xs={24} sm={18}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <div className="environment-icon" style={{
+              fontSize: '32px',
+              backgroundColor: 'rgba(255,255,255,0.2)',
+              width: '64px',
+              height: '64px',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}>
+              <EnvironmentOutlined />
+            </div>
+            <div>
+              <Title level={3} style={{ margin: '0 0 4px 0', color: 'white' }}>
+                {environment.environmentName || "Unnamed Environment"}
+              </Title>
+              <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
+                <Text style={{ color: 'rgba(255,255,255,0.85)' }}>
+                  ID: {environment.environmentId}
+                </Text>
+                <Tag 
+                  color={getEnvironmentTypeColor()}
+                  style={{ marginLeft: 0, borderRadius: '12px' }}
+                >
+                  {environment.environmentType}
+                </Tag>
+                {environment.isMaster && (
+                  <Tag color="green" style={{ marginLeft: 0, borderRadius: '12px' }}>
+                    Master
+                  </Tag>
+                )}
+              </div>
+            </div>
+          </div>
+        </Col>
+        <Col xs={24} sm={6} style={{ textAlign: 'right' }}>
+          <Button
+            icon={<EditOutlined />}
+            onClick={onEditClick}
+            type="primary"
+            ghost
+            size="large"
+          >
+            Edit Environment
+          </Button>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default EnvironmentHeader;
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
new file mode 100644
index 000000000..1e8e61879
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import { Breadcrumb } from 'antd';
+import { BreadcrumbProps } from 'antd/lib/breadcrumb';
+
+interface ModernBreadcrumbsProps extends BreadcrumbProps {
+  /**
+   * Items to display in the breadcrumb
+   */
+  items?: {
+    key: string;
+    title: ReactNode;
+    onClick?: () => void;
+  }[];
+}
+
+/**
+ * Modern styled breadcrumb component with consistent styling
+ */
+const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
+  return (
+    <div className="modern-breadcrumb" style={{
+      background: '#f0f2f5',
+      padding: '12px 24px',
+      borderRadius: '8px',
+      marginBottom: '20px',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+    }}>
+      <Breadcrumb {...props}>
+        {items.map(item => (
+          <Breadcrumb.Item key={item.key}>
+            {item.onClick ? (
+              <span
+                style={{ cursor: "pointer" }}
+                onClick={item.onClick}
+              >
+                {item.title}
+              </span>
+            ) : (
+              item.title
+            )}
+          </Breadcrumb.Item>
+        ))}
+      </Breadcrumb>
+    </div>
+  );
+};
+
+export default ModernBreadcrumbs; 
\ No newline at end of file

From 9a8329e68e363f071229d86a8a2e0dda26ed6aa2 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 14:50:28 +0500
Subject: [PATCH 19/37] create utils for different env colors

---
 .../environments/EnvironmentDetail.tsx        | 25 ++-----------
 .../components/EnvironmentHeader.tsx          | 29 ++-------------
 .../environments/utils/environmentUtils.ts    | 37 ++++++++++++++++---
 3 files changed, 37 insertions(+), 54 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index ed5b3d8ce..ec75728ba 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -26,6 +26,7 @@ import WorkspacesTab from "./components/WorkspacesTab";
 import UserGroupsTab from "./components/UserGroupsTab";
 import EnvironmentHeader from "./components/EnvironmentHeader";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
+import { getEnvironmentTagColor } from "./utils/environmentUtils";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -74,15 +75,7 @@ const EnvironmentDetail: React.FC = () => {
     }
   };
   
-  // Dropdown menu for environment actions
-  const actionsMenu = (
-    <Menu>
-      <Menu.Item key="edit" icon={<EditOutlined />} onClick={handleEditClick}>
-        Edit Environment
-      </Menu.Item>
-      {/* Add more menu items here if needed */}
-    </Menu>
-  );
+ 
   
   if (isLoading) {
     return (
@@ -149,18 +142,6 @@ const EnvironmentDetail: React.FC = () => {
       title: environment.environmentName
     }
   ];
-  
-  // Get environment type tag color
-  const getEnvironmentTypeColor = () => {
-    switch(environment.environmentType) {
-      case 'production':
-        return 'red';
-      case 'testing':
-        return 'orange';
-      default:
-        return 'blue';
-    }
-  };
 
   return (
     <div
@@ -202,7 +183,7 @@ const EnvironmentDetail: React.FC = () => {
           </Descriptions.Item>
           <Descriptions.Item label="Environment Type">
             <Tag
-              color={getEnvironmentTypeColor()}
+              color={getEnvironmentTagColor(environment.environmentType)}
               style={{ borderRadius: '12px' }}
             >
               {environment.environmentType}
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
index 78a3e93ca..9d6bb4dba 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, Tag, Typography, Row, Col } from 'antd';
 import { EditOutlined, EnvironmentOutlined } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
+import { getEnvironmentTagColor, getEnvironmentHeaderGradient } from '../utils/environmentUtils';
 
 const { Title, Text } = Typography;
 
@@ -18,36 +19,12 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
   environment, 
   onEditClick 
 }) => {
-  // Determine header gradient based on environment type
-  const getHeaderGradient = () => {
-    switch(environment.environmentType) {
-      case 'production':
-        return 'linear-gradient(135deg, #f5222d 0%, #fa8c16 100%)';
-      case 'testing':
-        return 'linear-gradient(135deg, #fa8c16 0%, #faad14 100%)';
-      default:
-        return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
-    }
-  };
-
-  // Get environment type tag color
-  const getEnvironmentTypeColor = () => {
-    switch(environment.environmentType) {
-      case 'production':
-        return 'red';
-      case 'testing':
-        return 'orange';
-      default:
-        return 'blue';
-    }
-  };
-
   return (
     <div
       className="environment-header"
       style={{
         marginBottom: "24px",
-        background: getHeaderGradient(),
+        background: getEnvironmentHeaderGradient(environment.environmentType),
         padding: '20px 24px',
         borderRadius: '8px',
         color: 'white',
@@ -78,7 +55,7 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
                   ID: {environment.environmentId}
                 </Text>
                 <Tag 
-                  color={getEnvironmentTypeColor()}
+                  color={getEnvironmentTagColor(environment.environmentType)}
                   style={{ marginLeft: 0, borderRadius: '12px' }}
                 >
                   {environment.environmentType}
diff --git a/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts b/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts
index f3f5d5c1b..59a21f859 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts
@@ -4,7 +4,7 @@
 
 /**
  * Get the appropriate color for an environment tag based on its type
- * @param envType The environment type/stage (e.g. 'PROD', 'DEV', 'STAGING')
+ * @param envType The environment type/stage (DEV, TEST, PREPROD, PROD)
  * @returns A color string to use with Ant Design's Tag component
  */
 export const getEnvironmentTagColor = (envType: string | undefined): string => {
@@ -14,27 +14,52 @@ export const getEnvironmentTagColor = (envType: string | undefined): string => {
   const type = envType.toUpperCase();
   
   switch (type) {
-    // Production environment
     case 'PROD':
       return 'red'; // Red for production - indicates caution
     
-    // Pre-production environment
     case 'PREPROD':
       return 'orange'; // Orange for pre-production
     
-    // Test environment
     case 'TEST':
       return 'purple'; // Purple for test environment
     
-    // Development environment
     case 'DEV':
-      return 'green'; // Green for development - safe to use
+      return 'blue'; // Blue for development
       
     default:
       return 'default'; // Default gray for unknown types
   }
 };
 
+/**
+ * Get the appropriate background gradient for an environment based on its type
+ * @param envType The environment type/stage (DEV, TEST, PREPROD, PROD)
+ * @returns A CSS linear gradient string for the background
+ */
+export const getEnvironmentHeaderGradient = (envType: string | undefined): string => {
+  if (!envType) return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
+  
+  // Normalize to uppercase for consistent comparison
+  const type = envType.toUpperCase();
+  
+  switch (type) {
+    case 'PROD':
+      return 'linear-gradient(135deg, #f5222d 0%, #fa8c16 100%)';
+    
+    case 'PREPROD':
+      return 'linear-gradient(135deg, #fa8c16 0%, #faad14 100%)';
+    
+    case 'TEST':
+      return 'linear-gradient(135deg, #722ed1 0%, #b37feb 100%)';
+    
+    case 'DEV':
+      return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
+      
+    default:
+      return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
+  }
+};
+
 /**
  * Format an environment type for display
  * @param envType The environment type string

From b3799a019c547c86ce285e3d41d2413791ee5d47 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 15:09:00 +0500
Subject: [PATCH 20/37] update environments listing page

---
 .../setting/environments/EnvironmentsList.tsx | 238 +++++++++++++++---
 .../components/EnvironmentsTable.tsx          | 221 +++++++++-------
 2 files changed, 333 insertions(+), 126 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
index ead872249..1b3372a04 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from "react";
-import { Typography, Alert, Input, Button, Space, Empty } from "antd";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Typography, Alert, Input, Button, Space, Empty, Card, Spin, Row, Col, Tooltip, Badge } from "antd";
+import { SearchOutlined, ReloadOutlined, PlusOutlined, EnvironmentOutlined } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
 import { useEnvironmentContext } from "./context/EnvironmentContext";
 import { Environment } from "./types/environment.types";
 import EnvironmentsTable from "./components/EnvironmentsTable";
 import { buildEnvironmentId } from "@lowcoder-ee/constants/routesURL";
-import EditEnvironmentModal from "./components/EditEnvironmentModal";
+import { getEnvironmentTagColor } from "./utils/environmentUtils";
 
-const { Title } = Typography;
+const { Title, Text } = Typography;
 
 /**
  * Environment Listing Page Component
@@ -19,13 +19,13 @@ const EnvironmentsList: React.FC = () => {
   const { 
     environments, 
     isLoading, 
-    error, 
+    error,
+    refreshEnvironments 
   } = useEnvironmentContext();
 
-  console.log("Environments:", environments);
-
   // State for search input
   const [searchText, setSearchText] = useState("");
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
   // Hook for navigation
   const history = useHistory();
@@ -46,20 +46,160 @@ const EnvironmentsList: React.FC = () => {
     history.push(buildEnvironmentId(record.environmentId));
   };
 
+  // Handle refresh
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await refreshEnvironments();
+    setIsRefreshing(false);
+  };
+
+  // Count environment types
+  const environmentCounts = environments.reduce((counts, env) => {
+    const type = env.environmentType.toUpperCase();
+    counts[type] = (counts[type] || 0) + 1;
+    return counts;
+  }, {} as Record<string, number>);
+
   return (
-    <div className="environments-container" style={{ padding: "24px", flex:1 }}>
-      {/* Header section with title and controls */}
+    <div 
+      className="environments-container" 
+      style={{ 
+        padding: "24px",
+        flex: 1,
+        minWidth: "1000px",
+         // Ensure minimum width to prevent excessive shrinking
+      }}
+    >
+      {/* Modern gradient header */}
       <div
         className="environments-header"
         style={{
           marginBottom: "24px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
+          background: 'linear-gradient(135deg, #0050b3 0%, #1890ff 100%)',
+          padding: '24px 32px',
+          borderRadius: '12px',
+          color: 'white',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
         }}
       >
-        <Title level={3}>Environments</Title>
-        <Space>
+        <Row justify="space-between" align="middle" gutter={[16, 16]}>
+          <Col xs={24} sm={16}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
+              <div style={{
+                fontSize: '36px',
+                backgroundColor: 'rgba(255,255,255,0.2)',
+                width: '72px',
+                height: '72px',
+                borderRadius: '50%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
+              }}>
+                <EnvironmentOutlined />
+              </div>
+              <div>
+                <Title level={2} style={{ margin: '0 0 4px 0', color: 'white' }}>
+                  Environments
+                </Title>
+                <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: '16px' }}>
+                  Manage your deployment environments across dev, test, preprod, and production
+                </Text>
+              </div>
+            </div>
+          </Col>
+          <Col xs={24} sm={8} style={{ textAlign: 'right' }}>
+            <Space size="middle">
+              <Button
+                icon={<ReloadOutlined spin={isRefreshing} />}
+                onClick={handleRefresh}
+                type="primary"
+                ghost
+                loading={isLoading && !isRefreshing}
+                size="large"
+              >
+                Refresh
+              </Button>
+              <Button
+                icon={<PlusOutlined />}
+                type="primary"
+                size="large"
+              >
+                New Environment
+              </Button>
+            </Space>
+          </Col>
+        </Row>
+      </div>
+
+      {/* Environment type stats */}
+      {environments.length > 0 && (
+        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+          <Col span={24}>
+            <Card 
+              title="Environment Overview" 
+              style={{ 
+                borderRadius: '12px', 
+                boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+              }}
+              headStyle={{ 
+                borderBottom: '1px solid #f0f0f0',
+                padding: '16px 24px'
+              }}
+              bodyStyle={{ padding: '24px' }}
+            >
+              <Row gutter={[32, 16]} justify="space-around">
+                <Col>
+                  <Tooltip title="Total number of environments">
+                    <div style={{ textAlign: 'center' }}>
+                      <div style={{ fontSize: '38px', fontWeight: 600, color: '#1890ff' }}>
+                        {environments.length}
+                      </div>
+                      <div style={{ fontSize: '14px', color: '#8c8c8c', marginTop: '4px' }}>
+                        Total Environments
+                      </div>
+                    </div>
+                  </Tooltip>
+                </Col>
+
+                {['PROD', 'PREPROD', 'TEST', 'DEV'].map(type => (
+                  <Col key={type}>
+                    <Tooltip title={`Number of ${type} environments`}>
+                      <div style={{ textAlign: 'center' }}>
+                        <div style={{ 
+                          fontSize: '38px', 
+                          fontWeight: 600, 
+                          color: getEnvironmentTagColor(type) === 'default' ? '#8c8c8c' : getEnvironmentTagColor(type) 
+                        }}>
+                          {environmentCounts[type] || 0}
+                        </div>
+                        <div style={{ fontSize: '14px', color: '#8c8c8c', marginTop: '4px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '6px' }}>
+                          <Badge color={getEnvironmentTagColor(type)} /> 
+                          {type} Environments
+                        </div>
+                      </div>
+                    </Tooltip>
+                  </Col>
+                ))}
+              </Row>
+            </Card>
+          </Col>
+        </Row>
+      )}
+
+      {/* Main content card */}
+      <Card 
+        title="Environment List" 
+        style={{ 
+          borderRadius: '12px', 
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+        }}
+        headStyle={{ 
+          borderBottom: '1px solid #f0f0f0',
+          padding: '16px 24px'
+        }}
+        bodyStyle={{ padding: '24px' }}
+        extra={
           <Input
             placeholder="Search environments"
             value={searchText}
@@ -68,34 +208,52 @@ const EnvironmentsList: React.FC = () => {
             prefix={<SearchOutlined />}
             allowClear
           />
-        </Space>
-      </div>
+        }
+      >
+        {/* Error handling */}
+        {error && (
+          <Alert
+            message="Error loading environments"
+            description={error}
+            type="error"
+            showIcon
+            style={{ marginBottom: "24px" }}
+          />
+        )}
 
-      {/* Error handling */}
-      {error && (
-        <Alert
-          message="Error loading environments"
-          description={error}
-          type="error"
-          showIcon
-          style={{ marginBottom: "24px" }}
-        />
-      )}
+        {/* Loading, empty state or table */}
+        {isLoading ? (
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '60px 0' }}>
+            <Spin size="large" tip="Loading environments..." />
+          </div>
+        ) : environments.length === 0 && !error ? (
+          <Empty
+            description="No environments found"
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            style={{ padding: '60px 0' }}
+          />
+        ) : filteredEnvironments.length === 0 ? (
+          <Empty
+            description="No environments match your search"
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            style={{ padding: '60px 0' }}
+          />
+        ) : (
+          /* Table component */
+          <EnvironmentsTable
+            environments={filteredEnvironments}
+            loading={isLoading}
+            onRowClick={handleRowClick}
+          />
+        )}
 
-      {/* Empty state handling */}
-      {!isLoading && environments.length === 0 && !error ? (
-        <Empty
-          description="No environments found"
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      ) : (
-        /* Table component */
-        <EnvironmentsTable
-          environments={filteredEnvironments}
-          loading={isLoading}
-          onRowClick={handleRowClick}
-        />
-      )}
+        {/* Results counter when searching */}
+        {searchText && filteredEnvironments.length !== environments.length && (
+          <div style={{ marginTop: 16, color: '#8c8c8c', textAlign: 'right' }}>
+            Showing {filteredEnvironments.length} of {environments.length} environments
+          </div>
+        )}
+      </Card>
     </div>
   );
 };
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
index 4f9150a9b..b5bdf7475 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -1,115 +1,164 @@
 import React from 'react';
-import { Table, Tag, Button, Tooltip, Space } from 'antd';
-import { EditOutlined, AuditOutlined} from '@ant-design/icons';
+import { Table, Tag, Button, Tooltip, Space, Card, Row, Col, Typography, Avatar } from 'antd';
+import { EditOutlined, AuditOutlined, LinkOutlined, EnvironmentOutlined, StarFilled } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
 import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
 
-
+const { Text, Title } = Typography;
 
 interface EnvironmentsTableProps {
   environments: Environment[];
   loading: boolean;
   onRowClick: (record: Environment) => void;
-
 }
 
 /**
- * Table component for displaying environments
+ * Modern card-based layout for displaying environments
  */
 const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
   environments,
   loading,
   onRowClick,
 }) => {
-   // Open audit page in new tab
-   const openAuditPage = (environmentId: string, e: React.MouseEvent) => {
+  // Open audit page in new tab
+  const openAuditPage = (environmentId: string, e: React.MouseEvent) => {
     e.stopPropagation(); // Prevent row click from triggering
     const auditUrl = `/setting/audit?environmentId=${environmentId}`;
     window.open(auditUrl, '_blank');
   };
 
+  // Generate background color for environment avatar
+  const getAvatarColor = (name: string) => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    const type = name.toUpperCase();
+    if (type === 'PROD') return '#f5222d';
+    if (type === 'PREPROD') return '#fa8c16';
+    if (type === 'TEST') return '#722ed1';
+    if (type === 'DEV') return '#1890ff';
+    
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
 
-  // Define table columns
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'environmentName',
-      key: 'environmentName',
-      render: (name: string) => name || 'Unnamed Environment',
-    },
-    {
-      title: 'Domain',
-      dataIndex: 'environmentFrontendUrl',
-      key: 'environmentFrontendUrl',
-      render: (url: string) => url || 'No URL',
-    },
-    {
-      title: 'ID',
-      dataIndex: 'environmentId',
-      key: 'environmentId',
-    },
-    {
-      title: 'Stage',
-      dataIndex: 'environmentType',
-      key: 'environmentType',
-      render: (type: string) => (
-        <Tag color={getEnvironmentTagColor(type)}>
-          {formatEnvironmentType(type)}
-        </Tag>
-      ),
-    },
-    {
-      title: 'Master',
-      dataIndex: 'isMaster',
-      key: 'isMaster',
-      render: (isMaster: boolean) => (
-        <Tag color={isMaster ? 'green' : 'default'}>
-          {isMaster ? 'Yes' : 'No'}
-        </Tag>
-      ),
-    },
-    {
-      title: 'Actions',
-      key: 'actions',
-      render: (_: any, record: Environment) => (
-        <Space size="middle" onClick={e => e.stopPropagation()}>
-          <Tooltip title="View Audit Logs">
-            <Button 
-              icon={<AuditOutlined />} 
-              size="small"
-              onClick={(e) => openAuditPage(record.environmentId, e)}
-            >
-              Audit
-            </Button>
-          </Tooltip>
-        </Space>
-      ),
-    },
-  ];
+  // For card display, we'll use a custom layout instead of Table
+  if (environments.length === 0) {
+    return null;
+  }
 
   return (
-    <Table
-      dataSource={environments}
-      columns={columns}
-      rowKey="environmentId"
-      loading={loading}
-      pagination={{ 
-        pageSize: 10,
-        showSizeChanger: true,
-        pageSizeOptions: ['10', '20', '50']
-      }}
-      onRow={(record) => ({
-        onClick: () => onRowClick(record),
-        style: { 
-          cursor: 'pointer',
-          transition: 'background-color 0.3s',
-          ':hover': {
-            backgroundColor: '#f5f5f5',
-          }
-        }
-      })}
-      rowClassName={() => 'environment-row'}
-    />
+    <div className="environments-grid">
+      <Row gutter={[16, 16]}>
+        {environments.map(env => (
+          <Col xs={24} sm={24} md={12} lg={8} xl={8} key={env.environmentId}>
+            <Card
+              hoverable
+              style={{ 
+                borderRadius: '8px',
+                overflow: 'hidden',
+                height: '100%',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.02)',
+                border: '1px solid #f0f0f0'
+              }}
+              bodyStyle={{ padding: '20px' }}
+              onClick={() => onRowClick(env)}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                  <Avatar
+                    style={{ 
+                      backgroundColor: getAvatarColor(env.environmentType), 
+                      display: 'flex', 
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '20px'
+                    }}
+                    size={48}
+                    icon={<EnvironmentOutlined />}
+                  />
+                  <div>
+                    <Title level={5} style={{ margin: 0, marginBottom: '4px' }}>
+                      {env.environmentName || 'Unnamed Environment'}
+                      {env.isMaster && (
+                        <Tooltip title="Master Environment">
+                          <StarFilled style={{ color: '#faad14', marginLeft: '8px', fontSize: '14px' }} />
+                        </Tooltip>
+                      )}
+                    </Title>
+                    <Tag 
+                      color={getEnvironmentTagColor(env.environmentType)}
+                      style={{ borderRadius: '12px' }}
+                    >
+                      {formatEnvironmentType(env.environmentType)}
+                    </Tag>
+                  </div>
+                </div>
+                <div>
+                  <Tooltip title="View Audit Logs" placement="top">
+                    <Button
+                      type="text"
+                      icon={<AuditOutlined />}
+                      onClick={(e) => openAuditPage(env.environmentId, e)}
+                      size="small"
+                      style={{ borderRadius: '50%', width: '32px', height: '32px' }}
+                    />
+                  </Tooltip>
+                </div>
+              </div>
+              
+              <div style={{ padding: '12px 0', borderTop: '1px solid #f5f5f5', marginTop: '4px' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Text type="secondary" style={{ fontSize: '13px' }}>ID:</Text>
+                    <Text style={{ fontSize: '13px', fontFamily: 'monospace' }} copyable={{ tooltips: ['Copy ID', 'Copied!'] }}>
+                      {env.environmentId}
+                    </Text>
+                  </div>
+                  
+                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Text type="secondary" style={{ fontSize: '13px' }}>Domain:</Text>
+                    {env.environmentFrontendUrl ? (
+                      <a 
+                        href={env.environmentFrontendUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                        style={{ fontSize: '13px' }}
+                      >
+                        {env.environmentFrontendUrl.replace(/^https?:\/\//, '')}
+                        <LinkOutlined style={{ marginLeft: 4, fontSize: '12px' }} />
+                      </a>
+                    ) : (
+                      <Text style={{ fontSize: '13px' }}>—</Text>
+                    )}
+                  </div>
+                  
+                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Text type="secondary" style={{ fontSize: '13px' }}>Master:</Text>
+                    <Text style={{ fontSize: '13px' }}>
+                      {env.isMaster ? 'Yes' : 'No'}
+                    </Text>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+      
+      {environments.length > 10 && (
+        <div style={{ textAlign: 'center', margin: '20px 0' }}>
+          <Text type="secondary">
+            Showing all {environments.length} environments
+          </Text>
+        </div>
+      )}
+    </div>
   );
 };
 

From 933878e2733469c20f586eaee86a25754ff5f942 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 18:50:10 +0500
Subject: [PATCH 21/37] add breadcrumbs component and fix tabs styling

---
 .../setting/environments/WorkspaceDetail.tsx  | 61 +++++++++++--------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index 8c87b2ef6..7d9abb845 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -6,7 +6,6 @@ import {
   Card, 
   Tabs, 
   Button,
-  Breadcrumb,
   Space,
   Tag,
   Switch, 
@@ -32,6 +31,7 @@ import { workspaceConfig } from "./config/workspace.config";
 import AppsTab from "./components/AppsTab";
 import DataSourcesTab from "./components/DataSourcesTab";
 import QueriesTab from "./components/QueriesTab";
+import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
@@ -79,25 +79,35 @@ const WorkspaceDetail: React.FC = () => {
     );
   }
 
+  const breadcrumbItems = [
+    {
+      key: 'environments',
+      title: (
+        <span>
+          <HomeOutlined /> Environments
+        </span>
+      ),
+      onClick: () => history.push("/setting/environments")
+    },
+    {
+      key: 'environment',
+      title: (
+        <span>
+          <TeamOutlined /> {environment.environmentName}
+        </span>
+      ),
+      onClick: () => history.push(`/setting/environments/${environment.environmentId}`)
+    },
+    {
+      key: 'workspace',
+      title: workspace.name
+    }
+  ];
+
   return (
     <div className="workspace-detail-container" style={{ padding: "24px", flex: 1 }}>
-      {/* Breadcrumb navigation */}
-      <Breadcrumb style={{ marginBottom: "16px" }}>
-        <Breadcrumb.Item>
-          <span style={{ cursor: "pointer" }} onClick={() => history.push("/setting/environments")}>
-            <HomeOutlined /> Environments
-          </span>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>
-          <span
-            style={{ cursor: "pointer" }}
-            onClick={() => history.push(`/setting/environments/${environment.environmentId}`)}
-          >
-            <TeamOutlined /> {environment.environmentName}
-          </span>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>{workspace.name}</Breadcrumb.Item>
-      </Breadcrumb>
+      {/* Modern Breadcrumbs navigation */}
+      <ModernBreadcrumbs items={breadcrumbItems} />
 
       {/* Workspace header with details and actions */}
       <Card style={{ marginBottom: "24px" }} bodyStyle={{ padding: "16px 24px" }}>
@@ -158,14 +168,13 @@ const WorkspaceDetail: React.FC = () => {
       </Card>
 
       {/* Tabs for Apps, Data Sources, and Queries */}
-      <Tabs defaultActiveKey="apps">
-      // Replace the Apps TabPane in WorkspaceDetail.tsx with this:
-          <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
-            <AppsTab
-              environment={environment}
-              workspace={workspace}
-            />
-          </TabPane>
+      <Tabs defaultActiveKey="apps" className="modern-tabs" type="card">
+        <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
+          <AppsTab
+            environment={environment}
+            workspace={workspace}
+          />
+        </TabPane>
 
         <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
           <DataSourcesTab

From 8880f3eb8481d42dbcf74d39cf607711c4b4662f Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 19:03:54 +0500
Subject: [PATCH 22/37] fix environments icon on listing page

---
 .../pages/setting/environments/EnvironmentsList.tsx   | 11 ++---------
 .../environments/components/EnvironmentHeader.tsx     |  4 ++--
 .../environments/components/EnvironmentsTable.tsx     |  4 ++--
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
index 1b3372a04..3a1f6f385 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Typography, Alert, Input, Button, Space, Empty, Card, Spin, Row, Col, Tooltip, Badge } from "antd";
-import { SearchOutlined, ReloadOutlined, PlusOutlined, EnvironmentOutlined } from "@ant-design/icons";
+import { SearchOutlined, ReloadOutlined,  CloudServerOutlined} from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
 import { useEnvironmentContext } from "./context/EnvironmentContext";
 import { Environment } from "./types/environment.types";
@@ -96,7 +96,7 @@ const EnvironmentsList: React.FC = () => {
                 justifyContent: 'center',
                 boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
               }}>
-                <EnvironmentOutlined />
+                <CloudServerOutlined />
               </div>
               <div>
                 <Title level={2} style={{ margin: '0 0 4px 0', color: 'white' }}>
@@ -120,13 +120,6 @@ const EnvironmentsList: React.FC = () => {
               >
                 Refresh
               </Button>
-              <Button
-                icon={<PlusOutlined />}
-                type="primary"
-                size="large"
-              >
-                New Environment
-              </Button>
             </Space>
           </Col>
         </Row>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
index 9d6bb4dba..58fea8066 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Tag, Typography, Row, Col } from 'antd';
-import { EditOutlined, EnvironmentOutlined } from '@ant-design/icons';
+import { EditOutlined, CloudServerOutlined } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
 import { getEnvironmentTagColor, getEnvironmentHeaderGradient } from '../utils/environmentUtils';
 
@@ -44,7 +44,7 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
               alignItems: 'center',
               justifyContent: 'center'
             }}>
-              <EnvironmentOutlined />
+              <CloudServerOutlined />
             </div>
             <div>
               <Title level={3} style={{ margin: '0 0 4px 0', color: 'white' }}>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
index b5bdf7475..16f9fc6fd 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, Tag, Button, Tooltip, Space, Card, Row, Col, Typography, Avatar } from 'antd';
-import { EditOutlined, AuditOutlined, LinkOutlined, EnvironmentOutlined, StarFilled } from '@ant-design/icons';
+import { EditOutlined, AuditOutlined, LinkOutlined, EnvironmentOutlined, StarFilled, CloudServerOutlined } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
 import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
 
@@ -79,7 +79,7 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
                       fontSize: '20px'
                     }}
                     size={48}
-                    icon={<EnvironmentOutlined />}
+                    icon={<CloudServerOutlined />}
                   />
                   <div>
                     <Title level={5} style={{ margin: 0, marginBottom: '4px' }}>

From b97f125f24b8e552a6aef085498bd4bfe961aff7 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 19:51:43 +0500
Subject: [PATCH 23/37] fix refresh buttons

---
 .../pages/setting/environments/components/AppsTab.tsx  |  9 +++++++--
 .../setting/environments/components/DataSourcesTab.tsx |  9 +++++++--
 .../environments/components/EnvironmentHeader.tsx      | 10 ++++++++--
 .../setting/environments/components/QueriesTab.tsx     |  9 +++++++--
 .../setting/environments/components/UserGroupsTab.tsx  |  9 +++++++--
 .../setting/environments/components/WorkspacesTab.tsx  |  9 +++++++--
 6 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index b2fde8d7a..b69822606 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -283,8 +283,13 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
-          type="primary"
-          ghost
+          type="default"
+          style={{
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            borderColor: 'rgba(255, 255, 255, 0.4)',
+            color: 'white',
+            fontWeight: 500
+          }}
         >
           Refresh
         </Button>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index 068552232..443cdd8e5 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -292,8 +292,13 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
-          type="primary"
-          ghost
+          type="default"
+          style={{
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            borderColor: 'rgba(255, 255, 255, 0.4)',
+            color: 'white',
+            fontWeight: 500
+          }}
         >
           Refresh
         </Button>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
index 58fea8066..0a999129e 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
@@ -73,9 +73,15 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
           <Button
             icon={<EditOutlined />}
             onClick={onEditClick}
-            type="primary"
-            ghost
+            type="default"
             size="large"
+            style={{
+              background: 'white',
+              color: '#1890ff',
+              borderColor: 'white',
+              fontWeight: 500,
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+            }}
           >
             Edit Environment
           </Button>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
index ff1e01e39..3ec86dfff 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -291,8 +291,13 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
-          type="primary"
-          ghost
+          type="default"
+          style={{
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            borderColor: 'rgba(255, 255, 255, 0.4)',
+            color: 'white',
+            fontWeight: 500
+          }}
         >
           Refresh
         </Button>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
index b9c2606e8..ff079a9df 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/UserGroupsTab.tsx
@@ -234,8 +234,13 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
-          type="primary"
-          ghost
+          type="default"
+          style={{
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            borderColor: 'rgba(255, 255, 255, 0.4)',
+            color: 'white',
+            fontWeight: 500
+          }}
         >
           Refresh
         </Button>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
index 2068ccf8b..1e3b6c16e 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
@@ -224,8 +224,13 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
           icon={<SyncOutlined spin={refreshing} />} 
           onClick={handleRefresh}
           loading={loading}
-          type="primary"
-          ghost
+          type="default"
+          style={{
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            borderColor: 'rgba(255, 255, 255, 0.4)',
+            color: 'white',
+            fontWeight: 500
+          }}
         >
           Refresh
         </Button>

From f3a36d88c59c396f5610f771be91c291435be10a Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 20:09:13 +0500
Subject: [PATCH 24/37] fix tabs rendering issue

---
 .../pages/setting/environments/WorkspaceDetail.tsx  |  6 +++---
 .../setting/environments/components/AppsTab.tsx     | 13 ++++++-------
 .../environments/components/DataSourcesTab.tsx      | 13 ++++++-------
 .../setting/environments/components/QueriesTab.tsx  | 12 ++++++------
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index 7d9abb845..66ba819fa 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -172,20 +172,20 @@ const WorkspaceDetail: React.FC = () => {
         <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
           <AppsTab
             environment={environment}
-            workspace={workspace}
+            workspaceId={workspace.id}
           />
         </TabPane>
 
         <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
           <DataSourcesTab
             environment={environment}
-            workspace={workspace}
+            workspaceId={workspace.id}
           />
         </TabPane>
         <TabPane tab={<span><CodeOutlined /> Queries</span>} key="queries">
           <QueriesTab
             environment={environment}
-            workspace={workspace}
+            workspaceId={workspace.id}
           />
         </TabPane>
         
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index b69822606..f2b372055 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -3,7 +3,6 @@ import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Toolti
 import { SyncOutlined, CloudUploadOutlined, AuditOutlined, AppstoreOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
-import { Workspace } from '../types/workspace.types';
 import { App, AppStats } from '../types/app.types';
 import { getMergedWorkspaceApps } from '../services/apps.service';
 import { Switch, Spin, Empty, Avatar } from 'antd';
@@ -16,10 +15,10 @@ const { Search } = Input;
 
 interface AppsTabProps {
   environment: Environment;
-  workspace: Workspace;
+  workspaceId: string;
 }
 
-const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
+const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
   const [apps, setApps] = useState<App[]>([]);
   const [stats, setStats] = useState<AppStats>({
     total: 0,
@@ -35,14 +34,14 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
 
   // Fetch apps
   const fetchApps = async () => {
-    if (!workspace.id || !environment) return;
+    if (!workspaceId || !environment) return;
     
     setLoading(true);
     setError(null);
     
     try {
       const result = await getMergedWorkspaceApps(
-        workspace.id,
+        workspaceId,
         environment.environmentId,
         environment.environmentApikey,
         environment.environmentApiServiceUrl!
@@ -71,7 +70,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
 
   useEffect(() => {
     fetchApps();
-  }, [environment, workspace]);
+  }, [environment, workspaceId]);
 
   // Handle refresh
   const handleRefresh = () => {
@@ -196,7 +195,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspace }) => {
               icon={<AuditOutlined />}
               onClick={(e) => {
                 e.stopPropagation();
-                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&appId=${app.applicationId}&pageSize=100&pageNum=1`;
+                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&appId=${app.applicationId}&pageSize=100&pageNum=1`;
                 window.open(auditUrl, '_blank');
               }}
             >
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index 443cdd8e5..f916131be 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -12,7 +12,6 @@ import {
 } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
-import { Workspace } from '../types/workspace.types';
 import { DataSource } from '../types/datasource.types';
 import { getMergedWorkspaceDataSources } from '../services/datasources.service';
 import { Switch, Spin, Empty, Avatar } from 'antd';
@@ -25,10 +24,10 @@ const { Search } = Input;
 
 interface DataSourcesTabProps {
   environment: Environment;
-  workspace: Workspace;
+  workspaceId: string;
 }
 
-const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace }) => {
+const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceId }) => {
   const [dataSources, setDataSources] = useState<DataSource[]>([]);
   const [stats, setStats] = useState({
     total: 0,
@@ -44,14 +43,14 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
 
   // Fetch data sources
   const fetchDataSources = async () => {
-    if (!workspace.id || !environment) return;
+    if (!workspaceId || !environment) return;
     
     setLoading(true);
     setError(null);
     
     try {
       const result = await getMergedWorkspaceDataSources(
-        workspace.id,
+        workspaceId,
         environment.environmentId,
         environment.environmentApikey,
         environment.environmentApiServiceUrl!
@@ -69,7 +68,7 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
 
   useEffect(() => {
     fetchDataSources();
-  }, [environment, workspace]);
+  }, [environment, workspaceId]);
 
   // Handle refresh
   const handleRefresh = () => {
@@ -198,7 +197,7 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspace
               icon={<AuditOutlined />}
               onClick={(e) => {
                 e.stopPropagation();
-                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`;
+                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`;
                 window.open(auditUrl, '_blank');
               }}
             >
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
index 3ec86dfff..d5b377579 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -26,10 +26,10 @@ const { Search } = Input;
 
 interface QueriesTabProps {
   environment: Environment;
-  workspace: Workspace;
+  workspaceId: string;
 }
 
-const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
+const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) => {
   const [queries, setQueries] = useState<Query[]>([]);
   const [stats, setStats] = useState({
     total: 0,
@@ -44,14 +44,14 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
 
   // Fetch queries
   const fetchQueries = async () => {
-    if (!workspace.id || !environment) return;
+    if (!workspaceId || !environment) return;
     
     setLoading(true);
     setError(null);
     
     try {
       const result = await getMergedWorkspaceQueries(
-        workspace.id,
+        workspaceId,
         environment.environmentId,
         environment.environmentApikey,
         environment.environmentApiServiceUrl!
@@ -69,7 +69,7 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
 
   useEffect(() => {
     fetchQueries();
-  }, [environment, workspace]);
+  }, [environment, workspaceId]);
 
   // Handle refresh
   const handleRefresh = () => {
@@ -215,7 +215,7 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspace }) => {
               icon={<AuditOutlined />}
               onClick={(e) => {
                 e.stopPropagation();
-                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&queryId=${query.id}&pageSize=100&pageNum=1`;
+                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&queryId=${query.id}&pageSize=100&pageNum=1`;
                 window.open(auditUrl, '_blank');
               }}
             >

From 4b9f37d2a38180c60945ea7ebfb3a75379fe0fa9 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 20:28:03 +0500
Subject: [PATCH 25/37] fix refresh button for the environment listing

---
 .../setting/environments/EnvironmentsList.tsx | 26 +++++++++++--------
 .../components/EditEnvironmentModal.tsx       |  2 +-
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
index 3a1f6f385..613ed47a2 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Typography, Alert, Input, Button, Space, Empty, Card, Spin, Row, Col, Tooltip, Badge } from "antd";
-import { SearchOutlined, ReloadOutlined,  CloudServerOutlined} from "@ant-design/icons";
+import { SearchOutlined,  CloudServerOutlined, SyncOutlined} from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
 import { useEnvironmentContext } from "./context/EnvironmentContext";
 import { Environment } from "./types/environment.types";
@@ -110,16 +110,20 @@ const EnvironmentsList: React.FC = () => {
           </Col>
           <Col xs={24} sm={8} style={{ textAlign: 'right' }}>
             <Space size="middle">
-              <Button
-                icon={<ReloadOutlined spin={isRefreshing} />}
-                onClick={handleRefresh}
-                type="primary"
-                ghost
-                loading={isLoading && !isRefreshing}
-                size="large"
-              >
-                Refresh
-              </Button>
+            <Button 
+              icon={<SyncOutlined spin={isRefreshing} />} 
+              onClick={handleRefresh}
+              loading={isLoading}
+              type="default"
+              style={{
+                backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                borderColor: 'rgba(255, 255, 255, 0.4)',
+                color: 'white',
+                fontWeight: 500
+              }}
+            >
+              Refresh
+          </Button>
             </Space>
           </Col>
         </Row>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx
index 88bdd852f..8f28fd26c 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx
@@ -61,7 +61,7 @@ const EditEnvironmentModal: React.FC<EditEnvironmentModalProps> = ({
       title="Edit Environment"
       open={visible}
       onCancel={onClose}
-      maskClosable={false}
+      maskClosable={true}
       destroyOnClose={true}
       footer={[
         <Button key="back" onClick={onClose}>

From 2b4a71896dde60d93ed358b572c4618749da1496 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 21:16:53 +0500
Subject: [PATCH 26/37] setup for new managed-obj endpoint

---
 .../environments/components/AppsTab.tsx       |  2 +-
 .../components/DataSourcesTab.tsx             |  1 -
 .../environments/components/QueriesTab.tsx    |  1 -
 .../environments/context/WorkspaceContext.tsx |  2 +-
 .../services/managed-objects.service.ts       | 26 +++++++------------
 5 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index f2b372055..f26fd5ea5 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -87,7 +87,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
           app.applicationGid,
           environment.environmentId,
           ManagedObjectType.APP,
-          app.name
+          
         );
       } else {
         await unsetManagedObject(
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index f916131be..54b9fd5f2 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -85,7 +85,6 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
           dataSource.gid,
           environment.environmentId,
           ManagedObjectType.DATASOURCE,
-          dataSource.name
         );
       } else {
         await unsetManagedObject(
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
index d5b377579..85bda783e 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -86,7 +86,6 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
           query.gid,
           environment.environmentId,
           ManagedObjectType.QUERY,
-          query.name
         );
       } else {
         await unsetManagedObject(
diff --git a/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx b/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
index 7ad259aeb..154bc3f97 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
@@ -118,7 +118,7 @@ import React, {
             workspace.gid!,
             environment.environmentId,
             ManagedObjectType.ORG,
-            workspace.name
+            
           
           );
         } else {
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
index 173f1006c..fdbecb4ac 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
@@ -59,29 +59,20 @@ export async function isManagedObject(
 export async function setManagedObject(
   objGid: string,
   environmentId: string,
-  objType: ManagedObjectType,
-  objName?: string,
-  objTags: string[] = []
+  objType: ManagedObjectType
 ): Promise<boolean> {
   try {
     if (!objGid || !environmentId || !objType) {
       throw new Error("Missing required parameters");
     }
 
-    const response = await axios.post(`/api/plugins/enterprise/managed-obj`, 
-      // Include optional parameters in the request body instead of query params
-      {
-        objName,
-        objTags: objTags.length > 0 ? objTags : undefined
-      },
-      {
-        params: {
-          objGid,
-          environmentId,
-          objType
-        }
-      }
-    );
+    const requestBody = {
+      objGid,
+      environmentId,
+      objType
+    };
+
+    const response = await axios.post(`/api/plugins/enterprise/managed-obj`, requestBody);
 
     return response.status === 200;
   } catch (error) {
@@ -91,6 +82,7 @@ export async function setManagedObject(
   }
 }
 
+
 /**
  * Set an object as unmanaged
  * @param objGid - Object's global ID

From 766043239ddddaa0fa0102596aa8a43a671f06c1 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 16 May 2025 22:23:36 +0500
Subject: [PATCH 27/37] implement new managed obj endpoints

---
 .../environments/context/WorkspaceContext.tsx |   7 +-
 .../environments/services/apps.service.ts     |  20 +-
 .../services/datasources.service.ts           |  12 +-
 .../services/managed-objects.service.ts       | 306 +++++++++---------
 .../environments/services/query.service.ts    |  10 +-
 .../services/workspace.service.ts             |   8 +-
 6 files changed, 182 insertions(+), 181 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx b/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
index 154bc3f97..f2e16d442 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx
@@ -12,8 +12,7 @@ import React, {
   import { useSingleEnvironmentContext } from "./SingleEnvironmentContext";
   import { fetchWorkspaceById } from "../services/environments.service";
   import { Workspace } from "../types/workspace.types";
-  import { getManagedWorkspaces } from "../services/enterprise.service";
-  import { ManagedObjectType, setManagedObject, unsetManagedObject } from "../services/managed-objects.service";
+  import { getManagedObjects, ManagedObjectType, setManagedObject, unsetManagedObject } from "../services/managed-objects.service";
   
   interface WorkspaceContextState {
     // Workspace data
@@ -87,10 +86,10 @@ import React, {
         }
         
         // Fetch managed workspaces to check if this one is managed
-        const managedWorkspaces = await getManagedWorkspaces(environment.environmentId);
+        const managedWorkspaces = await getManagedObjects(environment.environmentId, ManagedObjectType.ORG);
         
         // Set the managed status
-        const isManaged = managedWorkspaces.some(org => org.orgGid === workspaceData.gid);
+        const isManaged = managedWorkspaces.some(org => org.objGid === workspaceData.gid);
         
         // Update the workspace with managed status
         setWorkspace({
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
index 570084f39..c057b3a52 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
@@ -4,6 +4,7 @@ import { getWorkspaceApps } from "./environments.service";
 import { getManagedApps } from "./enterprise.service";
 import { App, AppStats } from "../types/app.types";
 import axios from "axios";
+import { getManagedObjects, ManagedObject } from "./managed-objects.service";
 
 
 export interface MergedAppsResult {
@@ -24,10 +25,13 @@ export interface DeployAppParams {
 
 
 // Use your existing merge function with slight modification
-export const getMergedApps = (standardApps: App[], managedApps: any[]): App[] => {
+export const getMergedApps = (standardApps: App[], managedObjects: ManagedObject[]): App[] => {
   return standardApps.map((app) => ({
     ...app,
-    managed: managedApps.some((managedApp) => managedApp.appGid === app.applicationGid),
+    managed: managedObjects.some((managedObj) => 
+      managedObj.objGid === app.applicationGid && 
+      managedObj.objType === "APP"
+    ),
   }));
 };
 
@@ -71,17 +75,17 @@ export async function getMergedWorkspaceApps(
       };
     }
     
-    // Only fetch managed apps if we have regular apps
-    let managedApps = [];
+    // Fetch managed objects instead of managed apps
+    let managedObjects: ManagedObject[] = [];
     try {
-      managedApps = await getManagedApps(environmentId);
+      managedObjects = await getManagedObjects(environmentId);
     } catch (error) {
-      console.error("Failed to fetch managed apps:", error);
+      console.error("Failed to fetch managed objects:", error);
       // Continue with empty managed list
     }
     
-    // Use your existing merge function
-    const mergedApps = getMergedApps(regularApps, managedApps);
+    // Use the updated merge function
+    const mergedApps = getMergedApps(regularApps, managedObjects);
     
     // Calculate stats
     const stats = calculateAppStats(mergedApps);
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
index 71d6929ac..0e7b9d6bb 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
@@ -2,7 +2,7 @@
 import axios from 'axios';
 import { message } from "antd";
 import { DataSource, DataSourceWithMeta } from "../types/datasource.types";
-import { getManagedDataSources } from "./enterprise.service";
+import { getManagedObjects, ManagedObject, ManagedObjectType } from "./managed-objects.service";
 
 export interface DataSourceStats {
   total: number;
@@ -71,12 +71,12 @@ export async function getWorkspaceDataSources(
 }
 
 // Function to merge regular and managed data sources
-export const getMergedDataSources = (standardDataSources: DataSourceWithMeta[], managedDataSources: any[]): DataSource[] => {
+export const getMergedDataSources = (standardDataSources: DataSourceWithMeta[], managedObjects: ManagedObject[]): DataSource[] => {
   return standardDataSources.map((dataSourceWithMeta) => {
     const dataSource = dataSourceWithMeta.datasource;
     return {
       ...dataSource,
-      managed: managedDataSources.some((managedDs) => managedDs.datasourceGid === dataSource.gid),
+      managed: managedObjects.some((obj) => obj.objGid === dataSource.gid && obj.objType === ManagedObjectType.DATASOURCE),
     };
   });
 };
@@ -123,16 +123,16 @@ export async function getMergedWorkspaceDataSources(
     }
     
     // Only fetch managed data sources if we have regular data sources
-    let managedDataSources = [];
+    let managedObjects: ManagedObject[] = [];
     try {
-      managedDataSources = await getManagedDataSources(environmentId);
+      managedObjects = await getManagedObjects(environmentId, ManagedObjectType.DATASOURCE);
     } catch (error) {
       console.error("Failed to fetch managed data sources:", error);
       // Continue with empty managed list
     }
     
     // Use the merge function
-    const mergedDataSources = getMergedDataSources(regularDataSourcesWithMeta, managedDataSources);
+    const mergedDataSources = getMergedDataSources(regularDataSourcesWithMeta, managedObjects);
     
     // Calculate stats
     const stats = calculateDataSourceStats(mergedDataSources);
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
index fdbecb4ac..9f3615c36 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
@@ -1,154 +1,152 @@
-import axios from "axios";
-import { message } from "antd";
-
-// Object types that can be managed
-export enum ManagedObjectType {
-  ORG = "ORG",
-  APP = "APP",
-  QUERY = "QUERY",
-  DATASOURCE = "DATASOURCE"
-}
-
-/**
- * Check if an object is managed
- * @param objGid - Object's global ID
- * @param environmentId - Environment ID
- * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
- * @returns Promise with boolean indicating if object is managed
- */
-export async function isManagedObject(
-  objGid: string,
-  environmentId: string,
-  objType: ManagedObjectType
-): Promise<boolean> {
-  try {
-    if (!objGid || !environmentId || !objType) {
-      throw new Error("Missing required parameters");
-    }
-
-    const response = await axios.get(`/api/plugins/enterprise/managed-obj`, {
-      params: {
-        objGid,
-        environmentId,
-        objType
-      }
-    });
-
-    return response.data.managed === true;
-  } catch (error) {
-    // If the object doesn't exist as managed, it's not an error
-    if (axios.isAxiosError(error) && error.response?.status === 404) {
-      return false;
-    }
-    
-    const errorMessage = error instanceof Error ? error.message : "Failed to check managed status";
-    message.error(errorMessage);
-    throw error;
-  }
-}
-
-/**
- * Set an object as managed
- * @param objGid - Object's global ID
- * @param environmentId - Environment ID
- * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
- * @param objName - Object name (optional)
- * @param objTags - Object tags (optional)
- * @returns Promise with operation result
- */
-export async function setManagedObject(
-  objGid: string,
-  environmentId: string,
-  objType: ManagedObjectType
-): Promise<boolean> {
-  try {
-    if (!objGid || !environmentId || !objType) {
-      throw new Error("Missing required parameters");
-    }
-
-    const requestBody = {
-      objGid,
-      environmentId,
-      objType
-    };
-
-    const response = await axios.post(`/api/plugins/enterprise/managed-obj`, requestBody);
-
-    return response.status === 200;
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : `Failed to set ${objType} as managed`;
-    message.error(errorMessage);
-    throw error;
-  }
-}
-
-
-/**
- * Set an object as unmanaged
- * @param objGid - Object's global ID
- * @param environmentId - Environment ID
- * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
- * @returns Promise with operation result
- */
-export async function unsetManagedObject(
-  objGid: string,
-  environmentId: string,
-  objType: ManagedObjectType
-): Promise<boolean> {
-  try {
-    if (!objGid || !environmentId || !objType) {
-      throw new Error("Missing required parameters");
-    }
-
-    const response = await axios.delete(`/api/plugins/enterprise/managed-obj`, {
-      params: {
-        objGid,
-        environmentId,
-        objType
-      }
-    });
-
-    return response.status === 200;
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : `Failed to remove ${objType} from managed`;
-    message.error(errorMessage);
-    throw error;
-  }
-}
-
-/**
- * Get all managed objects of a specific type for an environment
- * NOTE: This function is commented out as the endpoint is not yet implemented
- * TODO: Uncomment when the /managed-obj/list endpoint is available
- * 
- * @param environmentId - Environment ID 
- * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
- * @returns Promise with an array of managed objects
- */
-/*
-export async function getManagedObjects(
-  environmentId: string,
-  objType: ManagedObjectType
-): Promise<any[]> {
-  try {
-    if (!environmentId || !objType) {
-      throw new Error("Missing required parameters");
-    }
-
-    const response = await axios.get(`/api/plugins/enterprise/managed-obj/list`, {
-      params: {
-        environmentId,
-        objType
-      }
-    });
-
-    return response.data.data || [];
-  } catch (error) {
-    const errorMessage = error instanceof Error 
-      ? error.message 
-      : `Failed to fetch managed ${objType.toLowerCase()}s`;
-    message.error(errorMessage);
-    throw error;
-  }
-}
-*/ 
\ No newline at end of file
+import axios from "axios";
+import { message } from "antd";
+
+// Object types that can be managed
+export enum ManagedObjectType {
+  ORG = "ORG",
+  APP = "APP",
+  QUERY = "QUERY",
+  DATASOURCE = "DATASOURCE"
+}
+
+// Add this interface after the ManagedObjectType enum
+export interface ManagedObject {
+  id: string;
+  managedId: string;
+  objGid: string;
+  environmentId: string;
+  objType: ManagedObjectType;
+}
+
+/**
+ * Check if an object is managed
+ * @param objGid - Object's global ID
+ * @param environmentId - Environment ID
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @returns Promise with boolean indicating if object is managed
+ */
+export async function isManagedObject(
+  objGid: string,
+  environmentId: string,
+  objType: ManagedObjectType
+): Promise<boolean> {
+  try {
+    if (!objGid || !environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const response = await axios.get(`/api/plugins/enterprise/managed-obj`, {
+      params: {
+        objGid,
+        environmentId,
+        objType
+      }
+    });
+
+    return response.data.managed === true;
+  } catch (error) {
+    // If the object doesn't exist as managed, it's not an error
+    if (axios.isAxiosError(error) && error.response?.status === 404) {
+      return false;
+    }
+    
+    const errorMessage = error instanceof Error ? error.message : "Failed to check managed status";
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
+/**
+ * Set an object as managed
+ * @param objGid - Object's global ID
+ * @param environmentId - Environment ID
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @param objName - Object name (optional)
+ * @param objTags - Object tags (optional)
+ * @returns Promise with operation result
+ */
+export async function setManagedObject(
+  objGid: string,
+  environmentId: string,
+  objType: ManagedObjectType
+): Promise<boolean> {
+  try {
+    if (!objGid || !environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const requestBody = {
+      objGid,
+      environmentId,
+      objType
+    };
+
+    const response = await axios.post(`/api/plugins/enterprise/managed-obj`, requestBody);
+
+    return response.status === 200;
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : `Failed to set ${objType} as managed`;
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
+
+/**
+ * Set an object as unmanaged
+ * @param objGid - Object's global ID
+ * @param environmentId - Environment ID
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @returns Promise with operation result
+ */
+export async function unsetManagedObject(
+  objGid: string,
+  environmentId: string,
+  objType: ManagedObjectType
+): Promise<boolean> {
+  try {
+    if (!objGid || !environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const response = await axios.delete(`/api/plugins/enterprise/managed-obj`, {
+      params: {
+        objGid,
+        environmentId,
+        objType
+      }
+    });
+
+    return response.status === 200;
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : `Failed to remove ${objType} from managed`;
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
+// Add this new function
+export async function getManagedObjects(
+  environmentId: string,
+  objType?: ManagedObjectType
+): Promise<ManagedObject[]> {
+  try {
+    if (!environmentId) {
+      throw new Error("Missing environment ID");
+    }
+
+    const response = await axios.get(`/api/plugins/enterprise/managed-obj/list`, {
+      params: {
+        environmentId,
+        ...(objType && { objType }) // Only include objType in params if it's provided
+      }
+    });
+
+    return response.data.data;
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : "Failed to fetch managed objects";
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
index f48d038d5..8d69af92a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
@@ -2,7 +2,7 @@
  * Get merged queries (both regular and managed) for a workspace
  */
 import axios from 'axios';
-import { getManagedQueries } from './enterprise.service';
+import { getManagedObjects, ManagedObject, ManagedObjectType } from './managed-objects.service';
 import { getWorkspaceQueries } from './environments.service';
 import { Query, QueryStats } from '../types/query.types';
 export interface MergedQueriesResult {
@@ -30,11 +30,11 @@ export interface MergedQueriesResult {
       const regularQueries = await getWorkspaceQueries(workspaceId, apiKey, apiServiceUrl);
       console.log("Regular queries response:", regularQueries);
       
-      const managedQueries = await getManagedQueries(environmentId);
-      console.log("Managed queries response:", managedQueries);
+      const managedObjects = await getManagedObjects(environmentId, ManagedObjectType.QUERY);
+      console.log("Managed queries response:", managedObjects);
       
-      // Create a map of managed queries by GID for quick lookup
-      const managedQueryGids = new Set(managedQueries.map(query => query.gid));
+      // Create a set of managed query GIDs for quick lookup
+      const managedQueryGids = new Set(managedObjects.map(obj => obj.objGid));
       console.log("Managed query GIDs:", Array.from(managedQueryGids));
       
       // Mark regular queries as managed if they exist in managed queries
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
index 43bc302a2..c6f7881dc 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
@@ -1,7 +1,7 @@
 // services/workspacesService.ts (or wherever makes sense in your structure)
 import { message } from "antd";
 import { getEnvironmentWorkspaces } from "./environments.service";
-import { getManagedWorkspaces } from "./enterprise.service";
+import { getManagedObjects, ManagedObject, ManagedObjectType } from "./managed-objects.service";
 import { Workspace } from "../types/workspace.types";
 import { ManagedOrg } from "../types/enterprise.types";
 import axios from "axios";
@@ -43,9 +43,9 @@ export async function getMergedEnvironmentWorkspaces(
     }
     
     // Only fetch managed workspaces if we have regular workspaces
-    let managedOrgs: ManagedOrg[] = [];
+    let managedObjects: ManagedObject[] = [];
     try {
-      managedOrgs = await getManagedWorkspaces(environmentId);
+      managedObjects = await getManagedObjects(environmentId, ManagedObjectType.ORG);
     } catch (error) {
       console.error("Failed to fetch managed workspaces:", error);
       // Continue with empty managed list
@@ -54,7 +54,7 @@ export async function getMergedEnvironmentWorkspaces(
     // Merge the workspaces
     const mergedWorkspaces = regularWorkspaces.map(ws => ({
       ...ws,
-      managed: managedOrgs.some(org => org.orgGid === ws.gid)
+      managed: managedObjects.some(obj => obj.objGid === ws.gid && obj.objType === ManagedObjectType.ORG)
     }));
     
     // Calculate stats

From 6fcafe4367847e8e161ec3623e88f044e31f3abf Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Sat, 17 May 2025 17:01:35 +0500
Subject: [PATCH 28/37] update workspace header UI

---
 .../setting/environments/WorkspaceDetail.tsx  |  77 +-----
 .../components/WorkspaceHeader.tsx            | 257 ++++++++++++++++++
 2 files changed, 268 insertions(+), 66 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index 66ba819fa..efe528b38 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -3,14 +3,8 @@ import history from "@lowcoder-ee/util/history";
 import { 
   Spin, 
   Typography, 
-  Card, 
   Tabs, 
-  Button,
-  Space,
-  Tag,
-  Switch, 
   message,
-  Tooltip
 } from "antd";
 import { 
   AppstoreOutlined, 
@@ -18,8 +12,6 @@ import {
   CodeOutlined,
   HomeOutlined,
   TeamOutlined,
-  ArrowLeftOutlined, 
-  CloudUploadOutlined
 } from "@ant-design/icons";
 
 // Use the context hooks
@@ -32,8 +24,8 @@ import AppsTab from "./components/AppsTab";
 import DataSourcesTab from "./components/DataSourcesTab";
 import QueriesTab from "./components/QueriesTab";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
+import WorkspaceHeader from "./components/WorkspaceHeader";
 
-const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
 const WorkspaceDetail: React.FC = () => {
@@ -42,6 +34,8 @@ const WorkspaceDetail: React.FC = () => {
   const { workspace, isLoading, error, toggleManagedStatus } = useWorkspaceContext();
   const { openDeployModal } = useDeployModal();
 
+  console.log("workspace render", workspace);  
+
   const [isToggling, setIsToggling] = useState(false);
 
   // Handle toggle managed status
@@ -109,63 +103,14 @@ const WorkspaceDetail: React.FC = () => {
       {/* Modern Breadcrumbs navigation */}
       <ModernBreadcrumbs items={breadcrumbItems} />
 
-      {/* Workspace header with details and actions */}
-      <Card style={{ marginBottom: "24px" }} bodyStyle={{ padding: "16px 24px" }}>
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          {/* Left section - Workspace info */}
-          <div>
-            <Title level={3} style={{ margin: 0 }}>
-              {workspace.name}
-            </Title>
-            <div style={{ display: "flex", alignItems: "center", marginTop: "8px" }}>
-              <Text type="secondary" style={{ marginRight: "16px" }}>
-                ID: {workspace.id}
-              </Text>
-              <Tag color={workspace.managed ? "green" : "default"}>
-                {workspace.managed ? "Managed" : "Unmanaged"}
-              </Tag>
-            </div>
-          </div>
-
-          {/* Right section - Actions */}
-          <Space size="middle">
-            <div style={{ display: "flex", alignItems: "center" }}>
-              <Text style={{ marginRight: "8px" }}>Managed:</Text>
-              <Switch
-                checked={!!workspace.managed}
-                onChange={handleToggleManaged}
-                loading={isToggling}
-                checkedChildren="Yes"
-                unCheckedChildren="No"
-              />
-            </div>
-            <Tooltip
-              title={
-                !workspace.managed
-                  ? "Workspace must be managed before it can be deployed"
-                  : "Deploy this workspace to another environment"
-              }
-            >
-              <Button
-                type="primary"
-                icon={<CloudUploadOutlined />}
-                onClick={() =>
-                  openDeployModal(workspace, workspaceConfig, environment)
-                }
-                disabled={!workspace.managed}
-              >
-                Deploy
-              </Button>
-            </Tooltip>
-            <Button
-              icon={<ArrowLeftOutlined />}
-              onClick={() => history.push(`/setting/environments/${environment.environmentId}`)}
-            >
-              Back
-            </Button>
-          </Space>
-        </div>
-      </Card>
+      {/* New Workspace Header */}
+      <WorkspaceHeader
+        workspace={workspace}
+        environment={environment}
+        isToggling={isToggling}
+        onToggleManagedStatus={handleToggleManaged}
+        onDeploy={() => openDeployModal(workspace, workspaceConfig, environment)}
+      />
 
       {/* Tabs for Apps, Data Sources, and Queries */}
       <Tabs defaultActiveKey="apps" className="modern-tabs" type="card">
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
new file mode 100644
index 000000000..5872dd348
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
@@ -0,0 +1,257 @@
+import React, { useState } from "react";
+import {
+  Typography,
+  Switch,
+  Button,
+  Tag,
+  Tooltip,
+  Row,
+  Col,
+  Statistic,
+  Avatar,
+  Space,
+  Divider,
+  Card,
+  Dropdown,
+  Menu
+} from "antd";
+import {
+  CloudUploadOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  AppstoreOutlined,
+  DatabaseOutlined,
+  CodeOutlined,
+  CloudServerOutlined,
+  ClockCircleOutlined,
+  MoreOutlined,
+  StarOutlined,
+  StarFilled
+} from "@ant-design/icons";
+import { Environment } from "../types/environment.types";
+import { Workspace } from "../types/workspace.types";
+import styled from "styled-components";
+
+const { Title, Text } = Typography;
+
+// Styled components for custom design
+const HeaderWrapper = styled.div`
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  position: relative;
+  margin-bottom: 24px;
+`;
+
+const GradientBanner = styled.div`
+  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
+  height: 140px;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: repeating-linear-gradient(
+      45deg,
+      rgba(255,255,255,0.1),
+      rgba(255,255,255,0.1) 1px,
+      transparent 1px,
+      transparent 10px
+    );
+    animation: moveBackground 30s linear infinite;
+  }
+
+  @keyframes moveBackground {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(100px, 100px);
+    }
+  }
+`;
+
+const ContentContainer = styled.div`
+  background-color: white;
+  padding: 24px;
+  position: relative;
+`;
+
+const AvatarContainer = styled.div`
+  position: absolute;
+  top: -50px;
+  left: 24px;
+  background: white;
+  padding: 4px;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+`;
+
+const StatusBadge = styled(Tag)<{ $active?: boolean }>`
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  font-weight: 600;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: ${props => props.$active ? 'linear-gradient(135deg, #52c41a, #389e0d)' : '#f0f0f0'};
+  color: ${props => props.$active ? 'white' : '#666'};
+`;
+
+const StatCard = styled(Card)`
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  }
+`;
+
+const ActionButton = styled(Button)`
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 38px;
+`;
+
+const FavoriteButton = styled(Button)`
+  position: absolute;
+  top: 12px;
+  right: 80px;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+`;
+
+interface WorkspaceHeaderProps {
+  workspace: Workspace;
+  environment: Environment;
+  isToggling: boolean;
+  onToggleManagedStatus: (checked: boolean) => Promise<void>;
+  onDeploy: () => void;
+}
+
+const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
+  workspace,
+  environment,
+  isToggling,
+  onToggleManagedStatus,
+  onDeploy
+}) => {
+  
+  // Generate a consistent color for the workspace avatar
+  const getAvatarColor = (name: string) => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const hue = Math.abs(hash % 360);
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  // Format date for last updated
+  const formatDate = (date:  number | undefined) => {
+    if (!date) return "N/A";
+    return new Date(date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  };
+
+  // Mock data - in a real app this would come from props
+  const stats = {
+    users: 12,
+    apps: 24,
+    datasources: 8,
+    queries: 15,
+    lastUpdated: "2023-08-15T10:30:00Z"
+  };
+
+  
+
+  return (
+    <HeaderWrapper>
+      <GradientBanner>
+        <StatusBadge $active={workspace.managed}>
+          {workspace.managed ? "Managed" : "Unmanaged"}
+        </StatusBadge>
+       
+      </GradientBanner>
+      
+      <ContentContainer>
+        <AvatarContainer>
+          <Avatar 
+            size={80} 
+            style={{ backgroundColor: getAvatarColor(workspace.name) }}
+          >
+            {workspace.name.charAt(0).toUpperCase()}
+          </Avatar>
+        </AvatarContainer>
+        
+        <Row>
+          <Col xs={24} md={14} style={{ paddingLeft: '90px', marginBottom: '20px' }}>
+            <Title level={3} style={{ margin: "0 0 8px 0" }}>
+              {workspace.name}
+            </Title>
+            <Space size={16} wrap>
+              <Text type="secondary">ID: {workspace.id}</Text>
+              <Text type="secondary">
+                <ClockCircleOutlined style={{ marginRight: 4 }} /> 
+                created on {formatDate(workspace.creationDate)}
+              </Text>
+              <Tag color="blue">
+                <CloudServerOutlined /> {environment.environmentName}
+              </Tag>
+            </Space>
+          </Col>
+          
+          <Col xs={24} md={10}>
+            <div style={{ display: "flex", justifyContent: "flex-end", gap: "12px", flexWrap: "wrap" }}>
+              <div style={{ display: "flex", alignItems: "center" }}>
+                <Text style={{ marginRight: "8px" }}>Managed:</Text>
+                <Switch
+                  checked={!!workspace.managed}
+                  onChange={onToggleManagedStatus}
+                  loading={isToggling}
+                  style={{ marginRight: 16 }}
+                />
+              </div>
+              <Tooltip
+                title={
+                  !workspace.managed
+                    ? "Workspace must be managed before it can be deployed"
+                    : "Deploy this workspace to another environment"
+                }
+              >
+                <ActionButton
+                  type="primary"
+                  icon={<CloudUploadOutlined />}
+                  onClick={onDeploy}
+                  disabled={!workspace.managed}
+                >
+                  Deploy
+                </ActionButton>
+              </Tooltip>
+            </div>
+          </Col>
+        </Row>
+
+        
+        
+      </ContentContainer>
+    </HeaderWrapper>
+  );
+};
+
+export default WorkspaceHeader; 
\ No newline at end of file

From 009d6fa180cc85752d4009f06c26ad3f8695984b Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 16:57:17 +0500
Subject: [PATCH 29/37] fix width issue for Workspace detai page

---
 .../src/pages/setting/environments/WorkspaceDetail.tsx     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index efe528b38..bec8ce7f8 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -99,7 +99,12 @@ const WorkspaceDetail: React.FC = () => {
   ];
 
   return (
-    <div className="workspace-detail-container" style={{ padding: "24px", flex: 1 }}>
+    <div className="workspace-detail-container" style={{ 
+      padding: "24px", 
+      flex: 1,
+      minWidth: "1000px",
+      overflowX: "auto"
+    }}>
       {/* Modern Breadcrumbs navigation */}
       <ModernBreadcrumbs items={breadcrumbItems} />
 

From cec515c050d4ac648e83549951e7ba1c380d9b11 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 18:54:02 +0500
Subject: [PATCH 30/37] add managed filter

---
 .../environments/components/AppsTab.tsx       | 35 +++++++++---
 .../components/DataSourcesTab.tsx             | 55 +++++++++++++------
 .../environments/components/QueriesTab.tsx    | 36 +++++++++---
 3 files changed, 90 insertions(+), 36 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index f26fd5ea5..f7e14bb71 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col } from 'antd';
-import { SyncOutlined, CloudUploadOutlined, AuditOutlined, AppstoreOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined } from '@ant-design/icons';
+import { SyncOutlined, CloudUploadOutlined, AuditOutlined, AppstoreOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined, FilterOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { App, AppStats } from '../types/app.types';
@@ -31,6 +31,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
   const [error, setError] = useState<string | null>(null);
   const [searchText, setSearchText] = useState('');
   const { openDeployModal } = useDeployModal();
+  const [showManagedOnly, setShowManagedOnly] = useState(false);
 
   // Fetch apps
   const fetchApps = async () => {
@@ -132,6 +133,10 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
         app.applicationId.toLowerCase().includes(searchText.toLowerCase()))
     : apps;
 
+  const displayedApps = showManagedOnly
+    ? filteredApps.filter(app => app.managed)
+    : filteredApps;
+
   // Table columns
   const columns = [
     {
@@ -366,8 +371,8 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
           />
         ) : (
           <>
-            {/* Search Bar */}
-            <div style={{ marginBottom: 20 }}>
+            {/* Search and Filter Bar */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
               <Search
                 placeholder="Search apps by name or ID"
                 allowClear
@@ -376,16 +381,28 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
                 style={{ width: 300 }}
                 size="large"
               />
-              {searchText && filteredApps.length !== apps.length && (
-                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
-                  Showing {filteredApps.length} of {apps.length} apps
-                </div>
-              )}
+              <Button 
+                onClick={() => setShowManagedOnly(!showManagedOnly)}
+                type="default"
+                icon={<FilterOutlined />}
+                style={{
+                  marginLeft: '8px',
+                  backgroundColor: showManagedOnly ? '#1890ff' : 'white',
+                  color: showManagedOnly ? 'white' : '#1890ff',
+                  borderColor: '#1890ff'
+                }}
+              />
             </div>
             
+            {searchText && displayedApps.length !== apps.length && (
+              <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                Showing {displayedApps.length} of {apps.length} apps
+              </div>
+            )}
+            
             <Table
               columns={columns}
-              dataSource={filteredApps}
+              dataSource={displayedApps}
               rowKey="applicationId"
               pagination={{ 
                 pageSize: 10,
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index 54b9fd5f2..fdc1186fa 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -8,7 +8,8 @@ import {
   ApiOutlined,
   CheckCircleFilled,
   CloudServerOutlined,
-  DisconnectOutlined
+  DisconnectOutlined,
+  FilterOutlined
 } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
@@ -40,6 +41,7 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
   const [error, setError] = useState<string | null>(null);
   const [searchText, setSearchText] = useState('');
   const { openDeployModal } = useDeployModal();
+  const [showManagedOnly, setShowManagedOnly] = useState(false);
 
   // Fetch data sources
   const fetchDataSources = async () => {
@@ -122,13 +124,17 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
     }
   };
 
-  // Filter data sources based on search
+  // Filter data sources based on managed status and search
   const filteredDataSources = searchText
     ? dataSources.filter(ds => 
         ds.name.toLowerCase().includes(searchText.toLowerCase()) || 
         ds.id.toString().toLowerCase().includes(searchText.toLowerCase()))
     : dataSources;
 
+  const displayedDataSources = showManagedOnly
+    ? filteredDataSources.filter(ds => ds.managed)
+    : filteredDataSources;
+
   // Table columns
   const columns = [
     {
@@ -356,6 +362,29 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
         </Col>
       </Row>
 
+      {/* Update the search and filter bar */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
+        <Search
+          placeholder="Search data sources by name or ID"
+          allowClear
+          onSearch={value => setSearchText(value)}
+          onChange={e => setSearchText(e.target.value)}
+          style={{ width: 300 }}
+          size="large"
+        />
+        <Button 
+          onClick={() => setShowManagedOnly(!showManagedOnly)}
+          type="default"
+          icon={<FilterOutlined />}
+          style={{
+            marginLeft: '8px',
+            backgroundColor: showManagedOnly ? '#1890ff' : 'white',
+            color: showManagedOnly ? 'white' : '#1890ff',
+            borderColor: '#1890ff'
+          }}
+        />
+      </div>
+
       {/* Content */}
       <Card 
         style={{ 
@@ -375,25 +404,15 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
         ) : (
           <>
             {/* Search Bar */}
-            <div style={{ marginBottom: 20 }}>
-              <Search
-                placeholder="Search data sources by name or ID"
-                allowClear
-                onSearch={value => setSearchText(value)}
-                onChange={e => setSearchText(e.target.value)}
-                style={{ width: 300 }}
-                size="large"
-              />
-              {searchText && filteredDataSources.length !== dataSources.length && (
-                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
-                  Showing {filteredDataSources.length} of {dataSources.length} data sources
-                </div>
-              )}
-            </div>
+            {searchText &&  displayedDataSources.length !== dataSources.length && (
+              <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                Showing {displayedDataSources.length} of {dataSources.length} data sources
+              </div>
+            )}
             
             <Table
               columns={columns}
-              dataSource={filteredDataSources}
+              dataSource={displayedDataSources}
               rowKey="id"
               pagination={{ 
                 pageSize: 10,
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
index 85bda783e..71632cfec 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -9,7 +9,8 @@ import {
   CloudServerOutlined,
   DisconnectOutlined,
   ApiOutlined,
-  ThunderboltOutlined
+  ThunderboltOutlined,
+  FilterOutlined
 } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
@@ -41,6 +42,7 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
   const [error, setError] = useState<string | null>(null);
   const [searchText, setSearchText] = useState('');
   const { openDeployModal } = useDeployModal();
+  const [showManagedOnly, setShowManagedOnly] = useState(false);
 
   // Fetch queries
   const fetchQueries = async () => {
@@ -130,6 +132,10 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
         query.id.toLowerCase().includes(searchText.toLowerCase()))
     : queries;
 
+  const displayedQueries = showManagedOnly
+    ? filteredQueries.filter(query => query.managed)
+    : filteredQueries;
+
   // Helper function to generate colors from strings
   const stringToColor = (str: string) => {
     let hash = 0;
@@ -367,8 +373,8 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
           />
         ) : (
           <>
-            {/* Search Bar */}
-            <div style={{ marginBottom: 20 }}>
+            {/* Search and Filter Bar */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
               <Search
                 placeholder="Search queries by name or ID"
                 allowClear
@@ -377,16 +383,28 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
                 style={{ width: 300 }}
                 size="large"
               />
-              {searchText && filteredQueries.length !== queries.length && (
-                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
-                  Showing {filteredQueries.length} of {queries.length} queries
-                </div>
-              )}
+              <Button 
+                onClick={() => setShowManagedOnly(!showManagedOnly)}
+                type="default"
+                icon={<FilterOutlined />}
+                style={{
+                  marginLeft: '8px',
+                  backgroundColor: showManagedOnly ? '#1890ff' : 'white',
+                  color: showManagedOnly ? 'white' : '#1890ff',
+                  borderColor: '#1890ff'
+                }}
+              />
             </div>
             
+            {searchText && displayedQueries.length !== queries.length && (
+              <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                Showing {displayedQueries.length} of {queries.length} queries
+              </div>
+            )}
+            
             <Table
               columns={columns}
-              dataSource={filteredQueries}
+              dataSource={displayedQueries}
               rowKey="id"
               pagination={{ 
                 pageSize: 10,

From cc3e96a269e9ea016f95c5a1dacaaa5929493f67 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 19:22:10 +0500
Subject: [PATCH 31/37] update UI for workspace header banner

---
 .../components/WorkspaceHeader.tsx            | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
index 5872dd348..9cc2bc61f 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
@@ -43,11 +43,12 @@ const HeaderWrapper = styled.div`
   margin-bottom: 24px;
 `;
 
-const GradientBanner = styled.div`
-  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
+const GradientBanner = styled.div<{ avatarColor: string }>`
+  background: linear-gradient(135deg, ${props => props.avatarColor} 0%, #feb47b 100%);
   height: 140px;
   position: relative;
   overflow: hidden;
+  transition: background 1s ease-in-out;
   
   &::before {
     content: '';
@@ -74,12 +75,22 @@ const GradientBanner = styled.div`
       transform: translate(100px, 100px);
     }
   }
+
+  &:hover {
+    background: linear-gradient(135deg, #feb47b 0%, ${props => props.avatarColor} 100%);
+    transition: background 1s ease-in-out;
+  }
 `;
 
 const ContentContainer = styled.div`
   background-color: white;
   padding: 24px;
   position: relative;
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: translateY(-5px);
+  }
 `;
 
 const AvatarContainer = styled.div`
@@ -169,20 +180,13 @@ const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
     });
   };
 
-  // Mock data - in a real app this would come from props
-  const stats = {
-    users: 12,
-    apps: 24,
-    datasources: 8,
-    queries: 15,
-    lastUpdated: "2023-08-15T10:30:00Z"
-  };
+  
 
   
 
   return (
     <HeaderWrapper>
-      <GradientBanner>
+      <GradientBanner avatarColor={getAvatarColor(workspace.name)}>
         <StatusBadge $active={workspace.managed}>
           {workspace.managed ? "Managed" : "Unmanaged"}
         </StatusBadge>

From 7a311e6e5801cf82423e887aa9d9d82aae43f373 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 19:31:44 +0500
Subject: [PATCH 32/37] fix search UI for datasources

---
 .../components/DataSourcesTab.tsx             | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index fdc1186fa..213869b55 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col } from 'antd';
+import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col, Avatar } from 'antd';
 import { 
   SyncOutlined, 
   CloudUploadOutlined, 
@@ -15,7 +15,7 @@ import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { DataSource } from '../types/datasource.types';
 import { getMergedWorkspaceDataSources } from '../services/datasources.service';
-import { Switch, Spin, Empty, Avatar } from 'antd';
+import { Switch, Spin, Empty } from 'antd';
 import { ManagedObjectType, setManagedObject, unsetManagedObject } from '../services/managed-objects.service';
 import { useDeployModal } from '../context/DeployModalContext';
 import { dataSourcesConfig } from '../config/data-sources.config';
@@ -362,29 +362,6 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
         </Col>
       </Row>
 
-      {/* Update the search and filter bar */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
-        <Search
-          placeholder="Search data sources by name or ID"
-          allowClear
-          onSearch={value => setSearchText(value)}
-          onChange={e => setSearchText(e.target.value)}
-          style={{ width: 300 }}
-          size="large"
-        />
-        <Button 
-          onClick={() => setShowManagedOnly(!showManagedOnly)}
-          type="default"
-          icon={<FilterOutlined />}
-          style={{
-            marginLeft: '8px',
-            backgroundColor: showManagedOnly ? '#1890ff' : 'white',
-            color: showManagedOnly ? 'white' : '#1890ff',
-            borderColor: '#1890ff'
-          }}
-        />
-      </div>
-
       {/* Content */}
       <Card 
         style={{ 
@@ -403,7 +380,29 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
           />
         ) : (
           <>
-            {/* Search Bar */}
+            {/* Search and Filter Bar */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
+              <Search
+                placeholder="Search data sources by name or ID"
+                allowClear
+                onSearch={value => setSearchText(value)}
+                onChange={e => setSearchText(e.target.value)}
+                style={{ width: 300 }}
+                size="large"
+              />
+              <Button 
+                onClick={() => setShowManagedOnly(!showManagedOnly)}
+                type="default"
+                icon={<FilterOutlined />}
+                style={{
+                  marginLeft: '8px',
+                  backgroundColor: showManagedOnly ? '#1890ff' : 'white',
+                  color: showManagedOnly ? 'white' : '#1890ff',
+                  borderColor: '#1890ff'
+                }}
+              />
+            </div>
+            
             {searchText &&  displayedDataSources.length !== dataSources.length && (
               <div style={{ marginTop: 8, color: '#8c8c8c' }}>
                 Showing {displayedDataSources.length} of {dataSources.length} data sources

From 66365b3f04edfa26b88b3a786d29d4c01711b1ef Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 19:43:23 +0500
Subject: [PATCH 33/37] add managed filter for Workspaces Tab

---
 .../environments/components/WorkspacesTab.tsx | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
index 1e3b6c16e..eaf8b2a17 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Button, Divider, Alert, message, Table, Tag, Input, Space, Tooltip, Row, Col, Avatar } from 'antd';
-import { SyncOutlined, AuditOutlined, TeamOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined } from '@ant-design/icons';
+import { SyncOutlined, AuditOutlined, TeamOutlined, CheckCircleFilled, CloudServerOutlined, DisconnectOutlined, FilterOutlined } from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
 import { Environment } from '../types/environment.types';
 import { Workspace } from '../types/workspace.types';
@@ -26,6 +26,7 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [searchText, setSearchText] = useState('');
+  const [showManagedOnly, setShowManagedOnly] = useState(false);
 
   // Fetch workspaces
   const fetchWorkspaces = async () => {
@@ -73,13 +74,17 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
     history.push(`/setting/environments/${environment.environmentId}/workspaces/${workspace.id}`);
   };
 
-  // Filter workspaces based on search
+  // Filter workspaces based on search and managed status
   const filteredWorkspaces = searchText
     ? workspaces.filter(workspace => 
         workspace.name.toLowerCase().includes(searchText.toLowerCase()) || 
         workspace.id.toLowerCase().includes(searchText.toLowerCase()))
     : workspaces;
 
+  const displayedWorkspaces = showManagedOnly
+    ? filteredWorkspaces.filter(workspace => workspace.managed)
+    : filteredWorkspaces;
+
   // Helper function to generate colors from strings
   const stringToColor = (str: string) => {
     let hash = 0;
@@ -301,8 +306,8 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
           />
         ) : (
           <>
-            {/* Search Bar */}
-            <div style={{ marginBottom: 20 }}>
+            {/* Search and Filter Bar */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
               <Search
                 placeholder="Search workspaces by name or ID"
                 allowClear
@@ -311,16 +316,28 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
                 style={{ width: 300 }}
                 size="large"
               />
-              {searchText && filteredWorkspaces.length !== workspaces.length && (
-                <div style={{ marginTop: 8, color: '#8c8c8c' }}>
-                  Showing {filteredWorkspaces.length} of {workspaces.length} workspaces
-                </div>
-              )}
+              <Button 
+                onClick={() => setShowManagedOnly(!showManagedOnly)}
+                type="default"
+                icon={<FilterOutlined />}
+                style={{
+                  marginLeft: '8px',
+                  backgroundColor: showManagedOnly ? '#52c41a' : 'white',
+                  color: showManagedOnly ? 'white' : '#52c41a',
+                  borderColor: '#52c41a'
+                }}
+              />
             </div>
             
+            {searchText && displayedWorkspaces.length !== workspaces.length && (
+              <div style={{ marginTop: 8, color: '#8c8c8c' }}>
+                Showing {displayedWorkspaces.length} of {workspaces.length} workspaces
+              </div>
+            )}
+            
             <Table
               columns={columns}
-              dataSource={filteredWorkspaces}
+              dataSource={displayedWorkspaces}
               rowKey="id"
               pagination={{ 
                 pageSize: 10,

From 359d94de7acf3beaf06aa424de6514a9d36d5282 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 19:51:40 +0500
Subject: [PATCH 34/37] change action button positions for TABS

---
 .../environments/components/AppsTab.tsx       | 21 ++++++++++---------
 .../components/DataSourcesTab.tsx             | 21 ++++++++++---------
 .../environments/components/QueriesTab.tsx    | 21 ++++++++++---------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
index f7e14bb71..6f9aea130 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -195,6 +195,17 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
       key: 'actions',
       render: (_: any, app: App) => (
         <Space onClick={(e) => e.stopPropagation()}>
+         
+          <Tooltip title={!app.managed ? "App must be managed before it can be deployed" : "Deploy this app to another environment"}>
+            <Button
+              type="primary"
+              icon={<CloudUploadOutlined />}
+              onClick={() => openDeployModal(app, appsConfig, environment)}
+              disabled={!app.managed}
+            >
+              Deploy
+            </Button>
+          </Tooltip>
           <Tooltip title="View Audit Logs">
             <Button
               icon={<AuditOutlined />}
@@ -207,16 +218,6 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
               Audit
             </Button>
           </Tooltip>
-          <Tooltip title={!app.managed ? "App must be managed before it can be deployed" : "Deploy this app to another environment"}>
-            <Button
-              type="primary"
-              icon={<CloudUploadOutlined />}
-              onClick={() => openDeployModal(app, appsConfig, environment)}
-              disabled={!app.managed}
-            >
-              Deploy
-            </Button>
-          </Tooltip>
         </Space>
       ),
     }
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
index 213869b55..ba13fd575 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -197,6 +197,17 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
       key: 'actions',
       render: (_: any, dataSource: DataSource) => (
         <Space onClick={(e) => e.stopPropagation()}>
+       
+          <Tooltip title={!dataSource.managed ? "Data source must be managed before it can be deployed" : "Deploy this data source to another environment"}>
+            <Button
+              type="primary"
+              icon={<CloudUploadOutlined />}
+              onClick={() => openDeployModal(dataSource, dataSourcesConfig, environment)}
+              disabled={!dataSource.managed}
+            >
+              Deploy
+            </Button>
+          </Tooltip>
           <Tooltip title="View Audit Logs">
             <Button
               icon={<AuditOutlined />}
@@ -209,16 +220,6 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
               Audit
             </Button>
           </Tooltip>
-          <Tooltip title={!dataSource.managed ? "Data source must be managed before it can be deployed" : "Deploy this data source to another environment"}>
-            <Button
-              type="primary"
-              icon={<CloudUploadOutlined />}
-              onClick={() => openDeployModal(dataSource, dataSourcesConfig, environment)}
-              disabled={!dataSource.managed}
-            >
-              Deploy
-            </Button>
-          </Tooltip>
         </Space>
       ),
     }
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
index 71632cfec..a42f604c1 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -215,6 +215,17 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
       key: 'actions',
       render: (_: any, query: Query) => (
         <Space onClick={(e) => e.stopPropagation()}>
+      
+          <Tooltip title={!query.managed ? "Query must be managed before it can be deployed" : "Deploy this query to another environment"}>
+            <Button
+              type="primary"
+              icon={<CloudUploadOutlined />}
+              onClick={() => openDeployModal(query, queryConfig, environment)}
+              disabled={!query.managed}
+            >
+              Deploy
+            </Button>
+          </Tooltip>
           <Tooltip title="View Audit Logs">
             <Button
               icon={<AuditOutlined />}
@@ -227,16 +238,6 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
               Audit
             </Button>
           </Tooltip>
-          <Tooltip title={!query.managed ? "Query must be managed before it can be deployed" : "Deploy this query to another environment"}>
-            <Button
-              type="primary"
-              icon={<CloudUploadOutlined />}
-              onClick={() => openDeployModal(query, queryConfig, environment)}
-              disabled={!query.managed}
-            >
-              Deploy
-            </Button>
-          </Tooltip>
         </Space>
       ),
     }

From cde8c0c68595cd35858e6d5db27c535937eb1c82 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 20:10:54 +0500
Subject: [PATCH 35/37] update breadcrumbs position

---
 .../setting/environments/EnvironmentDetail.tsx |  6 ++++--
 .../setting/environments/WorkspaceDetail.tsx   |  6 +++---
 .../components/ModernBreadcrumbs.tsx           | 18 ++++++++++++------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index ec75728ba..2106d8d3d 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -148,14 +148,14 @@ const EnvironmentDetail: React.FC = () => {
       className="environment-detail-container"
       style={{ padding: "24px", flex: 1 }}
     >
-      <ModernBreadcrumbs items={breadcrumbItems} />
-
       {/* Environment Header Component */}
       <EnvironmentHeader 
         environment={environment} 
         onEditClick={handleEditClick} 
       />
 
+   
+
       {/* Basic Environment Information Card - improved responsiveness */}
       <Card
         title="Environment Overview"
@@ -202,6 +202,8 @@ const EnvironmentDetail: React.FC = () => {
         </Descriptions>
       </Card>
 
+      {/* Modern Breadcrumbs navigation */}
+      <ModernBreadcrumbs items={breadcrumbItems} />
       {/* Tabs for Workspaces and User Groups */}
       <Tabs 
         defaultActiveKey="workspaces"
diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index bec8ce7f8..b663b9ee5 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -105,9 +105,6 @@ const WorkspaceDetail: React.FC = () => {
       minWidth: "1000px",
       overflowX: "auto"
     }}>
-      {/* Modern Breadcrumbs navigation */}
-      <ModernBreadcrumbs items={breadcrumbItems} />
-
       {/* New Workspace Header */}
       <WorkspaceHeader
         workspace={workspace}
@@ -117,6 +114,9 @@ const WorkspaceDetail: React.FC = () => {
         onDeploy={() => openDeployModal(workspace, workspaceConfig, environment)}
       />
 
+      {/* Modern Breadcrumbs navigation */}
+      <ModernBreadcrumbs items={breadcrumbItems} />
+
       {/* Tabs for Apps, Data Sources, and Queries */}
       <Tabs defaultActiveKey="apps" className="modern-tabs" type="card">
         <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
index 1e8e61879..1a3d35524 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
@@ -19,24 +19,30 @@ interface ModernBreadcrumbsProps extends BreadcrumbProps {
 const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
   return (
     <div className="modern-breadcrumb" style={{
-      background: '#f0f2f5',
-      padding: '12px 24px',
+      background: '#e6f7ff',
+      padding: '10px 20px',
       borderRadius: '8px',
       marginBottom: '20px',
-      boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+      boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+      display: 'flex',
+      alignItems: 'center'
     }}>
-      <Breadcrumb {...props}>
+      <Breadcrumb {...props} separator="/">
         {items.map(item => (
           <Breadcrumb.Item key={item.key}>
             {item.onClick ? (
               <span
-                style={{ cursor: "pointer" }}
+                style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
                 onClick={item.onClick}
+                onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
+                onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
               >
                 {item.title}
               </span>
             ) : (
-              item.title
+              <span style={{ color: '#595959', fontWeight: '500' }}>
+                {item.title}
+              </span>
             )}
           </Breadcrumb.Item>
         ))}

From c1c874b3a796f742d94a0476e48756f594b032fc Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 23:12:05 +0500
Subject: [PATCH 36/37] test managed linked object

---
 .../services/managed-objects.service.ts       | 44 ++++++++++++++++++-
 .../services/workspace.service.ts             | 23 +++++++++-
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
index 9f3615c36..fdbcec0e5 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
@@ -68,7 +68,8 @@ export async function isManagedObject(
 export async function setManagedObject(
   objGid: string,
   environmentId: string,
-  objType: ManagedObjectType
+  objType: ManagedObjectType,
+  managedId?: string
 ): Promise<boolean> {
   try {
     if (!objGid || !environmentId || !objType) {
@@ -78,7 +79,8 @@ export async function setManagedObject(
     const requestBody = {
       objGid,
       environmentId,
-      objType
+      objType,
+      ...(managedId && { managedId })
     };
 
     const response = await axios.post(`/api/plugins/enterprise/managed-obj`, requestBody);
@@ -150,3 +152,41 @@ export async function getManagedObjects(
   }
 }
 
+/**
+ * Get a single managed object by its parameters
+ * @param objGid - Object's global ID
+ * @param environmentId - Environment ID
+ * @param objType - Object type (ORG, APP, QUERY, DATASOURCE)
+ * @returns Promise with ManagedObject if found
+ */
+export async function getSingleManagedObject(
+  objGid: string,
+  environmentId: string,
+  objType: ManagedObjectType
+): Promise<ManagedObject | null> {
+  try {
+    if (!objGid || !environmentId || !objType) {
+      throw new Error("Missing required parameters");
+    }
+
+    const response = await axios.get(`/api/plugins/enterprise/managed-obj`, {
+      params: {
+        objGid,
+        environmentId,
+        objType
+      }
+    });
+
+    return response.data.data || null;
+  } catch (error) {
+    // If the object doesn't exist as managed, return null instead of throwing
+    if (axios.isAxiosError(error) && error.response?.status === 404) {
+      return null;
+    }
+    
+    const errorMessage = error instanceof Error ? error.message : "Failed to fetch managed object";
+    message.error(errorMessage);
+    throw error;
+  }
+}
+
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
index c6f7881dc..3ead76f4a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
@@ -1,7 +1,7 @@
 // services/workspacesService.ts (or wherever makes sense in your structure)
 import { message } from "antd";
 import { getEnvironmentWorkspaces } from "./environments.service";
-import { getManagedObjects, ManagedObject, ManagedObjectType } from "./managed-objects.service";
+import { getManagedObjects, getSingleManagedObject, ManagedObject, ManagedObjectType, setManagedObject } from "./managed-objects.service";
 import { Workspace } from "../types/workspace.types";
 import { ManagedOrg } from "../types/enterprise.types";
 import axios from "axios";
@@ -95,6 +95,27 @@ export async function deployWorkspace(params: {
         targetEnvId: params.targetEnvId
       }
     });
+
+    // After successful deployment, set the managed object in target environment
+    if (response.status === 200) {
+      const res = await getSingleManagedObject(
+        params.workspaceId,
+        params.envId,
+        ManagedObjectType.ORG
+      );
+      // managedID => res.managedId
+      //objGID = res.objGid
+      // targetEnvId = params.targetEnvId
+      // objType = ManagedObjectType.ORG
+      await setManagedObject(
+        res?.objGid!,
+        params.targetEnvId,
+        ManagedObjectType.ORG,
+        res?.managedId!
+      );
+    }
+
+
     return response.status === 200;
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : 'Failed to deploy workspace';

From 23f526dcc5c35581e526da8353ea8b92cda7eb8a Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 19 May 2025 23:25:52 +0500
Subject: [PATCH 37/37] make a util function to link the managed object

---
 .../setting/environments/services/apps.service.ts | 10 ++++++++++
 .../environments/services/datasources.service.ts  | 10 +++++++++-
 .../services/managed-objects.service.ts           | 15 +++++++++++++++
 .../environments/services/query.service.ts        | 10 +++++++++-
 .../environments/services/workspace.service.ts    | 15 +++------------
 5 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
index c057b3a52..bfd7ae348 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
@@ -5,6 +5,7 @@ import { getManagedApps } from "./enterprise.service";
 import { App, AppStats } from "../types/app.types";
 import axios from "axios";
 import { getManagedObjects, ManagedObject } from "./managed-objects.service";
+import { ManagedObjectType, transferManagedObject } from "./managed-objects.service";
 
 
 export interface MergedAppsResult {
@@ -122,6 +123,15 @@ export const deployApp = async (params: DeployAppParams): Promise<boolean> => {
       }
     );
     
+    if (response.status === 200) {
+      await transferManagedObject(
+        params.applicationId,
+        params.envId,
+        params.targetEnvId,
+        ManagedObjectType.APP
+      );
+    }
+    
     return response.status === 200;
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : 'Failed to deploy app';
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
index 0e7b9d6bb..694c28dd1 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
@@ -2,7 +2,7 @@
 import axios from 'axios';
 import { message } from "antd";
 import { DataSource, DataSourceWithMeta } from "../types/datasource.types";
-import { getManagedObjects, ManagedObject, ManagedObjectType } from "./managed-objects.service";
+import { getManagedObjects, ManagedObject, ManagedObjectType  , transferManagedObject } from "./managed-objects.service";
 
 export interface DataSourceStats {
   total: number;
@@ -160,6 +160,14 @@ export async function deployDataSource(params: DeployDataSourceParams): Promise<
         updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false
       }
     });
+    if (response.status === 200) {
+      await transferManagedObject(
+        params.datasourceId,
+        params.envId,
+        params.targetEnvId,
+        ManagedObjectType.DATASOURCE
+      );
+    }
     return response.status === 200;
   } catch (error) {
     console.error('Error deploying data source:', error);
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
index fdbcec0e5..589ea6a5a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/managed-objects.service.ts
@@ -190,3 +190,18 @@ export async function getSingleManagedObject(
   }
 }
 
+
+export async function transferManagedObject(objGid: string, sourceEnvId: string, targetEnvId: string, objType: ManagedObjectType): Promise<void> {
+  try {
+    const managedObject = await getSingleManagedObject(objGid, sourceEnvId, objType);
+    if (managedObject) {
+      await setManagedObject(managedObject.objGid, targetEnvId, objType, managedObject.managedId);
+    } else {
+      throw new Error(`Managed object not found for objGid: ${objGid}`);
+    }
+  } catch (error) {
+    console.error('Error transferring managed object:', error);
+    throw error;
+  }
+}
+
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
index 8d69af92a..6801097be 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/query.service.ts
@@ -2,7 +2,7 @@
  * Get merged queries (both regular and managed) for a workspace
  */
 import axios from 'axios';
-import { getManagedObjects, ManagedObject, ManagedObjectType } from './managed-objects.service';
+import { getManagedObjects, ManagedObjectType, transferManagedObject } from './managed-objects.service';
 import { getWorkspaceQueries } from './environments.service';
 import { Query, QueryStats } from '../types/query.types';
 export interface MergedQueriesResult {
@@ -82,6 +82,14 @@ export interface MergedQueriesResult {
           updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false
         }
       });
+      if (response.status === 200) {
+        await transferManagedObject(
+          params.queryId,
+          params.envId,
+          params.targetEnvId,
+          ManagedObjectType.QUERY
+        );
+      }
       return response.status === 200;
     } catch (error) {
       console.error('Error deploying query:', error);
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
index 3ead76f4a..4f7978f3b 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
@@ -1,7 +1,7 @@
 // services/workspacesService.ts (or wherever makes sense in your structure)
 import { message } from "antd";
 import { getEnvironmentWorkspaces } from "./environments.service";
-import { getManagedObjects, getSingleManagedObject, ManagedObject, ManagedObjectType, setManagedObject } from "./managed-objects.service";
+import { getManagedObjects, ManagedObject, ManagedObjectType, transferManagedObject } from "./managed-objects.service";
 import { Workspace } from "../types/workspace.types";
 import { ManagedOrg } from "../types/enterprise.types";
 import axios from "axios";
@@ -98,20 +98,11 @@ export async function deployWorkspace(params: {
 
     // After successful deployment, set the managed object in target environment
     if (response.status === 200) {
-      const res = await getSingleManagedObject(
+      await transferManagedObject(
         params.workspaceId,
         params.envId,
-        ManagedObjectType.ORG
-      );
-      // managedID => res.managedId
-      //objGID = res.objGid
-      // targetEnvId = params.targetEnvId
-      // objType = ManagedObjectType.ORG
-      await setManagedObject(
-        res?.objGid!,
         params.targetEnvId,
-        ManagedObjectType.ORG,
-        res?.managedId!
+        ManagedObjectType.ORG
       );
     }