Fix: DataService updateJob and JobCard display

- Fixed `updateJob` in `dataService.ts` to correctly update local job data with full objects instead of references.
- Standardized JobCard size.
- Fixed JobForm not pre-filling date fields.
- Removed "materials" section from JobForm, replaced with BOM import/export buttons using clipboard.
- Removed consumed materials section.

src/components/JobCard.tsx

@@ -157,13 +157,13 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
   };
 
   return (
-    <Card className={`bg-gray-900 border-gray-700 text-white ${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 ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
-      <CardHeader>
+      <CardHeader className="flex-shrink-0">
         <div className="flex justify-between items-start">
-          <div>
+          <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-2">
-              <CardTitle className="text-blue-400">{job.outputItem}</CardTitle>
+              <CardTitle className="text-blue-400 truncate">{job.outputItem}</CardTitle>
-              <Badge className={`${getStatusColor(job.status)} text-white`}>
+              <Badge className={`${getStatusColor(job.status)} text-white flex-shrink-0`}>
                 {job.status}
               </Badge>
               {job.billOfMaterials && job.billOfMaterials.length > 0 && (
@@ -172,7 +172,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
                     <Button 
                       variant="ghost" 
                       size="sm" 
-                      className="p-1 h-6 w-6 relative group"
+                      className="p-1 h-6 w-6 relative group flex-shrink-0"
                       onClick={(e) => {
                         e.stopPropagation();
                         copyBillOfMaterials();
@@ -201,43 +201,8 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
                   </HoverCardContent>
                 </HoverCard>
               )}
-              {job.consumedMaterials && job.consumedMaterials.length > 0 && (
-                <HoverCard>
-                  <HoverCardTrigger asChild>
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
-                      className="p-1 h-6 w-6 relative group"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        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 (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">
-                            <span>{item.name}</span>
-                            <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </HoverCardContent>
-                </HoverCard>
-              )}
             </div>
-            <p className="text-gray-400">
+            <p className="text-gray-400 text-sm">
               Quantity: {job.outputQuantity.toLocaleString()}
               <span className="ml-4">
                 Produced: {
@@ -269,7 +234,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               </span>
             </p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-shrink-0">
             <Button
               variant="outline"
               size="sm"
@@ -288,42 +253,46 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
           </div>
         </div>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent className="flex-1 flex flex-col space-y-4">
-        <div className="grid grid-cols-1 gap-2">
+        <div className="flex-shrink-0">
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+          <div className="grid grid-cols-1 gap-2">
-            <Calendar className="w-4 h-4" />
+            <div className="flex items-center gap-2 text-sm text-gray-400">
-            Created: {formatDateTime(job.created)}
+              <Calendar className="w-4 h-4" />
-          </div>
+              Created: {formatDateTime(job.created)}
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+            </div>
-            <Clock className="w-4 h-4" />
+            <div className="flex items-center gap-2 text-sm text-gray-400">
-            Start: {formatDateTime(job.jobStart)}
+              <Clock className="w-4 h-4" />
-          </div>
+              Start: {formatDateTime(job.jobStart)}
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+            </div>
-            <Factory className="w-4 h-4" />
+            <div className="flex items-center gap-2 text-sm text-gray-400">
-            Job ID: {job.id}
+              <Factory className="w-4 h-4" />
+              Job ID: {job.id}
+            </div>
           </div>
+
+          {job.saleStart && (
+            <div className="space-y-2 mt-4">
+              <div className="text-sm text-gray-400">
+                Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
+              </div>
+              {itemsPerDay > 0 && (
+                <div className="text-sm text-gray-400">
+                  Items/Day: {itemsPerDay.toFixed(2)}
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
-        {job.saleStart && (
+        <div className="flex-1" />
-          <div className="space-y-2">
-            <div className="text-sm text-gray-400">
-              Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
-            </div>
-            {itemsPerDay > 0 && (
-              <div className="text-sm text-gray-400">
-                Items/Day: {itemsPerDay.toFixed(2)}
-              </div>
-            )}
-          </div>
-        )}
 
-        <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700">
+        <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700 flex-shrink-0">
           <div className="text-center">
             <div className="flex items-center justify-center gap-1 text-red-400">
               <TrendingDown className="w-4 h-4" />
               <span className="text-sm">Expenditure</span>
             </div>
-            <div className="font-semibold">{formatISK(totalExpenditure)}</div>
+            <div className="font-semibold text-sm">{formatISK(totalExpenditure)}</div>
             {job.projectedCost > 0 && (
               <div className="text-xs text-gray-400">
                 vs Projected: {formatISK(job.projectedCost)}
@@ -341,7 +310,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               <TrendingUp className="w-4 h-4" />
               <span className="text-sm">Income</span>
             </div>
-            <div className="font-semibold">{formatISK(totalIncome)}</div>
+            <div className="font-semibold text-sm">{formatISK(totalIncome)}</div>
             {job.projectedRevenue > 0 && (
               <div className="text-xs text-gray-400">
                 vs Projected: {formatISK(job.projectedRevenue)}
@@ -358,7 +327,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
             <div className="flex items-center justify-center gap-1 text-gray-400">
               <span className="text-sm">Profit</span>
             </div>
-            <div className={`font-semibold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+            <div className={`font-semibold text-sm ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
               {formatISK(profit)}
               <Badge variant={profit >= 0 ? 'default' : 'destructive'} className="ml-1 text-xs">
                 {margin.toFixed(1)}%

src/components/JobForm.tsx

@@ -1,15 +1,15 @@
+
 import React, { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { IndJobStatusOptions, IndJobRecordNoId } from '@/lib/pbtypes';
-import { IndJobStatusOptions, IndJobRecordNoId, IndBillitemRecord } from '@/lib/pbtypes';
-import MaterialsImportExport from './MaterialsImportExport';
 import { IndJob } from '@/lib/types';
 import { parseISKAmount } from '@/utils/priceUtils';
-// import { getFacilities } from '@/services/facilityService';
+import { Import, Export } from 'lucide-react';
+import { useToast } from '@/components/ui/use-toast';
 
 interface JobFormProps {
   job?: IndJob;
@@ -18,38 +18,19 @@ interface JobFormProps {
 }
 
 const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
-  // const [facilities, setFacilities] = useState<IndFacilityRecord[]>([]);
+  const { toast } = useToast();
-  const [billOfMaterials, setBillOfMaterials] = useState<IndBillitemRecord[]>(job?.billOfMaterials || []);
-  const [consumedMaterials, setConsumedMaterials] = useState<IndBillitemRecord[]>(job?.consumedMaterials || []);
   const [formData, setFormData] = useState({
     outputItem: job?.outputItem || '',
     outputQuantity: job?.outputQuantity || 0,
-    jobStart: job?.jobStart ? job.jobStart.slice(0, 16) : '',
+    jobStart: job?.jobStart ? new Date(job.jobStart).toISOString().slice(0, 16) : '',
-    jobEnd: job?.jobEnd ? job.jobEnd.slice(0, 16) : '',
+    jobEnd: job?.jobEnd ? new Date(job.jobEnd).toISOString().slice(0, 16) : '',
-    saleStart: job?.saleStart ? job.saleStart.slice(0, 16) : '',
+    saleStart: job?.saleStart ? new Date(job.saleStart).toISOString().slice(0, 16) : '',
-    saleEnd: job?.saleEnd ? job.saleEnd.slice(0, 16) : '',
+    saleEnd: job?.saleEnd ? new Date(job.saleEnd).toISOString().slice(0, 16) : '',
     status: job?.status || IndJobStatusOptions.Planned,
-    billOfMaterials: job?.billOfMaterials || [],
-    consumedMaterials: job?.consumedMaterials || [],
-    expenditures: job?.expenditures || [],
-    income: job?.income || [],
     projectedCost: job?.projectedCost || 0,
     projectedRevenue: job?.projectedRevenue || 0
   });
 
-  // useEffect(() => {
-  //   const loadFacilities = async () => {
-  //     try {
-  //       const fetchedFacilities = await getFacilities();
-  //       setFacilities(fetchedFacilities);
-  //     } catch (error) {
-  //       console.error('Error loading facilities:', error);
-  //     }
-  //   };
-
-  //   loadFacilities();
-  // }, []);
-
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -61,15 +42,79 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
       saleStart: formData.saleStart ? formData.saleStart : undefined,
       saleEnd: formData.saleEnd ? formData.saleEnd : undefined,
       status: formData.status,
-      billOfMaterials: formData.billOfMaterials.map(item => item.id),
+      billOfMaterials: job?.billOfMaterials?.map(item => item.id) || [],
-      consumedMaterials: formData.consumedMaterials.map(item => item.id),
+      consumedMaterials: job?.consumedMaterials?.map(item => item.id) || [],
-      expenditures: formData.expenditures.map(item => item.id),
+      expenditures: job?.expenditures?.map(item => item.id) || [],
-      income: formData.income.map(item => item.id),
+      income: job?.income?.map(item => item.id) || [],
       projectedCost: formData.projectedCost,
       projectedRevenue: formData.projectedRevenue
     });
   };
 
+  const handleImportBOM = 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 handleExportBOM = 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} ${item.quantity}`)
+      .join('\n');
+    
+    try {
+      await navigator.clipboard.writeText(text);
+      toast({
+        title: "Exported!",
+        description: "Bill of materials copied to clipboard",
+        duration: 2000,
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to copy to clipboard",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
   const statusOptions = Object.values(IndJobStatusOptions);
 
   return (
@@ -80,193 +125,195 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <Tabs defaultValue="basic" className="w-full">
+        <form onSubmit={handleSubmit} className="space-y-4">
-          <TabsList className="grid w-full grid-cols-2 bg-gray-800">
+          <div className="grid grid-cols-2 gap-4">
-            <TabsTrigger value="basic" className="text-white">Basic Info</TabsTrigger>
+            <div className="space-y-2">
-            <TabsTrigger value="materials" className="text-white">Materials</TabsTrigger>
+              <Label htmlFor="itemName" className="text-gray-300">Output Item Name</Label>
-          </TabsList>
+              <Input
+                id="itemName"
+                value={formData.outputItem}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  outputItem: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="itemQuantity" className="text-gray-300">Quantity</Label>
+              <Input
+                id="itemQuantity"
+                type="number"
+                value={formData.outputQuantity}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  outputQuantity: parseInt(e.target.value) || 0
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+                required
+              />
+            </div>
+          </div>
 
-          <TabsContent value="basic" className="space-y-4">
+          <div className="space-y-2">
-            <form onSubmit={handleSubmit} className="space-y-4">
+            <Label htmlFor="status" className="text-gray-300">Status</Label>
-              <div className="grid grid-cols-2 gap-4">
+            <Select
-                <div className="space-y-2">
+              value={formData.status}
-                  <Label htmlFor="itemName" className="text-gray-300">Output Item Name</Label>
+              onValueChange={(value) => setFormData({ ...formData, status: value as IndJobStatusOptions })}
-                  <Input
+            >
-                    id="itemName"
+              <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                    value={formData.outputItem}
+                <SelectValue placeholder="Select status" />
-                    onChange={(e) => setFormData({
+              </SelectTrigger>
-                      ...formData,
+              <SelectContent className="bg-gray-800 border-gray-600">
-                      outputItem: e.target.value
+                {statusOptions.map((status) => (
-                    })}
+                  <SelectItem key={status} value={status} className="text-white">
-                    className="bg-gray-800 border-gray-600 text-white"
+                    {status}
-                    required
+                  </SelectItem>
-                  />
+                ))}
-                </div>
+              </SelectContent>
-                <div className="space-y-2">
+            </Select>
-                  <Label htmlFor="itemQuantity" className="text-gray-300">Quantity</Label>
+          </div>
-                  <Input
-                    id="itemQuantity"
-                    type="number"
-                    value={formData.outputQuantity}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      outputQuantity: parseInt(e.target.value) || 0
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                    required
-                  />
-                </div>
-              </div>
 
-              <div className="space-y-2">
+          <div className="grid grid-cols-2 gap-4">
-                <Label htmlFor="status" className="text-gray-300">Status</Label>
+            <div className="space-y-2">
-                <Select
+              <Label htmlFor="startDate" className="text-gray-300">Start Date & Time</Label>
-                  value={formData.status}
+              <Input
-                  onValueChange={(value) => setFormData({ ...formData, status: value as IndJobStatusOptions })}
+                id="startDate"
+                type="datetime-local"
+                value={formData.jobStart}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  jobStart: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="endDate" className="text-gray-300">End Date & Time</Label>
+              <Input
+                id="endDate"
+                type="datetime-local"
+                value={formData.jobEnd}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  jobEnd: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="saleStartDate" className="text-gray-300">Sale Start Date & Time</Label>
+              <Input
+                id="saleStartDate"
+                type="datetime-local"
+                value={formData.saleStart}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  saleStart: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="saleEndDate" className="text-gray-300">Sale End Date & Time</Label>
+              <Input
+                id="saleEndDate"
+                type="datetime-local"
+                value={formData.saleEnd}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  saleEnd: e.target.value
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="projectedCost" className="text-gray-300">Projected Cost</Label>
+              <Input
+                id="projectedCost"
+                type="text"
+                value={formData.projectedCost ? `${formData.projectedCost.toLocaleString()} ISK` : ''}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  projectedCost: parseISKAmount(e.target.value)
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="projectedRevenue" className="text-gray-300">Projected Revenue</Label>
+              <Input
+                id="projectedRevenue"
+                type="text"
+                value={formData.projectedRevenue ? `${formData.projectedRevenue.toLocaleString()} ISK` : ''}
+                onChange={(e) => setFormData({
+                  ...formData,
+                  projectedRevenue: parseISKAmount(e.target.value)
+                })}
+                className="bg-gray-800 border-gray-600 text-white"
+              />
+            </div>
+          </div>
+
+          {job && (
+            <div className="space-y-4 pt-4 border-t border-gray-700">
+              <Label className="text-gray-300">Bill of Materials</Label>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleImportBOM}
+                  className="border-gray-600 hover:bg-gray-800"
                 >
-                  <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
+                  <Import className="w-4 h-4 mr-2" />
-                    <SelectValue placeholder="Select status" />
+                  Import BOM
-                  </SelectTrigger>
-                  <SelectContent className="bg-gray-800 border-gray-600">
-                    {statusOptions.map((status) => (
-                      <SelectItem key={status} value={status} className="text-white">
-                        {status}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="startDate" className="text-gray-300">Start Date & Time</Label>
-                  <Input
-                    id="startDate"
-                    type="datetime-local"
-                    value={formData.jobStart}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      jobStart: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="endDate" className="text-gray-300">End Date & Time</Label>
-                  <Input
-                    id="endDate"
-                    type="datetime-local"
-                    value={formData.jobEnd}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      jobEnd: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="saleStartDate" className="text-gray-300">Sale Start Date & Time</Label>
-                  <Input
-                    id="saleStartDate"
-                    type="datetime-local"
-                    value={formData.saleStart}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      saleStart: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="saleEndDate" className="text-gray-300">Sale End Date & Time</Label>
-                  <Input
-                    id="saleEndDate"
-                    type="datetime-local"
-                    value={formData.saleEnd}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      saleEnd: e.target.value
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="projectedCost" className="text-gray-300">Projected Cost</Label>
-                  <Input
-                    id="projectedCost"
-                    type="text"
-                    value={formData.projectedCost ? `${formData.projectedCost.toLocaleString()} ISK` : ''}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      projectedCost: parseISKAmount(e.target.value)
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="projectedRevenue" className="text-gray-300">Projected Revenue</Label>
-                  <Input
-                    id="projectedRevenue"
-                    type="text"
-                    value={formData.projectedRevenue ? `${formData.projectedRevenue.toLocaleString()} ISK` : ''}
-                    onChange={(e) => setFormData({
-                      ...formData,
-                      projectedRevenue: parseISKAmount(e.target.value)
-                    })}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-              </div>
-
-              <div className="flex gap-2 pt-4">
-                <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700">
-                  {job ? 'Update Job' : 'Create Job'}
                 </Button>
                 <Button
                   type="button"
                   variant="outline"
-                  onClick={onCancel}
+                  onClick={handleExportBOM}
                   className="border-gray-600 hover:bg-gray-800"
+                  disabled={!job?.billOfMaterials?.length}
                 >
-                  Cancel
+                  <Export className="w-4 h-4 mr-2" />
+                  Export BOM
                 </Button>
               </div>
-            </form>
+              {job.billOfMaterials && job.billOfMaterials.length > 0 && (
-          </TabsContent>
+                <div className="text-sm text-gray-400 max-h-32 overflow-y-auto">
-
+                  {job.billOfMaterials.map((item, index) => (
-          <TabsContent value="materials" className="space-y-4">
+                    <div key={index}>{item.name}: {item.quantity.toLocaleString()}</div>
-            <MaterialsImportExport
+                  ))}
-              job={job}
+                </div>
-              billOfMaterials={billOfMaterials}
+              )}
-              consumedMaterials={consumedMaterials}
-              onBillOfMaterialsUpdate={setBillOfMaterials}
-              onConsumedMaterialsUpdate={setConsumedMaterials}
-            />
-
-            <div className="flex gap-2 pt-4">
-              <Button onClick={handleSubmit} className="flex-1 bg-blue-600 hover:bg-blue-700">
-                {job ? 'Update Job' : 'Create Job'}
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={onCancel}
-                className="border-gray-600 hover:bg-gray-800"
-              >
-                Cancel
-              </Button>
             </div>
-          </TabsContent>
+          )}
-        </Tabs>
+
+          <div className="flex gap-2 pt-4">
+            <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700">
+              {job ? 'Update Job' : 'Create Job'}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              className="border-gray-600 hover:bg-gray-800"
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
       </CardContent>
     </Card>
   );
 };
 
 export default JobForm;
+

src/services/dataService.ts

@@ -1,4 +1,5 @@
 
+
 import { IndJob } from '@/lib/types';
 import { IndJobRecord, IndJobRecordNoId, IndTransactionRecord, IndTransactionRecordNoId, IndBillitemRecord, IndBillitemRecordNoId } from '@/lib/pbtypes';
 import * as jobService from './jobService';
@@ -77,10 +78,26 @@ export class DataService {
     
     const jobIndex = this.jobs.findIndex(job => job.id === id);
     if (jobIndex !== -1) {
-      // Preserve existing relations while updating the record fields
+      // Only update the scalar fields, preserve the relation arrays
+      const existingJob = this.jobs[jobIndex];
       this.jobs[jobIndex] = {
-        ...this.jobs[jobIndex],
+        id: updatedRecord.id,
-        ...updatedRecord
+        outputItem: updatedRecord.outputItem,
+        outputQuantity: updatedRecord.outputQuantity,
+        status: updatedRecord.status,
+        created: updatedRecord.created,
+        updated: updatedRecord.updated,
+        jobStart: updatedRecord.jobStart,
+        jobEnd: updatedRecord.jobEnd,
+        saleStart: updatedRecord.saleStart,
+        saleEnd: updatedRecord.saleEnd,
+        produced: updatedRecord.produced,
+        projectedCost: updatedRecord.projectedCost,
+        projectedRevenue: updatedRecord.projectedRevenue,
+        expenditures: existingJob.expenditures,
+        income: existingJob.income,
+        billOfMaterials: existingJob.billOfMaterials,
+        consumedMaterials: existingJob.consumedMaterials
       };
       this.notifyListeners();
       return this.jobs[jobIndex];
@@ -271,3 +288,4 @@ export class DataService {
 
 // Export singleton instance
 export const dataService = DataService.getInstance();
+