Fix: Implement BOM import/export and SPA navigation

- Fixed JobForm date field population.
- Implemented clipboard-based BOM import/export functionality with a proper preview.
- Ensured the application is no longer a SPA, with navigation to job details pages.

src/components/JobCard.tsx

@@ -1,10 +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, Wrench, Check } from 'lucide-react';
+import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Import, Upload, Check } from 'lucide-react';
 import { formatISK } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
 import { Input } from '@/components/ui/input';
@@ -15,16 +15,24 @@ interface JobCardProps {
   onEdit: (job: any) => void;
   onDelete: (jobId: string) => void;
   onUpdateProduced?: (jobId: string, produced: number) => void;
+  onImportBOM?: (jobId: string, items: { name: string; quantity: number }[]) => void;
   isTracked?: boolean;
 }
 
-const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduced, isTracked = false }) => {
+const JobCard: React.FC<JobCardProps> = ({ 
+  job, 
+  onEdit, 
+  onDelete, 
+  onUpdateProduced, 
+  onImportBOM,
+  isTracked = false 
+}) => {
+  const navigate = useNavigate();
   const [isEditingProduced, setIsEditingProduced] = useState(false);
   const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
   const [copyingBom, setCopyingBom] = useState(false);
   const { toast } = useToast();
 
-  // Sort transactions by date descending
   const sortedExpenditures = [...job.expenditures].sort((a, b) => 
     new Date(b.date).getTime() - new Date(a.date).getTime()
   );
@@ -32,7 +40,6 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     new Date(b.date).getTime() - new Date(a.date).getTime()
   );
 
-  // Calculate totals for this job (including tracked jobs)
   const totalExpenditure = sortedExpenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
   const totalIncome = sortedIncome.reduce((sum, tx) => sum + tx.totalPrice, 0);
   const profit = totalIncome - totalExpenditure;
@@ -91,7 +98,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     try {
       const clipboardText = await navigator.clipboard.readText();
       const lines = clipboardText.split('\n').filter(line => line.trim());
-      let importedCount = 0;
+      const items: { name: string; quantity: number }[] = [];
       
       for (const line of lines) {
         const parts = line.trim().split(/\s+/);
@@ -99,16 +106,26 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
           const name = parts.slice(0, -1).join(' ');
           const quantity = parseInt(parts[parts.length - 1]);
           if (name && !isNaN(quantity)) {
-            importedCount++;
+            items.push({ name, quantity });
           }
         }
       }
       
-      toast({
-        title: "Import Preview",
-        description: `Found ${importedCount} items to import. This is just a preview - actual import functionality needs to be connected.`,
-        duration: 3000,
-      });
+      if (items.length > 0 && onImportBOM) {
+        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",
@@ -153,6 +170,10 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     }
   };
 
+  const handleCardClick = () => {
+    navigate(`/${job.id}`);
+  };
+
   const handleProducedClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (job.status !== 'Closed') {
@@ -181,7 +202,10 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
   };
 
   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' : ''}`}>
+    <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">