addanalysis

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue

@@ -4,7 +4,6 @@ import type { AnalysisOverviewItem } from '../typing';
 import {
   Card,
   CardContent,
-  CardFooter,
   CardHeader,
   CardTitle,
   VbenCountToAnimator,
@@ -26,32 +25,38 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-    <template v-for="item in items" :key="item.title">
-      <Card :title="item.title" class="w-full">
-        <CardHeader>
-          <CardTitle class="text-xl">{{ item.title }}</CardTitle>
-        </CardHeader>
-
-        <CardContent class="flex items-center justify-between">
-          <VbenCountToAnimator
-            :end-val="item.value"
-            :start-val="1"
-            class="text-xl"
-            prefix=""
-            :decimals="item.decimals ?? 0"
-          />
-          <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
-        </CardContent>
-        <CardFooter class="justify-between">
-          <span>{{ item.totalTitle }}</span>
-          <VbenCountToAnimator
-            :end-val="item.totalValue"
-            :start-val="1"
-            prefix=""
-            :decimals="item.decimals ?? 0"
-          />
-        </CardFooter>
-      </Card>
-    </template>
+    <Card v-for="(item, index) in items" :key="index" class="relative overflow-hidden">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-medium">
+          {{ item.title }}
+        </CardTitle>
+        <VbenIcon :icon="item.icon" class="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div class="text-2xl font-bold">
+          <VbenCountToAnimator :end-val="item.value" />
+        </div>
+        <p class="text-xs text-muted-foreground">
+          {{ item.todaytitle }}
+          <span class="font-medium text-foreground">
+            +<VbenCountToAnimator :end-val="item.todayValue" />
+          </span>
+        </p>
+        <div class="mt-3 border-t pt-3">
+          <p class="text-xs text-muted-foreground flex justify-between">
+            <span>{{ item.Subtitle }}</span>
+            <span class="font-medium text-foreground">
+              <VbenCountToAnimator :end-val="item.SubValue" />
+            </span>
+          </p>
+          <p class="text-xs text-muted-foreground flex justify-between mt-1">
+            <span>{{ item.todaySubtitle }}</span>
+            <span class="font-medium text-foreground">
+              +<VbenCountToAnimator :end-val="item.todaySubValue" />
+            </span>
+          </p>
+        </div>
+      </CardContent>
+    </Card>
   </div>
 </template>

packages/effects/common-ui/src/ui/dashboard/typing.ts

@@ -3,10 +3,13 @@ import type { Component } from 'vue';
 interface AnalysisOverviewItem {
   icon: Component | string;
   title: string;
-  totalTitle: string;
-  totalValue: number;
   value: number;
-  decimals?: number;
+  todaytitle: string;
+  todayValue: number;
+  Subtitle: string;
+  SubValue: number;
+  todaySubtitle: string;
+  todaySubValue: number;
 }
 
 interface WorkbenchProjectItem {