29.12.25

src/App.jsx

@@ -538,12 +538,9 @@ export default function App() {
           {cards.map((card) => {
             const Icon = card.icon;
             const bar_data = [
-              {
-                name: "Amounts",
-                Invoiced: card.amountInvoiced,
-                "30 days": card.amount30Days,
-                "60 days": card.amount60Days,
-              },
+              { label: "Invoiced", invoiced: card.amountInvoiced },
+              { label: "30 days", pay30: card.amount30Days },
+              { label: "60 days", pay60: card.amount60Days },
             ];
 
             return (
@@ -561,46 +558,17 @@ 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="name"
-                  categories={["Invoiced", "30 days", "60 days"]}
-                  colors={["teal-400", "slate", "blue-400"]}
+                  data={data}
+                  index="label"
+                  categories={["invoiced", "pay30", "pay60"]}
+                  colors={["teal", "blue", "slate"]}
                   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>
-                  )}
+                  barRadius={9}
                 />
 
-                {/* <BarChart
-                  data={[
-                    {
-                      name: "Amounts",
-                      invoiced: card.amountInvoiced,
-                      pay30: card.amount30Days,
-                      pay60: card.amount60Days,
-                    },
-                  ]}
-                  index="name"
-                  categories={["invoiced", "pay30", "pay60"]}
-                  colors={["teal", "blue", "slate"]}
-                  className="h-24"
-                  showXAxis={false}
-                  showYAxis={false}
-                  showGridLines={false}
-                  showLegend={false}
-                /> */}
-
                 <button onClick={card.action} className="mt-4 text-xs text-teal-600 underline">
                   View details
                 </button>