Add BOM import/export and consumed materials display

Implement BOM import/export functionality and display consumed materials data, including item and required quantities.
2025-07-04 12:46:50 +00:00
parent ee4f00355f
commit 8757dae524
5 changed files with 434 additions and 159 deletions
--- a/src/components/MaterialsImportExport.tsx
+++ b/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;