Merge pull request #50 from incial/dev

 Implement optimized user-specific task and meeting retrieval API

Author: Skywalker690

client/pages/AdminPerformancePage.tsx

@@ -137,7 +137,14 @@ export const AdminPerformancePage: React.FC = () => {
       }
     };
 
-    fetchAndCalculate();
+    let mounted = true;
+    const loadData = async () => {
+      if (mounted) {
+        await fetchAndCalculate();
+      }
+    };
+    loadData();
+    return () => { mounted = false; };
   }, []);
 
   const totalTasks = stats.reduce((acc, s) => acc + s.total, 0);

client/pages/AdminUserManagementPage.tsx

@@ -55,7 +55,14 @@ export const AdminUserManagementPage: React.FC = () => {
   };
 
   useEffect(() => {
-    fetchUsers();
+    let mounted = true;
+    const loadData = async () => {
+      if (mounted) {
+        await fetchUsers();
+      }
+    };
+    loadData();
+    return () => { mounted = false; };
   }, []);
 
   const filteredUsers = users.filter(u => {

client/pages/AnalyticsPage.tsx

@@ -25,22 +25,25 @@ export const AnalyticsPage: React.FC<AnalyticsPageProps> = ({ title }) => {
     const hasPermission = user?.role === 'ROLE_SUPER_ADMIN';
 
     useEffect(() => {
+        let mounted = true;
         const loadData = async () => {
+            if (!mounted) return;
             if (hasPermission) {
                 try {
                     const data = await crmApi.getAll();
-                    setEntries(data.crmList);
+                    if (mounted) setEntries(data.crmList);
                 } catch (error) {
                     console.error("Failed to fetch analytics data", error);
                 } finally {
-                    setIsLoading(false);
+                    if (mounted) setIsLoading(false);
                 }
             } else {
-                setIsLoading(false);
+                if (mounted) setIsLoading(false);
             }
         };
         loadData();
-    }, [user, hasPermission]);
+        return () => { mounted = false; };
+    }, [hasPermission]);
 
     const handleExport = async (type: 'crm' | 'tasks' | 'performance') => {
         showToast(`Generating ${type.toUpperCase()} CSV...`, 'info');

client/pages/CRMPage.tsx

@@ -43,7 +43,16 @@ export const CRMPage: React.FC = () => {
     finally { setIsLoading(false); }
   };
 
-  useEffect(() => { fetchData(); }, []);
+  useEffect(() => { 
+    let mounted = true;
+    const loadData = async () => {
+      if (mounted) {
+        await fetchData();
+      }
+    };
+    loadData();
+    return () => { mounted = false; };
+  }, []);
 
   const filteredData = useMemo(() => {
     return entries.filter(item => {

client/pages/ClientDetailsPage.tsx

@@ -39,36 +39,68 @@ export const ClientDetailsPage: React.FC = () => {
   });
 
   useEffect(() => {
+    let mounted = true;
     const fetchData = async () => {
+      if (!mounted) return;
       setIsLoading(true);
-      if (!id) return;
+      // Validate id parameter before parsing
+      if (!id || isNaN(parseInt(id))) {
+        if (mounted) setIsLoading(false);
+        showToast("Invalid client ID", "error");
+        return;
+      }
+      
       try {
         const [crmData, tasksData, usersData] = await Promise.all([
             crmApi.getAll(),
             tasksApi.getAll(),
             usersApi.getAll()
         ]);
-        const foundClient = crmData.crmList.find(c => c.id === parseInt(id));
+        
+        if (!mounted) return;
+        
+        // Safely parse and find client
+        const clientId = parseInt(id);
+        const foundClient = crmData?.crmList?.find(c => c?.id === clientId);
         setClient(foundClient || null);
-        const clientTasks = tasksData.filter(t => t.companyId === parseInt(id));
+        
+        // Filter tasks safely
+        const clientTasks = (tasksData || []).filter(t => t?.companyId === clientId);
         setTasks(clientTasks);
+        
+        // Build user avatar map safely
         const uMap: Record<string, string> = {};
-        usersData.forEach(u => { if (u.avatarUrl) uMap[u.name] = u.avatarUrl; });
+        (usersData || []).forEach(u => { 
+          if (u?.avatarUrl && u?.name) {
+            uMap[u.name] = u.avatarUrl; 
+          }
+        });
         setUserAvatarMap(uMap);
-      } catch (e) { console.error(e); } finally { setIsLoading(false); }
+      } catch (e) { 
+        console.error("Failed to fetch client data:", e); 
+        if (mounted) showToast("Failed to load client data. Please try again.", "error");
+      } finally { 
+        if (mounted) setIsLoading(false); 
+      }
     };
     fetchData();
-  }, [id]);
+    return () => { mounted = false; };
+  }, [id, showToast]);
 
   const filteredBaseTasks = useMemo(() => {
     let result = tasks.filter(t => {
-      const matchesSearch = (t.title || '').toLowerCase().includes(filters.search.toLowerCase());
+      if (!t) return false;
+      const matchesSearch = (t.title || '').toLowerCase().includes((filters.search || '').toLowerCase());
       const matchesStatus = filters.status === '' || t.status === filters.status;
       const matchesPriority = filters.priority === '' || t.priority === filters.priority;
       const matchesAssignee = filters.assignedTo === '' || t.assignedTo === filters.assignedTo;
       return matchesSearch && matchesStatus && matchesPriority && matchesAssignee;
     });
-    return result.sort((a, b) => new Date(b.dueDate).getTime() - new Date(a.dueDate).getTime());
+    return result.sort((a, b) => {
+      const dateA = a?.dueDate ? new Date(a.dueDate).getTime() : 0;
+      const dateB = b?.dueDate ? new Date(b.dueDate).getTime() : 0;
+      return dateB - dateA;
+    });
   }, [tasks, filters]);
 
   const { activeTasks, completedTasks } = useMemo(() => {

client/pages/ClientPortalPage.tsx

@@ -44,8 +44,15 @@ export const ClientPortalPage: React.FC = () => {
   };
 
   useEffect(() => {
-    fetchData();
-  }, [user]);
+    let mounted = true;
+    const loadData = async () => {
+      if (mounted) {
+        await fetchData();
+      }
+    };
+    loadData();
+    return () => { mounted = false; };
+  }, [user?.clientCrmId]);
 
   const handleTaskSubmit = async (data: Partial<Task>) => {
     try {

client/pages/ClientTrackerPage.tsx

@@ -24,9 +24,12 @@ export const ClientTrackerPage: React.FC = () => {
   });
 
   useEffect(() => {
+    let mounted = true;
     const fetchData = async () => {
+      if (!mounted) return;
       try {
         const [crmData, tasksData] = await Promise.all([crmApi.getAll(), tasksApi.getAll()]);
+        if (!mounted) return;
         const activeCompanies = crmData.crmList.filter(c => ['onboarded', 'on progress', 'Quote Sent'].includes(c.status));
         setClients(activeCompanies.map(client => {
             const clientTasks = tasksData.filter(t => t.companyId === client.id);
@@ -41,10 +44,11 @@ export const ClientTrackerPage: React.FC = () => {
       } catch (e) {
         console.error(e);
       } finally {
-        setIsLoading(false);
+        if (mounted) setIsLoading(false);
       }
     };
     fetchData();
+    return () => { mounted = false; };
   }, []);
 
   const handleSort = (key: SortKey) => {

client/pages/CompaniesPage.tsx

@@ -24,18 +24,37 @@ export const CompaniesPage: React.FC = () => {
   const [isViewModalOpen, setIsViewModalOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [deleteId, setDeleteId] = useState<number | null>(null);
+  
+  // Track which tabs have been loaded to avoid duplicate calls
+  const [loadedTabs, setLoadedTabs] = useState<Set<string>>(new Set(['active']));
 
   const [filters, setFilters] = useState<CompanyFilterState>({
     search: '',
     status: '',
     workType: ''
   });
 
-  const fetchData = async () => {
+  const fetchDataForTab = async (tab: 'active' | 'dropped' | 'past') => {
     setIsLoading(true);
     try {
-      const data = await companiesApi.getAll();
+      let data: CRMEntry[];
+      
+      switch (tab) {
+        case 'active':
+          data = await companiesApi.getOnboarded();
+          break;
+        case 'dropped':
+          data = await companiesApi.getClosed();
+          break;
+        case 'past':
+          data = await companiesApi.getDone();
+          break;
+        default:
+          data = [];
+      }
+      
       setCrmEntries(data);
+      setLoadedTabs(prev => new Set(prev).add(tab));
     } catch (error) {
       console.error("Failed to fetch data", error);
       showToast("Failed to load companies", "error");
@@ -44,29 +63,28 @@ export const CompaniesPage: React.FC = () => {
     }
   };
 
+  // Initial load - fetch only onboarded (active) companies
   useEffect(() => {
-    fetchData();
+    let mounted = true;
+    const loadData = async () => {
+      if (mounted) {
+        await fetchDataForTab('active');
+      }
+    };
+    loadData();
+    return () => { mounted = false; };
   }, []);
 
-  const allCompanies = useMemo(() => {
-    // Registry now strictly includes those that have passed initial lead stages
-    return crmEntries.filter(entry => ['onboarded', 'on progress', 'Quote Sent', 'completed', 'drop'].includes(entry.status));
-  }, [crmEntries]);
-
-  const categorizedData = useMemo(() => {
-      // Onboarded, On Progress, and Quote Sent are considered active Focus nodes in the registry
-      const active = allCompanies.filter(c => ['onboarded', 'on progress', 'Quote Sent'].includes(c.status));
-      const dropped = allCompanies.filter(c => c.status === 'drop');
-      const past = allCompanies.filter(c => c.status === 'completed');
-      return { active, dropped, past };
-  }, [allCompanies]);
+  // Handle tab changes - fetch data only if not already loaded
+  useEffect(() => {
+    if (!loadedTabs.has(activeTab)) {
+      fetchDataForTab(activeTab);
+    }
+  }, [activeTab]);
 
+  // No need for categorization - data comes pre-filtered from backend
   const displayData = useMemo(() => {
-    let sourceList = categorizedData.active;
-    if (activeTab === 'dropped') sourceList = categorizedData.dropped;
-    if (activeTab === 'past') sourceList = categorizedData.past;
-
-    let result = sourceList.filter(item => {
+    let result = crmEntries.filter(item => {
       const matchesSearch = filters.search === '' || 
         (item.company || '').toLowerCase().includes(filters.search.toLowerCase()) ||
         (item.contactName && item.contactName.toLowerCase().includes(filters.search.toLowerCase())) ||
@@ -79,7 +97,7 @@ export const CompaniesPage: React.FC = () => {
     });
 
     return result.sort((a, b) => b.id - a.id);
-  }, [categorizedData, activeTab, filters]);
+  }, [crmEntries, filters]);
 
   const handleEdit = (company: CRMEntry) => {
       setEditingCompany(company);
@@ -100,8 +118,10 @@ export const CompaniesPage: React.FC = () => {
           try {
             await companiesApi.update(updatedEntry.id, updatedEntry);
             showToast("Company details updated", "success");
+            // Refresh current tab data
+            await fetchDataForTab(activeTab);
           } catch(e) {
-            fetchData();
+            await fetchDataForTab(activeTab);
             showToast("Failed to update company", "error");
           }
       }
@@ -118,12 +138,15 @@ export const CompaniesPage: React.FC = () => {
       try {
           await companiesApi.update(company.id, updatedEntry);
           showToast(`Status updated to ${newStatus}`, "success");
-          // If status changes out of registry criteria, re-fetch to update view
-          if (!['onboarded', 'on progress', 'Quote Sent', 'completed', 'drop'].includes(newStatus)) {
-              fetchData();
-          }
+          
+          // Status change may move company to different tab
+          // Clear loaded tabs cache to force refresh when switching tabs
+          setLoadedTabs(new Set([activeTab]));
+          
+          // Refresh current tab to reflect changes
+          await fetchDataForTab(activeTab);
       } catch (e) {
-          fetchData();
+          await fetchDataForTab(activeTab);
           showToast("Failed to update status", "error");
       }
   };
@@ -170,7 +193,7 @@ export const CompaniesPage: React.FC = () => {
                         }`}
                     >
                         Active Focus
-                        <span className="ml-2 px-1.5 lg:px-2 py-0.5 rounded bg-brand-50 text-brand-600 text-[9px] lg:text-[10px]">{categorizedData.active.length}</span>
+                        {activeTab === 'active' && <span className="ml-2 px-1.5 lg:px-2 py-0.5 rounded bg-brand-50 text-brand-600 text-[9px] lg:text-[10px]">{crmEntries.length}</span>}
                     </button>
                     <button 
                         onClick={() => setActiveTab('past')}
@@ -181,7 +204,7 @@ export const CompaniesPage: React.FC = () => {
                         }`}
                     >
                         Historical
-                        <span className="ml-2 px-1.5 lg:px-2 py-0.5 rounded bg-emerald-50 text-emerald-600 text-[9px] lg:text-[10px]">{categorizedData.past.length}</span>
+                        {activeTab === 'past' && <span className="ml-2 px-1.5 lg:px-2 py-0.5 rounded bg-emerald-50 text-emerald-600 text-[9px] lg:text-[10px]">{crmEntries.length}</span>}
                     </button>
                     <button 
                         onClick={() => setActiveTab('dropped')}
@@ -192,12 +215,12 @@ export const CompaniesPage: React.FC = () => {
                         }`}
                     >
                         Archived
-                        <span className="ml-2 px-1.5 lg:px-2 py-0.5 rounded bg-rose-50 text-rose-600 text-[9px] lg:text-[10px]">{categorizedData.dropped.length}</span>
+                        {activeTab === 'dropped' && <span className="ml-2 px-1.5 lg:px-2 py-0.5 rounded bg-rose-50 text-rose-600 text-[9px] lg:text-[10px]">{crmEntries.length}</span>}
                     </button>
                 </div>
             </div>
 
-            <CompaniesFilters filters={filters} setFilters={setFilters} onRefresh={fetchData} />
+            <CompaniesFilters filters={filters} setFilters={setFilters} onRefresh={() => fetchDataForTab(activeTab)} />
 
             <div className="pt-4 pb-10 overflow-x-auto">
                 <CompaniesTable 

client/pages/MeetingTrackerPage.tsx

@@ -40,7 +40,14 @@ export const MeetingTrackerPage: React.FC = () => {
   };
 
   useEffect(() => {
-    fetchData();
+    let mounted = true;
+    const loadData = async () => {
+      if (mounted) {
+        await fetchData();
+      }
+    };
+    loadData();
+    return () => { mounted = false; };
   }, []);
 
   const { activeMeetings, historyMeetings } = useMemo(() => {