Fix: Job card visual issues

Reverted button style changes and adjusted job status appearance. Implemented job name copy-to-clipboard functionality on click.

src/components/JobCard.tsx

@@ -4,7 +4,7 @@ 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 } from 'lucide-react';
+import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Import, Upload, Check, Copy } from 'lucide-react';
 import { formatISK } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
 import { Input } from '@/components/ui/input';
@@ -31,6 +31,7 @@ const JobCard: React.FC<JobCardProps> = ({
   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) =>
@@ -185,6 +186,27 @@ const JobCard: React.FC<JobCardProps> = ({
     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') {
@@ -220,7 +242,16 @@ const JobCard: React.FC<JobCardProps> = ({
       <CardHeader className="flex-shrink-0">
         <div className="flex justify-between items-start">
           <div className="flex-1 min-w-0">
-            <CardTitle className="text-blue-400 truncate mb-2">{job.outputItem}</CardTitle>
+            <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">
@@ -255,9 +286,9 @@ const JobCard: React.FC<JobCardProps> = ({
           </div>
           <div className="flex flex-col gap-2 flex-shrink-0 items-end">
             <div className="flex items-center gap-2">
-              <Badge className={`${getStatusColor(job.status)} text-white`}>
+              <div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded text-xs font-semibold`}>
                 {job.status}
-              </Badge>
+              </div>
               <Button
                 variant="outline"
                 size="sm"
@@ -276,18 +307,18 @@ const JobCard: React.FC<JobCardProps> = ({
             </div>
             <div className="flex gap-1">
               <Button
-                variant="outline"
+                variant="ghost"
                 size="sm"
-                className="border-gray-600 hover:bg-gray-800"
+                className="p-1 h-6 w-6"
                 onClick={handleImportClick}
                 title="Import BOM from clipboard"
               >
-                <Import className="w-4 h-4" />
+                <Import className="w-4 h-4 text-blue-400" />
               </Button>
               <Button
-                variant="outline"
+                variant="ghost"
                 size="sm"
-                className="border-gray-600 hover:bg-gray-800"
+                className="p-1 h-6 w-6"
                 onClick={handleExportClick}
                 disabled={!job.billOfMaterials?.length}
                 title="Export BOM to clipboard"
@@ -295,7 +326,7 @@ const JobCard: React.FC<JobCardProps> = ({
                 {copyingBom ? (
                   <Check className="w-4 h-4 text-green-400" />
                 ) : (
-                  <Upload className="w-4 h-4" />
+                  <Upload className="w-4 h-4 text-blue-400" />
                 )}
               </Button>
             </div>