openxiangda 1.0.62 → 1.0.63

package/templates/openxiangda-react-spa/src/layouts/UserShell.tsx

@@ -1,8 +1,24 @@
+import { Home, LogIn, Shield, Sparkles } from "lucide-react";
+import { useEffect } from "react";
 import { Link, Outlet, useParams } from "react-router-dom";
-import { PermissionBoundary, useCanAccessRoute } from "openxiangda/runtime/react";
+import {
+  PermissionBoundary,
+  useCanAccessRoute,
+  useRuntimeAuth,
+  useRuntimeBootstrap,
+  type PermissionBoundaryFallbackState,
+} from "openxiangda/runtime/react";
+
+import {
+  MacPrimaryButton,
+  MacSecondaryButton,
+  MacStatePage,
+  MacStatusPill,
+} from "@/shared/mac-admin";
 
 export function UserShell() {
   const { appType = "" } = useParams();
+  const bootstrap = useRuntimeBootstrap();
   const adminAccess = useCanAccessRoute({
     routeCode: "admin.dashboard",
     menuCode: "runtime_workspace",
@@ -11,26 +27,41 @@ export function UserShell() {
 
   return (
     <PermissionBoundary
-      routeCode="portal.home"
+      fallback={state => <UserAccessState appType={appType} state={state} />}
+      loadingFallback={<UserLoadingState />}
       menuCode="user_portal"
       path={`/view/${appType}/portal`}
-      loadingFallback={<ShellState title="正在校验权限" description="请稍候" />}
-      fallback={<ShellState title="无权访问用户门户" description="请切换到有权限的账号，或联系管理员开通页面权限。" />}
+      routeCode="portal.home"
     >
-      <div className="min-h-screen bg-[#f6f7f9]">
-        <header className="border-b border-slate-200 bg-white">
-          <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4">
-            <Link className="text-sm font-semibold text-slate-900" to={`/view/${appType}/portal`}>
-              OpenXiangda Portal
+      <div className="min-h-screen overflow-x-hidden bg-[linear-gradient(180deg,#eef2f7_0%,#f8fafc_58%,#eef2f7_100%)]">
+        <header className="border-b border-white/70 bg-white/[0.78] backdrop-blur-xl">
+          <div className="mx-auto flex h-20 max-w-6xl items-center justify-between gap-3 px-5 py-4">
+            <Link className="flex min-w-0 items-center gap-3" to={`/view/${appType}/portal`}>
+              <span className="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-slate-950 text-sm font-semibold text-white shadow-lg shadow-slate-300/70">
+                OX
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate text-base font-semibold text-slate-950">
+                  {String(bootstrap.data?.app?.name || "用户门户")}
+                </span>
+                <span className="block truncate text-xs text-slate-500">OpenXiangda Portal</span>
+              </span>
             </Link>
-            {adminAccess.canAccess ? (
-              <Link className="text-sm text-blue-700" to={`/view/${appType}/admin`}>
-                管理后台
-              </Link>
-            ) : null}
+            <div className="flex shrink-0 items-center gap-2">
+              <MacStatusPill tone="emerald">已登录</MacStatusPill>
+              {adminAccess.canAccess ? (
+                <Link
+                  className="inline-flex h-10 items-center gap-2 rounded-xl bg-white px-3 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50"
+                  to={`/view/${appType}/admin`}
+                >
+                  <Home size={17} />
+                  管理后台
+                </Link>
+              ) : null}
+            </div>
           </div>
         </header>
-        <main className="mx-auto max-w-6xl px-5 py-6">
+        <main className="mx-auto min-w-0 max-w-6xl px-5 py-6">
           <Outlet />
         </main>
       </div>
@@ -38,13 +69,61 @@ export function UserShell() {
   );
 }
 
-function ShellState({ title, description }: { title: string; description: string }) {
+function UserAccessState({
+  appType,
+  state,
+}: {
+  appType: string;
+  state: PermissionBoundaryFallbackState;
+}) {
+  const auth = useRuntimeAuth();
+
+  useEffect(() => {
+    if (state.errorType === "unauthenticated") {
+      void auth.redirectToLogin({ replace: true });
+    }
+  }, [auth, state.errorType]);
+
+  if (state.errorType === "unauthenticated") {
+    return (
+      <MacStatePage
+        actions={<MacPrimaryButton onClick={() => void auth.redirectToLogin({ replace: true })}>去登录</MacPrimaryButton>}
+        description="当前没有有效登录态，正在跳转到登录页。"
+        fullScreen
+        icon={<LogIn size={24} />}
+        status="401"
+        title="需要登录"
+      />
+    );
+  }
+
   return (
-    <div className="grid min-h-screen place-items-center bg-[#f6f7f9] px-6">
-      <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
-        <div className="text-base font-semibold text-slate-950">{title}</div>
-        <div className="mt-2 text-sm leading-6 text-slate-500">{description}</div>
-      </div>
-    </div>
+    <MacStatePage
+      actions={
+        <>
+          <MacSecondaryButton onClick={() => window.history.back()}>返回上一页</MacSecondaryButton>
+          <MacPrimaryButton onClick={() => window.location.assign(`/view/${appType}/public`)}>
+            打开公开页
+          </MacPrimaryButton>
+        </>
+      }
+      description={state.message || "请联系管理员开通用户门户页面权限。"}
+      fullScreen
+      icon={<Shield size={24} />}
+      status="403"
+      title="无权访问用户门户"
+    />
+  );
+}
+
+function UserLoadingState() {
+  return (
+    <MacStatePage
+      description="正在确认当前用户、菜单和页面权限。"
+      fullScreen
+      icon={<Sparkles size={24} />}
+      status="LOADING"
+      title="正在进入用户门户"
+    />
   );
 }

package/templates/openxiangda-react-spa/src/pages/admin/RuntimeWorkspacePage.tsx

@@ -1,57 +1,219 @@
-import { Activity, CheckCircle2, Cookie, ShieldCheck } from "lucide-react";
+import {
+  Activity,
+  CheckCircle2,
+  Clock3,
+  Cookie,
+  Database,
+  FileText,
+  GitBranch,
+  Rocket,
+  ShieldCheck,
+  Sparkles,
+  Workflow,
+} from "lucide-react";
+import type { ReactNode } from "react";
 import { useRuntimeBootstrap } from "openxiangda/runtime/react";
 
-const cards = [
-  { label: "SDK 连接", value: "已接入", tone: "text-green-700", icon: CheckCircle2 },
-  { label: "Cookie / Proxy", value: "同域代理", tone: "text-blue-700", icon: Cookie },
-  { label: "后端权限", value: "后端兜底", tone: "text-amber-700", icon: ShieldCheck },
-  { label: "运行状态", value: "React SPA", tone: "text-slate-700", icon: Activity },
+import {
+  MacDiagnosticPanel,
+  MacListItem,
+  MacMetricCard,
+  MacPageHeader,
+  MacPanel,
+  MacPrimaryButton,
+  MacSecondaryButton,
+  MacStatusPill,
+  MacTrendBars,
+} from "@/shared/mac-admin";
+
+const metrics = [
+  {
+    caption: "较昨日 +12.4%，来自用户门户与公开页。",
+    icon: Activity,
+    label: "页面访问",
+    tone: "blue" as const,
+    value: "24,680",
+  },
+  {
+    caption: "流程节点、办理任务和待确认数据。",
+    icon: Clock3,
+    label: "待处理",
+    tone: "amber" as const,
+    value: "18",
+  },
+  {
+    caption: "表单、流程和数据列表均由 SDK 默认页承载。",
+    icon: FileText,
+    label: "默认页",
+    tone: "emerald" as const,
+    value: "6",
+  },
+  {
+    caption: "Playwright 可使用真实用户一次性登录验证。",
+    icon: Sparkles,
+    label: "AI 校验",
+    tone: "violet" as const,
+    value: "Ready",
+  },
+];
+
+const activities = [
+  { icon: <CheckCircle2 size={17} />, text: "加载应用菜单与当前用户页面权限。", tone: "emerald" as const },
+  { icon: <GitBranch size={17} />, text: "React Router 接管 /view 下的应用路由。", tone: "blue" as const },
+  { icon: <ShieldCheck size={17} />, text: "后端继续兜底表单、字段、数据和流程权限。", tone: "amber" as const },
+  { icon: <Sparkles size={17} />, text: "AI 验证登录以真实用户身份进入页面。", tone: "violet" as const },
+];
+
+const tasks = [
+  { label: "运行时需求", meta: "普通表单 · 待提交", tone: "blue" as const },
+  { label: "运行时审批", meta: "流程表单 · 待处理", tone: "amber" as const },
+  { label: "用户门户", meta: "页面权限 · 已发布", tone: "emerald" as const },
+  { label: "公开访问", meta: "ticket 链路 · 待验证", tone: "violet" as const },
 ];
 
 export function RuntimeWorkspacePage() {
   const runtime = useRuntimeBootstrap();
+  const appName = String(runtime.data?.app?.name || "OpenXiangda React SPA");
+  const appType = runtime.appType || String(runtime.data?.appType || "");
+  const buildId = String(runtime.data?.runtime?.activeBuildId || "local-dev");
+  const releaseId = String(runtime.data?.runtime?.activeReleaseId || "draft");
+
   return (
-    <div className="space-y-5">
-      <section className="ox-panel p-5">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div>
-            <h1 className="text-xl font-semibold text-slate-950">运行时工作台</h1>
-            <p className="mt-1 text-sm text-slate-500">
-              应用路由、布局和页面组织由当前 React SPA 接管。
-            </p>
-          </div>
-          <button className="rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700" type="button">
-            发布版本
-          </button>
-        </div>
+    <div className="min-w-0 space-y-5">
+      <MacPageHeader
+        actions={
+          <>
+            <MacSecondaryButton>
+              <Database size={17} />
+              同步资源
+            </MacSecondaryButton>
+            <MacPrimaryButton>
+              <Rocket size={17} />
+              发布版本
+            </MacPrimaryButton>
+          </>
+        }
+        description="应用路由、布局、用户门户、公开访问和默认表单页均由当前 React SPA 接管；平台继续负责登录、权限、数据和流程接口。"
+        eyebrow="Runtime Workspace"
+        meta={
+          <>
+            <MacStatusPill tone="emerald">SDK 已连接</MacStatusPill>
+            <MacStatusPill tone="blue">Cookie 同域代理</MacStatusPill>
+            <MacStatusPill tone="amber">后端权限兜底</MacStatusPill>
+            <MacStatusPill tone="violet">React SPA</MacStatusPill>
+          </>
+        }
+        title={appName}
+      />
+
+      <section className="grid min-w-0 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {metrics.map(metric => (
+          <MacMetricCard key={metric.label} {...metric} />
+        ))}
       </section>
-      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        {cards.map(card => (
-          <div className="ox-panel p-4" key={card.label}>
-            <div className={`mb-4 inline-flex rounded-md bg-slate-50 p-2 ${card.tone}`}>
-              <card.icon size={18} />
+
+      <section className="grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)]">
+        <MacPanel
+          description="用于检查新应用运行质量、AI 验证覆盖度和默认页接入情况。"
+          title="运行概览"
+        >
+          <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
+            <div className="min-w-0">
+              <MacTrendBars tone="blue" values={[36, 48, 42, 66, 58, 78, 86, 71, 92, 88, 104, 118]} />
+              <div className="mt-4 grid gap-3 sm:grid-cols-3">
+                <RuntimeChip icon={<Cookie size={17} />} label="Service Proxy" value="/service" />
+                <RuntimeChip icon={<ShieldCheck size={17} />} label="Route Guard" value="backend" />
+                <RuntimeChip icon={<Workflow size={17} />} label="Workflow" value="enabled" />
+              </div>
+            </div>
+            <div className="rounded-2xl border border-slate-200/80 bg-slate-950 p-5 text-white">
+              <div className="text-sm text-slate-300">AI 验证覆盖</div>
+              <div
+                className="mx-auto mt-6 grid h-36 w-36 place-items-center rounded-full"
+                style={{ background: "conic-gradient(#22c55e 0 72%, #38bdf8 72% 88%, #f59e0b 88% 100%)" }}
+              >
+                <div className="grid h-24 w-24 place-items-center rounded-full bg-slate-950 text-center">
+                  <span className="text-3xl font-semibold">88%</span>
+                  <span className="-mt-4 text-xs text-slate-400">verified</span>
+                </div>
+              </div>
+              <div className="mt-5 grid gap-2 text-xs text-slate-300">
+                <span>真实用户登录链路</span>
+                <span>默认页 + override 双路径</span>
+                <span>401 / 403 状态分离</span>
+              </div>
             </div>
-            <div className="text-sm text-slate-500">{card.label}</div>
-            <div className="mt-1 text-lg font-semibold text-slate-950">{card.value}</div>
           </div>
-        ))}
+        </MacPanel>
+
+        <MacPanel title="待办与入口" description="这些入口可以替换成你的真实业务菜单。">
+          <div className="space-y-3">
+            {tasks.map(task => (
+              <MacListItem key={task.label} tone={task.tone}>
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-semibold text-slate-950">{task.label}</div>
+                    <div className="mt-1 truncate text-xs text-slate-500">{task.meta}</div>
+                  </div>
+                  <span className="rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-500">open</span>
+                </div>
+              </MacListItem>
+            ))}
+          </div>
+        </MacPanel>
       </section>
-      <section className="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
-        <div className="ox-panel p-5">
-          <h2 className="text-sm font-semibold text-slate-950">Runtime Bootstrap</h2>
-          <pre className="mt-4 max-h-80 overflow-auto rounded-md bg-slate-950 p-4 text-xs leading-6 text-slate-100">
-            {JSON.stringify(runtime.data, null, 2)}
-          </pre>
-        </div>
-        <div className="ox-panel p-5">
-          <h2 className="text-sm font-semibold text-slate-950">最近活动</h2>
-          <div className="mt-4 space-y-3 text-sm text-slate-600">
-            <div className="rounded-md border border-slate-200 p-3">加载应用菜单和当前用户权限。</div>
-            <div className="rounded-md border border-slate-200 p-3">默认页可直接挂载到 React Router。</div>
-            <div className="rounded-md border border-slate-200 p-3">AI 验证登录使用真实用户身份。</div>
+
+      <section className="grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_380px]">
+        <MacPanel title="最近活动">
+          <div className="grid gap-3 md:grid-cols-2">
+            {activities.map(activity => (
+              <MacListItem icon={activity.icon} key={activity.text} tone={activity.tone}>
+                <div className="text-sm leading-6 text-slate-600">{activity.text}</div>
+              </MacListItem>
+            ))}
+          </div>
+        </MacPanel>
+
+        <MacPanel title="运行环境" description="诊断信息默认收起，避免首页出现横向滚动。">
+          <div className="space-y-3 text-sm">
+            <InfoRow label="appType" value={appType} />
+            <InfoRow label="buildId" value={buildId} />
+            <InfoRow label="releaseId" value={releaseId} />
+            <InfoRow label="mode" value={String(runtime.data?.runtime?.mode || "react-spa")} />
           </div>
-        </div>
+        </MacPanel>
       </section>
+
+      <MacDiagnosticPanel data={runtime.data} title="Runtime Bootstrap" />
+    </div>
+  );
+}
+
+function RuntimeChip({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-slate-200/80 bg-white/75 p-3">
+      <div className="flex items-center gap-2 text-xs text-slate-500">
+        <span className="text-blue-600">{icon}</span>
+        {label}
+      </div>
+      <div className="mt-2 truncate text-sm font-semibold text-slate-950">{value}</div>
+    </div>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3 rounded-xl bg-slate-50 px-3 py-2">
+      <span className="shrink-0 text-xs font-medium text-slate-500">{label}</span>
+      <span className="min-w-0 truncate text-xs font-semibold text-slate-800">{value}</span>
     </div>
   );
 }

package/templates/openxiangda-react-spa/src/pages/defaults/DataRoutePage.tsx

@@ -1,5 +1,16 @@
+import { Database, FilePlus2, Filter, RefreshCw, Rows3 } from "lucide-react";
+import type { ReactNode } from "react";
 import { useParams } from "react-router-dom";
 import { DataManagementList } from "openxiangda";
+
+import {
+  MacDiagnosticPanel,
+  MacPageHeader,
+  MacPanel,
+  MacPrimaryButton,
+  MacSecondaryButton,
+  MacStatusPill,
+} from "@/shared/mac-admin";
 import {
   defaultPageOverrides,
   resolveDefaultPageOverride,
@@ -19,17 +30,75 @@ export function DataRoutePage() {
   );
 
   return (
-    <div className="ox-panel overflow-hidden">
-      {Override ? (
-        <Override
-          appType={appType}
-          defaultNode={defaultNode}
-          formUuid={formUuid}
-          kind="data-manage-list"
-        />
-      ) : (
-        defaultNode
-      )}
+    <div className="min-w-0 space-y-5">
+      <MacPageHeader
+        actions={
+          <>
+            <MacSecondaryButton>
+              <Filter size={17} />
+              筛选
+            </MacSecondaryButton>
+            <MacSecondaryButton onClick={() => window.location.reload()}>
+              <RefreshCw size={17} />
+              刷新
+            </MacSecondaryButton>
+            <MacPrimaryButton onClick={() => window.location.assign(`/view/${appType}/admin/forms/${formUuid}/new`)}>
+              <FilePlus2 size={17} />
+              新增数据
+            </MacPrimaryButton>
+          </>
+        }
+        description="使用 SDK 内置 DataManagementList 展示有权限的数据，新增和详情仍回到同一套 React SPA 默认页。"
+        eyebrow="Data Management"
+        meta={
+          <>
+            <MacStatusPill tone="blue">数据范围后端计算</MacStatusPill>
+            <MacStatusPill tone="emerald">字段权限生效</MacStatusPill>
+            <MacStatusPill tone="amber">详情页联动</MacStatusPill>
+          </>
+        }
+        title="数据管理"
+      />
+      <section className="grid gap-4 md:grid-cols-3">
+        <DataSummary icon={<Database size={18} />} label="当前表单" value={formUuid || "--"} />
+        <DataSummary icon={<Rows3 size={18} />} label="列表模式" value="SDK 默认页" />
+        <DataSummary icon={<Filter size={18} />} label="权限过滤" value="后端兜底" />
+      </section>
+      <MacPanel className="min-w-0 overflow-hidden p-0">
+        <div className="min-w-0 overflow-hidden">
+          {Override ? (
+            <Override
+              appType={appType}
+              defaultNode={defaultNode}
+              formUuid={formUuid}
+              kind="data-manage-list"
+            />
+          ) : (
+            defaultNode
+          )}
+        </div>
+      </MacPanel>
+      <MacDiagnosticPanel data={{ appType, formUuid, kind: "data-manage-list" }} title="数据页上下文" />
+    </div>
+  );
+}
+
+function DataSummary({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-white/70 bg-white/[0.82] p-4 shadow-[0_16px_45px_rgba(15,23,42,0.05)]">
+      <div className="flex items-center gap-2 text-sm text-slate-500">
+        <span className="text-blue-600">{icon}</span>
+        {label}
+      </div>
+      <div className="mt-2 truncate text-base font-semibold text-slate-950">{value}</div>
     </div>
   );
 }

package/templates/openxiangda-react-spa/src/pages/defaults/FilePreviewRoutePage.tsx

@@ -1,3 +1,12 @@
+import { FileSearch, LockKeyhole, ShieldCheck, Ticket } from "lucide-react";
+
+import {
+  MacDiagnosticPanel,
+  MacPageHeader,
+  MacPanel,
+  MacStatePage,
+  MacStatusPill,
+} from "@/shared/mac-admin";
 import {
   defaultPageOverrides,
   resolveDefaultPageOverride,
@@ -7,23 +16,67 @@ export function FilePreviewRoutePage() {
   const ticket = new URLSearchParams(window.location.search).get("ticket") || "";
   const appType = process.env.OPENXIANGDA_APP_TYPE || process.env.APP_TYPE || "";
   const Override = resolveDefaultPageOverride(defaultPageOverrides, "file-preview");
-  const defaultNode = (
-    <section className="ox-panel mx-auto max-w-4xl p-6">
-      <h1 className="text-lg font-semibold text-slate-950">文件预览</h1>
-      <p className="mt-2 text-sm text-slate-500">ticket: {ticket || "未提供"}</p>
-      <div className="mt-6 rounded-md border border-dashed border-slate-300 bg-slate-50 p-8 text-center text-sm text-slate-500">
-        文件预览组件将在平台文件元数据接口稳定后接入。
-      </div>
-    </section>
+  const defaultNode = ticket ? (
+    <div className="min-w-0 space-y-5">
+      <MacPageHeader
+        description="轻量 runtime 内置文件预览入口。后续平台文件元数据协议稳定后，可在这里直接接入预览器或通过 override 替换整页。"
+        eyebrow="File Preview"
+        meta={
+          <>
+            <MacStatusPill tone="blue">ticket</MacStatusPill>
+            <MacStatusPill tone="emerald">同域校验</MacStatusPill>
+            <MacStatusPill tone="amber">可 override</MacStatusPill>
+          </>
+        }
+        title="文件预览"
+      />
+      <MacPanel title="预览状态" description="当前 ticket 已进入 runtime，但文件内容预览仍等待平台文件接口接入。">
+        <div className="grid gap-4 md:grid-cols-[220px_minmax(0,1fr)]">
+          <div className="grid min-h-44 place-items-center rounded-2xl border border-dashed border-slate-300 bg-slate-50 text-slate-500">
+            <FileSearch size={44} />
+          </div>
+          <div className="min-w-0 space-y-3">
+            <Info label="ticket" value={ticket} />
+            <Info label="appType" value={appType || "--"} />
+            <Info label="preview" value="waiting for file metadata API" />
+          </div>
+        </div>
+      </MacPanel>
+      <MacDiagnosticPanel data={{ appType, ticket, kind: "file-preview" }} title="文件预览上下文" />
+    </div>
+  ) : (
+    <MacStatePage
+      description="当前链接没有携带有效 ticket。请从平台文件字段或业务页面重新打开预览。"
+      fullScreen
+      icon={<LockKeyhole size={24} />}
+      status="TICKET"
+      title="文件预览 ticket 无效"
+    />
   );
 
   return (
-    <main className="min-h-screen bg-[#f6f7f9] p-5">
-      {Override ? (
-        <Override appType={appType} defaultNode={defaultNode} kind="file-preview" />
-      ) : (
-        defaultNode
-      )}
+    <main className="min-h-screen overflow-x-hidden bg-[linear-gradient(180deg,#f8fafc_0%,#eef2f7_100%)] p-5">
+      <div className="mx-auto max-w-6xl">
+        {Override ? (
+          <Override appType={appType} defaultNode={defaultNode} kind="file-preview" />
+        ) : (
+          defaultNode
+        )}
+      </div>
     </main>
   );
 }
+
+function Info({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex min-w-0 items-center gap-3 rounded-2xl bg-slate-50 px-4 py-3">
+      <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-blue-50 text-blue-700">
+        {label === "ticket" ? <Ticket size={17} /> : <ShieldCheck size={17} />}
+      </span>
+      <span className="min-w-0">
+        <span className="block text-xs font-medium text-slate-500">{label}</span>
+        <span className="block truncate text-sm font-semibold text-slate-950">{value}</span>
+      </span>
+    </div>
+  );
+}