changes updated on jan 22

src/api/endpoints.ts

@@ -25,5 +25,6 @@ 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,12 +258,15 @@ 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): Promise<ApiResponse<any>> => {
+    getCompareDealerBusiness: async (id: string | number, manufacturerSchema?: string): Promise<ApiResponse<any>> => {
         try {
-            const response = await axiosInstance.get<ApiResponse<any>>(
+            const url = manufacturerSchema 
-                API_ENDPOINTS.DEALERS.COMPARE_DEALER_BUSINESS(id)
+                ? `${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);
             return response.data;
         } catch (error) {
             throw error;
@@ -292,4 +295,18 @@ 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,6 +2,7 @@ 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>>;
 
@@ -11,6 +12,9 @@ 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 => {
@@ -24,7 +28,37 @@ const getTrendColorClass = (trendColor: "success" | "danger" | "default"): strin
   }
 };
 
-export const KPICard = memo(({ title, value, icon: Icon, trend, trendColor = "default" }: KPICardProps) => {
+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;
+
   return (
     <Card className="p-4 hover:shadow-lg transition-shadow">
       <div className="flex items-center gap-3 mb-2">
@@ -35,8 +69,42 @@ export const KPICard = memo(({ title, value, icon: Icon, trend, trendColor = "de
       </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

@@ -319,7 +319,7 @@ const SearchFiltersComponent = ({ onSearch, onFilter, onDownload, isLoading = fa
         <Input
           ref={inputRef}
           type="text"
-          placeholder="Search dealers by name, MFMS ID, location, credit score, or ask a question..."
+          placeholder="Search dealers by name, MFMS ID, credit score, or ask a question..."
           value={searchQuery}
           onChange={handleSearchChange}
           onFocus={handleFocus}

src/components/charts/CreditScoreTrendChart.tsx

@@ -36,6 +36,13 @@ 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,6 +38,14 @@ 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,6 +64,9 @@ 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 } from 'react';
+import { memo, useCallback, useMemo, useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 
 interface PaginationProps {
@@ -14,8 +14,23 @@ export const Pagination = memo(({
   onPageChange,
   maxVisiblePages = 10
 }: PaginationProps) => {
-  const isMobile = typeof window !== 'undefined' ? window.innerWidth < 640 : false;
+  // Use state and effect to track window width instead of calculating on every render
-  const effectiveMaxPages = isMobile ? 3 : maxVisiblePages;
+  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 handlePrevious = useCallback(() => {
     onPageChange(Math.max(1, currentPage - 1));

src/components/dealer/ActivityTimeline.tsx

@@ -1,15 +1,80 @@
-import { memo, useState } from 'react';
+import { memo, useState, useEffect } 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">
@@ -18,38 +83,70 @@ export const ActivityTimeline = memo(() => {
           {isOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
         </CollapsibleTrigger>
         <CollapsibleContent className="mt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {loading ? (
-            <div className="flex items-start gap-3">
+            <div className="flex justify-center items-center py-8">
-              <MessageSquare className="h-5 w-5 text-primary mt-1" />
+              <LoadingSpinner />
-              <div>
+            </div>
-                <p className="font-medium text-foreground">Last SMS</p>
+          ) : error ? (
-                <p className="text-sm text-muted-foreground">
+            <div className="text-sm text-destructive py-4">{error}</div>
-                  Date: {new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toLocaleDateString()}
+          ) : (
-                </p>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <p className="text-sm text-muted-foreground">Customer: Rahul Sharma</p>
+              <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>
             </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,6 +1,7 @@
 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 {
@@ -8,6 +9,18 @@ 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 
@@ -17,23 +30,26 @@ 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) => (
+          {scoreBreakdown.map((param, idx) => {
-            <div key={idx} className="space-y-1">
+            const color = getCreditScoreColor(param.dealerScore);
-              <div className="flex justify-between items-center">
+            return (
-                <span className="text-xs font-medium text-foreground">{param.parameter}</span>
+              <div key={idx} className="space-y-1">
-                <div className="flex items-center gap-2">
+                <div className="flex justify-between items-center">
-                  <span className="text-xs text-muted-foreground">{param.weight}%</span>
+                  <span className="text-xs font-medium text-foreground">{param.parameter}</span>
-                  <span className="text-xs font-semibold text-primary">{param.dealerScore}</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}%` }}
+                  />
                 </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>
     );
@@ -46,24 +62,27 @@ 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) => (
+        {scoreBreakdown.map((param, idx) => {
-          <div key={idx} className="space-y-2">
+          const color = getCreditScoreColor(param.dealerScore);
-            <div className="flex justify-between items-center">
+          return (
-              <span className="text-sm font-medium text-foreground">{param.parameter}</span>
+            <div key={idx} className="space-y-2">
-              <div className="flex items-center gap-2">
+              <div className="flex justify-between items-center">
-                <span className="text-xs text-muted-foreground">{param.weight}%</span>
+                <span className="text-sm font-medium text-foreground">{param.parameter}</span>
-                <span className="text-sm font-semibold text-primary">{param.dealerScore}</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>
               </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 } from 'react';
+import { memo, useMemo } from 'react';
 import { ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -24,14 +24,15 @@ export const DealerProfileHeader = memo(({
   onViewScoreCard,
 }: DealerProfileHeaderProps) => {
   const { userRole } = useAuth();
-  const lastUpdated = new Date().toLocaleString('en-GB', {
+  // Memoize lastUpdated to prevent recalculation on every render
+  const lastUpdated = useMemo(() => 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">
@@ -43,6 +44,37 @@ 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">
@@ -65,36 +97,19 @@ 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 } from 'react';
+import { memo, useMemo, useCallback } from 'react';
 import { User } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 import type { Dealer } from '@/lib/mockData';
@@ -9,7 +9,8 @@ interface DealerSnapshotProps {
 }
 
 export const DealerSnapshot = memo(({ dealer, title = "Dealer Snapshot" }: DealerSnapshotProps) => {
-  const snapshotItems = [
+  // Memoize snapshotItems to prevent recreation on every render
+  const snapshotItems = useMemo(() => [
     { label: "Type", value: dealer.dealerType },
     { label: "Total Companies Associated", value: dealer.noOfCompanies },
     { label: "Active Products", value: dealer.noOfProducts },
@@ -20,7 +21,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">
@@ -69,44 +70,40 @@ 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) => {
-  // 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;
-  };
-
-  // 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 snapshotItems = useMemo(() => {
-  const totalCompanies = data.total_companies_associated ?? data.totalCompanies ?? 0;
+    const type = data.type || 'N/A';
-  const activeProducts = data.active_products ?? data.activeProducts ?? 0;
+    const totalCompanies = data.total_companies_associated ?? data.totalCompanies ?? 0;
-  const totalSales = getValue(data.total_sales_6m_rolling ?? data.totalSales, 0);
+    const activeProducts = data.active_products ?? data.activeProducts ?? 0;
-  const totalPurchase = getValue(data.total_purchase_6m_rolling ?? data.totalPurchase, 0);
+    const totalSales = getValue(data.total_sales_6m_rolling ?? data.totalSales, 0);
-  const avgLiquidityCycle = getValue(data.avg_liquidity_cycle_3m_weighted ?? data.avgLiquidityCycle, 0);
+    const totalPurchase = getValue(data.total_purchase_6m_rolling ?? data.totalPurchase, 0);
-  const avgAcknowledgmentCycle = getValue(data.avg_acknowledgment_cycle_3m_weighted ?? data.avgAcknowledgmentCycle, 0);
+    const avgLiquidityCycle = getValue(data.avg_liquidity_cycle_3m_weighted ?? data.avgLiquidityCycle, 0);
-  const avgStockAge = getValue(data.avg_stock_age ?? data.avgStockAge, 0);
+    const avgAcknowledgmentCycle = getValue(data.avg_acknowledgment_cycle_3m_weighted ?? data.avgAcknowledgmentCycle, 0);
-  const agedStock = getValue(data.aged_stock_over_90_days ?? data.agedStock, 0);
+    const avgStockAge = getValue(data.avg_stock_age ?? data.avgStockAge, 0);
-  const currentStock = getValue(data.current_stock_quantity ?? data.currentStock, 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 = [
+    return [
-    { label: "Type", value: type },
+      { label: "Type", value: type },
-    { label: "Total Companies Associated", value: totalCompanies },
+      { label: "Total Companies Associated", value: totalCompanies },
-    { label: "Active Products", value: activeProducts },
+      { label: "Active Products", value: activeProducts },
-    { label: "Total Sales (6M Rolling)", value: `${totalSales} MT` },
+      { label: "Total Sales (6M Rolling)", value: `${totalSales} MT` },
-    { label: "Total Purchase (6M Rolling)", value: `${totalPurchase} 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. 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. Acknowledgment Cycle (3M Weighted)", value: `${avgAcknowledgmentCycle > 0 ? avgAcknowledgmentCycle.toFixed(1) : 0} Days` },
-    { label: "Avg. Stock Age", value: `${avgStockAge} Days` },
+      { label: "Avg. Stock Age", value: `${avgStockAge} Days` },
-    { label: "Aged Stock (>90 Days)", value: `${agedStock} MT` },
+      { label: "Aged Stock (>90 Days)", value: `${agedStock} MT` },
-    { label: "Current Stock Quantity", value: `${currentStock} MT` },
+      { label: "Current Stock Quantity", value: `${currentStock} MT` },
-  ];
+    ];
+  }, [data]);
 
   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">Sales Rating</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">Buy Rating</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">Liquidity Cycle</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">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,8 +32,12 @@ 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.salesRating}</td>
+      <td className="px-4 py-3 text-sm text-center">
-      <td className="px-4 py-3 text-sm text-center">{dealer.buyRating}</td>
+        {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.avgLiquidityCycle > 0 ? `${dealer.avgLiquidityCycle.toFixed(1)} Days` : '0 Days'}
       </td>
@@ -51,6 +55,26 @@ export const DealerTableRow = memo(({
       </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 } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
 import type { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { authService, type AppUser, type UserRole } from '@/api';
@@ -157,8 +157,14 @@ 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={{ user, session, userRole, loading, signIn, signOut }}>
+    <AuthContext.Provider value={contextValue}>
       {children}
     </AuthContext.Provider>
   );

src/hooks/useDealerOverview.ts

@@ -6,11 +6,10 @@ import { useDebounce } from './useDebounce';
 interface DealerOverviewMetrics {
     totalDealers: number;
     avgCreditScore: number;
+    avgCreditScoreChange: number | null;
     highRiskPercentage: string;
     avgLiquidityCycle: number;
-    // Add trend details if available in API response, for now we map what we can
+    avgLiquidityCycleChange: number | null;
-    // The UI expects detailed trends which might not be in the simple overview stats
-    // We'll see what the API returns.
 }
 
 interface UseDealerOverviewReturn {
@@ -111,8 +110,10 @@ 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
+                        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)
                     });
                 } else {
                     setError(response.message || 'Failed to fetch overview data');

src/lib/mockData.ts

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

src/pages/Dashboard.tsx

@@ -52,10 +52,65 @@ const Dashboard = () => {
   const displayKPIs = useMemo(() => metrics || {
     totalDealers: 0,
     avgCreditScore: 0,
+    avgCreditScoreChange: null,
     highRiskPercentage: "0.0",
-    avgLiquidityCycle: 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]);
+
   // Redirect to login if not authenticated
   useEffect(() => {
     if (!loading && !user) {
@@ -181,24 +236,30 @@ const Dashboard = () => {
                 title="Total Dealers"
                 value={displayKPIs.totalDealers?.toLocaleString() || "0"}
                 icon={Users}
-                trend="Active in system"
+                trend={getDynamicLabels.totalDealersTrend}
               />
               <KPICard
                 title="Avg Credit Score"
                 value={typeof displayKPIs.avgCreditScore === 'number' ? displayKPIs.avgCreditScore.toFixed(1) : displayKPIs.avgCreditScore}
                 icon={TrendingUp}
+                change={displayKPIs.avgCreditScoreChange}
+                changeLabel="vs last month"
+                changeUnit="%"
               />
               <KPICard
                 title="High-Risk Dealers"
                 value={`${displayKPIs.highRiskPercentage}%`}
                 icon={AlertTriangle}
-                trend="Score below 500"
+                trend={getDynamicLabels.highRiskTrend}
                 trendColor="danger"
               />
               <KPICard
                 title="Avg Liquidity Cycle"
                 value={`${typeof displayKPIs.avgLiquidityCycle === 'number' ? displayKPIs.avgLiquidityCycle.toFixed(2) : displayKPIs.avgLiquidityCycle} Days`}
                 icon={Clock}
+                change={displayKPIs.avgLiquidityCycleChange}
+                changeLabel="vs last month"
+                changeUnit="days"
               />
             </>
           )}
@@ -238,10 +299,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">Sales Rating</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">Buy Rating</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">Liquidity Cycle</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">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 } from "react";
+import { useEffect, useMemo, useCallback, memo } 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,7 +85,8 @@ const DealerProfile = () => {
             stockAge: d.stock_age || 0,
             mobile: d.mobile_number || d.mobile,
             aadhaar: d.aadhaar,
-            dealerLicense: d.dealer_license || d.license_number
+            dealerLicense: d.dealer_license || d.license_number,
+            isActive: d.is_active !== undefined ? d.is_active : true
           };
         }
 
@@ -184,8 +185,7 @@ const DealerProfile = () => {
           console.log('Setting compareBusinessData from API');
           setCompareBusinessData(compareRes.data);
         } else {
-          console.log('Compare API failed or no data, will use manufacturerData fallback');
+          console.log('Compare API failed or no data, will use fallback data from dealer snapshot');
-          console.log('manufacturerData:', manufacturerData);
         }
 
         if (mappedDealer) {
@@ -224,11 +224,11 @@ const DealerProfile = () => {
     [dealer]
   );
 
-  // Use seeded random for consistent active status
+  // Get active status from backend data (defaults to true if not provided)
   const isActive = useMemo(() => {
     if (!dealer) return false;
-    const seed = parseInt(dealer.id.replace('DLR', ''), 10) || 1;
+    // Use isActive from dealer data if available, otherwise default to true
-    return Math.sin(seed) * 10000 - Math.floor(Math.sin(seed) * 10000) > 0.3;
+    return dealer.isActive !== undefined ? dealer.isActive : true;
   }, [dealer]);
 
   const isEligible = dealer ? dealer.creditScore >= 500 : false;
@@ -378,4 +378,6 @@ const DealerProfile = () => {
   );
 };
 
-export default DealerProfile;
+// Memoize the component to prevent unnecessary re-renders
+const DealerProfileMemo = memo(DealerProfile);
+export default DealerProfileMemo;

src/pages/ScoreCard.tsx

@@ -213,6 +213,7 @@ 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>
@@ -276,6 +277,7 @@ 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,24 +14,5 @@ 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);
-          });
-        },
-      },
-    },
-  }, */
 })