added chart for so

src/api/config.ts

@@ -260,7 +260,7 @@ export const SALES_REPORT_SO_NAMES = [
 // --- Pipeline Endpoints ---
 export const PIPELINE = {
   endpoints: {
-    nearestStores: '/api/p/krishna-group/v1/nearest-stores',
+    nearestStores: '/api/papi2/nearest-stores',
     dailySalesReport: '/api/papi2/daily-sales-report',
     productiveCallSummary: '/api/papi2/productive-call-summary',
     salesOfficers: '/api/papi2/sales-officers'

src/components/maps/DailyLogMap.tsx

@@ -71,6 +71,12 @@ export function DailyLogMap({
         {
           latitude: lat,
           longitude: lng
+        },
+        {
+          groupid: '25',
+          orgid: '57',
+          templateid: '189',
+          'x-pipeline-version': 'latest'
         }
       );
 

src/components/reusable/AnalyticsChart.tsx

@@ -91,12 +91,22 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
           chartType = 3; // Pie
         } else if (lowerKey.includes('route')) {
           chartType = 4; // Donut
+        } else if (lowerKey.includes('calls')) {
+          chartType = 6; // Horizontal Bar
         } else if (lowerKey.includes('brand') || lowerKey.includes('product')) {
           chartType = 5; // Table
         } else if (lowerKey.includes('monthly') || lowerKey.includes('yearly')) {
           chartType = 0; // Bar
         }
 
+        if (chartType === 6) {
+          finalData.sort((a, b) => {
+            const aVal = hasSeries ? a[seriesKeys[0]] || 0 : a.value || 0;
+            const bVal = hasSeries ? b[seriesKeys[0]] || 0 : b.value || 0;
+            return aVal - bVal;
+          });
+        }
+
         // Determine if it should span full width
         const isFullWidth = (gridCols === 1) || (!gridCols && charts.length <= 2) || hasSeries || lowerKey.includes('monthly') || lowerKey.includes('yearly') || finalData.length > 8;
         
@@ -104,37 +114,65 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
 
         const minChartWidth = 100;
 
-        const renderChartContent = () => {
+        const renderChartContent = (isHorizontal = false) => {
           return (
             <>
               <defs>
-                <linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2="0" y2="1">
+                <linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2={isHorizontal ? "1" : "0"} y2={isHorizontal ? "0" : "1"}>
                   <stop offset="0%" stopColor="#1F4D36" stopOpacity={1} />
                   <stop offset="100%" stopColor="#1F4D36" stopOpacity={0.6} />
                 </linearGradient>
-                <linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2="0" y2="1">
+                <linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2={isHorizontal ? "1" : "0"} y2={isHorizontal ? "0" : "1"}>
                   <stop offset="0%" stopColor="#3B82F6" stopOpacity={1} />
                   <stop offset="100%" stopColor="#3B82F6" stopOpacity={0.6} />
                 </linearGradient>
               </defs>
-              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
+              <CartesianGrid strokeDasharray="3 3" vertical={!isHorizontal} horizontal={isHorizontal} stroke="#E2E8F0" />
+              {isHorizontal ? (
+                <>
+                  <XAxis type="number" hide />
+                  <YAxis 
+                    dataKey="dimension" 
+                    type="category"
+                    axisLine={false}
+                    tickLine={false}
+                    tick={{ fontSize: 12, fill: '#64748B' }}
+                    width={85}
+                    interval={0}
+                    tickFormatter={(text) => {
+                      if (typeof text === 'string' && text.length > 14) {
+                        return `${text.substring(0, 14)}...`;
+                      }
+                      return text;
+                    }}
+                  />
+                </>
+              ) : (
+                <>
                   <XAxis 
                     dataKey="dimension" 
                     axisLine={false}
                     tickLine={false}
-                tick={{ fontSize: 11, fill: '#64748B', angle: -45, textAnchor: 'end' }}
+                    tick={{ fontSize: 11, fill: '#64748B', textAnchor: 'middle' }}
                     interval={0}
                     dy={10}
-                dx={-5}
+                    height={40}
-                height={90}
+                    tickFormatter={(text) => {
+                      if (typeof text === 'string' && text.length > 14) {
+                        return `${text.substring(0, 14)}...`;
+                      }
+                      return text;
+                    }}
                   />
                   <YAxis 
                     axisLine={false}
                     tickLine={false}
                     tick={{ fontSize: 12, fill: '#64748B' }}
                     allowDecimals={false}
-                width={40}
+                    width={70}
                   />
+                </>
+              )}
               <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' }}
@@ -179,7 +217,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                       dataKey={key} 
                       name={hasSeries ? key : "Value"}
                       fill={barFill} 
-                      radius={[4, 4, 0, 0]}
+                      radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}
                       maxBarSize={40}
                     />
                   );
@@ -245,16 +283,20 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                         </Pie>
                       </PieChart>
                     ) : chartType === 1 ? (
-                      <LineChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                      <LineChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
-                        {renderChartContent()}
+                        {renderChartContent(false)}
                       </LineChart>
                     ) : chartType === 2 ? (
-                      <AreaChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                      <AreaChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
-                        {renderChartContent()}
+                        {renderChartContent(false)}
                       </AreaChart>
+                    ) : chartType === 6 ? (
+                      <BarChart layout="vertical" data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                        {renderChartContent(true)}
+                      </BarChart>
                     ) : (
-                      <BarChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                      <BarChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
-                        {renderChartContent()}
+                        {renderChartContent(false)}
                       </BarChart>
                     )}
                   </ResponsiveContainer>