44Spin ,
55Typography ,
66Tabs ,
7+ Row ,
8+ Col ,
79} from "antd" ;
810import { messageInstance } from "lowcoder-design/src/components/GlobalInstances" ;
911import {
@@ -12,6 +14,8 @@ import {
1214CodeOutlined ,
1315HomeOutlined ,
1416TeamOutlined ,
17+ CloudServerOutlined ,
18+ CheckCircleOutlined ,
1519} from "@ant-design/icons" ;
1620
1721// Use the context hooks
@@ -25,7 +29,9 @@ import DataSourcesTab from "./components/DataSourcesTab";
2529import QueriesTab from "./components/QueriesTab" ;
2630import ModernBreadcrumbs from "./components/ModernBreadcrumbs" ;
2731import WorkspaceHeader from "./components/WorkspaceHeader" ;
32+ import StatsCard from "./components/StatsCard" ;
2833import ErrorComponent from "./components/ErrorComponent" ;
34+ import { Level1SettingPageContent } from "../styled" ;
2935
3036const WorkspaceDetail :React . FC = ( ) => {
3137// Use the context hooks
@@ -151,12 +157,7 @@ const WorkspaceDetail: React.FC = () => {
151157] ;
152158
153159return (
154- < div className = "workspace-detail-container" style = { {
155- padding :"24px" ,
156- flex :1 ,
157- minWidth :"1000px" ,
158- overflowX :"auto"
159- } } >
160+ < Level1SettingPageContent style = { { minWidth :"1000px" } } >
160161{ /* New Workspace Header */ }
161162< WorkspaceHeader
162163workspace = { workspace }
@@ -166,6 +167,42 @@ const WorkspaceDetail: React.FC = () => {
166167onDeploy = { ( ) => openDeployModal ( workspace , workspaceConfig , environment ) }
167168/>
168169
170+ { /* Stats Cards Row */ }
171+ < Row gutter = { [ 16 , 16 ] } style = { { marginBottom :"24px" } } >
172+ < Col xs = { 24 } sm = { 12 } lg = { 6 } >
173+ < StatsCard
174+ title = "Status"
175+ value = { workspace . managed ?"Managed" :"Unmanaged" }
176+ icon = { workspace . managed ?< CheckCircleOutlined /> :< CloudServerOutlined /> }
177+ color = { workspace . managed ?"#52c41a" :"#faad14" }
178+ />
179+ </ Col >
180+ < Col xs = { 24 } sm = { 12 } lg = { 6 } >
181+ < StatsCard
182+ title = "Environment"
183+ value = { environment . environmentType || "Unknown" }
184+ icon = { < CloudServerOutlined /> }
185+ color = "#1890ff"
186+ />
187+ </ Col >
188+ < Col xs = { 24 } sm = { 12 } lg = { 6 } >
189+ < StatsCard
190+ title = "Workspace ID"
191+ value = { workspace . id . slice ( - 8 ) }
192+ icon = { < TeamOutlined /> }
193+ color = "#722ed1"
194+ />
195+ </ Col >
196+ < Col xs = { 24 } sm = { 12 } lg = { 6 } >
197+ < StatsCard
198+ title = "Created"
199+ value = { workspace . creationDate ?new Date ( workspace . creationDate ) . toLocaleDateString ( 'en-US' , { month :'short' , day :'numeric' } ) :"Unknown" }
200+ icon = { < DatabaseOutlined /> }
201+ color = "#52c41a"
202+ />
203+ </ Col >
204+ </ Row >
205+
169206{ /* Modern Breadcrumbs navigation */ }
170207< ModernBreadcrumbs items = { breadcrumbItems } />
171208
@@ -176,7 +213,7 @@ const WorkspaceDetail: React.FC = () => {
176213type = "line"
177214items = { tabItems }
178215/>
179- </ div >
216+ </ Level1SettingPageContent >
180217) ;
181218} ;
182219