Refactor: Extract common logic and reduce file size

Refactors `Index.tsx` and `JobCardHeader.tsx` to reduce bloat and extract common logic, such as job status coloring, into reusable components or utility functions. This improves code maintainability and readability.

src/pages/Index.tsx

@@ -2,13 +2,16 @@ import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Plus, Factory, TrendingUp, Briefcase, FileText } from 'lucide-react';
-import { IndTransactionRecordNoId, IndJobRecordNoId, IndJobStatusOptions } from '@/lib/pbtypes';
+import { IndTransactionRecordNoId, IndJobRecordNoId } from '@/lib/pbtypes';
 import { formatISK } from '@/utils/priceUtils';
+import { getStatusPriority } from '@/utils/jobStatusUtils';
 import JobCard from '@/components/JobCard';
 import JobForm from '@/components/JobForm';
+import JobGroup from '@/components/JobGroup';
 import { IndJob } from '@/lib/types';
 import BatchTransactionForm from '@/components/BatchTransactionForm';
 import { useJobs } from '@/hooks/useDataService';
+import { useJobMetrics } from '@/hooks/useJobMetrics';
 import SearchOverlay from '@/components/SearchOverlay';
 import RecapPopover from '@/components/RecapPopover';
 
@@ -63,32 +66,6 @@ const Index = () => {
     );
   }
 
-  const getStatusPriority = (status: IndJobStatusOptions): number => {
-    switch (status) {
-      case 'Planned': return 6;
-      case 'Acquisition': return 1;
-      case 'Running': return 2;
-      case 'Done': return 3;
-      case 'Selling': return 4;
-      case 'Closed': return 5;
-      case 'Tracked': return 7;
-      default: return 0;
-    }
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'Planned': return 'bg-gray-600';
-      case 'Acquisition': return 'bg-yellow-600';
-      case 'Running': return 'bg-blue-600';
-      case 'Done': return 'bg-purple-600';
-      case 'Selling': return 'bg-orange-600';
-      case 'Closed': return 'bg-green-600';
-      case 'Tracked': return 'bg-cyan-600';
-      default: return 'bg-gray-600';
-    }
-  };
-
   const filterJobs = (jobs: IndJob[]) => {
     if (!searchQuery) return jobs;
     const query = searchQuery.toLowerCase();
@@ -109,25 +86,7 @@ const Index = () => {
   const regularJobs = filterJobs(sortedJobs.filter(job => job.status !== 'Tracked'));
   const trackedJobs = filterJobs(sortedJobs.filter(job => job.status === 'Tracked'));
 
-  const totalJobs = regularJobs.length;
-  const totalProfit = regularJobs.reduce((sum, job) => {
-    const expenditure = job.expenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
-    const income = job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
-    return sum + (income - expenditure);
-  }, 0);
-
-  const totalRevenue = regularJobs.reduce((sum, job) =>
-    sum + job.income.reduce((sum, tx) => sum + tx.totalPrice, 0), 0
-  );
-
-  const calculateJobRevenue = (job: IndJob) => 
-    job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
-
-  const calculateJobProfit = (job: IndJob) => {
-    const expenditure = job.expenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
-    const income = job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
-    return income - expenditure;
-  };
+  const { totalJobs, totalProfit, totalRevenue, calculateJobRevenue, calculateJobProfit } = useJobMetrics(regularJobs);
 
   const handleCreateJob = async (jobData: IndJobRecordNoId) => {
     try {
@@ -200,9 +159,7 @@ const Index = () => {
     setCollapsedGroups(newState);
     localStorage.setItem('jobGroupsCollapsed', JSON.stringify(newState));
     
-    // Load jobs for newly opened groups
     if (collapsedGroups[status]) {
-      // Group is becoming visible, load jobs for this status
       loadJobsForStatuses([status]);
     }
   };
@@ -323,73 +280,34 @@ const Index = () => {
 
         <div className="space-y-6">
           {Object.entries(jobGroups).map(([status, statusJobs]) => (
-            <div key={status} className="space-y-4">
-              <div
-                className={`${getStatusColor(status)} rounded-lg cursor-pointer select-none transition-colors hover:opacity-90`}
-                onClick={() => toggleGroup(status)}
-              >
-                <div className="flex items-center justify-between p-4">
-                  <h3 className="text-xl font-semibold text-white flex items-center gap-3">
-                    <span>{status}</span>
-                    <span className="text-gray-200 text-lg">({statusJobs.length} jobs)</span>
-                  </h3>
-                  <div className={`text-white text-lg transition-transform ${collapsedGroups[status] ? '-rotate-90' : 'rotate-0'}`}>
-                    ⌄
-                  </div>
-                </div>
-              </div>
-
-              {!collapsedGroups[status] && (
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {statusJobs.map(job => (
-                    <JobCard
-                      key={job.id}
-                      job={job}
-                      onEdit={handleEditJob}
-                      onDelete={handleDeleteJob}
-                      onUpdateProduced={handleUpdateProduced}
-                      onImportBOM={handleImportBOM}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
+            <JobGroup
+              key={status}
+              status={status}
+              jobs={statusJobs}
+              isCollapsed={collapsedGroups[status] || false}
+              onToggle={toggleGroup}
+              onEdit={handleEditJob}
+              onDelete={handleDeleteJob}
+              onUpdateProduced={handleUpdateProduced}
+              onImportBOM={handleImportBOM}
+            />
           ))}
         </div>
       </div>
 
       {trackedJobs.length > 0 && (
         <div className="space-y-4 mt-8 pt-8 border-t border-gray-700">
-          <div
-            className="bg-cyan-600 rounded-lg cursor-pointer select-none transition-colors hover:opacity-90"
-            onClick={() => toggleGroup('Tracked')}
-          >
-            <div className="flex items-center justify-between p-4">
-              <h2 className="text-xl font-bold text-white flex items-center gap-3">
-                <span>Tracked Transactions</span>
-                <span className="text-gray-200 text-lg">({trackedJobs.length} jobs)</span>
-              </h2>
-              <div className={`text-white text-lg transition-transform ${collapsedGroups['Tracked'] ? '-rotate-90' : 'rotate-0'}`}>
-                ⌄
-              </div>
-            </div>
-          </div>
-
-          {!collapsedGroups['Tracked'] && (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {trackedJobs.map(job => (
-                <JobCard
-                  key={job.id}
-                  job={job}
-                  onEdit={handleEditJob}
-                  onDelete={handleDeleteJob}
-                  onUpdateProduced={handleUpdateProduced}
-                  onImportBOM={handleImportBOM}
-                  isTracked={true}
-                />
-              ))}
-            </div>
-          )}
+          <JobGroup
+            status="Tracked"
+            jobs={trackedJobs}
+            isCollapsed={collapsedGroups['Tracked'] || false}
+            onToggle={toggleGroup}
+            onEdit={handleEditJob}
+            onDelete={handleDeleteJob}
+            onUpdateProduced={handleUpdateProduced}
+            onImportBOM={handleImportBOM}
+            isTracked={true}
+          />
         </div>
       )}