From 2d1e956b5f844b07264ca776d91dc6cf7892f497 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Thu, 11 Sep 2025 12:27:58 +0200
Subject: [PATCH] [dyad] Updated stock chart bar colors - wrote 1 file(s)

---
 src/components/StockChart.tsx | 76 ++++++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/components/StockChart.tsx b/src/components/StockChart.tsx
index b594c86..fd26f94 100644
--- a/src/components/StockChart.tsx
+++ b/src/components/StockChart.tsx
@@ -1,31 +1,52 @@
-import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+"use client"
+
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
 
 const data = [
-  { name: 'Jan', In: 4000, Out: 2400 },
-  { name: 'Feb', In: 3000, Out: 1398 },
-  { name: 'Mar', In: 2000, Out: 9800 },
-  { name: 'Apr', In: 2780, Out: 3908 },
-  { name: 'May', In: 1890, Out: 4800 },
-  { name: 'Jun', In: 2390, Out: 3800 },
-  { name: 'Jul', In: 3490, Out: 4300 },
-  { name: 'Aug', In: 3000, Out: 2000 },
-  { name: 'Sep', In: 2000, Out: 2780 },
-  { name: 'Oct', In: 2780, Out: 1890 },
-  { name: 'Nov', In: 1890, Out: 2390 },
-  { name: 'Dec', In: 3490, Out: 2900 },
-];
+  {
+    name: "Jan",
+    In: 4000,
+    Out: 2400,
+  },
+  {
+    name: "Feb",
+    In: 3000,
+    Out: 1398,
+  },
+  {
+    name: "Mar",
+    In: 2000,
+    Out: 9800,
+  },
+  {
+    name: "Apr",
+    In: 2780,
+    Out: 3908,
+  },
+  {
+    name: "May",
+    In: 1890,
+    Out: 4800,
+  },
+  {
+    name: "Jun",
+    In: 2390,
+    Out: 3800,
+  },
+  {
+    name: "Jul",
+    In: 3490,
+    Out: 4300,
+  },
+]
 
-export const StockChart = () => {
+export function StockChart() {
   return (
-    <Card className="col-span-1 lg:col-span-2 mt-4">
-      <CardHeader className="bg-primary text-primary-foreground mb-4 p-4 rounded-lg shadow-lg"> {/* Changed bg-primary-dark to bg-primary and text-white to text-primary-foreground */}
-        <CardTitle className="text-primary-foreground">Monthly Stock Activity</CardTitle> {/* Changed text-white to text-primary-foreground */}
-      </CardHeader>
-      <CardContent className="h-80">
+    <div className="h-[300px] w-full">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
+            width={500}
+            height={300}
             data={data}
             margin={{
               top: 5,
@@ -39,11 +60,10 @@ export const StockChart = () => {
             <YAxis />
             <Tooltip />
             <Legend />
-            <Bar dataKey="In" fill="#8884d8" name="Stock In" />
-            <Bar dataKey="Out" fill="#82ca9d" name="Stock Out" />
+            <Bar dataKey="In" fill="#000000" name="Stock In" />
+            <Bar dataKey="Out" fill="#FFA500" name="Stock Out" />
           </BarChart>
         </ResponsiveContainer>
-      </CardContent>
-    </Card>
-  );
-};
\ No newline at end of file
+    </div>
+  )
+}
\ No newline at end of file