Refactor UI and navigation

- Removed the "materials" section from the JobForm.
- Added BOM import/export buttons to the JobCard.
- Fixed date fields not populating in JobForm.
- Implemented job detail page navigation using routes.

src/components/JobCard.tsx

@@ -1,9 +1,10 @@
+
 import { useState } from 'react';
 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, Check } from 'lucide-react';
+import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Import, Export, Wrench, Check } from 'lucide-react';
 import { formatISK } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
 import { Input } from '@/components/ui/input';
@@ -21,7 +22,6 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
   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
@@ -87,9 +87,49 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     }
   };
 
-  const copyBillOfMaterials = async () => {
-    if (!job.billOfMaterials?.length) return;
-    
+  const importBillOfMaterials = async () => {
+    try {
+      const clipboardText = await navigator.clipboard.readText();
+      const lines = clipboardText.split('\n').filter(line => line.trim());
+      let importedCount = 0;
+      
+      for (const line of lines) {
+        const parts = line.trim().split(/\s+/);
+        if (parts.length >= 2) {
+          const name = parts.slice(0, -1).join(' ');
+          const quantity = parseInt(parts[parts.length - 1]);
+          if (name && !isNaN(quantity)) {
+            importedCount++;
+          }
+        }
+      }
+      
+      toast({
+        title: "Import Preview",
+        description: `Found ${importedCount} items to import. This is just a preview - actual import functionality needs to be connected.`,
+        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');
@@ -98,7 +138,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
       await navigator.clipboard.writeText(text);
       setCopyingBom(true);
       toast({
-        title: "Copied!",
+        title: "Exported!",
         description: "Bill of materials copied to clipboard",
         duration: 2000,
       });
@@ -113,32 +153,6 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     }
   };
 
-  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,
-      });
-    }
-  };
-
   const handleProducedClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (job.status !== 'Closed') {
@@ -156,6 +170,16 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     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 ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
       <CardHeader className="flex-shrink-0">
@@ -166,41 +190,31 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               <Badge className={`${getStatusColor(job.status)} text-white flex-shrink-0`}>
                 {job.status}
               </Badge>
-              {job.billOfMaterials && job.billOfMaterials.length > 0 && (
-                <HoverCard>
-                  <HoverCardTrigger asChild>
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
-                      className="p-1 h-6 w-6 relative group flex-shrink-0"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        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 (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">
-                            <span>{item.name}</span>
-                            <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </HoverCardContent>
-                </HoverCard>
-              )}
+              <div className="flex gap-1 flex-shrink-0">
+                <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" />
+                  ) : (
+                    <Export className="w-4 h-4 text-blue-400" />
+                  )}
+                </Button>
+              </div>
             </div>
             <p className="text-gray-400 text-sm">
               Quantity: {job.outputQuantity.toLocaleString()}
@@ -282,6 +296,29 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               )}
             </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>
 
         <div className="flex-1" />