From 060ec00d8d1e51ed2fd8988f2d7e731e1336d424 Mon Sep 17 00:00:00 2001
From: suryac <surya.c@getzino.com>
Date: Tue, 18 Aug 2026 12:38:35 +0530
Subject: [PATCH] fix: bar graph fixed

---
 src/components/dv/StoreDetail.tsx          | 30 +++++++++++-----------
 src/components/reusable/AnalyticsChart.tsx | 16 +++++++-----
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/dv/StoreDetail.tsx b/src/components/dv/StoreDetail.tsx
index 2767d09..d48cf52 100644
--- a/src/components/dv/StoreDetail.tsx
+++ b/src/components/dv/StoreDetail.tsx
@@ -187,8 +187,8 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
          <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row">
             {/* Image Section */}
             {imageUrl ? (
-               <div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto relative bg-slate-100">
-                  <img src={imageUrl} alt={String(businessName)} className="w-full h-full object-cover" />
+               <div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto relative bg-slate-100 shrink-0">
+                  <img src={imageUrl} alt={String(businessName)} className="absolute inset-0 w-full h-full object-cover" />
                </div>
             ) : (
                <div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto flex items-center justify-center bg-slate-100 border-r border-slate-200">
@@ -321,32 +321,32 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
 
                {/* Order Potential Card */}
                {Array.isArray(potential) && potential.length > 0 && (
-                  <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
-                     <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
-                        <FileText size={16} className="text-slate-400" />
-                        <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Order Potential</h3>
+                  <Card pad={false} className="overflow-hidden border-emerald-200 shadow-sm">
+                     <div className="flex items-center gap-2 p-4 border-b border-emerald-100 bg-emerald-50">
+                        <FileText size={16} className="text-emerald-600" />
+                        <h3 className="text-xs font-bold text-emerald-800 uppercase tracking-wider m-0">Order Potential</h3>
                      </div>
                      <div className="bg-[var(--tiles-card-bg)]">
                         <table className="w-full text-sm text-left">
-                           <thead className="bg-slate-50 border-b border-slate-100">
+                           <thead className="bg-emerald-50 border-b border-emerald-100">
                               <tr>
-                                 <th className="py-3 px-5 font-bold text-slate-500 text-xs uppercase tracking-wider">Product Category</th>
-                                 <th className="py-3 px-5 font-bold text-slate-500 text-xs uppercase tracking-wider text-right">Quantity</th>
+                                 <th className="py-3 px-5 font-bold text-emerald-800 text-xs uppercase tracking-wider">Product Category</th>
+                                 <th className="py-3 px-5 font-bold text-emerald-800 text-xs uppercase tracking-wider text-right">Quantity</th>
                               </tr>
                            </thead>
                            <tbody>
                               {potential.map((p: any, idx: number) => {
                                  if (!p.product_category && !p.quantity) return null;
                                  return (
-                                    <tr key={idx} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/50">
-                                       <td className="py-3 px-5 font-semibold text-slate-900">{p.product_category ? String(p.product_category) : '-'}</td>
-                                       <td className="py-3 px-5 text-slate-700 text-right">{p.quantity ? String(p.quantity) : '0'}</td>
+                                    <tr key={idx} className="border-b border-emerald-50 last:border-0 hover:bg-emerald-50/50">
+                                       <td className="py-3 px-5 font-semibold text-emerald-900">{p.product_category ? String(p.product_category) : '-'}</td>
+                                       <td className="py-3 px-5 text-emerald-700 text-right">{p.quantity ? String(p.quantity) : '0'}</td>
                                     </tr>
                                  );
                               })}
-                              <tr className="bg-slate-50 border-t border-slate-200 font-bold">
-                                 <td className="py-3 px-5 text-slate-900">Total</td>
-                                 <td className="py-3 px-5 text-slate-900 text-right">{totalPotential}</td>
+                              <tr className="bg-emerald-50 border-t border-emerald-200 font-bold">
+                                 <td className="py-3 px-5 text-emerald-900">Total</td>
+                                 <td className="py-3 px-5 text-emerald-900 text-right">{totalPotential}</td>
                               </tr>
                            </tbody>
                         </table>
diff --git a/src/components/reusable/AnalyticsChart.tsx b/src/components/reusable/AnalyticsChart.tsx
index 0f3242e..66089bc 100644
--- a/src/components/reusable/AnalyticsChart.tsx
+++ b/src/components/reusable/AnalyticsChart.tsx
@@ -126,20 +126,21 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                 interval={0}
                 dy={10}
                 dx={-5}
-                height={70}
+                height={90}
               />
               <YAxis 
                 axisLine={false}
                 tickLine={false}
                 tick={{ fontSize: 12, fill: '#64748B' }}
                 allowDecimals={false}
-                width={80}
+                width={40}
               />
               <Tooltip 
                 cursor={{ fill: '#F8FAFC', stroke: '#E2E8F0', strokeWidth: 1, strokeDasharray: '3 3' }}
                 contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }}
                 labelStyle={{ fontWeight: 'bold', color: '#0F172A', marginBottom: '4px' }}
                 wrapperStyle={{ zIndex: 1000 }}
+                allowEscapeViewBox={{ x: true, y: true }}
               />
               {hasSeries && <Legend wrapperStyle={{ paddingTop: '20px' }} />}
               {seriesKeys.map((key, i) => {
@@ -189,7 +190,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
         };
 
         return (
-          <Card key={chart.chart_uid || idx} title={title} className={`shadow-sm border border-gray-100 !bg-[var(--tiles-card-bg)] ${isFullWidth ? fullSpanClass : ''}`}>
+          <Card key={chart.chart_uid || idx} title={title} className={`shadow-sm border border-gray-100 !bg-[var(--tiles-card-bg)] ${isFullWidth ? fullSpanClass : ''} !overflow-visible`}>
             <div className={`h-[320px] w-full mt-4 ${minChartWidth > 100 ? 'overflow-x-auto scrollbar-slim' : ''}`}>
               {chartType === 5 ? (
                 <div className="w-full h-full overflow-y-auto pr-2 scrollbar-slim">
@@ -215,7 +216,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                   </table>
                 </div>
               ) : (
-                <div style={{ minWidth: minChartWidth > 100 ? `${minChartWidth}px` : '100%', height: '100%' }}>
+                <div style={{ width: '100%', minWidth: minChartWidth > 100 ? `${minChartWidth}px` : '100%', height: '100%' }}>
                   <ResponsiveContainer width="100%" height="100%" className="focus:outline-none [&_.recharts-wrapper]:outline-none [&_.recharts-surface]:outline-none" style={{ outline: 'none' }}>
                     {chartType === 3 || chartType === 4 ? (
                       <PieChart margin={{ top: 10, right: 10, left: 10, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
@@ -223,6 +224,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                           contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }}
                           itemStyle={{ color: '#0F172A', fontWeight: '500' }}
                           wrapperStyle={{ zIndex: 1000 }}
+                          allowEscapeViewBox={{ x: true, y: true }}
                         />
                         <Legend wrapperStyle={{ paddingTop: '20px' }} />
                         <Pie
@@ -243,15 +245,15 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                         </Pie>
                       </PieChart>
                     ) : chartType === 1 ? (
-                      <LineChart data={finalData} margin={{ top: 10, right: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                      <LineChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                         {renderChartContent()}
                       </LineChart>
                     ) : chartType === 2 ? (
-                      <AreaChart data={finalData} margin={{ top: 10, right: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                      <AreaChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                         {renderChartContent()}
                       </AreaChart>
                     ) : (
-                      <BarChart data={finalData} margin={{ top: 10, right: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                      <BarChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                         {renderChartContent()}
                       </BarChart>
                     )}