Refactor: Split JobCard.tsx into smaller components

Refactored JobCard.tsx into smaller, more manageable components to improve code organization and readability.

src/components/JobCard.tsx

@@ -1,14 +1,10 @@
-import { useState } from 'react';
+
 import { useNavigate } from 'react-router-dom';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
-import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Import, Upload, Check, Copy } from 'lucide-react';
-import { formatISK } from '@/utils/priceUtils';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { IndJob } from '@/lib/types';
-import { Input } from '@/components/ui/input';
-import { useToast } from '@/components/ui/use-toast';
+import JobCardHeader from './JobCardHeader';
+import JobCardDetails from './JobCardDetails';
+import JobCardMetrics from './JobCardMetrics';
 
 interface JobCardProps {
   job: IndJob;
@@ -28,407 +24,29 @@ const JobCard: React.FC<JobCardProps> = ({
   isTracked = false
 }) => {
   const navigate = useNavigate();
-  const [isEditingProduced, setIsEditingProduced] = useState(false);
-  const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
-  const [copyingBom, setCopyingBom] = useState(false);
-  const [copyingName, setCopyingName] = useState(false);
-  const { toast } = useToast();
-
-  const sortedExpenditures = [...job.expenditures].sort((a, b) =>
-    new Date(b.date).getTime() - new Date(a.date).getTime()
-  );
-  const sortedIncome = [...job.income].sort((a, b) =>
-    new Date(b.date).getTime() - new Date(a.date).getTime()
-  );
-
-  const totalExpenditure = sortedExpenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
-  const totalIncome = sortedIncome.reduce((sum, tx) => sum + tx.totalPrice, 0);
-  const profit = totalIncome - totalExpenditure;
-  const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
-
-  const itemsSold = sortedIncome.reduce((sum, tx) => sum + tx.quantity, 0);
-  const saleStartTime = job.saleStart ? new Date(job.saleStart).getTime() : null;
-  const daysSinceStart = saleStartTime ? Math.max(1, Math.ceil((Date.now() - saleStartTime) / (1000 * 60 * 60 * 24))) : 0;
-  const itemsPerDay = daysSinceStart > 0 ? itemsSold / daysSinceStart : 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 formatDateTime = (dateString: string | null | undefined) => {
-    if (!dateString) return 'Not set';
-    return new Date(dateString).toLocaleString('en-CA', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit'
-    }).replace(',', '');
-  };
-
-  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 handleCardClick = () => {
     navigate(`/${job.id}`);
   };
 
-  const handleJobNameClick = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    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 handleProducedClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (job.status !== 'Closed') {
-      setIsEditingProduced(true);
-    }
-  };
-
-  const handleEditClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onEdit(job);
-  };
-
-  const handleDeleteClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onDelete(job.id);
-  };
-
-  const handleImportClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    importBillOfMaterials();
-  };
-
-  const handleExportClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    exportBillOfMaterials();
-  };
-
   return (
     <Card
       className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}
       onClick={handleCardClick}
     >
       <CardHeader className="flex-shrink-0">
-        <div className="flex justify-between items-start">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-2">
-              <CardTitle 
-                className="text-blue-400 truncate cursor-pointer hover:text-blue-300 transition-colors flex items-center gap-1"
-                onClick={handleJobNameClick}
-                title="Click to copy job name"
-              >
-                {job.outputItem}
-                {copyingName && <Copy className="w-4 h-4 text-green-400" />}
-              </CardTitle>
-            </div>
-            <p className="text-gray-400 text-sm">
-              Quantity: {job.outputQuantity.toLocaleString()}
-              <span className="ml-4">
-                Produced: {
-                  isEditingProduced && job.status !== 'Closed' ? (
-                    <Input
-                      type="number"
-                      value={producedValue}
-                      onChange={(e) => setProducedValue(e.target.value)}
-                      onBlur={handleProducedUpdate}
-                      onKeyDown={handleProducedKeyPress}
-                      onClick={(e) => e.stopPropagation()}
-                      className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
-                      min="0"
-                      autoFocus
-                    />
-                  ) : (
-                    <span
-                      onClick={handleProducedClick}
-                      className={job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : undefined}
-                      title={job.status !== 'Closed' ? "Click to edit" : undefined}
-                    >
-                      {(job.produced || 0).toLocaleString()}
-                    </span>
-                  )
-                }
-              </span>
-              <span className="ml-4">
-                Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
-              </span>
-            </p>
-          </div>
-          <div className="flex flex-col gap-2 flex-shrink-0 items-end">
-            <div className="flex items-center gap-2">
-              <div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded text-xs font-semibold`}>
-                {job.status}
-              </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleEditClick}
-                className="border-gray-600 hover:bg-gray-800"
-              >
-                Edit
-              </Button>
-              <Button
-                variant="destructive"
-                size="sm"
-                onClick={handleDeleteClick}
-              >
-                Delete
-              </Button>
-            </div>
-            <div className="flex gap-1">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="p-1 h-6 w-6"
-                onClick={handleImportClick}
-                title="Import BOM from clipboard"
-              >
-                <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"
-              >
-                {copyingBom ? (
-                  <Check className="w-4 h-4 text-green-400" />
-                ) : (
-                  <Upload className="w-4 h-4 text-blue-400" />
-                )}
-              </Button>
-            </div>
-          </div>
-        </div>
+        <JobCardHeader
+          job={job}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onUpdateProduced={onUpdateProduced}
+          onImportBOM={onImportBOM}
+        />
       </CardHeader>
       <CardContent className="flex-1 flex flex-col space-y-4">
-        <div className="flex-shrink-0">
-          <div className="grid grid-cols-1 gap-2">
-            <div className="flex items-center gap-2 text-sm text-gray-400">
-              <Calendar className="w-4 h-4" />
-              Created: {formatDateTime(job.created)}
-            </div>
-            <div className="flex items-center gap-2 text-sm text-gray-400">
-              <Clock className="w-4 h-4" />
-              Start: {formatDateTime(job.jobStart)}
-            </div>
-            <div className="flex items-center gap-2 text-sm text-gray-400">
-              <Factory className="w-4 h-4" />
-              Job ID: {job.id}
-            </div>
-          </div>
-
-          {job.saleStart && (
-            <div className="space-y-2 mt-4">
-              <div className="text-sm text-gray-400">
-                Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
-              </div>
-              {itemsPerDay > 0 && (
-                <div className="text-sm text-gray-400">
-                  Items/Day: {itemsPerDay.toFixed(2)}
-                </div>
-              )}
-            </div>
-          )}
-
-          {job.billOfMaterials && job.billOfMaterials.length > 0 && (
-            <HoverCard>
-              <HoverCardTrigger asChild>
-                <div className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400">
-                  BOM: {job.billOfMaterials.length} items (hover to view)
-                </div>
-              </HoverCardTrigger>
-              <HoverCardContent className="w-80 bg-gray-800 border-gray-600 text-white">
-                <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-blue-400">Bill of Materials</h4>
-                  <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
-                    {job.billOfMaterials.map((item, index) => (
-                      <div key={index} className="flex justify-between">
-                        <span>{item.name}</span>
-                        <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </HoverCardContent>
-            </HoverCard>
-          )}
-        </div>
-
+        <JobCardDetails job={job} />
         <div className="flex-1" />
-
-        <div className="grid grid-cols-3 gap-3 pt-4 border-t border-gray-700 flex-shrink-0">
-          <div className="text-center space-y-1">
-            <div className="text-xs font-medium text-red-400 uppercase tracking-wide">Costs</div>
-            <div className="text-lg font-bold text-red-400">{formatISK(totalExpenditure)}</div>
-            {job.projectedCost > 0 && (
-              <div className="text-xs text-gray-400">
-                vs {formatISK(job.projectedCost)}
-                <div className={`text-xs font-medium ${totalExpenditure <= job.projectedCost ? 'text-green-400' : 'text-red-400'}`}>
-                  {((totalExpenditure / job.projectedCost) * 100).toFixed(0)}%
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="text-center space-y-1">
-            <div className="text-xs font-medium text-green-400 uppercase tracking-wide">Revenue</div>
-            <div className="text-lg font-bold text-green-400">{formatISK(totalIncome)}</div>
-            {job.projectedRevenue > 0 && (
-              <div className="text-xs text-gray-400">
-                vs {formatISK(job.projectedRevenue)}
-                <div className={`text-xs font-medium ${totalIncome >= job.projectedRevenue ? 'text-green-400' : 'text-red-400'}`}>
-                  {((totalIncome / job.projectedRevenue) * 100).toFixed(0)}%
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="text-center space-y-1">
-            <div className="text-xs font-medium text-gray-300 uppercase tracking-wide">Profit</div>
-            <div className={`text-lg font-bold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
-              {formatISK(profit)}
-            </div>
-            <div className={`text-xs font-medium ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
-              {margin.toFixed(1)}% margin
-            </div>
-            {job.projectedRevenue > 0 && job.projectedCost > 0 && (
-              <div className="text-xs text-gray-400">
-                vs {formatISK(job.projectedRevenue - job.projectedCost)}
-              </div>
-            )}
-          </div>
-        </div>
+        <JobCardMetrics job={job} />
       </CardContent>
     </Card>
   );

src/components/JobCardDetails.tsx

@@ -0,0 +1,87 @@
+
+import { Calendar, Factory, Clock } from 'lucide-react';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { IndJob } from '@/lib/types';
+
+interface JobCardDetailsProps {
+  job: IndJob;
+}
+
+const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
+  const formatDateTime = (dateString: string | null | undefined) => {
+    if (!dateString) return 'Not set';
+    return new Date(dateString).toLocaleString('en-CA', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    }).replace(',', '');
+  };
+
+  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 saleStartTime = job.saleStart ? new Date(job.saleStart).getTime() : null;
+  const daysSinceStart = saleStartTime ? Math.max(1, Math.ceil((Date.now() - saleStartTime) / (1000 * 60 * 60 * 24))) : 0;
+  const itemsPerDay = daysSinceStart > 0 ? itemsSold / daysSinceStart : 0;
+
+  return (
+    <div className="flex-shrink-0">
+      <div className="grid grid-cols-1 gap-2">
+        <div className="flex items-center gap-2 text-sm text-gray-400">
+          <Calendar className="w-4 h-4" />
+          Created: {formatDateTime(job.created)}
+        </div>
+        <div className="flex items-center gap-2 text-sm text-gray-400">
+          <Clock className="w-4 h-4" />
+          Start: {formatDateTime(job.jobStart)}
+        </div>
+        <div className="flex items-center gap-2 text-sm text-gray-400">
+          <Factory className="w-4 h-4" />
+          Job ID: {job.id}
+        </div>
+      </div>
+
+      {job.saleStart && (
+        <div className="space-y-2 mt-4">
+          <div className="text-sm text-gray-400">
+            Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
+          </div>
+          {itemsPerDay > 0 && (
+            <div className="text-sm text-gray-400">
+              Items/Day: {itemsPerDay.toFixed(2)}
+            </div>
+          )}
+        </div>
+      )}
+
+      {job.billOfMaterials && job.billOfMaterials.length > 0 && (
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <div className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400">
+              BOM: {job.billOfMaterials.length} items (hover to view)
+            </div>
+          </HoverCardTrigger>
+          <HoverCardContent className="w-80 bg-gray-800 border-gray-600 text-white">
+            <div className="space-y-2">
+              <h4 className="text-sm font-semibold text-blue-400">Bill of Materials</h4>
+              <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
+                {job.billOfMaterials.map((item, index) => (
+                  <div key={index} className="flex justify-between">
+                    <span>{item.name}</span>
+                    <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      )}
+    </div>
+  );
+};
+
+export default JobCardDetails;

src/components/JobCardHeader.tsx

@@ -0,0 +1,300 @@
+
+import { useState } from 'react';
+import { CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Import, Upload, Check, Copy } from 'lucide-react';
+import { IndJob } from '@/lib/types';
+import { useToast } from '@/hooks/use-toast';
+
+interface JobCardHeaderProps {
+  job: IndJob;
+  onEdit: (job: any) => void;
+  onDelete: (jobId: string) => void;
+  onUpdateProduced?: (jobId: string, produced: number) => void;
+  onImportBOM?: (jobId: string, items: { name: string; quantity: number }[]) => void;
+}
+
+const JobCardHeader: React.FC<JobCardHeaderProps> = ({
+  job,
+  onEdit,
+  onDelete,
+  onUpdateProduced,
+  onImportBOM
+}) => {
+  const [isEditingProduced, setIsEditingProduced] = useState(false);
+  const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
+  const [copyingBom, setCopyingBom] = useState(false);
+  const [copyingName, setCopyingName] = useState(false);
+  const { toast } = useToast();
+
+  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 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) => {
+    e.stopPropagation();
+    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 handleProducedClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (job.status !== 'Closed') {
+      setIsEditingProduced(true);
+    }
+  };
+
+  const handleEditClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onEdit(job);
+  };
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDelete(job.id);
+  };
+
+  const handleImportClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    importBillOfMaterials();
+  };
+
+  const handleExportClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    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);
+
+  return (
+    <div className="flex justify-between items-start">
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-2">
+          <CardTitle 
+            className="text-blue-400 truncate cursor-pointer hover:text-blue-300 transition-colors flex items-center gap-1"
+            onClick={handleJobNameClick}
+            title="Click to copy job name"
+          >
+            {job.outputItem}
+            {copyingName && <Copy className="w-4 h-4 text-green-400" />}
+          </CardTitle>
+        </div>
+        <p className="text-gray-400 text-sm">
+          Quantity: {job.outputQuantity.toLocaleString()}
+          <span className="ml-4">
+            Produced: {
+              isEditingProduced && job.status !== 'Closed' ? (
+                <Input
+                  type="number"
+                  value={producedValue}
+                  onChange={(e) => setProducedValue(e.target.value)}
+                  onBlur={handleProducedUpdate}
+                  onKeyDown={handleProducedKeyPress}
+                  onClick={(e) => e.stopPropagation()}
+                  className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
+                  min="0"
+                  autoFocus
+                />
+              ) : (
+                <span
+                  onClick={handleProducedClick}
+                  className={job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : undefined}
+                  title={job.status !== 'Closed' ? "Click to edit" : undefined}
+                >
+                  {(job.produced || 0).toLocaleString()}
+                </span>
+              )
+            }
+          </span>
+          <span className="ml-4">
+            Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
+          </span>
+        </p>
+      </div>
+      <div className="flex flex-col gap-2 flex-shrink-0 items-end">
+        <div className="flex items-center gap-2">
+          <div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded text-xs font-semibold`}>
+            {job.status}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleEditClick}
+            className="border-gray-600 hover:bg-gray-800"
+          >
+            Edit
+          </Button>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={handleDeleteClick}
+          >
+            Delete
+          </Button>
+        </div>
+        <div className="flex gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="p-1 h-6 w-6"
+            onClick={handleImportClick}
+            title="Import BOM from clipboard"
+          >
+            <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"
+          >
+            {copyingBom ? (
+              <Check className="w-4 h-4 text-green-400" />
+            ) : (
+              <Upload className="w-4 h-4 text-blue-400" />
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JobCardHeader;

src/components/JobCardMetrics.tsx

@@ -0,0 +1,66 @@
+
+import { formatISK } from '@/utils/priceUtils';
+import { IndJob } from '@/lib/types';
+
+interface JobCardMetricsProps {
+  job: IndJob;
+}
+
+const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
+  const sortedExpenditures = [...job.expenditures].sort((a, b) =>
+    new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+  const sortedIncome = [...job.income].sort((a, b) =>
+    new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+
+  const totalExpenditure = sortedExpenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
+  const totalIncome = sortedIncome.reduce((sum, tx) => sum + tx.totalPrice, 0);
+  const profit = totalIncome - totalExpenditure;
+  const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
+
+  return (
+    <div className="grid grid-cols-3 gap-3 pt-4 border-t border-gray-700 flex-shrink-0">
+      <div className="text-center space-y-1">
+        <div className="text-xs font-medium text-red-400 uppercase tracking-wide">Costs</div>
+        <div className="text-lg font-bold text-red-400">{formatISK(totalExpenditure)}</div>
+        {job.projectedCost > 0 && (
+          <div className="text-xs text-gray-400">
+            vs {formatISK(job.projectedCost)}
+            <div className={`text-xs font-medium ${totalExpenditure <= job.projectedCost ? 'text-green-400' : 'text-red-400'}`}>
+              {((totalExpenditure / job.projectedCost) * 100).toFixed(0)}%
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="text-center space-y-1">
+        <div className="text-xs font-medium text-green-400 uppercase tracking-wide">Revenue</div>
+        <div className="text-lg font-bold text-green-400">{formatISK(totalIncome)}</div>
+        {job.projectedRevenue > 0 && (
+          <div className="text-xs text-gray-400">
+            vs {formatISK(job.projectedRevenue)}
+            <div className={`text-xs font-medium ${totalIncome >= job.projectedRevenue ? 'text-green-400' : 'text-red-400'}`}>
+              {((totalIncome / job.projectedRevenue) * 100).toFixed(0)}%
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="text-center space-y-1">
+        <div className="text-xs font-medium text-gray-300 uppercase tracking-wide">Profit</div>
+        <div className={`text-lg font-bold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+          {formatISK(profit)}
+        </div>
+        <div className={`text-xs font-medium ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+          {margin.toFixed(1)}% margin
+        </div>
+        {job.projectedRevenue > 0 && job.projectedCost > 0 && (
+          <div className="text-xs text-gray-400">
+            vs {formatISK(job.projectedRevenue - job.projectedCost)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default JobCardMetrics;