.dockerignore

@@ -1,25 +0,0 @@
-node_modules
-npm-debug.log
-.env
-.env.local
-.env.*.local
-.git
-.gitignore
-README.md
-.vscode
-.idea
-*.swp
-*.swo
-*~
-.DS_Store
-Thumbs.db
-logs
-*.log
-dist
-dist-ssr
-build
-*.tmp
-*.temp
-coverage
-.nyc_output
-

Dockerfile

@@ -1,50 +0,0 @@
-# Frontend Dockerfile - Multi-stage build
-FROM node:20-alpine AS builder
-
-# Set working directory
-WORKDIR /app
-
-# Copy package files
-COPY package*.json ./
-
-# Install dependencies
-RUN npm ci
-
-# Copy application code
-COPY . .
-
-# Build the application
-# Support both VITE_API_BASE_URL and VITE_API_URL for compatibility
-# Defaults to /api (relative URL for nginx proxy in Docker)
-ARG VITE_API_BASE_URL=/api
-ARG VITE_API_URL
-ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
-ENV VITE_API_URL=$VITE_API_URL
-
-# Copy .env file if it exists (for local development values)
-# This allows using existing .env file during build
-COPY .env* ./
-
-# Build using Docker-specific script that skips TypeScript type checking
-# TypeScript errors should be fixed in development, but this allows Docker builds to proceed
-RUN npm run build:docker
-
-# Production stage
-FROM nginx:alpine
-
-# Copy built assets from builder stage
-COPY --from=builder /app/dist /usr/share/nginx/html
-
-# Copy custom nginx configuration
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-# Expose port
-EXPOSE 80
-
-# Health check
-HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-  CMD wget --no-verbose --tries=1 --spider http://localhost:80 || exit 1
-
-# Start nginx
-CMD ["nginx", "-g", "daemon off;"]
-

nginx.conf

@@ -1,51 +0,0 @@
-server {
-    listen 80;
-    server_name localhost;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Gzip compression
-    gzip on;
-    gzip_vary on;
-    gzip_min_length 1024;
-    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
-
-    # Security headers
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-
-    # Proxy API requests to backend
-    location /api {
-        proxy_pass http://backend:8003;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_cache_bypass $http_upgrade;
-        proxy_read_timeout 300s;
-        proxy_connect_timeout 75s;
-    }
-
-    # SPA routing - serve index.html for all routes
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Cache static assets
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
-        expires 1y;
-        add_header Cache-Control "public, immutable";
-    }
-
-    # Health check endpoint
-    location /health {
-        access_log off;
-        return 200 "healthy\n";
-        add_header Content-Type text/plain;
-    }
-}
-

package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:docker": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/api/axiosInstance.ts

@@ -3,29 +3,9 @@ import axios from 'axios';
 /**
  * Custom Axios instance with pre-configured base URL and timeout.
  * In development, this relies on Vite's proxy (see vite.config.ts) to avoid CORS issues.
- * In production (Docker), this uses relative URLs proxied through nginx.
  */
-const getBaseURL = () => {
-    // Use environment variable if set (for Docker builds or development)
-    // Check both VITE_API_BASE_URL and VITE_API_URL for compatibility
-    if (import.meta.env.VITE_API_BASE_URL) {
-        return import.meta.env.VITE_API_BASE_URL;
-    }
-    if (import.meta.env.VITE_API_URL) {
-        // If VITE_API_URL is provided, append /api if not already present
-        const apiUrl = import.meta.env.VITE_API_URL;
-        return apiUrl.endsWith('/api') ? apiUrl : `${apiUrl}/api`;
-    }
-    // In production/Docker, use relative URL (nginx will proxy to backend)
-    if (import.meta.env.PROD) {
-        return '/api';
-    }
-    // Development fallback
-    return 'http://localhost:8003/api';
-};
-
 const axiosInstance = axios.create({
-    baseURL: getBaseURL(),
+    baseURL: 'http://localhost:8003/api', // Direct backend URL (requires CORS on backend)
     timeout: 30000, // Default timeout (30 seconds)
     headers: {
         'Content-Type': 'application/json',
@@ -38,7 +18,7 @@ const axiosInstance = axios.create({
  */
 export const createExtendedTimeoutInstance = (timeout: number = 120000) => {
     return axios.create({
-        baseURL: getBaseURL(),
+        baseURL: 'http://localhost:8003/api',
         timeout,
         headers: {
             'Content-Type': 'application/json',

src/api/endpoints.ts

@@ -25,6 +25,5 @@ export const API_ENDPOINTS = {
         PRODUCT_WISE_SCORE_TRENDS: (id: string | number) => `/v1/dealerdetails/product-wise-score-trends/${id}`,
         PRODUCT_WISE_SCORE_TRENDS_EXPORT: (id: string | number) => `/v1/dealerdetails/product-wise-score-trends/${id}/export`,
         COMPARE_DEALER_BUSINESS: (id: string | number) => `/v1/dealerdetails/compare-dealer-business/${id}`,
-        ACTIVITY_TIMELINE: (id: string | number) => `/v1/dealers/${id}/activity-timeline`,
     },
 };

src/api/services/dealer.service.ts

@@ -258,15 +258,12 @@ export const dealerService = {
 
     /**
      * Get compare dealer business data.
-     * @param id - Dealer ID
-     * @param manufacturerSchema - Optional: Manufacturer schema to filter by (for "My Business" calculation)
      */
-    getCompareDealerBusiness: async (id: string | number, manufacturerSchema?: string): Promise<ApiResponse<any>> => {
+    getCompareDealerBusiness: async (id: string | number): Promise<ApiResponse<any>> => {
         try {
-            const url = manufacturerSchema 
-                ? `${API_ENDPOINTS.DEALERS.COMPARE_DEALER_BUSINESS(id)}?manufacturer_schema=${manufacturerSchema}`
-                : API_ENDPOINTS.DEALERS.COMPARE_DEALER_BUSINESS(id);
-            const response = await axiosInstance.get<ApiResponse<any>>(url);
+            const response = await axiosInstance.get<ApiResponse<any>>(
+                API_ENDPOINTS.DEALERS.COMPARE_DEALER_BUSINESS(id)
+            );
             return response.data;
         } catch (error) {
             throw error;
@@ -295,18 +292,4 @@ export const dealerService = {
             throw error;
         }
     },
-
-    /**
-     * Get activity timeline for a dealer (last SMS, Call, Acknowledgment).
-     */
-    getActivityTimeline: async (id: string | number): Promise<ApiResponse<any>> => {
-        try {
-            const response = await axiosInstance.get<ApiResponse<any>>(
-                API_ENDPOINTS.DEALERS.ACTIVITY_TIMELINE(id)
-            );
-            return response.data;
-        } catch (error) {
-            throw error;
-        }
-    },
 };

src/components/KPICard.tsx

@@ -2,7 +2,6 @@ import { memo } from "react";
 import { Card } from "@/components/ui/card";
 import type { LucideProps } from "lucide-react";
 import type { ForwardRefExoticComponent, RefAttributes } from "react";
-import { TrendingUp, TrendingDown } from "lucide-react";
 
 type LucideIcon = ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>>;
 
@@ -12,9 +11,6 @@ interface KPICardProps {
   icon: LucideIcon;
   trend?: string;
   trendColor?: "success" | "danger" | "default";
-  change?: number | null;
-  changeLabel?: string | null; // e.g., "vs last month", "vs previous period". If null/undefined, change section is hidden
-  changeUnit?: string; // e.g., "%", "days"
 }
 
 const getTrendColorClass = (trendColor: "success" | "danger" | "default"): string => {
@@ -28,37 +24,7 @@ const getTrendColorClass = (trendColor: "success" | "danger" | "default"): strin
   }
 };
 
-const formatChange = (change: number | null, unit: string = ""): { text: string; isPositive: boolean | null; hasData: boolean } => {
-  if (change === null || change === undefined) {
-    return { text: "No historical data", isPositive: null, hasData: false };
-  }
-  
-  const isPositive = change > 0;
-  const sign = isPositive ? "+" : "";
-  const formattedValue = Math.abs(change).toFixed(1);
-  
-  return {
-    text: `${sign}${formattedValue}${unit ? ` ${unit}` : ""}`,
-    isPositive,
-    hasData: true
-  };
-};
-
-export const KPICard = memo(({ 
-  title, 
-  value, 
-  icon: Icon, 
-  trend, 
-  trendColor = "default",
-  change = null,
-  changeLabel,
-  changeUnit = ""
-}: KPICardProps) => {
-  const changeInfo = formatChange(change, changeUnit);
-  // Show change section only if changeLabel is explicitly provided (not null/undefined)
-  // This allows cards to opt-out of showing historical data
-  const showChange = changeLabel !== undefined && changeLabel !== null;
-
+export const KPICard = memo(({ title, value, icon: Icon, trend, trendColor = "default" }: KPICardProps) => {
   return (
     <Card className="p-4 hover:shadow-lg transition-shadow">
       <div className="flex items-center gap-3 mb-2">
@@ -69,42 +35,8 @@ export const KPICard = memo(({
       </div>
       <p className="text-2xl font-bold text-foreground mb-1">{value}</p>
       {trend && <p className={`text-xs ${getTrendColorClass(trendColor)}`}>{trend}</p>}
-      {showChange && (
-        <div className="flex items-center gap-1 mt-2">
-          {changeInfo.hasData && changeInfo.isPositive !== null && (
-            changeInfo.isPositive ? (
-              <TrendingUp className="h-3 w-3 text-green-600" />
-            ) : (
-              <TrendingDown className="h-3 w-3 text-red-600" />
-            )
-          )}
-          <p className={`text-xs ${
-            !changeInfo.hasData
-              ? "text-muted-foreground italic" 
-              : changeInfo.isPositive === null 
-                ? "text-muted-foreground" 
-                : changeInfo.isPositive 
-                  ? "text-green-600" 
-                  : "text-red-600"
-          }`}>
-            {changeInfo.hasData ? `${changeInfo.text} ${changeLabel}` : changeInfo.text}
-          </p>
-        </div>
-      )}
     </Card>
   );
-}, (prevProps, nextProps) => {
-  // Custom comparison to prevent unnecessary re-renders
-  return (
-    prevProps.title === nextProps.title &&
-    prevProps.value === nextProps.value &&
-    prevProps.trend === nextProps.trend &&
-    prevProps.trendColor === nextProps.trendColor &&
-    prevProps.icon === nextProps.icon &&
-    prevProps.change === nextProps.change &&
-    prevProps.changeLabel === nextProps.changeLabel &&
-    prevProps.changeUnit === nextProps.changeUnit
-  );
 });
 
 KPICard.displayName = 'KPICard';

src/components/SearchFilters.tsx

@@ -1,4 +1,4 @@
-import { memo, useState, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { memo, useState, useCallback, useEffect, useMemo } from "react";
 import { Download, ChevronDown, Loader2 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -114,13 +114,10 @@ const CreditScoreRange = memo(({
 ));
 CreditScoreRange.displayName = 'CreditScoreRange';
 
-const SearchFiltersComponent = ({ onSearch, onFilter, onDownload, isLoading = false }: SearchFiltersProps) => {
+export const SearchFilters = memo(({ onSearch, onFilter, onDownload, isLoading = false }: SearchFiltersProps) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [stateOpen, setStateOpen] = useState(false);
   const [districtOpen, setDistrictOpen] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const wasFocusedRef = useRef(false);
-  const cursorPositionRef = useRef<number | null>(null);
 
   // Data for dropdowns
   const [availableStates, setAvailableStates] = useState<string[]>([]);
@@ -134,81 +131,18 @@ const SearchFiltersComponent = ({ onSearch, onFilter, onDownload, isLoading = fa
     maxCreditScore: 1000,
   });
 
-  // Store callbacks in refs to avoid dependency issues that cause re-renders
-  const onSearchRef = useRef(onSearch);
-  const onFilterRef = useRef(onFilter);
+  // Debounce search query - 300ms delay
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
 
-  // Update refs when callbacks change (without causing re-renders)
-  useEffect(() => {
-    onSearchRef.current = onSearch;
-    onFilterRef.current = onFilter;
-  }, [onSearch, onFilter]);
-
-  // Debounce search query - 500ms delay to reduce API calls
-  const debouncedSearchQuery = useDebounce(searchQuery, 500);
-
-  // Handle input change - update local state immediately
-  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    const cursorPos = e.target.selectionStart || 0;
+  // Trigger search when debounced value changes
+  const handleSearchChange = useCallback((value: string) => {
     setSearchQuery(value);
-    // Store cursor position and focus state
-    cursorPositionRef.current = cursorPos;
-    wasFocusedRef.current = true;
-  }, []);
-
-  // Handle focus events
-  const handleFocus = useCallback(() => {
-    wasFocusedRef.current = true;
-  }, []);
-
-  const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
-    // Only mark as not focused if focus is actually leaving (not just moving within the component)
-    // Use a small delay to check if focus moved to another element in the same component
-    setTimeout(() => {
-      if (document.activeElement !== e.target && document.activeElement !== inputRef.current) {
-        wasFocusedRef.current = false;
-        cursorPositionRef.current = null;
-      }
-    }, 0);
   }, []);
 
   // Effect to call onSearch when debounced value changes
-  // Using ref to avoid dependency on onSearch which would cause re-renders
-  // Use setTimeout to batch the call and prevent focus loss
   useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      onSearchRef.current(debouncedSearchQuery);
-    }, 0);
-    return () => clearTimeout(timeoutId);
-  }, [debouncedSearchQuery]);
-
-  // Restore focus and cursor position after re-renders using useLayoutEffect
-  // This runs synchronously before the browser paints, preventing visible focus loss
-  useLayoutEffect(() => {
-    if (wasFocusedRef.current && inputRef.current) {
-      const input = inputRef.current;
-      const isCurrentlyFocused = document.activeElement === input;
-      
-      // Restore focus if we were focused but aren't anymore
-      if (!isCurrentlyFocused) {
-        input.focus();
-      }
-      
-      // Restore cursor position if we have one stored
-      if (cursorPositionRef.current !== null) {
-        const pos = cursorPositionRef.current;
-        const maxPos = input.value.length;
-        const cursorPos = Math.min(pos, maxPos);
-        // Use requestAnimationFrame for better timing
-        requestAnimationFrame(() => {
-          if (inputRef.current && wasFocusedRef.current) {
-            inputRef.current.setSelectionRange(cursorPos, cursorPos);
-          }
-        });
-      }
-    }
-  }, [searchQuery, isLoading]); // Run when these change, as they're most likely to cause re-renders
+    onSearch(debouncedSearchQuery);
+  }, [debouncedSearchQuery, onSearch]);
 
   // Fetch states on mount
   useEffect(() => {
@@ -264,41 +198,42 @@ const SearchFiltersComponent = ({ onSearch, onFilter, onDownload, isLoading = fa
   }, [debouncedStates]);
 
   const handleFilterChange = useCallback((key: keyof FilterState, value: string | number | string[]) => {
-    setFilters((prevFilters) => {
-      const newFilters = { ...prevFilters, [key]: value };
-      onFilterRef.current(newFilters);
-      return newFilters;
-    });
-  }, []);
+    const newFilters = { ...filters, [key]: value };
+    setFilters(newFilters);
+    onFilter(newFilters);
+  }, [onFilter, filters]);
 
   const toggleState = useCallback((state: string, checked: boolean) => {
-    setFilters((prevFilters) => {
-      const newStates = checked
-        ? Array.from(new Set([...prevFilters.states, state]))
-        : prevFilters.states.filter(s => s !== state);
+    const newStates = checked
+      ? Array.from(new Set([...filters.states, state]))
+      : filters.states.filter(s => s !== state);
 
-      const newFilters = {
-        ...prevFilters,
-        states: newStates,
-        districts: newStates.length === 0 ? [] : prevFilters.districts,
-      };
+    const newFilters = {
+      ...filters,
+      states: newStates,
+      // If we deselect a state, we should probably clear districts involved with it? 
+      // But since we refetch districts based on new states, valid districts will be returned.
+      // We might want to filter out selected districts that are no longer in the available list.
+      // However user might want to keep them if they are still valid. 
+      // For now, let's keep it simple and just update states. The district list will update visually.
+      // If we want to be strict, we can filter districts against the new availableDistricts list in the useEffect, 
+      // but that requires another effect or logic.
+      districts: newStates.length === 0 ? [] : filters.districts,
+    };
 
-      onFilterRef.current(newFilters);
-      return newFilters;
-    });
-  }, []);
+    setFilters(newFilters);
+    onFilter(newFilters);
+  }, [onFilter, filters]);
 
   const toggleDistrict = useCallback((district: string, checked: boolean) => {
-    setFilters((prevFilters) => {
-      const newDistricts = checked
-        ? Array.from(new Set([...prevFilters.districts, district]))
-        : prevFilters.districts.filter(d => d !== district);
+    const newDistricts = checked
+      ? Array.from(new Set([...filters.districts, district]))
+      : filters.districts.filter(d => d !== district);
 
-      const newFilters = { ...prevFilters, districts: newDistricts };
-      onFilterRef.current(newFilters);
-      return newFilters;
-    });
-  }, []);
+    const newFilters = { ...filters, districts: newDistricts };
+    setFilters(newFilters);
+    onFilter(newFilters);
+  }, [onFilter, filters]);
 
   const handleDealerTypeChange = useCallback((value: string) => {
     handleFilterChange('dealerType', value);
@@ -317,16 +252,11 @@ const SearchFiltersComponent = ({ onSearch, onFilter, onDownload, isLoading = fa
       {/* Search Bar Row */}
       <div className="w-full relative">
         <Input
-          ref={inputRef}
-          type="text"
-          placeholder="Search dealers by name, MFMS ID, credit score, or ask a question..."
+          placeholder="Search by dealer name, city, state, district, credit score, mobile, aadhaar, or license..."
           value={searchQuery}
-          onChange={handleSearchChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
+          onChange={(e) => handleSearchChange(e.target.value)}
           className="w-full pr-10"
-          autoComplete="off"
-          spellCheck="false"
+          disabled={isLoading}
         />
         {isLoading && (
           <div className="absolute right-3 top-1/2 -translate-y-1/2">
@@ -425,15 +355,6 @@ const SearchFiltersComponent = ({ onSearch, onFilter, onDownload, isLoading = fa
       </Card>
     </div>
   );
-};
-
-SearchFiltersComponent.displayName = 'SearchFilters';
-
-// Memoize with custom comparison to prevent re-renders
-// Only re-render if isLoading changes - callbacks are stored in refs so changes don't matter
-// The input uses local state, so re-renders won't affect typing
-export const SearchFilters = memo(SearchFiltersComponent, (prevProps, nextProps) => {
-  // Only re-render if isLoading actually changed (false->true or true->false)
-  // This is necessary to show/hide the loading spinner
-  return prevProps.isLoading === nextProps.isLoading;
 });
+
+SearchFilters.displayName = 'SearchFilters';

src/components/charts/CreditScoreTrendChart.tsx

@@ -36,13 +36,6 @@ export const CreditScoreTrendChart = memo(({ creditScore, data, compact = false
       </ResponsiveContainer>
     </Card>
   );
-}, (prevProps, nextProps) => {
-  // Custom comparison to prevent unnecessary re-renders
-  return (
-    prevProps.creditScore === nextProps.creditScore &&
-    prevProps.compact === nextProps.compact &&
-    JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data)
-  );
 });
 
 CreditScoreTrendChart.displayName = 'CreditScoreTrendChart';

src/components/charts/SalesPurchaseChart.tsx

@@ -38,14 +38,6 @@ export const SalesPurchaseChart = memo(({
       </ResponsiveContainer>
     </Card>
   );
-}, (prevProps, nextProps) => {
-  // Custom comparison to prevent unnecessary re-renders
-  return (
-    prevProps.totalSales6M === nextProps.totalSales6M &&
-    prevProps.totalPurchase6M === nextProps.totalPurchase6M &&
-    prevProps.compact === nextProps.compact &&
-    JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data)
-  );
 });
 
 SalesPurchaseChart.displayName = 'SalesPurchaseChart';

src/components/charts/StockAgeChart.tsx

@@ -64,9 +64,6 @@ export const StockAgeChart = memo(({ data }: { data?: any[] }) => {
       </div>
     </Card>
   );
-}, (prevProps, nextProps) => {
-  // Custom comparison to prevent unnecessary re-renders
-  return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data);
 });
 
 StockAgeChart.displayName = 'StockAgeChart';

src/components/common/Pagination.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { Button } from '@/components/ui/button';
 
 interface PaginationProps {
@@ -14,23 +14,8 @@ export const Pagination = memo(({
   onPageChange,
   maxVisiblePages = 10
 }: PaginationProps) => {
-  // Use state and effect to track window width instead of calculating on every render
-  const [isMobile, setIsMobile] = useState(() => 
-    typeof window !== 'undefined' ? window.innerWidth < 640 : false
-  );
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 640);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const effectiveMaxPages = useMemo(() => isMobile ? 3 : maxVisiblePages, [isMobile, maxVisiblePages]);
+  const isMobile = typeof window !== 'undefined' ? window.innerWidth < 640 : false;
+  const effectiveMaxPages = isMobile ? 3 : maxVisiblePages;
 
   const handlePrevious = useCallback(() => {
     onPageChange(Math.max(1, currentPage - 1));

src/components/dealer/ActivityTimeline.tsx

@@ -1,80 +1,15 @@
-import { memo, useState, useEffect } from 'react';
+import { memo, useState } from 'react';
 import { MessageSquare, Phone, CheckCircle, ChevronDown, ChevronUp } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { useAuth } from '@/hooks/useAuth';
-import { useParams } from 'react-router-dom';
-import { dealerService } from '@/api/services/dealer.service';
-import { LoadingSpinner } from '@/components/common/LoadingSpinner';
-
-interface ActivityTimelineData {
-  lastSMS: {
-    date: string;
-    customer: string;
-    mobile_number?: string;
-    message?: string;
-    sms_type?: string;
-  } | null;
-  lastCall: {
-    date: string;
-    customer: string;
-    dealer_id?: string | number;
-  } | null;
-  lastAcknowledgment: {
-    date: string;
-    customer: string;
-    dealer_id?: string | number;
-    txn_date?: string;
-  } | null;
-}
 
 export const ActivityTimeline = memo(() => {
   const [isOpen, setIsOpen] = useState(false);
-  const [activityData, setActivityData] = useState<ActivityTimelineData | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const { userRole } = useAuth();
-  const { id: dealerId } = useParams<{ id: string }>();
-
-  useEffect(() => {
-    const fetchActivityTimeline = async () => {
-      if (!dealerId || userRole !== 'helpdesk') return;
-
-      setLoading(true);
-      setError(null);
-      try {
-        const response = await dealerService.getActivityTimeline(dealerId);
-        if (response.success && response.data) {
-          setActivityData(response.data);
-        }
-      } catch (err: any) {
-        console.error('Error fetching activity timeline:', err);
-        setError(err.message || 'Failed to load activity timeline');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    if (isOpen && dealerId) {
-      fetchActivityTimeline();
-    }
-  }, [isOpen, dealerId, userRole]);
 
   if (userRole !== 'helpdesk') return null;
 
-  const formatDate = (dateString: string | null | undefined) => {
-    if (!dateString) return 'N/A';
-    try {
-      return new Date(dateString).toLocaleDateString('en-GB', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric'
-      });
-    } catch {
-      return 'N/A';
-    }
-  };
-
   return (
     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="mb-6">
       <Card className="p-4 sm:p-6">
@@ -83,70 +18,38 @@ export const ActivityTimeline = memo(() => {
           {isOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
         </CollapsibleTrigger>
         <CollapsibleContent className="mt-4">
-          {loading ? (
-            <div className="flex justify-center items-center py-8">
-              <LoadingSpinner />
-            </div>
-          ) : error ? (
-            <div className="text-sm text-destructive py-4">{error}</div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div className="flex items-start gap-3">
-                <MessageSquare className="h-5 w-5 text-primary mt-1" />
-                <div>
-                  <p className="font-medium text-foreground">Last SMS</p>
-                  {activityData?.lastSMS ? (
-                    <>
-                      <p className="text-sm text-muted-foreground">
-                        Date: {formatDate(activityData.lastSMS.date)}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        Customer: {activityData.lastSMS.customer}
-                      </p>
-                    </>
-                  ) : (
-                    <p className="text-sm text-muted-foreground">No SMS data available</p>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <Phone className="h-5 w-5 text-primary mt-1" />
-                <div>
-                  <p className="font-medium text-foreground">Last Call</p>
-                  {activityData?.lastCall ? (
-                    <>
-                      <p className="text-sm text-muted-foreground">
-                        Date: {formatDate(activityData.lastCall.date)}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        Customer: {activityData.lastCall.customer}
-                      </p>
-                    </>
-                  ) : (
-                    <p className="text-sm text-muted-foreground">No call data available</p>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <CheckCircle className="h-5 w-5 text-primary mt-1" />
-                <div>
-                  <p className="font-medium text-foreground">Last Acknowledgment</p>
-                  {activityData?.lastAcknowledgment ? (
-                    <>
-                      <p className="text-sm text-muted-foreground">
-                        Date: {formatDate(activityData.lastAcknowledgment.date)}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        Customer: {activityData.lastAcknowledgment.customer}
-                      </p>
-                    </>
-                  ) : (
-                    <p className="text-sm text-muted-foreground">No acknowledgment data available</p>
-                  )}
-                </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="flex items-start gap-3">
+              <MessageSquare className="h-5 w-5 text-primary mt-1" />
+              <div>
+                <p className="font-medium text-foreground">Last SMS</p>
+                <p className="text-sm text-muted-foreground">
+                  Date: {new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toLocaleDateString()}
+                </p>
+                <p className="text-sm text-muted-foreground">Customer: Rahul Sharma</p>
               </div>
             </div>
-          )}
+            <div className="flex items-start gap-3">
+              <Phone className="h-5 w-5 text-primary mt-1" />
+              <div>
+                <p className="font-medium text-foreground">Last Call</p>
+                <p className="text-sm text-muted-foreground">
+                  Date: {new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toLocaleDateString()}
+                </p>
+                <p className="text-sm text-muted-foreground">Customer: Priya Patel</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <CheckCircle className="h-5 w-5 text-primary mt-1" />
+              <div>
+                <p className="font-medium text-foreground">Last Acknowledgment</p>
+                <p className="text-sm text-muted-foreground">
+                  Date: {new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toLocaleDateString()}
+                </p>
+                <p className="text-sm text-muted-foreground">Customer: Amit Kumar</p>
+              </div>
+            </div>
+          </div>
         </CollapsibleContent>
       </Card>
     </Collapsible>

src/components/dealer/CreditScoreBreakdown.tsx

@@ -1,7 +1,6 @@
 import { memo } from 'react';
 import { ClipboardList } from 'lucide-react';
 import { Card } from '@/components/ui/card';
-import { getCreditScoreColor } from '@/lib/mockData';
 import type { ScoreParameter } from '@/lib/mockData';
 
 interface CreditScoreBreakdownProps {
@@ -9,18 +8,6 @@ interface CreditScoreBreakdownProps {
   compact?: boolean;
 }
 
-const colorClasses = {
-  success: "bg-success",
-  warning: "bg-warning",
-  danger: "bg-danger",
-} as const;
-
-const textColorClasses = {
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-danger",
-} as const;
-
 export const CreditScoreBreakdown = memo(({ 
   scoreBreakdown, 
   compact = false 
@@ -30,26 +17,23 @@ export const CreditScoreBreakdown = memo(({
       <Card className="p-4">
         <h3 className="text-lg font-semibold mb-2 text-foreground">Credit Score Breakdown</h3>
         <div className="space-y-2">
-          {scoreBreakdown.map((param, idx) => {
-            const color = getCreditScoreColor(param.dealerScore);
-            return (
-              <div key={idx} className="space-y-1">
-                <div className="flex justify-between items-center">
-                  <span className="text-xs font-medium text-foreground">{param.parameter}</span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-muted-foreground">{param.weight}%</span>
-                    <span className={`text-xs font-semibold ${textColorClasses[color]}`}>{param.dealerScore}</span>
-                  </div>
-                </div>
-                <div className="h-1.5 bg-muted rounded-full overflow-hidden">
-                  <div
-                    className={`h-full ${colorClasses[color]} transition-all`}
-                    style={{ width: `${(param.dealerScore / 1000) * 100}%` }}
-                  />
+          {scoreBreakdown.map((param, idx) => (
+            <div key={idx} className="space-y-1">
+              <div className="flex justify-between items-center">
+                <span className="text-xs font-medium text-foreground">{param.parameter}</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground">{param.weight}%</span>
+                  <span className="text-xs font-semibold text-primary">{param.dealerScore}</span>
                 </div>
               </div>
-            );
-          })}
+              <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary transition-all"
+                  style={{ width: `${(param.dealerScore / 1000) * 100}%` }}
+                />
+              </div>
+            </div>
+          ))}
         </div>
       </Card>
     );
@@ -62,27 +46,24 @@ export const CreditScoreBreakdown = memo(({
         <h2 className="text-xl font-semibold text-foreground">Credit Score Breakdown</h2>
       </div>
       <div className="space-y-4">
-        {scoreBreakdown.map((param, idx) => {
-          const color = getCreditScoreColor(param.dealerScore);
-          return (
-            <div key={idx} className="space-y-2">
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium text-foreground">{param.parameter}</span>
-                <div className="flex items-center gap-2">
-                  <span className="text-xs text-muted-foreground">{param.weight}%</span>
-                  <span className={`text-sm font-semibold ${textColorClasses[color]}`}>{param.dealerScore}</span>
-                </div>
+        {scoreBreakdown.map((param, idx) => (
+          <div key={idx} className="space-y-2">
+            <div className="flex justify-between items-center">
+              <span className="text-sm font-medium text-foreground">{param.parameter}</span>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-muted-foreground">{param.weight}%</span>
+                <span className="text-sm font-semibold text-primary">{param.dealerScore}</span>
               </div>
-              <div className="h-2 bg-muted rounded-full overflow-hidden">
-                <div
-                  className={`h-full ${colorClasses[color]} transition-all`}
-                  style={{ width: `${(param.dealerScore / 1000) * 100}%` }}
-                />
-              </div>
-              <p className="text-xs text-muted-foreground">{param.remarks}</p>
             </div>
-          );
-        })}
+            <div className="h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary transition-all"
+                style={{ width: `${(param.dealerScore / 1000) * 100}%` }}
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">{param.remarks}</p>
+          </div>
+        ))}
       </div>
     </Card>
   );

src/components/dealer/DealerProfileHeader.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -24,15 +24,14 @@ export const DealerProfileHeader = memo(({
   onViewScoreCard,
 }: DealerProfileHeaderProps) => {
   const { userRole } = useAuth();
-  // Memoize lastUpdated to prevent recalculation on every render
-  const lastUpdated = useMemo(() => new Date().toLocaleString('en-GB', {
+  const lastUpdated = new Date().toLocaleString('en-GB', {
     day: '2-digit',
     month: '2-digit',
     year: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
-  }), []);
+  });
 
   return (
     <header className="bg-[#E8F5E9] border-b border-border py-4 px-4 sm:px-8">
@@ -44,37 +43,6 @@ export const DealerProfileHeader = memo(({
             </Button>
             <div>
               <h1 className="text-xl sm:text-2xl font-bold text-foreground m-0 leading-tight">{dealer.dealerName}</h1>
-              <div className="mt-1 space-y-1">
-                <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs sm:text-sm text-muted-foreground">
-                  <span><strong>MFMS ID:</strong> {dealer.mfmsId}</span>
-                  <span>•</span>
-                  <span>
-                    {dealer.district}
-                    {dealer.city && dealer.city !== dealer.district ? `, ${dealer.city}` : ''}
-                    {dealer.state ? `, ${dealer.state}` : ''}
-                  </span>
-                  <span>•</span>
-                  <span>{dealer.dealerType}</span>
-                  <span>•</span>
-                  <span>
-                    <Badge variant={isActive ? "default" : "secondary"} className={isActive ? "bg-[#16A34A]" : ""}>
-                      {isActive ? "Active" : "Inactive"}
-                    </Badge>
-                  </span>
-                </div>
-                {showScoreCard && (
-                  <div className="mt-1">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={onViewScoreCard}
-                      className="bg-[#16A34A] text-white hover:bg-[#15803D]"
-                    >
-                      View Score Card
-                    </Button>
-                  </div>
-                )}
-              </div>
             </div>
           </div>
           <div className="text-left sm:text-right ml-11 sm:ml-0">
@@ -97,19 +65,36 @@ export const DealerProfileHeader = memo(({
             </div>
           </div>
         </div>
+        <div className="ml-11 sm:ml-14 mt-2 sm:mt-1 space-y-1">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs sm:text-sm text-muted-foreground">
+            <span><strong>MFMS ID:</strong> {dealer.mfmsId}</span>
+            <span>•</span>
+            <span>{dealer.district}, {dealer.city}, {dealer.state}</span>
+            <span>•</span>
+            <span>{dealer.dealerType}</span>
+            <span>•</span>
+            <span>
+              <Badge variant={isActive ? "default" : "secondary"} className={isActive ? "bg-[#16A34A]" : ""}>
+                {isActive ? "Active" : "Inactive"}
+              </Badge>
+            </span>
+          </div>
+        </div>
+        {showScoreCard && (
+          <div className="ml-11 sm:ml-14 mt-3 sm:mt-1">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onViewScoreCard}
+              className="bg-[#16A34A] text-white hover:bg-[#15803D]"
+            >
+              View Score Card
+            </Button>
+          </div>
+        )}
       </div>
     </header>
   );
-}, (prevProps, nextProps) => {
-  // Custom comparison function to prevent unnecessary re-renders
-  return (
-    prevProps.dealer.id === nextProps.dealer.id &&
-    prevProps.dealer.creditScore === nextProps.dealer.creditScore &&
-    prevProps.creditColor === nextProps.creditColor &&
-    prevProps.isEligible === nextProps.isEligible &&
-    prevProps.isActive === nextProps.isActive &&
-    prevProps.showScoreCard === nextProps.showScoreCard
-  );
 });
 
 DealerProfileHeader.displayName = 'DealerProfileHeader';

src/components/dealer/DealerSnapshot.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo, useCallback } from 'react';
+import { memo } from 'react';
 import { User } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 import type { Dealer } from '@/lib/mockData';
@@ -9,8 +9,7 @@ interface DealerSnapshotProps {
 }
 
 export const DealerSnapshot = memo(({ dealer, title = "Dealer Snapshot" }: DealerSnapshotProps) => {
-  // Memoize snapshotItems to prevent recreation on every render
-  const snapshotItems = useMemo(() => [
+  const snapshotItems = [
     { label: "Type", value: dealer.dealerType },
     { label: "Total Companies Associated", value: dealer.noOfCompanies },
     { label: "Active Products", value: dealer.noOfProducts },
@@ -21,7 +20,7 @@ export const DealerSnapshot = memo(({ dealer, title = "Dealer Snapshot" }: Deale
     { label: "Avg. Stock Age", value: `${dealer.stockAge} Days` },
     { label: "Aged Stock (>90 Days)", value: `${dealer.agedStock} MT` },
     { label: "Current Stock Quantity", value: `${dealer.currentStock} MT` },
-  ], [dealer]);
+  ];
 
   return (
     <Card className="p-4 sm:p-6">
@@ -70,40 +69,44 @@ interface CompareBusinessSnapshotProps {
   data: ManufacturerData;
 }
 
-// Helper function outside component to prevent recreation
-const getValue = (value: number | { value: number; unit: string } | undefined, defaultVal: number = 0): number => {
-  if (value === undefined) return defaultVal;
-  if (typeof value === 'number') return value;
-  return value.value || defaultVal;
-};
-
 export const CompareBusinessSnapshot = memo(({ data }: CompareBusinessSnapshotProps) => {
-  // Extract values from API response format or fallback to direct values
-  const snapshotItems = useMemo(() => {
-    const type = data.type || 'N/A';
-    const totalCompanies = data.total_companies_associated ?? data.totalCompanies ?? 0;
-    const activeProducts = data.active_products ?? data.activeProducts ?? 0;
-    const totalSales = getValue(data.total_sales_6m_rolling ?? data.totalSales, 0);
-    const totalPurchase = getValue(data.total_purchase_6m_rolling ?? data.totalPurchase, 0);
-    const avgLiquidityCycle = getValue(data.avg_liquidity_cycle_3m_weighted ?? data.avgLiquidityCycle, 0);
-    const avgAcknowledgmentCycle = getValue(data.avg_acknowledgment_cycle_3m_weighted ?? data.avgAcknowledgmentCycle, 0);
-    const avgStockAge = getValue(data.avg_stock_age ?? data.avgStockAge, 0);
-    const agedStock = getValue(data.aged_stock_over_90_days ?? data.agedStock, 0);
-    const currentStock = getValue(data.current_stock_quantity ?? data.currentStock, 0);
+  // Helper function to extract value from API response (handles both formats)
+  const getValue = (value: number | { value: number; unit: string } | undefined, defaultVal: number = 0): number => {
+    if (value === undefined) return defaultVal;
+    if (typeof value === 'number') return value;
+    return value.value || defaultVal;
+  };
 
-    return [
-      { label: "Type", value: type },
-      { label: "Total Companies Associated", value: totalCompanies },
-      { label: "Active Products", value: activeProducts },
-      { label: "Total Sales (6M Rolling)", value: `${totalSales} MT` },
-      { label: "Total Purchase (6M Rolling)", value: `${totalPurchase} MT` },
-      { label: "Avg. Liquidity Cycle (3M Weighted)", value: `${avgLiquidityCycle > 0 ? avgLiquidityCycle.toFixed(1) : 0} Days` },
-      { label: "Avg. Acknowledgment Cycle (3M Weighted)", value: `${avgAcknowledgmentCycle > 0 ? avgAcknowledgmentCycle.toFixed(1) : 0} Days` },
-      { label: "Avg. Stock Age", value: `${avgStockAge} Days` },
-      { label: "Aged Stock (>90 Days)", value: `${agedStock} MT` },
-      { label: "Current Stock Quantity", value: `${currentStock} MT` },
-    ];
-  }, [data]);
+  // Helper function to get unit from API response
+  const getUnit = (value: number | { value: number; unit: string } | undefined, defaultUnit: string = ''): string => {
+    if (value === undefined || typeof value === 'number') return defaultUnit;
+    return value.unit || defaultUnit;
+  };
+
+  // Extract values from API response format or fallback to direct values
+  const type = data.type || 'N/A';
+  const totalCompanies = data.total_companies_associated ?? data.totalCompanies ?? 0;
+  const activeProducts = data.active_products ?? data.activeProducts ?? 0;
+  const totalSales = getValue(data.total_sales_6m_rolling ?? data.totalSales, 0);
+  const totalPurchase = getValue(data.total_purchase_6m_rolling ?? data.totalPurchase, 0);
+  const avgLiquidityCycle = getValue(data.avg_liquidity_cycle_3m_weighted ?? data.avgLiquidityCycle, 0);
+  const avgAcknowledgmentCycle = getValue(data.avg_acknowledgment_cycle_3m_weighted ?? data.avgAcknowledgmentCycle, 0);
+  const avgStockAge = getValue(data.avg_stock_age ?? data.avgStockAge, 0);
+  const agedStock = getValue(data.aged_stock_over_90_days ?? data.agedStock, 0);
+  const currentStock = getValue(data.current_stock_quantity ?? data.currentStock, 0);
+
+  const snapshotItems = [
+    { label: "Type", value: type },
+    { label: "Total Companies Associated", value: totalCompanies },
+    { label: "Active Products", value: activeProducts },
+    { label: "Total Sales (6M Rolling)", value: `${totalSales} MT` },
+    { label: "Total Purchase (6M Rolling)", value: `${totalPurchase} MT` },
+    { label: "Avg. Liquidity Cycle (3M Weighted)", value: `${avgLiquidityCycle > 0 ? avgLiquidityCycle.toFixed(1) : 0} Days` },
+    { label: "Avg. Acknowledgment Cycle (3M Weighted)", value: `${avgAcknowledgmentCycle > 0 ? avgAcknowledgmentCycle.toFixed(1) : 0} Days` },
+    { label: "Avg. Stock Age", value: `${avgStockAge} Days` },
+    { label: "Aged Stock (>90 Days)", value: `${agedStock} MT` },
+    { label: "Current Stock Quantity", value: `${currentStock} MT` },
+  ];
 
   return (
     <Card className="p-4 sm:p-6">

src/components/dealer/DealerTable.tsx

@@ -18,10 +18,10 @@ const TableHeader = memo(() => (
       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Mobile Number</th>
       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Products</th>
       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Companies</th>
-      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Total Sales (MT)</th>
-      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Total Buy (MT)</th>
-      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">LIQ Cycle</th>
-      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">ACK Cycle</th>
+      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Sales Rating</th>
+      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Buy Rating</th>
+      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Liquidity Cycle</th>
+      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Ack. Cycle</th>
       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Current Stock</th>
       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Aged Stock</th>
       <th className="px-4 py-3 text-left text-sm font-medium text-foreground min-w-[200px]">Credit Score</th>

src/components/dealer/DealerTableRow.tsx

@@ -32,49 +32,21 @@ export const DealerTableRow = memo(({
       <td className="px-4 py-3 text-sm">{dealer.mobile || "N/A"}</td>
       <td className="px-4 py-3 text-sm text-center">{dealer.noOfProducts}</td>
       <td className="px-4 py-3 text-sm text-center">{dealer.noOfCompanies}</td>
-      <td className="px-4 py-3 text-sm text-center">
-        {dealer.totalSales6M > 0 ? parseFloat(Number(dealer.totalSales6M).toFixed(2)).toString() : '0'} MT
-      </td>
-      <td className="px-4 py-3 text-sm text-center">
-        {dealer.totalPurchase6M > 0 ? parseFloat(Number(dealer.totalPurchase6M).toFixed(2)).toString() : '0'} MT
-      </td>
+      <td className="px-4 py-3 text-sm text-center">{dealer.salesRating}</td>
+      <td className="px-4 py-3 text-sm text-center">{dealer.buyRating}</td>
       <td className="px-4 py-3 text-sm text-center">
         {dealer.avgLiquidityCycle > 0 ? `${dealer.avgLiquidityCycle.toFixed(1)} Days` : '0 Days'}
       </td>
       <td className="px-4 py-3 text-sm text-center">
         {dealer.avgAcknowledgmentCycle > 0 ? `${dealer.avgAcknowledgmentCycle.toFixed(1)} Days` : '0 Days'}
       </td>
-      <td className="px-4 py-3 text-sm text-center">
-        {dealer.currentStock > 0 ? parseFloat(Number(dealer.currentStock).toFixed(2)).toString() : '0'} MT
-      </td>
-      <td className="px-4 py-3 text-sm text-center">
-        {dealer.agedStock > 0 ? parseFloat(Number(dealer.agedStock).toFixed(2)).toString() : '0'} MT
-      </td>
+      <td className="px-4 py-3 text-sm text-center">{dealer.currentStock} MT</td>
+      <td className="px-4 py-3 text-sm text-center">{dealer.agedStock} MT</td>
       <td className="px-4 py-3 text-sm">
         <CreditScoreBar score={dealer.creditScore} />
       </td>
     </tr>
   );
-}, (prevProps, nextProps) => {
-  // Custom comparison to prevent unnecessary re-renders
-  return (
-    prevProps.dealer.id === nextProps.dealer.id &&
-    prevProps.dealer.creditScore === nextProps.dealer.creditScore &&
-    prevProps.dealer.state === nextProps.dealer.state &&
-    prevProps.dealer.district === nextProps.dealer.district &&
-    prevProps.dealer.dealerName === nextProps.dealer.dealerName &&
-    prevProps.dealer.mfmsId === nextProps.dealer.mfmsId &&
-    prevProps.dealer.mobile === nextProps.dealer.mobile &&
-    prevProps.dealer.noOfProducts === nextProps.dealer.noOfProducts &&
-    prevProps.dealer.noOfCompanies === nextProps.dealer.noOfCompanies &&
-    prevProps.dealer.totalSales6M === nextProps.dealer.totalSales6M &&
-    prevProps.dealer.totalPurchase6M === nextProps.dealer.totalPurchase6M &&
-    prevProps.dealer.avgLiquidityCycle === nextProps.dealer.avgLiquidityCycle &&
-    prevProps.dealer.avgAcknowledgmentCycle === nextProps.dealer.avgAcknowledgmentCycle &&
-    prevProps.dealer.currentStock === nextProps.dealer.currentStock &&
-    prevProps.dealer.agedStock === nextProps.dealer.agedStock &&
-    prevProps.isHovered === nextProps.isHovered
-  );
 });
 
 DealerTableRow.displayName = 'DealerTableRow';

src/hooks/useAuth.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import type { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { authService, type AppUser, type UserRole } from '@/api';
@@ -157,14 +157,8 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     navigate('/login');
   };
 
-  // Memoize context value to prevent unnecessary re-renders
-  const contextValue = useMemo(
-    () => ({ user, session, userRole, loading, signIn, signOut }),
-    [user, session, userRole, loading, signIn, signOut]
-  );
-
   return (
-    <AuthContext.Provider value={contextValue}>
+    <AuthContext.Provider value={{ user, session, userRole, loading, signIn, signOut }}>
       {children}
     </AuthContext.Provider>
   );

src/hooks/useDealerOverview.ts

@@ -6,10 +6,11 @@ import { useDebounce } from './useDebounce';
 interface DealerOverviewMetrics {
     totalDealers: number;
     avgCreditScore: number;
-    avgCreditScoreChange: number | null;
     highRiskPercentage: string;
     avgLiquidityCycle: number;
-    avgLiquidityCycleChange: number | null;
+    // Add trend details if available in API response, for now we map what we can
+    // The UI expects detailed trends which might not be in the simple overview stats
+    // We'll see what the API returns.
 }
 
 interface UseDealerOverviewReturn {
@@ -110,10 +111,8 @@ export function useDealerOverview(filters: FilterState, searchQuery: string): Us
                     setMetrics({
                         totalDealers: data.totalDealers || data.total_dealers || 0,
                         avgCreditScore: data.avgCreditScore || data.avg_credit_score || 0,
-                        avgCreditScoreChange: data.avgCreditScoreChange !== undefined ? data.avgCreditScoreChange : (data.avg_credit_score_change !== undefined ? data.avg_credit_score_change : null),
                         highRiskPercentage: data.highRiskPercentage || data.high_risk_dealers_percentage || "0.0",
-                        avgLiquidityCycle: data.avgLiquidityCycle || data.avg_liquidity_cycle_days || data.avg_liquidity_cycle || 0,
-                        avgLiquidityCycleChange: data.avgLiquidityCycleChange !== undefined ? data.avgLiquidityCycleChange : (data.avg_liquidity_cycle_change !== undefined ? data.avg_liquidity_cycle_change : null)
+                        avgLiquidityCycle: data.avgLiquidityCycle || data.avg_liquidity_cycle_days || data.avg_liquidity_cycle || 0
                     });
                 } else {
                     setError(response.message || 'Failed to fetch overview data');

src/lib/mockData.ts

@@ -23,7 +23,6 @@ export interface Dealer {
   mobile?: string;
   aadhaar?: string;
   dealerLicense?: string;
-  isActive?: boolean;
 }
 
 // Get all Indian states using country-state-city

src/pages/Dashboard.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Users, TrendingUp, AlertTriangle, Clock } from "lucide-react";
 import { KPICard } from "@/components/KPICard";
-import { SearchFilters, type FilterState } from "@/components/SearchFilters";
+import { SearchFilters } from "@/components/SearchFilters";
 import { DashboardHeader } from "@/components/layout/DashboardHeader";
 import { DealerTable } from "@/components/dealer/DealerTable";
 import { Pagination } from "@/components/common/Pagination";
@@ -44,72 +44,17 @@ const Dashboard = () => {
   );
 
   // API Integration for Overview Metrics
-  const { metrics, loading: overviewLoading, error: overviewError } = useDealerOverview(filters, searchQuery);
+  const { metrics, loading: overviewLoading } = useDealerOverview(filters, searchQuery);
 
-  const totalPages = useMemo(() => Math.ceil(totalCount / ITEMS_PER_PAGE), [totalCount]);
+  const totalPages = Math.ceil(totalCount / ITEMS_PER_PAGE);
 
-  // Fallback to 0 if metrics not yet loaded - memoize to prevent re-renders
-  const displayKPIs = useMemo(() => metrics || {
+  // Fallback to 0 if metrics not yet loaded
+  const displayKPIs = metrics || {
     totalDealers: 0,
     avgCreditScore: 0,
-    avgCreditScoreChange: null,
     highRiskPercentage: "0.0",
-    avgLiquidityCycle: 0,
-    avgLiquidityCycleChange: null
-  }, [metrics]);
-
-  // Generate dynamic labels based on active filters
-  const getDynamicLabels = useMemo(() => {
-    const hasFilters = filters.states.length > 0 || 
-                      filters.districts.length > 0 || 
-                      filters.dealerType !== 'all' ||
-                      filters.minCreditScore > 0 ||
-                      filters.maxCreditScore < 1000 ||
-                      searchQuery.trim().length > 0;
-
-    if (!hasFilters) {
-      return {
-        totalDealersTrend: "Active in system",
-        highRiskTrend: "Score below 500"
-      };
-    }
-
-    // Build filter description
-    const filterParts: string[] = [];
-    
-    if (filters.states.length > 0) {
-      if (filters.states.length === 1) {
-        filterParts.push(filters.states[0]);
-      } else {
-        filterParts.push(`${filters.states.length} states`);
-      }
-    }
-    
-    if (filters.districts.length > 0) {
-      if (filters.districts.length === 1) {
-        filterParts.push(filters.districts[0]);
-      } else {
-        filterParts.push(`${filters.districts.length} districts`);
-      }
-    }
-    
-    if (filters.dealerType !== 'all') {
-      filterParts.push(filters.dealerType);
-    }
-    
-    if (searchQuery.trim().length > 0) {
-      filterParts.push("search results");
-    }
-
-    const filterDescription = filterParts.length > 0 
-      ? filterParts.slice(0, 2).join(", ") + (filterParts.length > 2 ? "..." : "")
-      : "selected filters";
-
-    return {
-      totalDealersTrend: `Active in ${filterDescription}`,
-      highRiskTrend: "Score below 500"
-    };
-  }, [filters, searchQuery]);
+    avgLiquidityCycle: 0
+  };
 
   // Redirect to login if not authenticated
   useEffect(() => {
@@ -185,16 +130,6 @@ const Dashboard = () => {
     });
   }, [toast]);
 
-  // Memoize search handler to prevent unnecessary re-renders
-  const handleSearch = useCallback((query: string) => {
-    setSearchQuery(query);
-  }, [setSearchQuery]);
-
-  // Memoize filter handler to prevent unnecessary re-renders
-  const handleFilter = useCallback((newFilters: FilterState) => {
-    setFilters(newFilters);
-  }, [setFilters]);
-
   // Show UI immediately even if auth is loading (will redirect if not authenticated)
   // This provides better UX - user sees the page structure immediately
   return (
@@ -212,14 +147,8 @@ const Dashboard = () => {
         </div>
 
         {/* KPI Cards - Always show skeleton on initial load for better perceived performance */}
-        {overviewError && (
-          <div className="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-sm text-destructive">
-            <p className="font-semibold">Error loading overview metrics</p>
-            <p className="text-xs mt-1">{overviewError}</p>
-          </div>
-        )}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-          {overviewLoading ? (
+          {overviewLoading || loading ? (
             // Show loading skeleton for all cards
             <>
               {[1, 2, 3, 4].map((i) => (
@@ -236,30 +165,28 @@ const Dashboard = () => {
                 title="Total Dealers"
                 value={displayKPIs.totalDealers?.toLocaleString() || "0"}
                 icon={Users}
-                trend={getDynamicLabels.totalDealersTrend}
+                trend="Active in system"
               />
               <KPICard
                 title="Avg Credit Score"
-                value={typeof displayKPIs.avgCreditScore === 'number' ? displayKPIs.avgCreditScore.toFixed(1) : displayKPIs.avgCreditScore}
+                value={displayKPIs.avgCreditScore}
                 icon={TrendingUp}
-                change={displayKPIs.avgCreditScoreChange}
-                changeLabel="vs last month"
-                changeUnit="%"
+                trend="↑ 2.3% from last month"
+                trendColor="success"
               />
               <KPICard
                 title="High-Risk Dealers"
                 value={`${displayKPIs.highRiskPercentage}%`}
                 icon={AlertTriangle}
-                trend={getDynamicLabels.highRiskTrend}
+                trend="Score below 500"
                 trendColor="danger"
               />
               <KPICard
                 title="Avg Liquidity Cycle"
-                value={`${typeof displayKPIs.avgLiquidityCycle === 'number' ? displayKPIs.avgLiquidityCycle.toFixed(2) : displayKPIs.avgLiquidityCycle} Days`}
+                value={`${displayKPIs.avgLiquidityCycle} Days`}
                 icon={Clock}
-                change={displayKPIs.avgLiquidityCycleChange}
-                changeLabel="vs last month"
-                changeUnit="days"
+                trend="↓ 1.8 days improved"
+                trendColor="success"
               />
             </>
           )}
@@ -268,8 +195,8 @@ const Dashboard = () => {
         {/* Search & Filters */}
         <div className="mb-6">
           <SearchFilters
-            onSearch={handleSearch}
-            onFilter={handleFilter}
+            onSearch={setSearchQuery}
+            onFilter={setFilters}
             onDownload={handleDownload}
             isLoading={listLoading}
           />
@@ -299,10 +226,10 @@ const Dashboard = () => {
                       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Mobile Number</th>
                       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Products</th>
                       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Companies</th>
-                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Total Sales (MT)</th>
-                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Total Buy (MT)</th>
-                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">LIQ Cycle</th>
-                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">ACK Cycle</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Sales Rating</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Buy Rating</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Liquidity Cycle</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Ack. Cycle</th>
                       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Current Stock</th>
                       <th className="px-4 py-3 text-left text-sm font-medium text-foreground">Aged Stock</th>
                       <th className="px-4 py-3 text-left text-sm font-medium text-foreground min-w-[200px]">Credit Score</th>

src/pages/DealerProfile.tsx

@@ -1,5 +1,5 @@
 import { useParams, useNavigate } from "react-router-dom";
-import { useEffect, useMemo, useCallback, memo } from "react";
+import { useEffect, useMemo, useCallback } from "react";
 import { dealers, getScoreBreakdown, getCreditScoreColor, type Dealer, type ScoreParameter } from "@/lib/mockData";
 import { dealerService } from "@/api/services/dealer.service";
 import { useState } from "react";
@@ -85,8 +85,7 @@ const DealerProfile = () => {
             stockAge: d.stock_age || 0,
             mobile: d.mobile_number || d.mobile,
             aadhaar: d.aadhaar,
-            dealerLicense: d.dealer_license || d.license_number,
-            isActive: d.is_active !== undefined ? d.is_active : true
+            dealerLicense: d.dealer_license || d.license_number
           };
         }
 
@@ -185,7 +184,8 @@ const DealerProfile = () => {
           console.log('Setting compareBusinessData from API');
           setCompareBusinessData(compareRes.data);
         } else {
-          console.log('Compare API failed or no data, will use fallback data from dealer snapshot');
+          console.log('Compare API failed or no data, will use manufacturerData fallback');
+          console.log('manufacturerData:', manufacturerData);
         }
 
         if (mappedDealer) {
@@ -224,11 +224,11 @@ const DealerProfile = () => {
     [dealer]
   );
 
-  // Get active status from backend data (defaults to true if not provided)
+  // Use seeded random for consistent active status
   const isActive = useMemo(() => {
     if (!dealer) return false;
-    // Use isActive from dealer data if available, otherwise default to true
-    return dealer.isActive !== undefined ? dealer.isActive : true;
+    const seed = parseInt(dealer.id.replace('DLR', ''), 10) || 1;
+    return Math.sin(seed) * 10000 - Math.floor(Math.sin(seed) * 10000) > 0.3;
   }, [dealer]);
 
   const isEligible = dealer ? dealer.creditScore >= 500 : false;
@@ -378,6 +378,4 @@ const DealerProfile = () => {
   );
 };
 
-// Memoize the component to prevent unnecessary re-renders
-const DealerProfileMemo = memo(DealerProfile);
-export default DealerProfileMemo;
+export default DealerProfile;

src/pages/ScoreCard.tsx

@@ -213,7 +213,6 @@ const ScoreCard = () => {
             <h3 className="text-lg sm:text-xl font-bold text-foreground mb-2">
               Month-on-Month Product-wise Score Trends
             </h3>
-            {/* TODO: Update explanatory note below to reflect only parameters currently considered in score calculation */}
             <p className="text-xs sm:text-sm text-muted-foreground">
               Scores are calculated based on various performance metrics. Total weightage per product per month: 1000 points
             </p>
@@ -277,7 +276,6 @@ const ScoreCard = () => {
 
         {/* Card 4: Footer Note */}
         <Card className="p-6">
-          {/* TODO: Update note below to reflect only parameters currently considered in score calculation */}
           <p className="text-sm text-muted-foreground">
             <strong>Note:</strong> This score card provides a detailed view of product-wise performance trends over the last 6 months. Scores are calculated based on sales velocity, purchase consistency, stock management, and payment timeliness for each product category.
           </p>

vite.config.ts

@@ -14,5 +14,24 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
-
+  /* server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8003 ',
+        changeOrigin: true,
+        secure: false,
+        configure: (proxy, _options) => {
+          proxy.on('error', (err, _req, _res) => {
+            console.log('proxy error', err);
+          });
+          proxy.on('proxyReq', (proxyReq, req, _res) => {
+            console.log('Sending Request to the Target:', req.method, req.url);
+          });
+          proxy.on('proxyRes', (proxyRes, req, _res) => {
+            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
+          });
+        },
+      },
+    },
+  }, */
 })