From 0ee3f1f60ff80b14e3507b88e1f80e9da127a259 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 15:52:03 +0500
Subject: [PATCH 01/13] Add api calls count

---
 .../environments/EnvironmentDetail.tsx        | 154 ++++++++++++++++++
 .../components/EnvironmentsTable.tsx          |  37 ++++-
 .../services/environments.service.ts          |   2 +
 .../environments/services/license.service.ts  |  86 +++++++++-
 .../environments/types/environment.types.ts   |  26 +++
 5 files changed, 294 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 041997779..eb6e250f8 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -10,6 +10,11 @@ import {
   Button,
   Tag,
   Result,
+  Progress,
+  Statistic,
+  Row,
+  Col,
+  Tooltip,
 } from "antd";
 import {
   LinkOutlined,
@@ -21,6 +26,9 @@ import {
   CloseCircleOutlined,
   ExclamationCircleOutlined,
   SyncOutlined,
+  ApiOutlined,
+  UserOutlined,
+  CrownOutlined,
 } from "@ant-design/icons";
 
 import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
@@ -33,6 +41,7 @@ import UserGroupsTab from "./components/UserGroupsTab";
 import EnvironmentHeader from "./components/EnvironmentHeader";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import { getEnvironmentTagColor } from "./utils/environmentUtils";
+import { formatAPICalls, getAPICallsStatusColor } from "./services/license.service";
 import ErrorComponent from './components/ErrorComponent';
 const { TabPane } = Tabs;
 
@@ -217,6 +226,151 @@ const EnvironmentDetail: React.FC = () => {
         </Descriptions>
       </Card>
 
+      {/* Detailed License Information Card - only show for licensed environments with details */}
+      {environment.isLicensed && environment.licenseDetails && (
+        <Card
+          title={
+            <span>
+              <CrownOutlined style={{ color: '#52c41a', marginRight: '8px' }} />
+              License Details
+            </span>
+          }
+          style={{ 
+            marginBottom: "24px", 
+            borderRadius: '4px', 
+            border: '1px solid #f0f0f0'
+          }}
+          className="license-details-card"
+        >
+          <Row gutter={[24, 16]}>
+            {/* API Calls Status */}
+            <Col xs={24} sm={12} md={8}>
+              <Card
+                size="small"
+                style={{ height: '100%', textAlign: 'center' }}
+                bodyStyle={{ padding: '16px' }}
+              >
+                <Statistic
+                  title="API Calls Remaining"
+                  value={environment.licenseDetails.remainingAPICalls}
+                  formatter={(value) => (
+                    <span style={{ 
+                      color: getAPICallsStatusColor(
+                        environment.licenseDetails?.remainingAPICalls || 0,
+                        environment.licenseDetails?.totalAPICallsLimit || 0
+                      )
+                    }}>
+                      {value?.toLocaleString()}
+                    </span>
+                  )}
+                  prefix={<ApiOutlined />}
+                />
+                <div style={{ marginTop: '12px' }}>
+                  <Progress
+                    percent={100 - (environment.licenseDetails.apiCallsUsage || 0)}
+                    strokeColor={getAPICallsStatusColor(
+                      environment.licenseDetails.remainingAPICalls,
+                      environment.licenseDetails.totalAPICallsLimit || 0
+                    )}
+                    size="small"
+                    showInfo={false}
+                  />
+                  <div style={{ 
+                    fontSize: '12px', 
+                    color: '#8c8c8c', 
+                    marginTop: '4px' 
+                  }}>
+                    {environment.licenseDetails.apiCallsUsage || 0}% used
+                  </div>
+                </div>
+              </Card>
+            </Col>
+
+            {/* Total License Limit */}
+            <Col xs={24} sm={12} md={8}>
+              <Card
+                size="small"
+                style={{ height: '100%', textAlign: 'center' }}
+                bodyStyle={{ padding: '16px' }}
+              >
+                <Statistic
+                  title="Total API Calls Limit"
+                  value={environment.licenseDetails.totalAPICallsLimit}
+                  formatter={(value) => value?.toLocaleString()}
+                  prefix={<ApiOutlined />}
+                />
+                <Tag 
+                  color="blue" 
+                  style={{ marginTop: '12px' }}
+                >
+                  {environment.licenseDetails.eeLicenses.length} License{environment.licenseDetails.eeLicenses.length !== 1 ? 's' : ''}
+                </Tag>
+              </Card>
+            </Col>
+
+            {/* Enterprise Edition Status */}
+            <Col xs={24} sm={12} md={8}>
+              <Card
+                size="small"
+                style={{ height: '100%', textAlign: 'center' }}
+                bodyStyle={{ padding: '16px' }}
+              >
+                <Statistic
+                  title="Enterprise Edition"
+                  value={environment.licenseDetails.eeActive ? "Active" : "Inactive"}
+                  formatter={(value) => (
+                    <Tag 
+                      color={environment.licenseDetails?.eeActive ? "green" : "red"}
+                      icon={environment.licenseDetails?.eeActive ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+                    >
+                      {value}
+                    </Tag>
+                  )}
+                />
+              </Card>
+            </Col>
+          </Row>
+
+          {/* License Details */}
+          <div style={{ marginTop: '24px' }}>
+            <Typography.Title level={5} style={{ marginBottom: '16px' }}>
+              <UserOutlined style={{ marginRight: '8px' }} />
+              License Information
+            </Typography.Title>
+            
+            <Row gutter={[16, 16]}>
+              {environment.licenseDetails.eeLicenses.map((license, index) => (
+                <Col xs={24} sm={12} md={8} key={license.uuid}>
+                  <Card
+                    size="small"
+                    style={{ 
+                      border: '1px solid #f0f0f0',
+                      borderRadius: '6px'
+                    }}
+                    bodyStyle={{ padding: '12px' }}
+                  >
+                    <div style={{ marginBottom: '8px' }}>
+                      <strong style={{ color: '#262626' }}>
+                        {license.customerName}
+                      </strong>
+                    </div>
+                    <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>
+                      ID: {license.customerId}
+                    </div>
+                    <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>
+                      UUID: <span style={{ fontFamily: 'monospace' }}>{license.uuid.substring(0, 8)}...</span>
+                    </div>
+                    <Tag color="blue">
+                      {license.apiCallsLimit.toLocaleString()} calls
+                    </Tag>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+          </div>
+        </Card>
+      )}
+
       {/* Modern Breadcrumbs navigation */}
       <ModernBreadcrumbs items={breadcrumbItems} />
       
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 0a1e9d98e..aeebf4036 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Table, Tag, Button, Tooltip, Space, Card, Row, Col, Typography, Avatar, Spin, Alert } from 'antd';
-import { EditOutlined, AuditOutlined, LinkOutlined, EnvironmentOutlined, StarFilled, CloudServerOutlined, CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, SyncOutlined } from '@ant-design/icons';
+import { Table, Tag, Button, Tooltip, Space, Card, Row, Col, Typography, Avatar, Spin, Alert, Progress } from 'antd';
+import { EditOutlined, AuditOutlined, LinkOutlined, EnvironmentOutlined, StarFilled, CloudServerOutlined, CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, SyncOutlined, ApiOutlined } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
 import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
+import { getAPICallsStatusColor } from '../services/license.service';
 
 const { Text, Title } = Typography;
 
@@ -267,6 +268,38 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
                         </Text>
                       </div>
                     </div>
+
+                    {/* API Calls Information - show if license details are available */}
+                    {env.licenseDetails && (
+                      <div style={{ marginTop: '8px', padding: '8px', background: '#fafafa', borderRadius: '4px' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
+                          <Text type="secondary" style={{ fontSize: '11px' }}>
+                            <ApiOutlined style={{ marginRight: '4px' }} />
+                            API Calls
+                          </Text>
+                      
+                        </div>
+                        <Progress
+                          percent={100 - (env.licenseDetails.apiCallsUsage || 0)}
+                          strokeColor={getAPICallsStatusColor(
+                            env.licenseDetails.remainingAPICalls,
+                            env.licenseDetails.totalAPICallsLimit || 0
+                          )}
+                          size="small"
+                          showInfo={false}
+                          strokeWidth={4}
+                        />
+                        <div style={{ 
+                          display: 'flex', 
+                          justifyContent: 'space-between', 
+                          marginTop: '4px',
+                          fontSize: '10px',
+                          color: '#8c8c8c'
+                        }}>
+                          <span>{env.licenseDetails.apiCallsUsage || 0}% used</span>
+                        </div>
+                      </div>
+                    )}
                   </div>
                 </div>
               </Card>
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/environments.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/environments.service.ts
index eb11609f5..b3ccb5314 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/environments.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/environments.service.ts
@@ -136,6 +136,7 @@ export async function getEnvironmentById(id: string): Promise<Environment> {
         envWithLicense.isLicensed = licenseInfo.isValid;
         envWithLicense.licenseStatus = licenseInfo.isValid ? 'licensed' : 'unlicensed';
         envWithLicense.licenseError = licenseInfo.error;
+        envWithLicense.licenseDetails = licenseInfo.details;
       } else {
         envWithLicense.isLicensed = false;
         envWithLicense.licenseStatus = 'error';
@@ -556,6 +557,7 @@ export async function getEnvironmentsWithLicenseStatus(): Promise<Environment[]>
             envWithLicense.isLicensed = licenseInfo.isValid;
             envWithLicense.licenseStatus = licenseInfo.isValid ? 'licensed' : 'unlicensed';
             envWithLicense.licenseError = licenseInfo.error;
+            envWithLicense.licenseDetails = licenseInfo.details;
           } else {
             envWithLicense.isLicensed = false;
             envWithLicense.licenseStatus = 'error';
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts
index ff0be0ce6..1d80a2164 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts
@@ -1,11 +1,11 @@
 import axios from 'axios';
-import { EnvironmentLicense } from '../types/environment.types';
+import { EnvironmentLicense, DetailedLicenseInfo } from '../types/environment.types';
 
 /**
- * Check if license endpoint exists for an environment
+ * Check license and fetch detailed license information for an environment
  * @param apiServiceUrl - API service URL for the environment  
  * @param apiKey - API key for the environment
- * @returns Promise with license information
+ * @returns Promise with license information including detailed data
  */
 export async function checkEnvironmentLicense(
   apiServiceUrl: string,
@@ -25,8 +25,8 @@ export async function checkEnvironmentLicense(
       headers.Authorization = `Bearer ${apiKey}`;
     }
 
-    // Use GET request to check endpoint existence
-    await axios.get(
+    // Fetch detailed license information
+    const response = await axios.get(
       `${apiServiceUrl}/api/plugins/enterprise/license`,
       { 
         headers,
@@ -34,16 +34,84 @@ export async function checkEnvironmentLicense(
       }
     );
 
-    // If we get a successful response, the endpoint exists
+    // Parse the license response
+    const licenseData = response.data;
+    
+    // Calculate total API calls limit and usage percentage
+    const totalAPICallsLimit = licenseData.eeLicenses?.reduce(
+      (sum: number, license: any) => sum + (license.apiCallsLimit || 0), 
+      0
+    ) || 0;
+    
+    const apiCallsUsage = totalAPICallsLimit > 0 
+      ? Math.round(((totalAPICallsLimit - licenseData.remainingAPICalls) / totalAPICallsLimit) * 100)
+      : 0;
+
+    const licenseDetails: DetailedLicenseInfo = {
+      eeActive: licenseData.eeActive || false,
+      remainingAPICalls: licenseData.remainingAPICalls || 0,
+      eeLicenses: licenseData.eeLicenses || [],
+      totalAPICallsLimit,
+      apiCallsUsage
+    };
+
+    // Determine if license is valid based on enterprise edition status and remaining calls
+    const isValid = licenseDetails.eeActive && licenseDetails.remainingAPICalls > 0;
+
     return {
-      isValid: true
+      isValid,
+      details: licenseDetails
     };
 
   } catch (error) {
-    // Any error means the endpoint doesn't exist or isn't accessible
+    // Determine the specific error type
+    let errorMessage = 'License not available';
+    
+    if (axios.isAxiosError(error)) {
+      if (error.code === 'ECONNABORTED') {
+        errorMessage = 'License check timed out';
+      } else if (error.response?.status === 404) {
+        errorMessage = 'License endpoint not found';
+      } else if (error.response?.status === 401) {
+        errorMessage = 'Unauthorized - check API key';
+      } else if (error.response && error.response.status >= 500) {
+        errorMessage = 'License server error';
+      }
+    }
+
     return {
       isValid: false,
-      error: 'License not available'
+      error: errorMessage
     };
   }
+}
+
+/**
+ * Format API calls for display
+ * @param remaining - Remaining API calls
+ * @param total - Total API calls limit
+ * @returns Formatted string
+ */
+export function formatAPICalls(remaining: number, total: number): string {
+  const used = total - remaining;
+  const percentage = total > 0 ? Math.round((used / total) * 100) : 0;
+  
+  return `${remaining.toLocaleString()} remaining (${used.toLocaleString()}/${total.toLocaleString()} used, ${percentage}%)`;
+}
+
+/**
+ * Get API calls status color based on usage percentage
+ * @param remainingCalls - Remaining API calls
+ * @param totalCalls - Total API calls limit
+ * @returns Color string for UI components
+ */
+export function getAPICallsStatusColor(remainingCalls: number, totalCalls: number): string {
+  if (totalCalls === 0) return '#d9d9d9'; // Unknown
+  
+  const usagePercentage = ((totalCalls - remainingCalls) / totalCalls) * 100;
+  
+  if (usagePercentage >= 90) return '#ff4d4f'; // Red - Critical
+  if (usagePercentage >= 75) return '#faad14'; // Orange - Warning  
+  if (usagePercentage >= 50) return '#1890ff'; // Blue - Moderate
+  return '#52c41a'; // Green - Good
 } 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/setting/environments/types/environment.types.ts b/client/packages/lowcoder/src/pages/setting/environments/types/environment.types.ts
index 388fbab02..d62730c98 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/types/environment.types.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/types/environment.types.ts
@@ -18,6 +18,8 @@ export interface Environment {
   isLicensed?: boolean;
   licenseStatus?: 'checking' | 'licensed' | 'unlicensed' | 'error';
   licenseError?: string;
+  // Enhanced license details
+  licenseDetails?: DetailedLicenseInfo;
 }
 
 /**
@@ -26,4 +28,28 @@ export interface Environment {
 export interface EnvironmentLicense {
   isValid: boolean;
   error?: string;
+  // Enhanced license details
+  details?: DetailedLicenseInfo;
+}
+
+/**
+ * Interface representing detailed license information from the license endpoint
+ */
+export interface DetailedLicenseInfo {
+  eeActive: boolean;
+  remainingAPICalls: number;
+  eeLicenses: LicenseEntry[];
+  // Calculated fields
+  totalAPICallsLimit?: number;
+  apiCallsUsage?: number; // percentage used
+}
+
+/**
+ * Interface representing a single license entry
+ */
+export interface LicenseEntry {
+  uuid: string;
+  customerId: string;
+  customerName: string;
+  apiCallsLimit: number;
 }
\ No newline at end of file

From 49d8481b16f1576351fd86e22eb64a0c8f119507 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 16:59:49 +0500
Subject: [PATCH 02/13] update alert texts for environment modals

---
 .../environments/components/CreateEnvironmentModal.tsx |  6 +++---
 .../environments/components/EditEnvironmentModal.tsx   | 10 ++++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/CreateEnvironmentModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/CreateEnvironmentModal.tsx
index ace410bab..b9b5c7c2a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/CreateEnvironmentModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/CreateEnvironmentModal.tsx
@@ -192,9 +192,9 @@ const CreateEnvironmentModal: React.FC<CreateEnvironmentModalProps> = ({
         </Form.Item>
 
         <Alert
-          message="License Information"
-          description="After creating the environment, the system will automatically check the license status. Make sure the API service URL and API key are correctly configured for license validation."
-          type="info"
+          message="Configuration Requirements"
+          description="Ensure that the API Service URL is configured and correct, the API key is valid, and for license verification make sure you have both the license and plugin properly installed."
+          type="warning"
           showIcon
           style={{ marginTop: '16px' }}
         />
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 593e4be2e..3b90bc826 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Input, Select, Switch, Button, Tooltip } from 'antd';
+import { Modal, Form, Input, Select, Switch, Button, Alert, Tooltip } from 'antd';
 import { useSelector } from 'react-redux';
 import { selectMasterEnvironment, selectHasMasterEnvironment } from 'redux/selectors/enterpriseSelectors';
 import { Environment } from '../types/environment.types';
@@ -191,7 +191,13 @@ const EditEnvironmentModal: React.FC<EditEnvironmentModalProps> = ({
           </div>
         </Form.Item>
 
-       
+        <Alert
+          message="Configuration Requirements"
+          description="Ensure that the API Service URL is configured and correct, the API key is valid, and for license verification make sure you have both the license and plugin properly installed."
+          type="warning"
+          showIcon
+          style={{ marginTop: '16px' }}
+        />
       </Form>
     </Modal>
   );

From 2252d2ce17d042a26d8b322d4b6743fbcbf3242f Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 17:41:38 +0500
Subject: [PATCH 03/13] add less aggressive license messages

---
 .../environments/EnvironmentDetail.tsx        |  4 +--
 .../components/EnvironmentsTable.tsx          | 18 ++++++------
 .../components/UnlicensedEnvironmentView.tsx  | 28 +++++++------------
 .../environments/services/license.service.ts  | 20 ++++++-------
 4 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index eb6e250f8..8672589ce 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -205,9 +205,9 @@ const EnvironmentDetail: React.FC = () => {
                 case 'licensed':
                   return <Tag icon={<CheckCircleOutlined />} color="green" style={{ borderRadius: '4px' }}>Licensed</Tag>;
                 case 'unlicensed':
-                  return <Tag icon={<CloseCircleOutlined />} color="red" style={{ borderRadius: '4px' }}>Not Licensed</Tag>;
+                  return <Tag icon={<CloseCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>License Needed</Tag>;
                 case 'error':
-                  return <Tag icon={<ExclamationCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>License Error</Tag>;
+                  return <Tag icon={<ExclamationCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>Setup Required</Tag>;
                 default:
                   return <Tag color="default" style={{ borderRadius: '4px' }}>Unknown</Tag>;
               }
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 aeebf4036..10e077c2b 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -55,29 +55,29 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
       case 'checking':
         return {
           icon: <SyncOutlined spin />,
-          color: '#1890ff',
+          color: '#40a9ff',
           text: 'Checking...',
           status: 'processing' as const
         };
       case 'licensed':
         return {
           icon: <CheckCircleOutlined />,
-          color: '#52c41a',
+          color: '#73d13d',
           text: 'Licensed',
           status: 'success' as const
         };
       case 'unlicensed':
         return {
           icon: <CloseCircleOutlined />,
-          color: '#ff4d4f',
-          text: 'Not Licensed',
-          status: 'error' as const
+          color: '#ff7875',
+          text: 'License Required',
+          status: 'warning' as const
         };
       case 'error':
         return {
           icon: <ExclamationCircleOutlined />,
-          color: '#faad14',
-          text: 'License Error',
+          color: '#ffc53d',
+          text: 'Setup Required',
           status: 'warning' as const
         };
       default:
@@ -180,8 +180,8 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
                         <Tag 
                           icon={licenseDisplay.icon}
                           color={licenseDisplay.status === 'success' ? 'green' : 
-                                 licenseDisplay.status === 'error' ? 'red' : 
-                                 licenseDisplay.status === 'warning' ? 'orange' : 'blue'}
+                                 licenseDisplay.status === 'warning' ? 'orange' : 
+                                 licenseDisplay.status === 'processing' ? 'blue' : 'default'}
                           style={{ fontSize: '11px', borderRadius: '4px' }}
                         >
                           {licenseDisplay.text}
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
index 6b61379dd..fbe2644b8 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
@@ -31,37 +31,29 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
   const getLicenseIcon = () => {
     switch (environment.licenseStatus) {
       case 'unlicensed':
-        return <CloseCircleOutlined style={{ fontSize: '48px', color: '#ff4d4f' }} />;
+        return <CloseCircleOutlined style={{ fontSize: '48px', color: '#ff7875' }} />;
       case 'error':
-        return <ExclamationCircleOutlined style={{ fontSize: '48px', color: '#faad14' }} />;
+        return <ExclamationCircleOutlined style={{ fontSize: '48px', color: '#ffc53d' }} />;
       default:
-        return <WarningOutlined style={{ fontSize: '48px', color: '#ff4d4f' }} />;
+        return <WarningOutlined style={{ fontSize: '48px', color: '#ff7875' }} />;
     }
   };
 
   const getLicenseTitle = () => {
-    switch (environment.licenseStatus) {
-      case 'unlicensed':
-        return 'Environment Not Licensed';
-      case 'error':
-        return 'License Configuration Error';
-      default:
-        return 'License Issue';
-    }
-  };
+   return environment.licenseError;
+ }
+
+
 
   const getLicenseDescription = () => {
-    if (environment.licenseError) {
-      return environment.licenseError;
-    }
     
     switch (environment.licenseStatus) {
       case 'unlicensed':
-        return 'This environment requires a valid license to access its features and functionality.';
+        return 'This environment needs a valid license to unlock its full capabilities and features. Please make sure your API Service URL is correctly configured and Plugin is installed.';
       case 'error':
-        return 'There was an error validating the license for this environment. Please check the configuration.';
+        return 'We encountered an issue while checking the license. Please review the configuration settings.';
       default:
-        return 'This environment has license-related issues that need to be resolved.';
+        return 'This environment requires license configuration to proceed.';
     }
   };
 
diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts
index 1d80a2164..ebc0ae46a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts
+++ b/client/packages/lowcoder/src/pages/setting/environments/services/license.service.ts
@@ -65,17 +65,17 @@ export async function checkEnvironmentLicense(
 
   } catch (error) {
     // Determine the specific error type
-    let errorMessage = 'License not available';
+    let errorMessage = 'License information unavailable';
     
     if (axios.isAxiosError(error)) {
       if (error.code === 'ECONNABORTED') {
-        errorMessage = 'License check timed out';
+        errorMessage = 'License check took too long';
       } else if (error.response?.status === 404) {
-        errorMessage = 'License endpoint not found';
+        errorMessage = 'License service not available';
       } else if (error.response?.status === 401) {
-        errorMessage = 'Unauthorized - check API key';
+        errorMessage = 'Authentication required - please check API key';
       } else if (error.response && error.response.status >= 500) {
-        errorMessage = 'License server error';
+        errorMessage = 'License service temporarily unavailable';
       }
     }
 
@@ -100,7 +100,7 @@ export function formatAPICalls(remaining: number, total: number): string {
 }
 
 /**
- * Get API calls status color based on usage percentage
+ * Get API calls status color based on usage percentage - using softer, less aggressive colors
  * @param remainingCalls - Remaining API calls
  * @param totalCalls - Total API calls limit
  * @returns Color string for UI components
@@ -110,8 +110,8 @@ export function getAPICallsStatusColor(remainingCalls: number, totalCalls: numbe
   
   const usagePercentage = ((totalCalls - remainingCalls) / totalCalls) * 100;
   
-  if (usagePercentage >= 90) return '#ff4d4f'; // Red - Critical
-  if (usagePercentage >= 75) return '#faad14'; // Orange - Warning  
-  if (usagePercentage >= 50) return '#1890ff'; // Blue - Moderate
-  return '#52c41a'; // Green - Good
+  if (usagePercentage >= 90) return '#ff7875'; // Soft red - High usage
+  if (usagePercentage >= 75) return '#ffc53d'; // Soft orange - Moderate usage  
+  if (usagePercentage >= 50) return '#40a9ff'; // Soft blue - Normal usage
+  return '#73d13d'; // Soft green - Low usage
 } 
\ No newline at end of file

From b7109c5849ff0d824c827eab1a3c6182e87034e0 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 19:56:37 +0500
Subject: [PATCH 04/13] [Fix]: antd errors for environments

---
 .../environments/components/ContactLowcoderModal.tsx      | 4 ++--
 .../setting/environments/components/EnvironmentsTable.tsx | 2 +-
 .../environments/components/UnlicensedEnvironmentView.tsx | 2 +-
 .../setting/environments/components/WorkspaceHeader.tsx   | 8 ++++----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/ContactLowcoderModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/ContactLowcoderModal.tsx
index 145b08e98..34ab0526f 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/ContactLowcoderModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/ContactLowcoderModal.tsx
@@ -100,7 +100,7 @@ const ContactLowcoderModal: React.FC<ContactLowcoderModalProps> = ({
       width={800}
       centered
       style={{ top: 20 }}
-      bodyStyle={{ padding: '24px' }}
+      styles={{ body: { padding: '24px' } }}
     >
       {/* Environment Context Section */}
       <Card
@@ -110,7 +110,7 @@ const ContactLowcoderModal: React.FC<ContactLowcoderModalProps> = ({
           background: '#fafafa',
           border: '1px solid #f0f0f0'
         }}
-        bodyStyle={{ padding: '16px' }}
+        styles={{ body: { padding: '16px' } }}
       >
         <Row gutter={[16, 8]} align="middle">
           <Col>
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 509cb509a..2c582561c 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -112,7 +112,7 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
                   border: '1px solid #f0f0f0',
                   position: 'relative'
                 }}
-                bodyStyle={{ padding: '16px' }}
+                styles={{ body: { padding: '16px' } }}
                 onClick={() => handleRowClick(env)}
               >
                 {/* Subtle overlay for unlicensed environments */}
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
index 6b61379dd..c7a0ebb9e 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
@@ -92,7 +92,7 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
                 background: 'white',
                 overflow: 'hidden'
               }}
-              bodyStyle={{ padding: '48px 32px' }}
+              styles={{ body: { padding: '48px 32px' } }}
             >
               {/* Status Icon */}
               <div style={{ marginBottom: '24px' }}>
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 f4c00c22e..69f390671 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
@@ -43,8 +43,8 @@ const HeaderWrapper = styled.div`
   margin-bottom: 24px;
 `;
 
-const GradientBanner = styled.div<{ avatarColor: string }>`
-  background: linear-gradient(135deg, ${props => props.avatarColor} 0%, rgba(24, 144, 255, 0.8) 100%);
+const GradientBanner = styled.div<{ $avatarColor: string }>`
+  background: linear-gradient(135deg, ${props => props.$avatarColor} 0%, rgba(24, 144, 255, 0.8) 100%);
   height: 140px;
   position: relative;
   overflow: hidden;
@@ -77,7 +77,7 @@ const GradientBanner = styled.div<{ avatarColor: string }>`
   }
 
   &:hover {
-    background: linear-gradient(135deg, rgba(24, 144, 255, 0.8) 0%, ${props => props.avatarColor} 100%);
+    background: linear-gradient(135deg, rgba(24, 144, 255, 0.8) 0%, ${props => props.$avatarColor} 100%);
     transition: background 1s ease-in-out;
   }
 `;
@@ -187,7 +187,7 @@ const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
 
   return (
     <HeaderWrapper>
-      <GradientBanner avatarColor={getAvatarColor(workspace.name)}>
+      <GradientBanner $avatarColor={getAvatarColor(workspace.name)}>
         <StatusBadge $active={workspace.managed}>
           {workspace.managed ? "Managed" : "Unmanaged"}
         </StatusBadge>

From 55ff3e55af6643a044111e712adbc79facb85ad7 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 20:07:55 +0500
Subject: [PATCH 05/13] [Fix] tabs and breadcrumbs error

---
 .../environments/EnvironmentDetail.tsx        | 47 +++++------
 .../setting/environments/WorkspaceDetail.tsx  | 84 +++++++++++++------
 .../components/ModernBreadcrumbs.tsx          | 42 +++++-----
 3 files changed, 102 insertions(+), 71 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index 041997779..08d163d14 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -34,7 +34,6 @@ import EnvironmentHeader from "./components/EnvironmentHeader";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import { getEnvironmentTagColor } from "./utils/environmentUtils";
 import ErrorComponent from './components/ErrorComponent';
-const { TabPane } = Tabs;
 
 /**
  * Environment Detail Page Component
@@ -140,6 +139,27 @@ const EnvironmentDetail: React.FC = () => {
     }
   ];
 
+  const tabItems = [
+    {
+      key: 'workspaces',
+      label: (
+        <span>
+          <AppstoreOutlined /> Workspaces
+        </span>
+      ),
+      children: <WorkspacesTab environment={environment} />
+    },
+    {
+      key: 'userGroups',
+      label: (
+        <span>
+          <UsergroupAddOutlined /> User Groups
+        </span>
+      ),
+      children: <UserGroupsTab environment={environment} />
+    }
+  ];
+
   return (
     <div
       className="environment-detail-container"
@@ -227,29 +247,8 @@ const EnvironmentDetail: React.FC = () => {
         onChange={setActiveTab}
         className="modern-tabs"
         type="line"
-      >
-        <TabPane 
-          tab={
-            <span>
-              <AppstoreOutlined /> Workspaces
-            </span>
-          } 
-          key="workspaces"
-        >
-          <WorkspacesTab environment={environment} />
-        </TabPane>
-
-        <TabPane
-          tab={
-            <span>
-              <UsergroupAddOutlined /> User Groups
-            </span>
-          }
-          key="userGroups"
-        >
-          <UserGroupsTab environment={environment} />
-        </TabPane>
-      </Tabs>
+        items={tabItems}
+      />
 
       {/* Edit Environment Modal */}
       {environment && (
diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index 6ed3a1427..ecdd09d25 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -27,15 +27,12 @@ import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import WorkspaceHeader from "./components/WorkspaceHeader";
 import ErrorComponent from "./components/ErrorComponent";
 
-const { TabPane } = Tabs;
-
 const WorkspaceDetail: React.FC = () => {
   // Use the context hooks
   const { environment } = useSingleEnvironmentContext();
   const { workspace, isLoading, error, toggleManagedStatus } = useWorkspaceContext();
   const { openDeployModal } = useDeployModal();
 
-
   const [isToggling, setIsToggling] = useState(false);
 
   // Handle toggle managed status
@@ -58,7 +55,17 @@ const WorkspaceDetail: React.FC = () => {
   if (isLoading) {
     return (
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
-        <Spin size="large" tip="Loading workspace details..." style={{ display: 'block', textAlign: 'center' }} />
+        <Spin size="large" spinning={true}>
+          <div style={{ 
+            display: 'block', 
+            textAlign: 'center', 
+            padding: '20px',
+            color: '#8c8c8c',
+            fontSize: '14px'
+          }}>
+            Loading workspace details...
+          </div>
+        </Spin>
       </div>
     );
   }
@@ -98,6 +105,51 @@ const WorkspaceDetail: React.FC = () => {
     }
   ];
 
+  const tabItems = [
+    {
+      key: 'apps',
+      label: (
+        <span>
+          <AppstoreOutlined /> Apps
+        </span>
+      ),
+      children: (
+        <AppsTab
+          environment={environment}
+          workspaceId={workspace.id}
+        />
+      )
+    },
+    {
+      key: 'dataSources',
+      label: (
+        <span>
+          <DatabaseOutlined /> Data Sources
+        </span>
+      ),
+      children: (
+        <DataSourcesTab
+          environment={environment}
+          workspaceId={workspace.id}
+        />
+      )
+    },
+    {
+      key: 'queries',
+      label: (
+        <span>
+          <CodeOutlined /> Queries
+        </span>
+      ),
+      children: (
+        <QueriesTab
+          environment={environment}
+          workspaceId={workspace.id}
+        />
+      )
+    }
+  ];
+
   return (
     <div className="workspace-detail-container" style={{ 
       padding: "24px", 
@@ -122,28 +174,8 @@ const WorkspaceDetail: React.FC = () => {
         defaultActiveKey="apps" 
         className="modern-tabs" 
         type="line"
-      >
-        <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
-          <AppsTab
-            environment={environment}
-            workspaceId={workspace.id}
-          />
-        </TabPane>
-
-        <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
-          <DataSourcesTab
-            environment={environment}
-            workspaceId={workspace.id}
-          />
-        </TabPane>
-        <TabPane tab={<span><CodeOutlined /> Queries</span>} key="queries">
-          <QueriesTab
-            environment={environment}
-            workspaceId={workspace.id}
-          />
-        </TabPane>
-        
-      </Tabs>
+        items={tabItems}
+      />
     </div>
   );
 };
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 1a3d35524..509e3fd1a 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { Breadcrumb } from 'antd';
 import { BreadcrumbProps } from 'antd/lib/breadcrumb';
 
-interface ModernBreadcrumbsProps extends BreadcrumbProps {
+interface ModernBreadcrumbsProps extends Omit<BreadcrumbProps, 'items'> {
   /**
    * Items to display in the breadcrumb
    */
@@ -17,6 +17,25 @@ interface ModernBreadcrumbsProps extends BreadcrumbProps {
  * Modern styled breadcrumb component with consistent styling
  */
 const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
+  // Convert custom items format to Antd's expected format
+  const breadcrumbItems = items.map(item => ({
+    key: item.key,
+    title: item.onClick ? (
+      <span
+        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>
+    ) : (
+      <span style={{ color: '#595959', fontWeight: '500' }}>
+        {item.title}
+      </span>
+    )
+  }));
+
   return (
     <div className="modern-breadcrumb" style={{
       background: '#e6f7ff',
@@ -27,26 +46,7 @@ const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...pr
       display: 'flex',
       alignItems: 'center'
     }}>
-      <Breadcrumb {...props} separator="/">
-        {items.map(item => (
-          <Breadcrumb.Item key={item.key}>
-            {item.onClick ? (
-              <span
-                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>
-            ) : (
-              <span style={{ color: '#595959', fontWeight: '500' }}>
-                {item.title}
-              </span>
-            )}
-          </Breadcrumb.Item>
-        ))}
-      </Breadcrumb>
+      <Breadcrumb {...props} separator="/" items={breadcrumbItems} />
     </div>
   );
 };

From 880a4fbcc7945adb09d0382826a36677f65ef498 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 20:33:51 +0500
Subject: [PATCH 06/13] [FIx]: improve UI for environments

---
 .../environments/EnvironmentDetail.tsx        | 100 ++++++++++-----
 .../setting/environments/EnvironmentsList.tsx | 114 ++++++------------
 .../components/EnvironmentHeader.tsx          |  47 +++++---
 .../components/ModernBreadcrumbs.tsx          |  34 ++++--
 .../environments/components/StatsCard.tsx     |  74 ++++++++++++
 5 files changed, 232 insertions(+), 137 deletions(-)
 create mode 100644 client/packages/lowcoder/src/pages/setting/environments/components/StatsCard.tsx

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index 08d163d14..945b86424 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -10,6 +10,8 @@ import {
   Button,
   Tag,
   Result,
+  Row,
+  Col,
 } from "antd";
 import {
   LinkOutlined,
@@ -21,6 +23,9 @@ import {
   CloseCircleOutlined,
   ExclamationCircleOutlined,
   SyncOutlined,
+  CloudServerOutlined,
+  UserOutlined,
+  SafetyOutlined,
 } from "@ant-design/icons";
 
 import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
@@ -31,9 +36,11 @@ import history from "@lowcoder-ee/util/history";
 import WorkspacesTab from "./components/WorkspacesTab";
 import UserGroupsTab from "./components/UserGroupsTab";
 import EnvironmentHeader from "./components/EnvironmentHeader";
+import StatsCard from "./components/StatsCard";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import { getEnvironmentTagColor } from "./utils/environmentUtils";
 import ErrorComponent from './components/ErrorComponent';
+import { Level1SettingPageContent } from "../styled";
 
 /**
  * Environment Detail Page Component
@@ -123,19 +130,31 @@ const EnvironmentDetail: React.FC = () => {
     );
   }
 
-  const breadcrumbItems = [
+  // Stats data for the cards
+  const statsData = [
     {
-      key: 'environments',
-      title: (
-        <span>
-          <HomeOutlined /> Environments
-        </span>
-      ),
-      onClick: () => history.push("/setting/environments")
+      title: "Type",
+      value: environment.environmentType || "Unknown",
+      icon: <CloudServerOutlined />,
+      color: getEnvironmentTagColor(environment.environmentType)
+    },
+    {
+      title: "Status",
+      value: environment.isLicensed ? "Licensed" : "Unlicensed",
+      icon: environment.isLicensed ? <CheckCircleOutlined /> : <CloseCircleOutlined />,
+      color: environment.isLicensed ? "#52c41a" : "#ff4d4f"
+    },
+    {
+      title: "API Key",
+      value: environment.environmentApikey ? "Configured" : "Not Set",
+      icon: <SafetyOutlined />,
+      color: environment.environmentApikey ? "#1890ff" : "#faad14"
     },
     {
-      key: 'currentEnvironment',
-      title: environment.environmentName
+      title: "Master Env",
+      value: environment.isMaster ? "Yes" : "No",
+      icon: <UserOutlined />,
+      color: environment.isMaster ? "#722ed1" : "#8c8c8c"
     }
   ];
 
@@ -161,16 +180,30 @@ const EnvironmentDetail: React.FC = () => {
   ];
 
   return (
-    <div
-      className="environment-detail-container"
-      style={{ padding: "24px", flex: 1, minWidth: "1000px" }}
-    >
+    <Level1SettingPageContent>
+      {/* Breadcrumbs */}
+   
+
       {/* Environment Header Component */}
       <EnvironmentHeader 
         environment={environment} 
         onEditClick={handleEditClick} 
       />
 
+      {/* Stats Cards Row */}
+      <Row gutter={[16, 16]} style={{ marginBottom: "24px" }}>
+        {statsData.map((stat, index) => (
+          <Col xs={24} sm={12} lg={6} key={index}>
+            <StatsCard
+              title={stat.title}
+              value={stat.value}
+              icon={stat.icon}
+              color={stat.color}
+            />
+          </Col>
+        ))}
+      </Row>
+
       {/* Basic Environment Information Card */}
       <Card
         title="Environment Overview"
@@ -200,13 +233,10 @@ const EnvironmentDetail: React.FC = () => {
               "No domain set"
             )}
           </Descriptions.Item>
-          <Descriptions.Item label="Environment Type">
-            <Tag
-              color={getEnvironmentTagColor(environment.environmentType)}
-              style={{ borderRadius: '4px' }}
-            >
-              {environment.environmentType}
-            </Tag>
+          <Descriptions.Item label="Environment ID">
+            <code style={{ padding: '2px 6px', background: '#f5f5f5', borderRadius: '3px' }}>
+              {environment.environmentId}
+            </code>
           </Descriptions.Item>
           <Descriptions.Item label="License Status">
             {(() => {
@@ -224,21 +254,25 @@ const EnvironmentDetail: React.FC = () => {
               }
             })()}
           </Descriptions.Item>
-          <Descriptions.Item label="API Key Status">
-            {environment.environmentApikey ? (
-              <Tag color="green" style={{ borderRadius: '4px' }}>Configured</Tag>
-            ) : (
-              <Tag color="red" style={{ borderRadius: '4px' }}>Not Configured</Tag>
-            )}
-          </Descriptions.Item>
-          <Descriptions.Item label="Master Environment">
-            {environment.isMaster ? "Yes" : "No"}
+          <Descriptions.Item label="Created">
+            {environment.createdAt ? new Date(environment.createdAt).toLocaleDateString() : "Unknown"}
           </Descriptions.Item>
         </Descriptions>
       </Card>
 
-      {/* Modern Breadcrumbs navigation */}
-      <ModernBreadcrumbs items={breadcrumbItems} />
+      <ModernBreadcrumbs 
+        items={[
+          {
+            key: 'environments',
+            title: 'Environments',
+            onClick: () => history.push('/setting/environments')
+          },
+          {
+            key: 'current',
+            title: environment.environmentName || "Environment Detail"
+          }
+        ]}
+      />
       
       {/* Tabs for Workspaces and User Groups */}
       <Tabs 
@@ -260,7 +294,7 @@ const EnvironmentDetail: React.FC = () => {
           loading={isUpdating}
         />
       )}
-    </div>
+    </Level1SettingPageContent>
   );
 };
 
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
index 7b041b81f..36be33166 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Alert, Empty, Spin, Card } from "antd";
+import { Alert, Empty, Spin, Card, Row, Col } from "antd";
 import { SyncOutlined, CloudServerOutlined } from "@ant-design/icons";
 import { AddIcon, Search, TacoButton } from "lowcoder-design";
 import { useHistory } from "react-router-dom";
@@ -9,6 +9,7 @@ import { fetchEnvironments } from "redux/reduxActions/enterpriseActions";
 import { Environment } from "./types/environment.types";
 import EnvironmentsTable from "./components/EnvironmentsTable";
 import CreateEnvironmentModal from "./components/CreateEnvironmentModal";
+import StatsCard from "./components/StatsCard";
 import { buildEnvironmentId } from "@lowcoder-ee/constants/routesURL";
 import { createEnvironment } from "./services/environments.service";
 import { getEnvironmentTagColor } from "./utils/environmentUtils";
@@ -107,37 +108,6 @@ const EnvironmentsList: React.FC = () => {
     return <CloudServerOutlined />;
   };
 
-  // Stat card component
-  const StatCard = ({ title, value, color }: { title: string; value: number; color: string }) => (
-    <Card 
-      style={{ 
-        height: '100%', 
-        borderRadius: '4px',
-        border: '1px solid #f0f0f0'
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div>
-          <div style={{ fontSize: '13px', color: '#8c8c8c', marginBottom: '8px' }}>{title}</div>
-          <div style={{ fontSize: '20px', fontWeight: 500 }}>{value}</div>
-        </div>
-        <div style={{ 
-          fontSize: '24px', 
-          opacity: 0.8, 
-          color: color,
-          padding: '8px',
-          backgroundColor: `${color}15`,
-          borderRadius: '4px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}>
-          {getEnvironmentIcon(title)}
-        </div>
-      </div>
-    </Card>
-  );
-
   // Filter environments based on search text
   const filteredEnvironments = environments.filter((env) => {
     const searchLower = searchText.toLowerCase();
@@ -201,75 +171,65 @@ const EnvironmentsList: React.FC = () => {
         >
           Refresh
         </RefreshBtn>
-        <AddBtn buttonType="primary" onClick={() => setIsCreateModalVisible(true)}>
-          New Environment
+        <AddBtn 
+          buttonType="primary" 
+          icon={<AddIcon />}
+          onClick={() => setIsCreateModalVisible(true)}
+        >
+          Add Environment
         </AddBtn>
       </HeaderWrapper>
 
       <BodyWrapper>
-        {/* Environment Type Statistics */}
-        {!isLoading && environments.length > 0 && (
-          <StatsWrapper>
-            <div style={{ display: 'flex', gap: '16px', marginBottom: '20px', flexWrap: 'wrap' }}>
-              {environmentStats.map(([type, count]) => (
-                <div key={type} style={{ minWidth: '200px', flex: '1' }}>
-                  <StatCard 
-                    title={type} 
-                    value={count} 
-                    color={getEnvironmentTagColor(type.toLowerCase())}
-                  />
-                </div>
-              ))}
-            </div>
-          </StatsWrapper>
-        )}
+        {/* Environment Statistics Cards */}
+        <StatsWrapper>
+          <Row gutter={[16, 16]}>
+            {environmentStats.map(([type, count]) => (
+              <Col xs={24} sm={12} md={8} lg={6} key={type}>
+                <StatsCard
+                  title={`${type} Environments`}
+                  value={count}
+                  icon={getEnvironmentIcon(type)}
+                  color={getEnvironmentTagColor(type)}
+                />
+              </Col>
+            ))}
+          </Row>
+        </StatsWrapper>
 
-        {/* Error handling */}
         {error && (
           <Alert
             message="Error loading environments"
             description={error}
             type="error"
             showIcon
-            style={{ marginBottom: "16px" }}
+            style={{ marginBottom: 16 }}
           />
         )}
 
-        {/* Loading, empty state or table */}
-        {isLoading ? (
-          <div style={{ display: 'flex', justifyContent: 'center', padding: '60px 0' }}>
-            <Spin size="large" />
-          </div>
-        ) : environments.length === 0 && !error ? (
-          <Empty
-            description="No environments found"
-            image={Empty.PRESENTED_IMAGE_SIMPLE}
-            style={{ padding: '60px 0' }}
+        {!isLoading && !error && filteredEnvironments.length === 0 && searchText && (
+          <Empty 
+            description={`No environments found matching "${searchText}"`}
+            style={{ margin: "60px 0" }}
           />
-        ) : filteredEnvironments.length === 0 ? (
-          <Empty
-            description="No environments match your search"
-            image={Empty.PRESENTED_IMAGE_SIMPLE}
-            style={{ padding: '60px 0' }}
+        )}
+
+        {!isLoading && !error && environments.length === 0 && !searchText && (
+          <Empty 
+            description="No environments found. Create your first environment to get started."
+            style={{ margin: "60px 0" }}
           />
-        ) : (
-          /* Table component */
+        )}
+
+        {(filteredEnvironments.length > 0 || isLoading) && (
           <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>
-        )}
       </BodyWrapper>
 
-      {/* Create Environment Modal */}
       <CreateEnvironmentModal
         visible={isCreateModalVisible}
         onClose={() => setIsCreateModalVisible(false)}
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 0a999129e..43ecb5fc0 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Tag, Typography, Row, Col } from 'antd';
 import { EditOutlined, CloudServerOutlined } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
-import { getEnvironmentTagColor, getEnvironmentHeaderGradient } from '../utils/environmentUtils';
+import { getEnvironmentTagColor } from '../utils/environmentUtils';
 
 const { Title, Text } = Typography;
 
@@ -24,11 +24,11 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
       className="environment-header"
       style={{
         marginBottom: "24px",
-        background: getEnvironmentHeaderGradient(environment.environmentType),
+        background: '#fff',
         padding: '20px 24px',
         borderRadius: '8px',
-        color: 'white',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+        border: '1px solid #f0f0f0',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
       }}
     >
       <Row justify="space-between" align="middle" gutter={[16, 16]}>
@@ -36,35 +36,50 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
           <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
             <div className="environment-icon" style={{
               fontSize: '32px',
-              backgroundColor: 'rgba(255,255,255,0.2)',
+              backgroundColor: '#f5f5f5',
               width: '64px',
               height: '64px',
-              borderRadius: '50%',
+              borderRadius: '8px',
               display: 'flex',
               alignItems: 'center',
-              justifyContent: 'center'
+              justifyContent: 'center',
+              color: '#8b8fa3',
+              border: '1px solid #e8e8e8'
             }}>
               <CloudServerOutlined />
             </div>
             <div>
-              <Title level={3} style={{ margin: '0 0 4px 0', color: 'white' }}>
+              <Title level={3} style={{ margin: '0 0 8px 0', color: '#222222', fontWeight: '500' }}>
                 {environment.environmentName || "Unnamed Environment"}
               </Title>
               <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
-                <Text style={{ color: 'rgba(255,255,255,0.85)' }}>
+                <Text style={{ 
+                  color: '#8b8fa3', 
+                  fontSize: '14px',
+                  fontFamily: 'monospace'
+                }}>
                   ID: {environment.environmentId}
                 </Text>
                 <Tag 
                   color={getEnvironmentTagColor(environment.environmentType)}
-                  style={{ marginLeft: 0, borderRadius: '12px' }}
+                  style={{ 
+                    marginLeft: 0, 
+                    borderRadius: '4px',
+                    fontSize: '12px'
+                  }}
                 >
                   {environment.environmentType}
                 </Tag>
                 {environment.isMaster && (
-                  <Tag color="green" style={{ marginLeft: 0, borderRadius: '12px' }}>
+                  <Tag color="green" style={{ marginLeft: 0, borderRadius: '4px', fontSize: '12px' }}>
                     Master
                   </Tag>
                 )}
+                {environment.isLicensed === false && (
+                  <Tag color="orange" style={{ marginLeft: 0, borderRadius: '4px', fontSize: '12px' }}>
+                    Unlicensed
+                  </Tag>
+                )}
               </div>
             </div>
           </div>
@@ -73,14 +88,10 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
           <Button
             icon={<EditOutlined />}
             onClick={onEditClick}
-            type="default"
-            size="large"
+            type="primary"
             style={{
-              background: 'white',
-              color: '#1890ff',
-              borderColor: 'white',
-              fontWeight: 500,
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+              fontWeight: '500',
+              borderRadius: '4px'
             }}
           >
             Edit Environment
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 509e3fd1a..0403be24b 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx
@@ -22,15 +22,26 @@ const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...pr
     key: item.key,
     title: item.onClick ? (
       <span
-        style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
+        style={{ 
+          cursor: "pointer", 
+          color: '#1890ff', 
+          fontWeight: '500',
+          transition: 'color 0.2s ease'
+        }}
         onClick={item.onClick}
-        onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
-        onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.color = '#096dd9';
+          e.currentTarget.style.textDecoration = 'underline';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.color = '#1890ff';
+          e.currentTarget.style.textDecoration = 'none';
+        }}
       >
         {item.title}
       </span>
     ) : (
-      <span style={{ color: '#595959', fontWeight: '500' }}>
+      <span style={{ color: '#222222', fontWeight: '500' }}>
         {item.title}
       </span>
     )
@@ -38,15 +49,20 @@ const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...pr
 
   return (
     <div className="modern-breadcrumb" style={{
-      background: '#e6f7ff',
-      padding: '10px 20px',
-      borderRadius: '8px',
+      background: '#f5f5f5',
+      padding: '12px 20px',
+      borderRadius: '4px',
       marginBottom: '20px',
-      boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+      border: '1px solid #e8e8e8',
+      boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
       display: 'flex',
       alignItems: 'center'
     }}>
-      <Breadcrumb {...props} separator="/" items={breadcrumbItems} />
+      <Breadcrumb 
+        {...props} 
+        separator={<span style={{ color: '#8b8fa3' }}>/</span>}
+        items={breadcrumbItems} 
+      />
     </div>
   );
 };
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/StatsCard.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/StatsCard.tsx
new file mode 100644
index 000000000..214a60106
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/StatsCard.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Card } from 'antd';
+
+interface StatsCardProps {
+  title: string;
+  value: number | string;
+  icon?: React.ReactNode;
+  color?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Reusable StatsCard component for displaying environment statistics
+ * Used across all Environment pages for consistency
+ */
+const StatsCard: React.FC<StatsCardProps> = ({ 
+  title, 
+  value, 
+  icon, 
+  color = '#1890ff',
+  className = '',
+  style = {}
+}) => {
+  return (
+    <Card 
+      className={className}
+      style={{ 
+        height: '100%', 
+        borderRadius: '4px',
+        border: '1px solid #f0f0f0',
+        ...style
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ 
+            fontSize: '13px', 
+            color: '#8c8c8c', 
+            marginBottom: '8px',
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px'
+          }}>
+            {title}
+          </div>
+          <div style={{ 
+            fontSize: '20px', 
+            fontWeight: 500,
+            color: '#262626'
+          }}>
+            {value}
+          </div>
+        </div>
+        {icon && (
+          <div style={{ 
+            fontSize: '24px', 
+            opacity: 0.8, 
+            color: color,
+            padding: '8px',
+            backgroundColor: `${color}15`,
+            borderRadius: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+            {icon}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+};
+
+export default StatsCard; 
\ No newline at end of file

From f507287500e71a288413fbc22fc9b7d39763776a Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 20:47:53 +0500
Subject: [PATCH 07/13] fix environment detail width issue

---
 .../src/pages/setting/environments/EnvironmentDetail.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index 945b86424..a0aed23eb 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -180,7 +180,7 @@ const EnvironmentDetail: React.FC = () => {
   ];
 
   return (
-    <Level1SettingPageContent>
+    <Level1SettingPageContent style={{ minWidth: "1000px" }}>
       {/* Breadcrumbs */}
    
 

From b35861bbaa67d44b7a4441b28271826e2950224d Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 21:03:24 +0500
Subject: [PATCH 08/13] [Fix] Workspace Detail Page UI

---
 .../setting/environments/WorkspaceDetail.tsx  |  51 +++-
 .../components/WorkspaceHeader.tsx            | 286 ++++++------------
 2 files changed, 133 insertions(+), 204 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
index ecdd09d25..8ca8d3294 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -4,6 +4,8 @@ import {
   Spin, 
   Typography, 
   Tabs, 
+  Row,
+  Col,
 } from "antd";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { 
@@ -12,6 +14,8 @@ import {
   CodeOutlined,
   HomeOutlined,
   TeamOutlined,
+  CloudServerOutlined,
+  CheckCircleOutlined,
 } from "@ant-design/icons";
 
 // Use the context hooks
@@ -25,7 +29,9 @@ import DataSourcesTab from "./components/DataSourcesTab";
 import QueriesTab from "./components/QueriesTab";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
 import WorkspaceHeader from "./components/WorkspaceHeader";
+import StatsCard from "./components/StatsCard";
 import ErrorComponent from "./components/ErrorComponent";
+import { Level1SettingPageContent } from "../styled";
 
 const WorkspaceDetail: React.FC = () => {
   // Use the context hooks
@@ -151,12 +157,7 @@ const WorkspaceDetail: React.FC = () => {
   ];
 
   return (
-    <div className="workspace-detail-container" style={{ 
-      padding: "24px", 
-      flex: 1,
-      minWidth: "1000px",
-      overflowX: "auto"
-    }}>
+    <Level1SettingPageContent style={{ minWidth: "1000px" }}>
       {/* New Workspace Header */}
       <WorkspaceHeader
         workspace={workspace}
@@ -166,6 +167,42 @@ const WorkspaceDetail: React.FC = () => {
         onDeploy={() => openDeployModal(workspace, workspaceConfig, environment)}
       />
 
+      {/* Stats Cards Row */}
+      <Row gutter={[16, 16]} style={{ marginBottom: "24px" }}>
+        <Col xs={24} sm={12} lg={6}>
+          <StatsCard
+            title="Status"
+            value={workspace.managed ? "Managed" : "Unmanaged"}
+            icon={workspace.managed ? <CheckCircleOutlined /> : <CloudServerOutlined />}
+            color={workspace.managed ? "#52c41a" : "#faad14"}
+          />
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <StatsCard
+            title="Environment"
+            value={environment.environmentType || "Unknown"}
+            icon={<CloudServerOutlined />}
+            color="#1890ff"
+          />
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <StatsCard
+            title="Workspace ID"
+            value={workspace.id.slice(-8)}
+            icon={<TeamOutlined />}
+            color="#722ed1"
+          />
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <StatsCard
+            title="Created"
+            value={workspace.creationDate ? new Date(workspace.creationDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : "Unknown"}
+            icon={<DatabaseOutlined />}
+            color="#52c41a"
+          />
+        </Col>
+      </Row>
+
       {/* Modern Breadcrumbs navigation */}
       <ModernBreadcrumbs items={breadcrumbItems} />
 
@@ -176,7 +213,7 @@ const WorkspaceDetail: React.FC = () => {
         type="line"
         items={tabItems}
       />
-    </div>
+    </Level1SettingPageContent>
   );
 };
 
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 69f390671..462e6bf35 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspaceHeader.tsx
@@ -7,144 +7,20 @@ import {
   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<{ $avatarColor: string }>`
-  background: linear-gradient(135deg, ${props => props.$avatarColor} 0%, rgba(24, 144, 255, 0.8) 100%);
-  height: 140px;
-  position: relative;
-  overflow: hidden;
-  transition: background 1s ease-in-out;
-  
-  &::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);
-    }
-  }
-
-  &:hover {
-    background: linear-gradient(135deg, rgba(24, 144, 255, 0.8) 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(-2px);
-  }
-`;
-
-const AvatarContainer = styled.div`
-  position: absolute;
-  top: -50px;
-  left: 24px;
-  background: white;
-  padding: 4px;
-  border-radius: 8px;
-  border: 1px solid #f0f0f0;
-`;
-
-const StatusBadge = styled(Tag)<{ $active?: boolean }>`
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  font-weight: 500;
-  font-size: 12px;
-  padding: 4px 12px;
-  border-radius: 4px;
-  border: none;
-  background: ${props => props.$active ? '#52c41a' : '#f5f5f5'};
-  color: ${props => props.$active ? 'white' : '#8c8c8c'};
-`;
-
-const StatCard = styled(Card)`
-  border-radius: 4px;
-  border: 1px solid #f0f0f0;
-  transition: all 0.3s;
-
-  &:hover {
-    transform: translateY(-2px);
-    border-color: #d9d9d9;
-  }
-`;
-
-const ActionButton = styled(Button)`
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-`;
-
-const FavoriteButton = styled(Button)`
-  position: absolute;
-  top: 12px;
-  right: 80px;
-  border: none;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.9);
-  color: #722ed1;
-`;
-
 interface WorkspaceHeaderProps {
   workspace: Workspace;
   environment: Environment;
@@ -172,7 +48,7 @@ const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
   };
 
   // Format date for last updated
-  const formatDate = (date:  number | undefined) => {
+  const formatDate = (date: number | undefined) => {
     if (!date) return "N/A";
     return new Date(date).toLocaleDateString("en-US", {
       month: "short",
@@ -181,81 +57,97 @@ const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
     });
   };
 
-  
-
-  
-
   return (
-    <HeaderWrapper>
-      <GradientBanner $avatarColor={getAvatarColor(workspace.name)}>
-        <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" style={{ borderRadius: '4px' }}>
-                <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}
+    <div
+      className="workspace-header"
+      style={{
+        marginBottom: "24px",
+        background: '#fff',
+        padding: '20px 24px',
+        borderRadius: '8px',
+        border: '1px solid #f0f0f0',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
+      }}
+    >
+      <Row justify="space-between" align="middle" gutter={[16, 16]}>
+        <Col xs={24} sm={18}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <Avatar 
+              size={64} 
+              style={{ 
+                backgroundColor: getAvatarColor(workspace.name),
+                border: '2px solid #f0f0f0',
+                fontSize: '24px',
+                fontWeight: '500'
+              }}
+            >
+              {workspace.name.charAt(0).toUpperCase()}
+            </Avatar>
+            <div>
+              <Title level={3} style={{ margin: '0 0 8px 0', color: '#222222', fontWeight: '500' }}>
+                {workspace.name}
+              </Title>
+              <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
+                <Text style={{ 
+                  color: '#8b8fa3', 
+                  fontSize: '14px',
+                  fontFamily: 'monospace'
+                }}>
+                  ID: {workspace.id}
+                </Text>
+                <Text style={{ color: '#8b8fa3', fontSize: '14px' }}>
+                  <ClockCircleOutlined style={{ marginRight: 4 }} /> 
+                  {formatDate(workspace.creationDate)}
+                </Text>
+                <Tag color="blue" style={{ borderRadius: '4px', fontSize: '12px' }}>
+                  <CloudServerOutlined style={{ marginRight: 4 }} />
+                  {environment.environmentName}
+                </Tag>
+                <Tag 
+                  color={workspace.managed ? 'green' : 'orange'} 
+                  style={{ borderRadius: '4px', fontSize: '12px' }}
                 >
-                  Deploy
-                </ActionButton>
-              </Tooltip>
+                  {workspace.managed ? 'Managed' : 'Unmanaged'}
+                </Tag>
+              </div>
             </div>
-          </Col>
-        </Row>
-
-        
-        
-      </ContentContainer>
-    </HeaderWrapper>
+          </div>
+        </Col>
+        <Col xs={24} sm={6} style={{ textAlign: 'right' }}>
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: "12px", flexWrap: "wrap", alignItems: 'center' }}>
+            <div style={{ display: "flex", alignItems: "center", marginRight: '12px' }}>
+              <Text style={{ marginRight: "8px", color: '#8b8fa3', fontSize: '14px' }}>Managed:</Text>
+              <Switch
+                checked={!!workspace.managed}
+                onChange={onToggleManagedStatus}
+                loading={isToggling}
+                size="small"
+              />
+            </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={onDeploy}
+                disabled={!workspace.managed}
+                style={{
+                  fontWeight: '500',
+                  borderRadius: '4px'
+                }}
+              >
+                Deploy
+              </Button>
+            </Tooltip>
+          </div>
+        </Col>
+      </Row>
+    </div>
   );
 };
 

From 5b542764e2f676c28c21400f5b64ed3b8e5bb4a5 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 21:37:34 +0500
Subject: [PATCH 09/13] [Fix]: query deployment param

---
 .../setting/environments/config/query.config.tsx      |  7 +++++++
 .../setting/environments/config/workspace.config.tsx  | 11 ++---------
 .../setting/environments/services/query.service.ts    |  4 +++-
 .../environments/services/workspace.service.ts        |  3 ---
 4 files changed, 12 insertions(+), 13 deletions(-)

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 35189c8c9..4d4d5e588 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
@@ -17,6 +17,12 @@ export const queryConfig: DeployableItemConfig = {
         label: 'Update Dependencies If Needed',
         type: 'checkbox',
         defaultValue: false
+      },
+      {
+        name: 'deployCredential',
+        label: 'Overwrite Credentials',
+        type: 'checkbox',
+        defaultValue: false
       }
     ],
     prepareParams: (item: Query, values: any, sourceEnv: Environment, targetEnv: Environment) => {
@@ -26,6 +32,7 @@ export const queryConfig: DeployableItemConfig = {
         queryId: item.id,
         updateDependenciesIfNeeded: values.updateDependenciesIfNeeded,
         queryGid: item.gid,
+        deployCredential: values.deployCredential ?? false
       };
     },
     execute: (params: any) => deployQuery(params)
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 6689931f9..b0549ba0d 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
@@ -5,20 +5,13 @@ import { Environment } from '../types/environment.types';
 import { deployWorkspace } from '../services/workspace.service';
 import { Workspace } from '../types/workspace.types';
 
-
-
 export const workspaceConfig: DeployableItemConfig = {
   
   // Deploy configuration
   deploy: {
     singularLabel: 'Workspace',
     fields: [
-      {
-        name: 'deployCredential',
-        label: 'Overwrite Credentials',
-        type: 'checkbox',
-        defaultValue: false
-      }
+      // Removed deployCredential field as workspaces don't need credential overwrite
     ],
     prepareParams: (item: Workspace, values: any, sourceEnv: Environment, targetEnv: Environment) => {
       if (!item.gid) {
@@ -30,7 +23,7 @@ export const workspaceConfig: DeployableItemConfig = {
         envId: sourceEnv.environmentId,
         targetEnvId: targetEnv.environmentId,
         workspaceId: item.gid,
-        deployCredential: values.deployCredential ?? false
+        // Removed deployCredential parameter
       };
     },
     execute: (params: any) => deployWorkspace(params)
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 4cf7a29be..d22887931 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
@@ -16,6 +16,7 @@ export interface MergedQueriesResult {
     queryId: string;
     updateDependenciesIfNeeded?: boolean;
     queryGid: string;
+    deployCredential: boolean;
   }
   
   
@@ -71,7 +72,8 @@ export interface MergedQueriesResult {
           envId: params.envId,
           targetEnvId: params.targetEnvId,
           queryId: params.queryId,
-          updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false
+          updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false,
+          deployCredential: params.deployCredential
         }
       });
       if (response.status === 200) {
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 dec7c7cf7..b7cf4a37c 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
@@ -84,7 +84,6 @@ export async function deployWorkspace(params: {
   envId: string;
   targetEnvId: string;
   workspaceId: string;
-  deployCredential: boolean; // Mandatory parameter
 }): Promise<boolean> {
   try {
     // Use the new endpoint format with only essential parameters
@@ -93,7 +92,6 @@ export async function deployWorkspace(params: {
         orgGid: params.workspaceId, // Using workspaceId as orgGid
         envId: params.envId,
         targetEnvId: params.targetEnvId,
-        deployCredential: params.deployCredential
       }
     });
 
@@ -107,7 +105,6 @@ export async function deployWorkspace(params: {
       );
     }
 
-
     return response.status === 200;
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : 'Failed to deploy workspace';

From e54c63fa377b8fcb9f0c332fa6f80b238b4612d3 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 21:49:48 +0500
Subject: [PATCH 10/13] [Fix] remove updated dependenceis need for DS and QL

---
 .../environments/config/data-sources.config.tsx        |  9 ---------
 .../pages/setting/environments/config/query.config.tsx | 10 ----------
 .../environments/services/datasources.service.ts       |  2 --
 .../setting/environments/services/query.service.ts     |  2 --
 4 files changed, 23 deletions(-)

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 591621862..ce802e8de 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
@@ -5,18 +5,10 @@ import { DataSource} from '../types/datasource.types';
 import { Environment } from '../types/environment.types';
 import { deployDataSource, DataSourceStats } from '../services/datasources.service';
 
-
-
 export const dataSourcesConfig: DeployableItemConfig = {
   deploy: {
     singularLabel: 'Data Source',
     fields: [
-      {
-        name: 'updateDependenciesIfNeeded',
-        label: 'Update Dependencies If Needed',
-        type: 'checkbox',
-        defaultValue: false
-      },
       {
         name: 'deployCredential',
         label: 'Overwrite Credentials',
@@ -29,7 +21,6 @@ export const dataSourcesConfig: DeployableItemConfig = {
         envId: sourceEnv.environmentId,
         targetEnvId: targetEnv.environmentId,
         datasourceId: item.id,
-        updateDependenciesIfNeeded: values.updateDependenciesIfNeeded,
         datasourceGid: item.gid,
         deployCredential: values.deployCredential ?? 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 4d4d5e588..7495e5371 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
@@ -4,20 +4,11 @@ import { Query } from '../types/query.types';
 import { deployQuery } from '../services/query.service';
 import { Environment } from '../types/environment.types';
 
-
-
-
 export const queryConfig: DeployableItemConfig = {
   
   deploy: {
     singularLabel: 'Query',
     fields: [
-      {
-        name: 'updateDependenciesIfNeeded',
-        label: 'Update Dependencies If Needed',
-        type: 'checkbox',
-        defaultValue: false
-      },
       {
         name: 'deployCredential',
         label: 'Overwrite Credentials',
@@ -30,7 +21,6 @@ export const queryConfig: DeployableItemConfig = {
         envId: sourceEnv.environmentId,
         targetEnvId: targetEnv.environmentId,
         queryId: item.id,
-        updateDependenciesIfNeeded: values.updateDependenciesIfNeeded,
         queryGid: item.gid,
         deployCredential: values.deployCredential ?? false
       };
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 e743179b0..2fc492028 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
@@ -21,7 +21,6 @@ export interface DeployDataSourceParams {
   targetEnvId: string;
   datasourceId: string;
   datasourceGid: string;
-  updateDependenciesIfNeeded?: boolean;
   deployCredential: boolean;
 }
 // Get data sources for a workspace - using your correct implementation
@@ -158,7 +157,6 @@ export async function deployDataSource(params: DeployDataSourceParams): Promise<
         envId: params.envId,
         targetEnvId: params.targetEnvId,
         datasourceId: params.datasourceId,
-        updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false,
         deployCredential: params.deployCredential
       }
     });
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 d22887931..20b79f4ee 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
@@ -14,7 +14,6 @@ export interface MergedQueriesResult {
     envId: string;
     targetEnvId: string;
     queryId: string;
-    updateDependenciesIfNeeded?: boolean;
     queryGid: string;
     deployCredential: boolean;
   }
@@ -72,7 +71,6 @@ export interface MergedQueriesResult {
           envId: params.envId,
           targetEnvId: params.targetEnvId,
           queryId: params.queryId,
-          updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false,
           deployCredential: params.deployCredential
         }
       });

From 2714ddefc67d752d27fbf9bc90cf1668b5d8a57a Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 21:58:17 +0500
Subject: [PATCH 11/13] [Fix] unlicensed environment page UI

---
 .../components/UnlicensedEnvironmentView.tsx  | 235 ++++++++++--------
 1 file changed, 134 insertions(+), 101 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
index c7a0ebb9e..7967ce161 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
@@ -6,10 +6,15 @@ import {
   ArrowLeftOutlined,
   CloseCircleOutlined,
   ExclamationCircleOutlined,
-  WarningOutlined
+  WarningOutlined,
+  CloudServerOutlined
 } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
 import ContactLowcoderModal from './ContactLowcoderModal';
+import ModernBreadcrumbs from './ModernBreadcrumbs';
+import EnvironmentHeader from './EnvironmentHeader';
+import StatsCard from './StatsCard';
+import { Level1SettingPageContent } from "../../styled";
 import history from "@lowcoder-ee/util/history";
 
 const { Title, Text } = Typography;
@@ -20,7 +25,7 @@ interface UnlicensedEnvironmentViewProps {
 }
 
 /**
- * Modern UI for unlicensed environments
+ * Consistent UI for unlicensed environments matching other environment pages
  */
 const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
   environment,
@@ -65,84 +70,110 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
     }
   };
 
+  // Stats data consistent with other environment pages
+  const statsData = [
+    {
+      title: "Type",
+      value: environment.environmentType || "Unknown",
+      icon: <CloudServerOutlined />,
+      color: "#1890ff"
+    },
+    {
+      title: "Status",
+      value: "Unlicensed",
+      icon: <CloseCircleOutlined />,
+      color: "#ff4d4f"
+    },
+    {
+      title: "Master Env",
+      value: environment.isMaster ? "Yes" : "No",
+      icon: <CloudServerOutlined />,
+      color: environment.isMaster ? "#722ed1" : "#8c8c8c"
+    },
+    {
+      title: "License Issue",
+      value: environment.licenseStatus === 'error' ? "Error" : "Missing",
+      icon: environment.licenseStatus === 'error' ? <ExclamationCircleOutlined /> : <CloseCircleOutlined />,
+      color: environment.licenseStatus === 'error' ? "#faad14" : "#ff4d4f"
+    }
+  ];
+
   return (
-    <div style={{ 
-      padding: "24px", 
-      flex: 1,
-      minWidth: '1000px',
-      background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
-    }}>
-      <Row justify="center" style={{ minHeight: '80vh' }}>
-        <Col xs={24} sm={20} md={16} lg={14} xl={12}>
-          <div style={{ 
-            display: 'flex', 
-            flexDirection: 'column', 
-            justifyContent: 'center', 
-            alignItems: 'center',
-            minHeight: '70vh',
-            textAlign: 'center'
-          }}>
-            {/* Main Status Card */}
-            <Card
-              style={{
-                width: '100%',
-                borderRadius: '16px',
-                boxShadow: '0 20px 40px rgba(0,0,0,0.1)',
-                border: 'none',
-                background: 'white',
-                overflow: 'hidden'
-              }}
-              styles={{ body: { padding: '48px 32px' } }}
-            >
+    <Level1SettingPageContent style={{ minWidth: "1000px" }}>
+      {/* Environment Header Component */}
+      <EnvironmentHeader 
+        environment={environment} 
+        onEditClick={onEditClick} 
+      />
+
+      {/* Stats Cards Row */}
+      <Row gutter={[16, 16]} style={{ marginBottom: "24px" }}>
+        {statsData.map((stat, index) => (
+          <Col xs={24} sm={12} lg={6} key={index}>
+            <StatsCard
+              title={stat.title}
+              value={stat.value}
+              icon={stat.icon}
+              color={stat.color}
+            />
+          </Col>
+        ))}
+      </Row>
+
+      {/* Breadcrumbs */}
+      <ModernBreadcrumbs 
+        items={[
+          {
+            key: 'environments',
+            title: 'Environments',
+            onClick: () => history.push('/setting/environments')
+          },
+          {
+            key: 'current',
+            title: environment.environmentName || "Environment Detail"
+          }
+        ]}
+      />
+
+      {/* License Issue Card */}
+      <Card
+        style={{
+          marginBottom: "24px",
+          borderRadius: '4px',
+          border: '1px solid #f0f0f0',
+          background: 'white'
+        }}
+        styles={{ body: { padding: '32px' } }}
+      >
+        <Row justify="center">
+          <Col xs={24} sm={20} md={16} lg={12}>
+            <div style={{ 
+              display: 'flex', 
+              flexDirection: 'column', 
+              alignItems: 'center',
+              textAlign: 'center'
+            }}>
               {/* Status Icon */}
               <div style={{ marginBottom: '24px' }}>
                 {getLicenseIcon()}
               </div>
 
-              {/* Environment Info */}
-              <div style={{ marginBottom: '32px' }}>
-                <Title level={2} style={{ marginBottom: '8px', color: '#262626' }}>
-                  {getLicenseTitle()}
-                </Title>
-                <Text style={{ 
-                  fontSize: '16px', 
-                  color: '#595959',
-                  display: 'block',
-                  marginBottom: '16px',
-                  lineHeight: '1.6'
-                }}>
-                  {getLicenseDescription()}
-                </Text>
-                
-                {/* Environment Details */}
-                <div style={{
-                  background: '#fafafa',
-                  padding: '16px',
-                  borderRadius: '8px',
-                  marginTop: '24px',
-                  border: '1px solid #f0f0f0'
-                }}>
-                  <Text strong style={{ color: '#8c8c8c', fontSize: '14px' }}>Environment:</Text>
-                  <Text style={{ 
-                    display: 'block', 
-                    fontSize: '16px', 
-                    color: '#262626',
-                    marginTop: '4px'
-                  }}>
-                    {environment.environmentName || 'Unnamed Environment'}
-                  </Text>
-                  <Text style={{ 
-                    fontSize: '13px', 
-                    color: '#8c8c8c',
-                    fontFamily: 'monospace'
-                  }}>
-                    ID: {environment.environmentId}
-                  </Text>
-                </div>
-              </div>
+              {/* License Issue Information */}
+              <Title level={2} style={{ marginBottom: '12px', color: '#262626' }}>
+                {getLicenseTitle()}
+              </Title>
+              <Text style={{ 
+                fontSize: '16px', 
+                color: '#595959',
+                marginBottom: '24px',
+                lineHeight: '1.6',
+                maxWidth: '500px'
+              }}>
+                {getLicenseDescription()}
+              </Text>
 
               {/* Action Buttons */}
-              <Space size="large" direction="vertical" style={{ width: '100%' }}>
+              <Space size="large" direction="vertical" style={{ width: '100%', maxWidth: '400px' }}>
                 <Button
                   type="primary"
                   size="large"
@@ -151,12 +182,9 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
                   style={{
                     width: '100%',
                     height: '48px',
-                    borderRadius: '8px',
+                    borderRadius: '4px',
                     fontSize: '16px',
-                    fontWeight: 500,
-                    background: 'linear-gradient(135deg, #1890ff 0%, #0050b3 100%)',
-                    border: 'none',
-                    boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)'
+                    fontWeight: 500
                   }}
                 >
                   Contact Lowcoder Team
@@ -169,11 +197,9 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
                   style={{
                     width: '100%',
                     height: '48px',
-                    borderRadius: '8px',
+                    borderRadius: '4px',
                     fontSize: '16px',
-                    fontWeight: 500,
-                    borderColor: '#d9d9d9',
-                    color: '#595959'
+                    fontWeight: 500
                   }}
                 >
                   Edit Environment
@@ -186,31 +212,38 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
                   style={{
                     width: '100%',
                     height: '48px',
-                    borderRadius: '8px',
+                    borderRadius: '4px',
                     fontSize: '16px',
-                    fontWeight: 500,
-                    borderColor: '#d9d9d9',
-                    color: '#8c8c8c'
+                    fontWeight: 500
                   }}
                 >
                   Back to Environments
                 </Button>
               </Space>
-            </Card>
-
-            {/* Footer Help Text */}
-            <Text style={{ 
-              marginTop: '24px', 
-              color: '#8c8c8c',
-              fontSize: '14px',
-              maxWidth: '400px',
-              lineHeight: '1.5'
-            }}>
-              Need assistance? Contact our team for licensing support or edit the environment configuration to resolve this issue.
-            </Text>
-          </div>
-        </Col>
-      </Row>
+            </div>
+          </Col>
+        </Row>
+      </Card>
+
+      {/* Help Text */}
+      <Card
+        style={{
+          borderRadius: '4px',
+          border: '1px solid #f0f0f0',
+          background: '#fafafa'
+        }}
+        styles={{ body: { padding: '16px' } }}
+      >
+        <Text style={{ 
+          color: '#8c8c8c',
+          fontSize: '14px',
+          textAlign: 'center',
+          display: 'block',
+          lineHeight: '1.5'
+        }}>
+          Need assistance? Contact our team for licensing support or edit the environment configuration to resolve this issue.
+        </Text>
+      </Card>
 
       {/* Contact Lowcoder Modal */}
       <ContactLowcoderModal
@@ -218,7 +251,7 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
         onClose={() => setIsContactModalVisible(false)}
         environment={environment}
       />
-    </div>
+    </Level1SettingPageContent>
   );
 };
 

From 540af6f23b6115fb6a53ed8724ff03057f9f8245 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 29 May 2025 23:12:47 +0500
Subject: [PATCH 12/13] change progressbar direction

---
 .../src/pages/setting/environments/EnvironmentDetail.tsx        | 2 +-
 .../pages/setting/environments/components/EnvironmentsTable.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index 688544ca6..d8cc31eb1 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -319,7 +319,7 @@ const EnvironmentDetail: React.FC = () => {
                 />
                 <div style={{ marginTop: '12px' }}>
                   <Progress
-                    percent={100 - (environment.licenseDetails.apiCallsUsage || 0)}
+                    percent={environment.licenseDetails.apiCallsUsage || 0}
                     strokeColor={getAPICallsStatusColor(
                       environment.licenseDetails.remainingAPICalls,
                       environment.licenseDetails.totalAPICallsLimit || 0
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 e5b4264b3..a58a3434c 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -280,7 +280,7 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
                       
                         </div>
                         <Progress
-                          percent={100 - (env.licenseDetails.apiCallsUsage || 0)}
+                          percent={env.licenseDetails.apiCallsUsage || 0}
                           strokeColor={getAPICallsStatusColor(
                             env.licenseDetails.remainingAPICalls,
                             env.licenseDetails.totalAPICallsLimit || 0

From c28c62f60b8f84a73d9b3879fe544c5b94ed27a0 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Fri, 30 May 2025 00:05:58 +0500
Subject: [PATCH 13/13] [Fix] antD deprecated properties

---
 .../src/pages/setting/environments/EnvironmentDetail.tsx  | 8 ++++----
 .../setting/environments/components/EnvironmentsTable.tsx | 1 -
 .../setting/environments/config/workspace.config.tsx      | 2 --
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
index d8cc31eb1..245e12971 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -300,7 +300,7 @@ const EnvironmentDetail: React.FC = () => {
               <Card
                 size="small"
                 style={{ height: '100%', textAlign: 'center' }}
-                bodyStyle={{ padding: '16px' }}
+                styles={{ body: { padding: '16px' } }}
               >
                 <Statistic
                   title="API Calls Remaining"
@@ -343,7 +343,7 @@ const EnvironmentDetail: React.FC = () => {
               <Card
                 size="small"
                 style={{ height: '100%', textAlign: 'center' }}
-                bodyStyle={{ padding: '16px' }}
+                styles={{ body: { padding: '16px' } }}
               >
                 <Statistic
                   title="Total API Calls Limit"
@@ -365,7 +365,7 @@ const EnvironmentDetail: React.FC = () => {
               <Card
                 size="small"
                 style={{ height: '100%', textAlign: 'center' }}
-                bodyStyle={{ padding: '16px' }}
+                styles={{ body: { padding: '16px' } }}
               >
                 <Statistic
                   title="Enterprise Edition"
@@ -399,7 +399,7 @@ const EnvironmentDetail: React.FC = () => {
                       border: '1px solid #f0f0f0',
                       borderRadius: '6px'
                     }}
-                    bodyStyle={{ padding: '12px' }}
+                    styles={{ body: { padding: '12px' } }}
                   >
                     <div style={{ marginBottom: '8px' }}>
                       <strong style={{ color: '#262626' }}>
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 a58a3434c..2336c8d5d 100644
--- a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
+++ b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -287,7 +287,6 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
                           )}
                           size="small"
                           showInfo={false}
-                          strokeWidth={4}
                         />
                         <div style={{ 
                           display: 'flex', 
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 b0549ba0d..e35423f2f 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
@@ -17,13 +17,11 @@ export const workspaceConfig: DeployableItemConfig = {
       if (!item.gid) {
         console.error('Missing workspace.gid when deploying workspace:', item);
       }
-      console.log('item.gid', item.gid);
       
       return {
         envId: sourceEnv.environmentId,
         targetEnvId: targetEnv.environmentId,
         workspaceId: item.gid,
-        // Removed deployCredential parameter
       };
     },
     execute: (params: any) => deployWorkspace(params)

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1724.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1724.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1724.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1724.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>