From b2c568457795d571a73c9bf791f2be4959690d9d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 9 Jul 2025 23:25:39 +0000
Subject: [PATCH] Add flashing to category headers.

Category headers now flash if any jobs within require attention.  Loading of jobs for 'Acquisition', 'Running', and 'Selling' categories is now prioritized.
---
 src/components/JobGroup.tsx       |  6 +++++-
 src/hooks/useDashboard.ts         | 10 ++++++++++
 src/hooks/useDashboardHandlers.ts |  6 +++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/JobGroup.tsx b/src/components/JobGroup.tsx
index f89bbb0..595aeb1 100644
--- a/src/components/JobGroup.tsx
+++ b/src/components/JobGroup.tsx
@@ -1,6 +1,7 @@
 
 import { IndJob } from '@/lib/types';
 import { getStatusColor } from '@/utils/jobStatusUtils';
+import { jobNeedsAttention, getAttentionGlowClasses } from '@/utils/jobAttentionUtils';
 import JobCard from './JobCard';
 import { Loader2 } from 'lucide-react';
 
@@ -29,10 +30,13 @@ const JobGroup: React.FC<JobGroupProps> = ({
   isTracked = false,
   isLoading = false
 }) => {
+  // Check if any jobs in this group need attention
+  const hasAttentionJobs = jobs.some(job => jobNeedsAttention(job));
+
   return (
     <div className="space-y-4">
       <div
-        className={`${getStatusColor(status)} rounded-lg cursor-pointer select-none transition-colors hover:opacity-90`}
+        className={`${getStatusColor(status)} rounded-lg cursor-pointer select-none transition-colors hover:opacity-90 ${hasAttentionJobs ? getAttentionGlowClasses() : ''}`}
         onClick={() => onToggle(status)}
       >
         <div className="flex items-center justify-between p-4">
diff --git a/src/hooks/useDashboard.ts b/src/hooks/useDashboard.ts
index 2d6e557..da407ea 100644
--- a/src/hooks/useDashboard.ts
+++ b/src/hooks/useDashboard.ts
@@ -33,6 +33,7 @@ export function useDashboard() {
 
   const scrollPositionRef = useRef<number>(0);
   const containerRef = useRef<HTMLDivElement>(null);
+  const attentionStatusesLoaded = useRef(false);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -55,6 +56,15 @@ export function useDashboard() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  // Load attention-relevant statuses after initial load
+  useEffect(() => {
+    if (!loading && !attentionStatusesLoaded.current) {
+      const attentionStatuses = ['Acquisition', 'Running', 'Selling'];
+      loadJobsForStatuses(attentionStatuses);
+      attentionStatusesLoaded.current = true;
+    }
+  }, [loading, loadJobsForStatuses]);
+
   return {
     // State
     jobs,
diff --git a/src/hooks/useDashboardHandlers.ts b/src/hooks/useDashboardHandlers.ts
index 6981dc9..b2c0445 100644
--- a/src/hooks/useDashboardHandlers.ts
+++ b/src/hooks/useDashboardHandlers.ts
@@ -16,6 +16,9 @@ interface DashboardHandlersProps {
   loadingStatuses: Set<string>;
 }
 
+// Statuses that need attention checking
+const ATTENTION_STATUSES = ['Acquisition', 'Running', 'Selling'];
+
 export function useDashboardHandlers({
   createJob,
   updateJob,
@@ -104,7 +107,8 @@ export function useDashboardHandlers({
     setCollapsedGroups(newState);
     localStorage.setItem('jobGroupsCollapsed', JSON.stringify(newState));
 
-    if (collapsedGroups[status] && !loadingStatuses.has(status)) {
+    // If we're opening a group that needs attention checking, load its jobs
+    if (collapsedGroups[status] && ATTENTION_STATUSES.includes(status) && !loadingStatuses.has(status)) {
       await loadJobsForStatuses([status]);
       
       setTimeout(() => {