[FIx]: improve UI for environments

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>
   );
 };
 

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)}