Make click on box copy BOM to clipboard

frontend/src/components/JobCard.tsx

@@ -3,10 +3,11 @@ 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, Package, Wrench } from 'lucide-react';
+import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Package, Wrench, Check } from 'lucide-react';
 import { formatISK } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
 import { Input } from '@/components/ui/input';
+import { useToast } from '@/components/ui/use-toast';
 
 interface JobCardProps {
   job: IndJob;
@@ -19,6 +20,9 @@ interface JobCardProps {
 const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduced, isTracked = false }) => {
   const [isEditingProduced, setIsEditingProduced] = useState(false);
   const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
+  const [copyingBom, setCopyingBom] = useState(false);
+  const [copyingConsumed, setCopyingConsumed] = useState(false);
+  const { toast } = useToast();
 
   // Sort transactions by date descending
   const sortedExpenditures = [...job.expenditures].sort((a, b) => 
@@ -83,6 +87,58 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     }
   };
 
+  const copyBillOfMaterials = async () => {
+    if (!job.billOfMaterials?.length) 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: "Copied!",
+        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 copyConsumedMaterials = async () => {
+    if (!job.consumedMaterials?.length) return;
+    
+    const text = job.consumedMaterials
+      .map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
+      .join('\n');
+    
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopyingConsumed(true);
+      toast({
+        title: "Copied!",
+        description: "Consumed materials copied to clipboard",
+        duration: 2000,
+      });
+      setTimeout(() => setCopyingConsumed(false), 1000);
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to copy to clipboard",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
   return (
     <Card className={`bg-gray-900 border-gray-700 text-white ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
       <CardHeader>
@@ -96,13 +152,26 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               {job.billOfMaterials && job.billOfMaterials.length > 0 && (
                 <HoverCard>
                   <HoverCardTrigger asChild>
-                    <Button variant="ghost" size="sm" className="p-1 h-6 w-6">
+                    <Button 
-                      <Package className="w-4 h-4 text-blue-400" />
+                      variant="ghost" 
+                      size="sm" 
+                      className="p-1 h-6 w-6 relative group"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        copyBillOfMaterials();
+                      }}
+                    >
+                      {copyingBom ? (
+                        <Check className="w-4 h-4 text-green-400 absolute transition-opacity" />
+                      ) : (
+                        <Package className="w-4 h-4 text-blue-400" />
+                      )}
+                      <span className="sr-only">Copy bill of materials</span>
                     </Button>
                   </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>
+                      <h4 className="text-sm font-semibold text-blue-400">Bill of Materials (click to copy)</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">
@@ -118,13 +187,26 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               {job.consumedMaterials && job.consumedMaterials.length > 0 && (
                 <HoverCard>
                   <HoverCardTrigger asChild>
-                    <Button variant="ghost" size="sm" className="p-1 h-6 w-6">
+                    <Button 
-                      <Wrench className="w-4 h-4 text-yellow-400" />
+                      variant="ghost" 
+                      size="sm" 
+                      className="p-1 h-6 w-6 relative group"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        copyConsumedMaterials();
+                      }}
+                    >
+                      {copyingConsumed ? (
+                        <Check className="w-4 h-4 text-green-400 absolute transition-opacity" />
+                      ) : (
+                        <Wrench className="w-4 h-4 text-yellow-400" />
+                      )}
+                      <span className="sr-only">Copy consumed materials</span>
                     </Button>
                   </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-yellow-400">Consumed Materials</h4>
+                      <h4 className="text-sm font-semibold text-yellow-400">Consumed Materials (click to copy)</h4>
                       <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
                         {job.consumedMaterials.map((item, index) => (
                           <div key={index} className="flex justify-between">