29.12.25

src/App.jsx

@@ -488,11 +488,12 @@ export default function App() {
           </Card> */}
           {/* Card Last News (taille standard card) */}
           <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
-            <Title className="text-base mb-4">Forex</Title>
-
+            <div className="flex justify-between items-center mb-4">
+              <Title className="text-base">Curve</Title>
+              <TrendingUp className="w-6 h-6" />
+            </div>
             <div className="space-y-3 text-sm">
               {news.map((n, idx) => {
-                const Icon = n.icon;
                 return (
                   <div
                     key={idx}
@@ -500,7 +501,6 @@ export default function App() {
                   >
                     <div>
                       <div className="flex items-center gap-2">
-                        <Icon className="w-4 h-4" />
                         <span className="font-semibold">{n.type}</span>
                       </div>
                       <div className="ml-6">
@@ -510,7 +510,9 @@ export default function App() {
                         )}
                       </div>
                     </div>
-                    <span className="text-gray-500 text-xs">{n.date}</span>
+                    <div className="flex items-center gap-2">
+                      <span className="text-gray-500 text-xs">{n.date}</span>
+                    </div>
                   </div>
                 );
               })}
@@ -532,6 +534,11 @@ export default function App() {
           {/* Cards KPI */}
           {cards.map((card) => {
             const Icon = card.icon;
+            const bar_data = [
+              { label: "Invoiced", value: card.amountInvoiced },
+              { label: "30 days", value: card.amount30Days },
+              { label: "60 days", value: card.amount60Days },
+            ];
             return (
               <Card
                 key={card.id}
@@ -546,8 +553,17 @@ export default function App() {
                 <Text className="text-xs text-gray-500 mb-4">{card.trend}</Text>
 
                 <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
-
                 <BarChart
+                  data={bar_data}
+                  index="label"
+                  categories={["value"]}
+                  colors={["teal", "blue", "slate"]}
+                  className="h-28"
+                  showLegend={false}
+                  showYAxis={false}
+                  showGridLines={false}
+                />
+                {/* <BarChart
                   data={[
                     {
                       name: "Amounts",
@@ -564,7 +580,7 @@ export default function App() {
                   showYAxis={false}
                   showGridLines={false}
                   showLegend={false}
-                />
+                /> */}
 
                 <button onClick={card.action} className="mt-4 text-xs text-teal-600 underline">
                   View details