src/api/config.ts

@@ -271,5 +271,5 @@ export const HIDDEN_FORM_FIELDS = [
   'store_code_3'
 ];
 
-export const LOOKUP_RECORD_LIMIT = 200;
+export const LOOKUP_RECORD_LIMIT = 500;
 export const MAX_SKUS_PER_CHUNK = 20;

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 shrink-0">
+               <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="absolute inset-0 w-full h-full object-cover" />
+                  <img src={imageUrl} alt={String(businessName)} className="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-emerald-200 shadow-sm">
+                  <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
-                     <div className="flex items-center gap-2 p-4 border-b border-emerald-100 bg-emerald-50">
+                     <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
-                        <FileText size={16} className="text-emerald-600" />
+                        <FileText size={16} className="text-slate-400" />
-                        <h3 className="text-xs font-bold text-emerald-800 uppercase tracking-wider m-0">Order Potential</h3>
+                        <h3 className="text-xs font-bold text-slate-500 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-emerald-50 border-b border-emerald-100">
+                           <thead className="bg-slate-50 border-b border-slate-100">
                               <tr>
-                                 <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-slate-500 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>
+                                 <th className="py-3 px-5 font-bold text-slate-500 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-emerald-50 last:border-0 hover:bg-emerald-50/50">
+                                    <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-emerald-900">{p.product_category ? String(p.product_category) : '-'}</td>
+                                       <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-emerald-700 text-right">{p.quantity ? String(p.quantity) : '0'}</td>
+                                       <td className="py-3 px-5 text-slate-700 text-right">{p.quantity ? String(p.quantity) : '0'}</td>
                                     </tr>
                                  );
                               })}
-                              <tr className="bg-emerald-50 border-t border-emerald-200 font-bold">
+                              <tr className="bg-slate-50 border-t border-slate-200 font-bold">
-                                 <td className="py-3 px-5 text-emerald-900">Total</td>
+                                 <td className="py-3 px-5 text-slate-900">Total</td>
-                                 <td className="py-3 px-5 text-emerald-900 text-right">{totalPotential}</td>
+                                 <td className="py-3 px-5 text-slate-900 text-right">{totalPotential}</td>
                               </tr>
                            </tbody>
                         </table>

src/components/forms/DynamicForm.tsx

@@ -174,6 +174,43 @@ export function DynamicForm({ client, activityId: initialActivityId, instanceId:
             }
           }
 
+          if (currentActivityId === ORDER_BOOKING.activities.LOG_VISIT.uid) {
+            const user = client.currentUser();
+            const userMobile = user?.mobile || localStorage.getItem('krishna_sales_user_mobile') || user?.email;
+            if (userMobile) {
+              try {
+                const headers: Record<string, string> = { 
+                  'templateid': '192',
+                  'x-pipeline-version': 'latest',
+                  'orgid': '57',
+                  'groupid': '25'
+                };
+
+                const summaryRes = await client.request<any>(
+                  'POST',
+                  PIPELINE.endpoints.productiveCallSummary,
+                  { mobile: userMobile },
+                  headers
+                );
+                let summaryData = summaryRes.data || summaryRes;
+                if (Array.isArray(summaryData)) {
+                  summaryData = summaryData[0] || {};
+                }
+                
+                if (summaryData.productive_call !== undefined) {
+                  summaryData.total_productive_calls = summaryData.productive_call;
+                }
+                if (summaryData.non_productive_call !== undefined) {
+                  summaryData.total_non_productive_calls = summaryData.non_productive_call;
+                }
+                
+                mapPrefillData(summaryData);
+              } catch (e) {
+                console.warn('Failed to load productive call summary for Log Visit', e);
+              }
+            }
+          }
+          
           setValues(defaultValues);
           setLoading(false);
           if (res.activity_name) {

src/components/forms/LogVisitForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import type { ZinoClient } from '../../api/client';
 import type { FormScreenResponse } from '../../api/types';
-import { ORDER_BOOKING, LOOKUP_RECORD_LIMIT } from '../../api/config';
+import { ORDER_BOOKING, PIPELINE, LOOKUP_RECORD_LIMIT } from '../../api/config';
 import { Button } from '../buttons/Button';
 import { Select } from '../reusable/Select';
 import { DateField, TimeField, FileInput, TextField } from './fields';
@@ -61,9 +61,9 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }:
   }, [values]);
 
   const [storeOptions, setStoreOptions] = useState<{ value: string; label: string; _raw?: any }[]>([]);
-  const [storeSearchQuery, setStoreSearchQuery] = useState('');
   const [fetchingDailyLog, setFetchingDailyLog] = useState(false);
   const [fetchingStores, setFetchingStores] = useState(false);
+  const fetchingStoresRef = useRef(false);
 
   const [chainedActivity, setChainedActivity] = useState<{
     activityId: string;
@@ -119,6 +119,40 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }:
           Object.assign(initialValues, res.data);
         }
 
+        // Execute mobile pipeline prefill
+        const user = client.currentUser();
+        const userMobile = user?.mobile || localStorage.getItem('krishna_sales_user_mobile') || user?.email;
+        if (userMobile) {
+          try {
+            const headers: Record<string, string> = { 
+              'templateid': '192',
+              'x-pipeline-version': 'latest',
+              'orgid': '57',
+              'groupid': '25'
+            };
+
+            const summaryRes = await client.request<any>(
+              'POST',
+              PIPELINE.endpoints.productiveCallSummary,
+              { mobile: userMobile },
+              headers
+            );
+            let summaryData = summaryRes.data || summaryRes;
+            if (Array.isArray(summaryData)) {
+              summaryData = summaryData[0] || {};
+            }
+            if (summaryData.productive_call !== undefined) {
+              summaryData.total_productive_calls = summaryData.productive_call;
+            }
+            if (summaryData.non_productive_call !== undefined) {
+              summaryData.total_non_productive_calls = summaryData.non_productive_call;
+            }
+            Object.assign(initialValues, summaryData);
+          } catch (e) {
+            console.warn('Failed to load productive call summary for Log Visit', e);
+          }
+        }
+
         setValues(prev => {
           const next = { ...initialValues, ...prev };
           valuesRef.current = next;
@@ -136,7 +170,9 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }:
   }, [client, activityId, todayStr, nowTimeStr]);
 
   // 2. Helper to fetch select_store options ONLY using updated prefilled formData
-  const fetchStoreOptions = useCallback(async (formDataOverride?: Record<string, any>, search: string = '') => {
+  const fetchStoreOptions = useCallback(async (formDataOverride?: Record<string, any>) => {
+    if (fetchingStoresRef.current) return;
+    fetchingStoresRef.current = true;
     setFetchingStores(true);
     setStoreError(null);
 
@@ -148,7 +184,6 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }:
         activityId,
         fieldId: 'select_store',
         formData: formDataToSend,
-        search,
         limit: LOOKUP_RECORD_LIMIT,
       });
 
@@ -199,16 +234,10 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }:
       }
     } finally {
       setFetchingStores(false);
+      fetchingStoresRef.current = false;
     }
   }, [client, activityId]);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      fetchStoreOptions(undefined, storeSearchQuery);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [storeSearchQuery, fetchStoreOptions]);
-
   // 3. Fetch Daily Log lookup data initially & prefill form state
   const loadDailyLogData = useCallback(async (dateVal: string, timeVal: string) => {
     setFetchingDailyLog(true);
@@ -435,8 +464,6 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }:
                 options={[{ value: '', label: `Select ${f.name}...` }, ...storeOptions]}
                 onDropdownOpen={handleStoreDropdownOpen}
                 onChange={e => handleStoreSelect(fieldId, e.target.value)}
-                onSearchChange={setStoreSearchQuery}
-                disableLocalSearch={true}
                 disabled={isDisabled}
               />
               {fetchingStores && (

src/components/forms/fields/SelectField.tsx

@@ -6,16 +6,12 @@ export function SelectField({
   value,
   options,
   onChange,
-  onSearchChange,
-  disableLocalSearch,
 }: {
   label: string;
   required?: boolean;
   value: string;
   options: any[];
   onChange: (val: string, fullRow?: any) => void;
-  onSearchChange?: (query: string) => void;
-  disableLocalSearch?: boolean;
 }) {
   return (
     <Select
@@ -28,8 +24,6 @@ export function SelectField({
         onChange(val, opt?._raw);
       }}
       options={[{ value: '', label: 'Select...' }, ...options.map((o: any) => ({ value: String(o.value), label: o.label }))]}
-      onSearchChange={onSearchChange}
-      disableLocalSearch={disableLocalSearch}
     />
   );
 }

src/components/forms/fields/WfLookupField.tsx

@@ -20,7 +20,6 @@ export function WfLookupField({ label, required, value, onChange, client, config
   const [options, setOptions] = useState<{ label: string; value: string }[]>([]);
   const [records, setRecords] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
 
   const formDataStr = JSON.stringify(formData);
 
@@ -33,7 +32,6 @@ export function WfLookupField({ label, required, value, onChange, client, config
         activityId, 
         fieldId, 
         formData: JSON.parse(formDataStr), 
-        search: searchQuery,
         limit: LOOKUP_RECORD_LIMIT 
       })
         .then(res => {
@@ -74,7 +72,7 @@ export function WfLookupField({ label, required, value, onChange, client, config
       mounted = false; 
       clearTimeout(timer);
     };
-  }, [client, config, activityId, fieldId, formDataStr, searchQuery]);
+  }, [client, config, activityId, fieldId, formDataStr]);
 
   return (
     <SelectField
@@ -86,8 +84,6 @@ export function WfLookupField({ label, required, value, onChange, client, config
         onChange(val, row);
       }}
       options={options}
-      onSearchChange={setSearchQuery}
-      disableLocalSearch={true}
     />
   );
 }

src/components/reusable/AnalyticsChart.tsx

@@ -126,21 +126,20 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                 interval={0}
                 dy={10}
                 dx={-5}
-                height={90}
+                height={70}
               />
               <YAxis 
                 axisLine={false}
                 tickLine={false}
                 tick={{ fontSize: 12, fill: '#64748B' }}
                 allowDecimals={false}
-                width={40}
+                width={80}
               />
               <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) => {
@@ -190,7 +189,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 : ''} !overflow-visible`}>
+          <Card key={chart.chart_uid || idx} title={title} className={`shadow-sm border border-gray-100 !bg-[var(--tiles-card-bg)] ${isFullWidth ? fullSpanClass : ''}`}>
             <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">
@@ -216,7 +215,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                   </table>
                 </div>
               ) : (
-                <div style={{ width: '100%', minWidth: minChartWidth > 100 ? `${minChartWidth}px` : '100%', height: '100%' }}>
+                <div style={{ 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' }}>
@@ -224,7 +223,6 @@ 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
@@ -245,15 +243,15 @@ 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: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                         {renderChartContent()}
                       </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: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                         {renderChartContent()}
                       </AreaChart>
                     ) : (
-                      <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: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                         {renderChartContent()}
                       </BarChart>
                     )}

src/components/reusable/Select.tsx

@@ -21,8 +21,6 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   /** Disable search header filter if set to false */
   searchable?: boolean;
   onDropdownOpen?: () => void;
-  onSearchChange?: (query: string) => void;
-  disableLocalSearch?: boolean;
 }
 
 /** Custom searchable select component using React Portal to prevent container clipping. */
@@ -37,8 +35,6 @@ export function Select({
   placeholder,
   searchable = true,
   onDropdownOpen,
-  onSearchChange,
-  disableLocalSearch,
   ...rest
 }: SelectProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -56,9 +52,7 @@ export function Select({
   const selectedOption = normalizedOptions.find((o) => o.value === currentValue);
   const selectedOptionLabel = selectedOption ? selectedOption.label : '';
 
-  const filteredOptions = disableLocalSearch
+  const filteredOptions = normalizedOptions.filter((o) =>
-    ? normalizedOptions
-    : normalizedOptions.filter((o) =>
     o.label.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
@@ -186,11 +180,7 @@ export function Select({
               <input
                 type="text"
                 value={searchQuery}
-                onChange={(e) => {
+                onChange={(e) => setSearchQuery(e.target.value)}
-                  const val = e.target.value;
-                  setSearchQuery(val);
-                  onSearchChange?.(val);
-                }}
                 placeholder="Search options..."
                 className="w-full text-xs bg-transparent border-none outline-none text-strong placeholder:text-muted"
                 autoFocus
@@ -202,7 +192,6 @@ export function Select({
                     e.preventDefault();
                     e.stopPropagation();
                     setSearchQuery('');
-                    onSearchChange?.('');
                   }}
                   className="text-muted hover:text-strong p-0.5 rounded cursor-pointer"
                 >
@@ -281,7 +270,6 @@ export interface MultiSelectProps {
   className?: string;
   /** Disable search header filter if set to false */
   searchable?: boolean;
-  onSearchChange?: (query: string) => void;
 }
 
 /** Custom searchable multiselect component using React Portal. */
@@ -297,7 +285,6 @@ export function MultiSelect({
   disabled,
   placeholder,
   searchable = true,
-  onSearchChange,
 }: MultiSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -466,11 +453,7 @@ export function MultiSelect({
               <input
                 type="text"
                 value={searchQuery}
-                onChange={(e) => {
+                onChange={(e) => setSearchQuery(e.target.value)}
-                  const val = e.target.value;
-                  setSearchQuery(val);
-                  onSearchChange?.(val);
-                }}
                 placeholder="Search options..."
                 className="w-full text-xs bg-transparent border-none outline-none text-strong placeholder:text-muted"
                 autoFocus
@@ -482,7 +465,6 @@ export function MultiSelect({
                     e.preventDefault();
                     e.stopPropagation();
                     setSearchQuery('');
-                    onSearchChange?.('');
                   }}
                   className="text-muted hover:text-strong p-0.5 rounded cursor-pointer"
                 >