29_12_25

src/App.jsx

@@ -123,7 +123,7 @@ const kpis = [
     title: "PNL ($)",
     value: defaultPnlAmount,
     trend: "+12% vs last month",
-    trendValue: 12,
+    trendValue: 4.4,
     icon: BarChart3,
     action: () => openInTryton("pnl.bi", [1], ['form'])
   },
@@ -255,9 +255,25 @@ export default function App() {
                 <Title className="text-sm text-center">{kpi.title}</Title>
                 <Text className="text-4xl font-bold text-center">{kpi.value}</Text>
 
-                <button onClick={kpi.action} className="mt-4 text-xs text-teal-600 underline">
-                  View details
-                </button>
+                <div className="mt-4 flex items-center gap-2">
+                  <span
+                    className={`
+                      px-2 py-0.5 text-xs font-semibold rounded-md border
+                      ${
+                        isPositive
+                          ? "bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800"
+                          : "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800"
+                      }
+                    `}
+                  >
+                    {isPositive ? "+" : ""}
+                    {kpi.trendValue}%
+                  </span>
+
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    this month
+                  </span>
+                </div>
               </Card>
             );
           })}