Make jobID copy-able

src/components/JobCardDetails.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { Calendar, Factory, Clock } from 'lucide-react';
+import { Calendar, Factory, Clock, Copy } from 'lucide-react';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import { Input } from '@/components/ui/input';
 import { IndJob } from '@/lib/types';
 import { useJobs } from '@/hooks/useDataService';
 import { useToast } from '@/hooks/use-toast';
+import { useClipboard } from '@/hooks/useClipboard';
 
 interface JobCardDetailsProps {
   job: IndJob;
@@ -16,6 +17,8 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
   const { updateJob } = useJobs();
   const { toast } = useToast();
 
+  const { copying, copyToClipboard } = useClipboard();
+
   const formatDateTime = (dateString: string | null | undefined) => {
     if (!dateString) return 'Not set';
     return new Date(dateString).toLocaleString('en-CA', {
@@ -32,6 +35,11 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
     setTempValues({ ...tempValues, [fieldName]: currentValue || '' });
   };
 
+  const handleJobIdClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    await copyToClipboard(job.id, 'id', 'Job ID copied to clipboard');
+  };
+
   const handleFieldUpdate = async (fieldName: string, value: string) => {
     try {
       const dateValue = value ? new Date(value).toISOString() : null;
@@ -95,7 +103,15 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
         <div className="flex items-center gap-2 text-sm text-gray-400">
           <Factory className="w-4 h-4" />
           <span className="w-16">Job ID:</span>
-          <span>{job.id}</span>
+          <span
+            className="cursor-pointer hover:text-blue-400 transition-colors inline-flex items-center gap-1"
+            onClick={handleJobIdClick}
+            title="Click to copy job ID"
+            data-no-navigate
+          >
+            {job.id}
+            {copying === 'id' && <Copy className="w-3 h-3 text-green-400" />}
+          </span>
         </div>
 
         <div className="flex items-center gap-2 text-sm text-gray-400">

src/components/JobCardHeader.tsx

@@ -34,11 +34,6 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
     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">
@@ -64,17 +59,6 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
               Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
             </span>
           </div>
-          <div>
-            ID: <span 
-              className="cursor-pointer hover:text-blue-400 transition-colors inline-flex items-center gap-1"
-              onClick={handleJobIdClick}
-              title="Click to copy job ID"
-              data-no-navigate
-            >
-              {job.id}
-              {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">