29.12.25

src/App.jsx

@@ -517,28 +517,35 @@ export default function App() {
                 );
               })}
             </div>
-            <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
+            {/* SEPARATOR */}
+            <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 my-4"></div>
+
             <AreaChart
               data={data}
               index="date"
               categories={["value"]}
               colors={["teal-300"]}
-              className="h-16"
+              className="h-20"
               showXAxis={false}
               showYAxis={false}
               showGridLines={false}
               showLegend={false}
               curve="monotone"
             />
+
           </Card>
           {/* Cards KPI */}
           {cards.map((card) => {
             const Icon = card.icon;
             const bar_data = [
-              { label: "Invoiced", value: card.amountInvoiced },
+              {
-              { label: "30 days", value: card.amount30Days },
+                name: "Amounts",
-              { label: "60 days", value: card.amount60Days },
+                Invoiced: card.amountInvoiced,
+                "30 days": card.amount30Days,
+                "60 days": card.amount60Days,
+              },
             ];
+
             return (
               <Card
                 key={card.id}
@@ -555,14 +562,26 @@ export default function App() {
                 <div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
                 <BarChart
                   data={bar_data}
-                  index="label"
+                  index="name"
-                  categories={["value"]}
+                  categories={["Invoiced", "30 days", "60 days"]}
-                  colors={["teal", "blue", "slate"]}
+                  colors={["teal-400", "slate", "blue-400"]}
                   className="h-28"
                   showLegend={false}
                   showYAxis={false}
                   showGridLines={false}
+                  barRadius={6}
+                  customXAxisTick={(payload) => (
+                    <text
+                      x={payload.x}
+                      y={payload.y + 14}
+                      textAnchor="middle"
+                      className="fill-gray-500 text-[10px]"
+                    >
+                      {payload.value}
+                    </text>
+                  )}
                 />
+
                 {/* <BarChart
                   data={[
                     {