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/components/BOMActions.tsx

@@ -0,0 +1,119 @@
+
+import { Button } from '@/components/ui/button';
+import { Import, Upload, Check } from 'lucide-react';
+import { IndJob } from '@/lib/types';
+import { useToast } from '@/hooks/use-toast';
+import { useClipboard } from '@/hooks/useClipboard';
+
+interface BOMActionsProps {
+  job: IndJob;
+  onImportBOM?: (jobId: string, items: { name: string; quantity: number }[]) => void;
+}
+
+const BOMActions: React.FC<BOMActionsProps> = ({ job, onImportBOM }) => {
+  const { toast } = useToast();
+  const { copying, copyToClipboard } = useClipboard();
+
+  const importBillOfMaterials = async () => {
+    if (!onImportBOM) {
+      toast({
+        title: "Error",
+        description: "Import functionality is not available",
+        variant: "destructive",
+        duration: 2000,
+      });
+      return;
+    }
+
+    try {
+      const clipboardText = await navigator.clipboard.readText();
+      const lines = clipboardText.split('\n').filter(line => line.trim());
+      const items: { name: string; quantity: number }[] = [];
+
+      for (const line of lines) {
+        const parts = line.trim().split(/[\s\t]+/);
+        if (parts.length >= 2) {
+          const name = parts.slice(0, -1).join(' ');
+          const quantityPart = parts[parts.length - 1].replace(/,/g, '');
+          const quantity = parseInt(quantityPart);
+          if (name && !isNaN(quantity)) {
+            items.push({ name, quantity });
+          }
+        }
+      }
+
+      if (items.length > 0) {
+        onImportBOM(job.id, items);
+        toast({
+          title: "BOM Imported",
+          description: `Successfully imported ${items.length} items`,
+          duration: 3000,
+        });
+      } else {
+        toast({
+          title: "No Valid Items",
+          description: "No valid items found in clipboard. Format: 'Item Name Quantity' per line",
+          variant: "destructive",
+          duration: 3000,
+        });
+      }
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to read from clipboard",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
+  const exportBillOfMaterials = async () => {
+    if (!job.billOfMaterials?.length) {
+      toast({
+        title: "Nothing to Export",
+        description: "No bill of materials found for this job",
+        variant: "destructive",
+        duration: 2000,
+      });
+      return;
+    }
+
+    const text = job.billOfMaterials
+      .map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
+      .join('\n');
+
+    await copyToClipboard(text, 'bom', 'Bill of materials copied to clipboard');
+  };
+
+  return (
+    <div className="flex gap-1">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="p-1 h-6 w-6"
+        onClick={importBillOfMaterials}
+        title="Import BOM from clipboard"
+        data-no-navigate
+      >
+        <Import className="w-4 h-4 text-blue-400" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="p-1 h-6 w-6"
+        onClick={exportBillOfMaterials}
+        disabled={!job.billOfMaterials?.length}
+        title="Export BOM to clipboard"
+        data-no-navigate
+      >
+        {copying === 'bom' ? (
+          <Check className="w-4 h-4 text-green-400" />
+        ) : (
+          <Upload className="w-4 h-4 text-blue-400" />
+        )}
+      </Button>
+    </div>
+  );
+};
+
+export default BOMActions;

src/components/EditableProduced.tsx

@@ -0,0 +1,69 @@
+
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { IndJob } from '@/lib/types';
+
+interface EditableProducedProps {
+  job: IndJob;
+  onUpdateProduced?: (jobId: string, produced: number) => void;
+}
+
+const EditableProduced: React.FC<EditableProducedProps> = ({ job, onUpdateProduced }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [value, setValue] = useState(job.produced?.toString() || '0');
+
+  const handleUpdate = () => {
+    const newValue = parseInt(value);
+    if (!isNaN(newValue) && onUpdateProduced) {
+      onUpdateProduced(job.id, newValue);
+      setIsEditing(false);
+    } else {
+      setValue(job.produced?.toString() || '0');
+      setIsEditing(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleUpdate();
+    } else if (e.key === 'Escape') {
+      setIsEditing(false);
+      setValue(job.produced?.toString() || '0');
+    }
+  };
+
+  const handleClick = () => {
+    if (job.status !== 'Closed') {
+      setIsEditing(true);
+    }
+  };
+
+  if (isEditing && job.status !== 'Closed') {
+    return (
+      <Input
+        type="number"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={handleUpdate}
+        onKeyDown={handleKeyPress}
+        className="w-24 h-5 px-2 py-0 inline-block bg-gray-800 border-gray-600 text-white text-xs leading-5"
+        min="0"
+        autoFocus
+        data-no-navigate
+      />
+    );
+  }
+
+  return (
+    <span
+      onClick={handleClick}
+      className={`inline-block w-20 h-5 leading-5 text-left ${job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : ""}`}
+      title={job.status !== 'Closed' ? "Click to edit" : undefined}
+      data-no-navigate
+    >
+      {(job.produced || 0).toLocaleString()}
+    </span>
+  );
+};
+
+export default EditableProduced;

src/components/JobCard.tsx

@@ -1,6 +1,8 @@
+
 import { useNavigate } from 'react-router-dom';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { IndJob } from '@/lib/types';
+import { getStatusBackgroundColor } from '@/utils/jobStatusUtils';
 import JobCardHeader from './JobCardHeader';
 import JobCardDetails from './JobCardDetails';
 import JobCardMetrics from './JobCardMetrics';
@@ -24,30 +26,14 @@ const JobCard: React.FC<JobCardProps> = ({
 }) => {
   const navigate = useNavigate();
 
-  const getStatusBackgroundColor = (status: string) => {
-    switch (status) {
-      case 'Planned': return 'bg-gray-600/20';
-      case 'Acquisition': return 'bg-yellow-600/20';
-      case 'Running': return 'bg-blue-600/20';
-      case 'Done': return 'bg-purple-600/20';
-      case 'Selling': return 'bg-orange-600/20';
-      case 'Closed': return 'bg-green-600/20';
-      case 'Tracked': return 'bg-cyan-600/20';
-      default: return 'bg-gray-600/20';
-    }
-  };
-
   const handleCardClick = (e: React.MouseEvent) => {
-    // Check if the click target or any of its parents has the data-no-navigate attribute
     const target = e.target as HTMLElement;
     const hasNoNavigate = target.closest('[data-no-navigate]');
     
     if (hasNoNavigate) {
-      // Don't navigate if clicking on elements marked as non-navigating
       return;
     }
     
-    // Only navigate if clicking on areas that aren't marked as non-navigating
     navigate(`/${job.id}`);
   };
 

src/components/JobCardHeader.tsx

@@ -1,18 +1,12 @@
 
-import { useState } from 'react';
 import { CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Copy } from 'lucide-react';
-import { Import, Upload, Check, Copy } from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { IndJob } from '@/lib/types';
-import { useToast } from '@/hooks/use-toast';
+import { useClipboard } from '@/hooks/useClipboard';
-import { useJobs } from '@/hooks/useDataService';
+import JobStatusDropdown from './JobStatusDropdown';
+import BOMActions from './BOMActions';
+import EditableProduced from './EditableProduced';
 
 interface JobCardHeaderProps {
   job: IndJob;
@@ -29,223 +23,22 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
   onUpdateProduced,
   onImportBOM
 }) => {
-  const [isEditingProduced, setIsEditingProduced] = useState(false);
+  const { copying, copyToClipboard } = useClipboard();
-  const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
-  const [copyingBom, setCopyingBom] = useState(false);
-  const [copyingName, setCopyingName] = useState(false);
-  const [copyingId, setCopyingId] = useState(false);
-  const { toast } = useToast();
-  const { updateJob } = useJobs();
-
-  const statuses = ['Planned', 'Acquisition', 'Running', 'Done', 'Selling', 'Closed', 'Tracked'];
-
-  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 handleStatusChange = async (newStatus: string, e: React.MouseEvent) => {
-    try {
-      await updateJob(job.id, { status: newStatus });
-      toast({
-        title: "Status Updated",
-        description: `Job status changed to ${newStatus}`,
-        duration: 2000,
-      });
-    } catch (error) {
-      console.error('Error updating status:', error);
-      toast({
-        title: "Error",
-        description: "Failed to update status",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
-  const handleProducedUpdate = () => {
-    const newValue = parseInt(producedValue);
-    if (!isNaN(newValue) && onUpdateProduced) {
-      onUpdateProduced(job.id, newValue);
-      setIsEditingProduced(false);
-    } else {
-      setProducedValue(job.produced?.toString() || '0');
-      setIsEditingProduced(false);
-    }
-  };
-
-  const handleProducedKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleProducedUpdate();
-    } else if (e.key === 'Escape') {
-      setIsEditingProduced(false);
-      setProducedValue(job.produced?.toString() || '0');
-    }
-  };
-
-  const importBillOfMaterials = async () => {
-    if (!onImportBOM) {
-      toast({
-        title: "Error",
-        description: "Import functionality is not available",
-        variant: "destructive",
-        duration: 2000,
-      });
-      return;
-    }
-
-    try {
-      const clipboardText = await navigator.clipboard.readText();
-      const lines = clipboardText.split('\n').filter(line => line.trim());
-      const items: { name: string; quantity: number }[] = [];
-
-      for (const line of lines) {
-        const parts = line.trim().split(/[\s\t]+/);
-        if (parts.length >= 2) {
-          const name = parts.slice(0, -1).join(' ');
-          const quantityPart = parts[parts.length - 1].replace(/,/g, '');
-          const quantity = parseInt(quantityPart);
-          if (name && !isNaN(quantity)) {
-            items.push({ name, quantity });
-          }
-        }
-      }
-
-      if (items.length > 0) {
-        onImportBOM(job.id, items);
-        toast({
-          title: "BOM Imported",
-          description: `Successfully imported ${items.length} items`,
-          duration: 3000,
-        });
-      } else {
-        toast({
-          title: "No Valid Items",
-          description: "No valid items found in clipboard. Format: 'Item Name Quantity' per line",
-          variant: "destructive",
-          duration: 3000,
-        });
-      }
-    } catch (err) {
-      toast({
-        title: "Error",
-        description: "Failed to read from clipboard",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
-  const exportBillOfMaterials = async () => {
-    if (!job.billOfMaterials?.length) {
-      toast({
-        title: "Nothing to Export",
-        description: "No bill of materials found for this job",
-        variant: "destructive",
-        duration: 2000,
-      });
-      return;
-    }
-
-    const text = job.billOfMaterials
-      .map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
-      .join('\n');
-
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopyingBom(true);
-      toast({
-        title: "Exported!",
-        description: "Bill of materials copied to clipboard",
-        duration: 2000,
-      });
-      setTimeout(() => setCopyingBom(false), 1000);
-    } catch (err) {
-      toast({
-        title: "Error",
-        description: "Failed to copy to clipboard",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
-  const handleJobNameClick = async (e: React.MouseEvent) => {
-    try {
-      await navigator.clipboard.writeText(job.outputItem);
-      setCopyingName(true);
-      toast({
-        title: "Copied!",
-        description: "Job name copied to clipboard",
-        duration: 2000,
-      });
-      setTimeout(() => setCopyingName(false), 1000);
-    } catch (err) {
-      toast({
-        title: "Error",
-        description: "Failed to copy to clipboard",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
-  const handleJobIdClick = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    try {
-      await navigator.clipboard.writeText(job.id);
-      setCopyingId(true);
-      toast({
-        title: "Copied!",
-        description: "Job ID copied to clipboard",
-        duration: 2000,
-      });
-      setTimeout(() => setCopyingId(false), 1000);
-    } catch (err) {
-      toast({
-        title: "Error",
-        description: "Failed to copy to clipboard",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
-  const handleProducedClick = (e: React.MouseEvent) => {
-    if (job.status !== 'Closed') {
-      setIsEditingProduced(true);
-    }
-  };
-
-  const handleEditClick = (e: React.MouseEvent) => {
-    onEdit(job);
-  };
-
-  const handleDeleteClick = (e: React.MouseEvent) => {
-    onDelete(job.id);
-  };
-
-  const handleImportClick = (e: React.MouseEvent) => {
-    importBillOfMaterials();
-  };
-
-  const handleExportClick = (e: React.MouseEvent) => {
-    exportBillOfMaterials();
-  };
 
   const sortedIncome = [...job.income].sort((a, b) =>
     new Date(b.date).getTime() - new Date(a.date).getTime()
   );
   const itemsSold = sortedIncome.reduce((sum, tx) => sum + tx.quantity, 0);
 
+  const handleJobNameClick = async (e: React.MouseEvent) => {
+    await copyToClipboard(job.outputItem, 'name', 'Job name copied to clipboard');
+  };
+
+  const handleJobIdClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    await copyToClipboard(job.id, 'id', 'Job ID copied to clipboard');
+  };
+
   return (
     <div className="flex justify-between items-start">
       <div className="flex-1 min-w-0">
@@ -258,37 +51,14 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
             style={{ lineHeight: '1.4' }}
           >
             {job.outputItem}
-            {copyingName && <Copy className="w-4 h-4 text-green-400" />}
+            {copying === 'name' && <Copy className="w-4 h-4 text-green-400" />}
           </CardTitle>
         </div>
         <div className="text-gray-400 text-sm leading-relaxed" style={{ lineHeight: '1.4' }}>
           <div className="mb-1">
             Runs: {job.outputQuantity.toLocaleString()}
             <span className="ml-4">
-              Produced: {
+              Produced: <EditableProduced job={job} onUpdateProduced={onUpdateProduced} />
-                isEditingProduced && job.status !== 'Closed' ? (
-                  <Input
-                    type="number"
-                    value={producedValue}
-                    onChange={(e) => setProducedValue(e.target.value)}
-                    onBlur={handleProducedUpdate}
-                    onKeyDown={handleProducedKeyPress}
-                    className="w-24 h-5 px-2 py-0 inline-block bg-gray-800 border-gray-600 text-white text-xs leading-5"
-                    min="0"
-                    autoFocus
-                    data-no-navigate
-                  />
-                ) : (
-                  <span
-                    onClick={handleProducedClick}
-                    className={`inline-block w-20 h-5 leading-5 text-left ${job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : ""}`}
-                    title={job.status !== 'Closed' ? "Click to edit" : undefined}
-                    data-no-navigate
-                  >
-                    {(job.produced || 0).toLocaleString()}
-                  </span>
-                )
-              }
             </span>
             <span className="ml-4">
               Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
@@ -302,40 +72,18 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
               data-no-navigate
             >
               {job.id}
-              {copyingId && <Copy className="w-3 h-3 text-green-400" />}
+              {copying === 'id' && <Copy className="w-3 h-3 text-green-400" />}
             </span>
           </div>
         </div>
       </div>
       <div className="flex flex-col gap-2 flex-shrink-0 items-end">
         <div className="flex items-center gap-2">
-          <DropdownMenu>
+          <JobStatusDropdown job={job} />
-            <DropdownMenuTrigger asChild>
-              <div
-                className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}
-                data-no-navigate
-              >
-                {job.status}
-              </div>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="bg-gray-800/50 border-gray-600 text-white">
-              {statuses.map((status) => (
-                <DropdownMenuItem
-                  key={status}
-                  onClick={(e) => handleStatusChange(status, e)}
-                  className="hover:bg-gray-700 cursor-pointer"
-                  data-no-navigate
-                >
-                  <div className={`w-3 h-3 rounded-sm ${getStatusColor(status)} mr-2`} />
-                  {status}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
           <Button
             variant="outline"
             size="sm"
-            onClick={handleEditClick}
+            onClick={() => onEdit(job)}
             className="border-gray-600 hover:bg-gray-800"
             data-no-navigate
           >
@@ -344,39 +92,13 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
           <Button
             variant="destructive"
             size="sm"
-            onClick={handleDeleteClick}
+            onClick={() => onDelete(job.id)}
             data-no-navigate
           >
             Delete
           </Button>
         </div>
-        <div className="flex gap-1">
+        <BOMActions job={job} onImportBOM={onImportBOM} />
-          <Button
-            variant="ghost"
-            size="sm"
-            className="p-1 h-6 w-6"
-            onClick={handleImportClick}
-            title="Import BOM from clipboard"
-            data-no-navigate
-          >
-            <Import className="w-4 h-4 text-blue-400" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="p-1 h-6 w-6"
-            onClick={handleExportClick}
-            disabled={!job.billOfMaterials?.length}
-            title="Export BOM to clipboard"
-            data-no-navigate
-          >
-            {copyingBom ? (
-              <Check className="w-4 h-4 text-green-400" />
-            ) : (
-              <Upload className="w-4 h-4 text-blue-400" />
-            )}
-          </Button>
-        </div>
       </div>
     </div>
   );

src/components/JobCategory.tsx

@@ -1,107 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { IndJob, IndJobStatusOptions } from '@/types/industry';
-import JobCard from './JobCard';
-import { formatISK } from '@/utils/currency';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-
-interface JobCategoryProps {
-  status: IndJobStatusOptions;
-  jobs: IndJob[];
-  onEdit: (job: any) => void;
-  onDelete: (jobId: string) => void;
-  onUpdateProduced?: (jobId: string, produced: number) => void;
-  onImportBOM?: (jobId: string, items: { name: string; quantity: number }[]) => void;
-}
-
-export function JobCategory({ status, jobs, onEdit, onDelete, onUpdateProduced, onImportBOM }: JobCategoryProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  // Load collapsed state from localStorage
-  useEffect(() => {
-    const stored = localStorage.getItem(`job-category-collapsed-${status}`);
-    if (stored) {
-      setIsCollapsed(JSON.parse(stored));
-    }
-  }, [status]);
-
-  // Save collapsed state to localStorage
-  const toggleCollapsed = () => {
-    const newCollapsed = !isCollapsed;
-    setIsCollapsed(newCollapsed);
-    localStorage.setItem(`job-category-collapsed-${status}`, JSON.stringify(newCollapsed));
-  };
-
-  // Calculate totals (excluding Tracked status)
-  const shouldIncludeInTotals = status !== IndJobStatusOptions.Tracked;
-  const totalExpenditure = shouldIncludeInTotals 
-    ? jobs.reduce((sum, job) => sum + (job.expenditures?.reduce((s, t) => s + t.totalPrice, 0) || 0), 0)
-    : 0;
-  const totalIncome = shouldIncludeInTotals
-    ? jobs.reduce((sum, job) => sum + (job.income?.reduce((s, t) => s + t.totalPrice, 0) || 0), 0)
-    : 0;
-  const totalProfit = totalIncome - totalExpenditure;
-
-  const getCategoryColor = (status: IndJobStatusOptions) => {
-    switch (status) {
-      case IndJobStatusOptions.Planned: return 'border-l-muted';
-      case IndJobStatusOptions.Acquisition: return 'border-l-warning';
-      case IndJobStatusOptions.Running: return 'border-l-primary';
-      case IndJobStatusOptions.Done: return 'border-l-success';
-      case IndJobStatusOptions.Selling: return 'border-l-accent';
-      case IndJobStatusOptions.Closed: return 'border-l-muted';
-      case IndJobStatusOptions.Tracked: return 'border-l-secondary';
-      default: return 'border-l-muted';
-    }
-  };
-
-  if (jobs.length === 0) return null;
-
-  return (
-    <Card className={`mb-6 border-l-4 ${getCategoryColor(status)}`}>
-      <CardHeader>
-        <CardTitle 
-          className="flex items-center justify-between cursor-pointer"
-          onClick={toggleCollapsed}
-        >
-          <div className="flex items-center gap-2">
-            {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-            <span>{status} ({jobs.length})</span>
-          </div>
-          
-          {shouldIncludeInTotals && (
-            <div className="flex items-center gap-4 text-sm font-normal">
-              <span className="text-destructive">Cost: {formatISK(totalExpenditure)}</span>
-              <span className="text-success">Income: {formatISK(totalIncome)}</span>
-              <span className={totalProfit >= 0 ? 'text-success' : 'text-destructive'}>
-                Profit: {formatISK(totalProfit)}
-              </span>
-            </div>
-          )}
-          
-          {status === IndJobStatusOptions.Tracked && (
-            <span className="text-sm font-normal text-muted-foreground">
-              (Not included in totals)
-            </span>
-          )}
-        </CardTitle>
-      </CardHeader>
-      
-      {!isCollapsed && (
-        <CardContent>
-          {jobs.map(job => (
-            <JobCard 
-              key={job.id} 
-              job={job} 
-              onEdit={onEdit}
-              onDelete={onDelete}
-              onUpdateProduced={onUpdateProduced}
-              onImportBOM={onImportBOM}
-            />
-          ))}
-        </CardContent>
-      )}
-    </Card>
-  );
-}

src/components/JobGroup.tsx

@@ -0,0 +1,65 @@
+
+import { IndJob } from '@/lib/types';
+import { getStatusColor } from '@/utils/jobStatusUtils';
+import JobCard from './JobCard';
+
+interface JobGroupProps {
+  status: string;
+  jobs: IndJob[];
+  isCollapsed: boolean;
+  onToggle: (status: string) => void;
+  onEdit: (job: IndJob) => void;
+  onDelete: (jobId: string) => void;
+  onUpdateProduced?: (jobId: string, produced: number) => void;
+  onImportBOM?: (jobId: string, items: { name: string; quantity: number }[]) => void;
+  isTracked?: boolean;
+}
+
+const JobGroup: React.FC<JobGroupProps> = ({
+  status,
+  jobs,
+  isCollapsed,
+  onToggle,
+  onEdit,
+  onDelete,
+  onUpdateProduced,
+  onImportBOM,
+  isTracked = false
+}) => {
+  return (
+    <div className="space-y-4">
+      <div
+        className={`${getStatusColor(status)} rounded-lg cursor-pointer select-none transition-colors hover:opacity-90`}
+        onClick={() => onToggle(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">({jobs.length} jobs)</span>
+          </h3>
+          <div className={`text-white text-lg transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`}>
+            ⌄
+          </div>
+        </div>
+      </div>
+
+      {!isCollapsed && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {jobs.map(job => (
+            <JobCard
+              key={job.id}
+              job={job}
+              onEdit={onEdit}
+              onDelete={onDelete}
+              onUpdateProduced={onUpdateProduced}
+              onImportBOM={onImportBOM}
+              isTracked={isTracked}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default JobGroup;

src/components/JobStatusDropdown.tsx

@@ -0,0 +1,67 @@
+
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { IndJob } from '@/lib/types';
+import { getStatusColor, JOB_STATUSES } from '@/utils/jobStatusUtils';
+import { useJobs } from '@/hooks/useDataService';
+import { useToast } from '@/hooks/use-toast';
+
+interface JobStatusDropdownProps {
+  job: IndJob;
+}
+
+const JobStatusDropdown: React.FC<JobStatusDropdownProps> = ({ job }) => {
+  const { updateJob } = useJobs();
+  const { toast } = useToast();
+
+  const handleStatusChange = async (newStatus: string, e: React.MouseEvent) => {
+    try {
+      await updateJob(job.id, { status: newStatus });
+      toast({
+        title: "Status Updated",
+        description: `Job status changed to ${newStatus}`,
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Error updating status:', error);
+      toast({
+        title: "Error",
+        description: "Failed to update status",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div
+          className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}
+          data-no-navigate
+        >
+          {job.status}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="bg-gray-800/50 border-gray-600 text-white">
+        {JOB_STATUSES.map((status) => (
+          <DropdownMenuItem
+            key={status}
+            onClick={(e) => handleStatusChange(status, e)}
+            className="hover:bg-gray-700 cursor-pointer"
+            data-no-navigate
+          >
+            <div className={`w-3 h-3 rounded-sm ${getStatusColor(status)} mr-2`} />
+            {status}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default JobStatusDropdown;

src/components/RecapPopover.tsx

@@ -4,6 +4,8 @@ import { formatISK } from '@/utils/priceUtils';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useNavigate } from 'react-router-dom';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { getStatusBackgroundColor } from '@/utils/jobStatusUtils';
 
 interface RecapPopoverProps {
   title: string;
@@ -19,6 +21,7 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
   calculateJobValue
 }) => {
   const navigate = useNavigate();
+  const [sortDescending, setSortDescending] = useState(true);
 
   const jobContributions = jobs
     .map(job => ({

src/hooks/useClipboard.ts

@@ -0,0 +1,30 @@
+
+import { useState } from 'react';
+import { useToast } from '@/hooks/use-toast';
+
+export const useClipboard = () => {
+  const [copying, setCopying] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  const copyToClipboard = async (text: string, key: string, successMessage: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopying(key);
+      toast({
+        title: "Copied!",
+        description: successMessage,
+        duration: 2000,
+      });
+      setTimeout(() => setCopying(null), 1000);
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to copy to clipboard",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
+  return { copying, copyToClipboard };
+};

src/hooks/useJobMetrics.ts

@@ -0,0 +1,33 @@
+
+import { IndJob } from '@/lib/types';
+
+export const useJobMetrics = (jobs: IndJob[]) => {
+  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 = jobs.length;
+  
+  const totalProfit = jobs.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 = jobs.reduce((sum, job) =>
+    sum + job.income.reduce((sum, tx) => sum + tx.totalPrice, 0), 0
+  );
+
+  return {
+    totalJobs,
+    totalProfit,
+    totalRevenue,
+    calculateJobRevenue,
+    calculateJobProfit
+  };
+};

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 { totalJobs, totalProfit, totalRevenue, calculateJobRevenue, calculateJobProfit } = useJobMetrics(regularJobs);
-  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 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,28 +280,12 @@ const Index = () => {
 
         <div className="space-y-6">
           {Object.entries(jobGroups).map(([status, statusJobs]) => (
-            <div key={status} className="space-y-4">
+            <JobGroup
-              <div
+              key={status}
-                className={`${getStatusColor(status)} rounded-lg cursor-pointer select-none transition-colors hover:opacity-90`}
+              status={status}
-                onClick={() => toggleGroup(status)}
+              jobs={statusJobs}
-              >
+              isCollapsed={collapsedGroups[status] || false}
-                <div className="flex items-center justify-between p-4">
+              onToggle={toggleGroup}
-                  <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}
@@ -352,44 +293,21 @@ const Index = () => {
             />
           ))}
         </div>
-              )}
-            </div>
-          ))}
-        </div>
       </div>
 
       {trackedJobs.length > 0 && (
         <div className="space-y-4 mt-8 pt-8 border-t border-gray-700">
-          <div
+          <JobGroup
-            className="bg-cyan-600 rounded-lg cursor-pointer select-none transition-colors hover:opacity-90"
+            status="Tracked"
-            onClick={() => toggleGroup('Tracked')}
+            jobs={trackedJobs}
-          >
+            isCollapsed={collapsedGroups['Tracked'] || false}
-            <div className="flex items-center justify-between p-4">
+            onToggle={toggleGroup}
-              <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>
-          )}
         </div>
       )}
 

src/utils/jobStatusUtils.ts

@@ -0,0 +1,43 @@
+
+import { IndJobStatusOptions } from '@/lib/pbtypes';
+
+export 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';
+  }
+};
+
+export const getStatusBackgroundColor = (status: string) => {
+  switch (status) {
+    case 'Planned': return 'bg-gray-600/20';
+    case 'Acquisition': return 'bg-yellow-600/20';
+    case 'Running': return 'bg-blue-600/20';
+    case 'Done': return 'bg-purple-600/20';
+    case 'Selling': return 'bg-orange-600/20';
+    case 'Closed': return 'bg-green-600/20';
+    case 'Tracked': return 'bg-cyan-600/20';
+    default: return 'bg-gray-600/20';
+  }
+};
+
+export 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;
+  }
+};
+
+export const JOB_STATUSES = ['Planned', 'Acquisition', 'Running', 'Done', 'Selling', 'Closed', 'Tracked'] as const;