Add BOM import/export and consumed materials display

Implement BOM import/export functionality and display consumed materials data, including item and required quantities.

src/components/JobCard.tsx

@@ -1,9 +1,9 @@
-
 import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Calendar, Factory, TrendingUp, TrendingDown, Clock } from 'lucide-react';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Package, Wrench } from 'lucide-react';
 import { Job } from '@/services/jobService';
 import { formatISK } from '@/utils/priceUtils';
 
@@ -57,6 +57,50 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
               <Badge className={`${getStatusColor(job.status)} text-white`}>
                 {job.status}
               </Badge>
+              {job.billOfMaterials && job.billOfMaterials.length > 0 && (
+                <HoverCard>
+                  <HoverCardTrigger asChild>
+                    <Button variant="ghost" size="sm" className="p-1 h-6 w-6">
+                      <Package className="w-4 h-4 text-blue-400" />
+                    </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</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>
+              )}
+              {job.consumedMaterials && job.consumedMaterials.length > 0 && (
+                <HoverCard>
+                  <HoverCardTrigger asChild>
+                    <Button variant="ghost" size="sm" className="p-1 h-6 w-6">
+                      <Wrench className="w-4 h-4 text-yellow-400" />
+                    </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</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.required.toLocaleString()}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </HoverCardContent>
+                </HoverCard>
+              )}
             </div>
             <p className="text-gray-400">Quantity: {job.outputItem.quantity.toLocaleString()}</p>
           </div>

src/components/JobForm.tsx

@@ -1,12 +1,13 @@
-
 import React, { useState, useEffect } 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 { Job, Facility } from '@/services/jobService';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Job, Facility, BillOfMaterialsItem, ConsumedMaterialsItem } from '@/services/jobService';
 import { facilityService } from '@/services/facilityService';
+import MaterialsImportExport from './MaterialsImportExport';
 
 interface JobFormProps {
   job?: Job;
@@ -16,6 +17,8 @@ interface JobFormProps {
 
 const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
   const [facilities, setFacilities] = useState<Facility[]>([]);
+  const [billOfMaterials, setBillOfMaterials] = useState<BillOfMaterialsItem[]>(job?.billOfMaterials || []);
+  const [consumedMaterials, setConsumedMaterials] = useState<ConsumedMaterialsItem[]>(job?.consumedMaterials || []);
   const [formData, setFormData] = useState({
     outputItem: {
       id: job?.outputItem.id || '',
@@ -59,7 +62,9 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
         saleEnd: formData.dates.saleEnd ? new Date(formData.dates.saleEnd) : null
       },
       status: formData.status,
-      facilityId: formData.facilityId
+      facilityId: formData.facilityId,
+      billOfMaterials,
+      consumedMaterials
     });
   };
 
@@ -80,163 +85,195 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="itemName" className="text-gray-300">Output Item Name</Label>
-              <Input
-                id="itemName"
-                value={formData.outputItem.name}
-                onChange={(e) => setFormData({
-                  ...formData,
-                  outputItem: { ...formData.outputItem, name: 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.outputItem.quantity}
-                onChange={(e) => setFormData({
-                  ...formData,
-                  outputItem: { ...formData.outputItem, quantity: parseInt(e.target.value) || 0 }
-                })}
-                className="bg-gray-800 border-gray-600 text-white"
-                required
-              />
-            </div>
-          </div>
+        <Tabs defaultValue="basic" className="w-full">
+          <TabsList className="grid w-full grid-cols-2 bg-gray-800">
+            <TabsTrigger value="basic" className="text-white">Basic Info</TabsTrigger>
+            <TabsTrigger value="materials" className="text-white">Materials</TabsTrigger>
+          </TabsList>
+          
+          <TabsContent value="basic" className="space-y-4">
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="itemName" className="text-gray-300">Output Item Name</Label>
+                  <Input
+                    id="itemName"
+                    value={formData.outputItem.name}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      outputItem: { ...formData.outputItem, name: 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.outputItem.quantity}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      outputItem: { ...formData.outputItem, quantity: parseInt(e.target.value) || 0 }
+                    })}
+                    className="bg-gray-800 border-gray-600 text-white"
+                    required
+                  />
+                </div>
+              </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="facility" className="text-gray-300">Facility</Label>
-              <Select 
-                value={formData.facilityId} 
-                onValueChange={(value) => setFormData({ ...formData, facilityId: value })}
-              >
-                <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                  <SelectValue placeholder="Select a facility" />
-                </SelectTrigger>
-                <SelectContent className="bg-gray-800 border-gray-600">
-                  {facilities.map((facility) => (
-                    <SelectItem key={facility.id} value={facility.id} className="text-white">
-                      {facility.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="status" className="text-gray-300">Status</Label>
-              <Select 
-                value={formData.status} 
-                onValueChange={(value) => setFormData({ ...formData, status: value as any })}
-              >
-                <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                  <SelectValue placeholder="Select status" />
-                </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>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="facility" className="text-gray-300">Facility</Label>
+                  <Select 
+                    value={formData.facilityId} 
+                    onValueChange={(value) => setFormData({ ...formData, facilityId: value })}
+                  >
+                    <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
+                      <SelectValue placeholder="Select a facility" />
+                    </SelectTrigger>
+                    <SelectContent className="bg-gray-800 border-gray-600">
+                      {facilities.map((facility) => (
+                        <SelectItem key={facility.id} value={facility.id} className="text-white">
+                          {facility.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="status" className="text-gray-300">Status</Label>
+                  <Select 
+                    value={formData.status} 
+                    onValueChange={(value) => setFormData({ ...formData, status: value as any })}
+                  >
+                    <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
+                      <SelectValue placeholder="Select status" />
+                    </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>
 
-          <div className="space-y-2">
-            <Label htmlFor="creationDate" className="text-gray-300">Creation Date & Time</Label>
-            <Input
-              id="creationDate"
-              type="datetime-local"
-              value={formData.dates.creation}
-              onChange={(e) => setFormData({
-                ...formData,
-                dates: { ...formData.dates, creation: e.target.value }
-              })}
-              className="bg-gray-800 border-gray-600 text-white"
-              required
+              <div className="space-y-2">
+                <Label htmlFor="creationDate" className="text-gray-300">Creation Date & Time</Label>
+                <Input
+                  id="creationDate"
+                  type="datetime-local"
+                  value={formData.dates.creation}
+                  onChange={(e) => setFormData({
+                    ...formData,
+                    dates: { ...formData.dates, creation: e.target.value }
+                  })}
+                  className="bg-gray-800 border-gray-600 text-white"
+                  required
+                />
+              </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.dates.start}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      dates: { ...formData.dates, start: 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.dates.end}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      dates: { ...formData.dates, end: 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.dates.saleStart}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      dates: { ...formData.dates, 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.dates.saleEnd}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      dates: { ...formData.dates, saleEnd: 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}
+                  className="border-gray-600 hover:bg-gray-800"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          </TabsContent>
+          
+          <TabsContent value="materials" className="space-y-4">
+            <MaterialsImportExport
+              billOfMaterials={billOfMaterials}
+              consumedMaterials={consumedMaterials}
+              onBillOfMaterialsUpdate={setBillOfMaterials}
+              onConsumedMaterialsUpdate={setConsumedMaterials}
             />
-          </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.dates.start}
-                onChange={(e) => setFormData({
-                  ...formData,
-                  dates: { ...formData.dates, start: e.target.value }
-                })}
-                className="bg-gray-800 border-gray-600 text-white"
-              />
+            
+            <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>
-            <div className="space-y-2">
-              <Label htmlFor="endDate" className="text-gray-300">End Date & Time</Label>
-              <Input
-                id="endDate"
-                type="datetime-local"
-                value={formData.dates.end}
-                onChange={(e) => setFormData({
-                  ...formData,
-                  dates: { ...formData.dates, end: 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.dates.saleStart}
-                onChange={(e) => setFormData({
-                  ...formData,
-                  dates: { ...formData.dates, 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.dates.saleEnd}
-                onChange={(e) => setFormData({
-                  ...formData,
-                  dates: { ...formData.dates, saleEnd: 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}
-              className="border-gray-600 hover:bg-gray-800"
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
+          </TabsContent>
+        </Tabs>
       </CardContent>
     </Card>
   );

src/components/MaterialsImportExport.tsx

@@ -0,0 +1,179 @@
+
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Import, Export, FileText } from 'lucide-react';
+import { BillOfMaterialsItem, ConsumedMaterialsItem } from '@/services/jobService';
+
+interface MaterialsImportExportProps {
+  billOfMaterials: BillOfMaterialsItem[];
+  consumedMaterials: ConsumedMaterialsItem[];
+  onBillOfMaterialsUpdate: (materials: BillOfMaterialsItem[]) => void;
+  onConsumedMaterialsUpdate: (materials: ConsumedMaterialsItem[]) => void;
+}
+
+const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
+  billOfMaterials,
+  consumedMaterials,
+  onBillOfMaterialsUpdate,
+  onConsumedMaterialsUpdate
+}) => {
+  const [bomInput, setBomInput] = useState('');
+  const [consumedInput, setConsumedInput] = useState('');
+
+  const parseBillOfMaterials = (text: string): BillOfMaterialsItem[] => {
+    return text.split('\n')
+      .filter(line => line.trim())
+      .map(line => {
+        const parts = line.trim().split(/\s+/);
+        const quantity = parseInt(parts[parts.length - 1]);
+        const name = parts.slice(0, -1).join(' ');
+        return { name, quantity };
+      })
+      .filter(item => item.name && !isNaN(item.quantity));
+  };
+
+  const parseConsumedMaterials = (text: string): ConsumedMaterialsItem[] => {
+    const lines = text.split('\n').filter(line => line.trim());
+    const materials: ConsumedMaterialsItem[] = [];
+    
+    for (const line of lines) {
+      const parts = line.trim().split('\t');
+      if (parts.length >= 2) {
+        const name = parts[0];
+        const required = parseInt(parts[1]);
+        if (name && !isNaN(required)) {
+          materials.push({ name, required });
+        }
+      }
+    }
+    
+    return materials;
+  };
+
+  const exportBillOfMaterials = (): string => {
+    return billOfMaterials.map(item => `${item.name} ${item.quantity}`).join('\n');
+  };
+
+  const exportConsumedMaterials = (): string => {
+    return consumedMaterials.map(item => `${item.name}\t${item.required}`).join('\n');
+  };
+
+  const handleImportBom = () => {
+    const parsed = parseBillOfMaterials(bomInput);
+    onBillOfMaterialsUpdate(parsed);
+    setBomInput('');
+  };
+
+  const handleImportConsumed = () => {
+    const parsed = parseConsumedMaterials(consumedInput);
+    onConsumedMaterialsUpdate(parsed);
+    setConsumedInput('');
+  };
+
+  const handleExportBom = () => {
+    const exported = exportBillOfMaterials();
+    navigator.clipboard.writeText(exported);
+  };
+
+  const handleExportConsumed = () => {
+    const exported = exportConsumedMaterials();
+    navigator.clipboard.writeText(exported);
+  };
+
+  return (
+    <Card className="bg-gray-900 border-gray-700 text-white">
+      <CardHeader>
+        <CardTitle className="text-blue-400 flex items-center gap-2">
+          <FileText className="w-5 h-5" />
+          Materials Management
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Label className="text-gray-300">Bill of Materials</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleExportBom}
+              className="border-gray-600 hover:bg-gray-800"
+            >
+              <Export className="w-4 h-4 mr-2" />
+              Export
+            </Button>
+          </div>
+          <Textarea
+            placeholder="Paste bill of materials here (e.g., Mexallon 1000)"
+            value={bomInput}
+            onChange={(e) => setBomInput(e.target.value)}
+            className="bg-gray-800 border-gray-600 text-white"
+            rows={4}
+          />
+          <Button
+            onClick={handleImportBom}
+            className="bg-blue-600 hover:bg-blue-700"
+          >
+            <Import className="w-4 h-4 mr-2" />
+            Import Bill of Materials
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Label className="text-gray-300">Consumed Materials</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleExportConsumed}
+              className="border-gray-600 hover:bg-gray-800"
+            >
+              <Export className="w-4 h-4 mr-2" />
+              Export
+            </Button>
+          </div>
+          <Textarea
+            placeholder="Paste consumed materials here (tab-separated: Item\tRequired)"
+            value={consumedInput}
+            onChange={(e) => setConsumedInput(e.target.value)}
+            className="bg-gray-800 border-gray-600 text-white"
+            rows={4}
+          />
+          <Button
+            onClick={handleImportConsumed}
+            className="bg-blue-600 hover:bg-blue-700"
+          >
+            <Import className="w-4 h-4 mr-2" />
+            Import Consumed Materials
+          </Button>
+        </div>
+
+        {billOfMaterials.length > 0 && (
+          <div className="space-y-2">
+            <Label className="text-gray-300">Current Bill of Materials:</Label>
+            <div className="text-sm text-gray-400 max-h-32 overflow-y-auto">
+              {billOfMaterials.map((item, index) => (
+                <div key={index}>{item.name}: {item.quantity.toLocaleString()}</div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {consumedMaterials.length > 0 && (
+          <div className="space-y-2">
+            <Label className="text-gray-300">Current Consumed Materials:</Label>
+            <div className="text-sm text-gray-400 max-h-32 overflow-y-auto">
+              {consumedMaterials.map((item, index) => (
+                <div key={index}>{item.name}: {item.required.toLocaleString()}</div>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default MaterialsImportExport;

src/pages/Index.tsx

@@ -51,6 +51,10 @@ const Index = () => {
       setJobs(jobs.map(job => job.id === editingJob.id ? updatedJob : job));
       setShowJobForm(false);
       setEditingJob(null);
+      // Update selectedJob if it's the same job being edited
+      if (selectedJob?.id === editingJob.id) {
+        setSelectedJob(updatedJob);
+      }
     } catch (error) {
       console.error('Error updating job:', error);
     }

src/services/jobService.ts

@@ -1,4 +1,3 @@
-
 export interface Job {
   id: string;
   outputItem: {
@@ -17,6 +16,18 @@ export interface Job {
   facilityId: string;
   expenditures: Transaction[];
   income: Transaction[];
+  billOfMaterials: BillOfMaterialsItem[];
+  consumedMaterials: ConsumedMaterialsItem[];
+}
+
+export interface BillOfMaterialsItem {
+  name: string;
+  quantity: number;
+}
+
+export interface ConsumedMaterialsItem {
+  name: string;
+  required: number;
 }
 
 export interface Transaction {