Refactor MaterialsImportExport component

Refactor the MaterialsImportExport component into smaller, more manageable files.

src/components/MaterialsActions.tsx

@@ -0,0 +1,60 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Import, Download, AlertTriangle } from 'lucide-react';
+
+interface MaterialsActionsProps {
+  onImport: () => void;
+  onExport: () => void;
+  onExportMissing?: () => void;
+  importDisabled?: boolean;
+  missingDisabled?: boolean;
+  type: 'bom' | 'consumed';
+}
+
+const MaterialsActions: React.FC<MaterialsActionsProps> = ({
+  onImport,
+  onExport,
+  onExportMissing,
+  importDisabled = false,
+  missingDisabled = false,
+  type
+}) => {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex gap-1">
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={onExport}
+          className="border-gray-600 hover:bg-gray-800"
+        >
+          <Download className="w-4 h-4 mr-2" />
+          Export
+        </Button>
+        {type === 'bom' && onExportMissing && (
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={onExportMissing}
+            className="border-gray-600 hover:bg-gray-800"
+            disabled={missingDisabled}
+          >
+            <AlertTriangle className="w-4 h-4 mr-2" />
+            Missing
+          </Button>
+        )}
+      </div>
+      <Button
+        onClick={onImport}
+        className="bg-blue-600 hover:bg-blue-700"
+        disabled={importDisabled}
+      >
+        <Import className="w-4 h-4 mr-2" />
+        Import {type === 'bom' ? 'Bill of Materials' : 'Consumed Materials'}
+      </Button>
+    </div>
+  );
+};
+
+export default MaterialsActions;

src/components/MaterialsImportExport.tsx

@@ -1,14 +1,18 @@
 
 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, Download, FileText, AlertTriangle } from 'lucide-react';
+import { FileText } from 'lucide-react';
-import { IndBillitemRecord, IndBillitemRecordNoId } from '@/lib/pbtypes';
+import { IndBillitemRecord } from '@/lib/pbtypes';
 import { IndJob } from '@/lib/types';
 import { dataService } from '@/services/dataService';
 import { useToast } from '@/hooks/use-toast';
+import { useMaterialsCalculations } from '@/hooks/useMaterialsCalculations';
+import { parseBillOfMaterials, parseConsumedMaterials } from '@/utils/materialsParser';
+import { exportBillOfMaterials, exportConsumedMaterials, exportMissingMaterials } from '@/utils/materialsExporter';
+import MaterialsActions from './MaterialsActions';
+import MaterialsList from './MaterialsList';
 
 interface MaterialsImportExportProps {
   job?: IndJob;
@@ -28,84 +32,7 @@ const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
   const [bomInput, setBomInput] = useState('');
   const [consumedInput, setConsumedInput] = useState('');
   const { toast } = useToast();
-
+  const { calculateMissingMaterials } = useMaterialsCalculations(job, billOfMaterials);
-  const parseBillOfMaterials = (text: string): IndBillitemRecordNoId[] => {
-    const lines = text.split('\n').filter(line => line.trim());
-    const materials: IndBillitemRecordNoId[] = [];
-
-    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)) {
-          materials.push({ name, quantity });
-        }
-      }
-    }
-
-    return materials;
-  };
-
-  const parseConsumedMaterials = (text: string): IndBillitemRecordNoId[] => {
-    const lines = text.split('\n').filter(line => line.trim());
-    const materials: IndBillitemRecordNoId[] = [];
-
-    for (const line of lines) {
-      const parts = line.trim().split('\t');
-      if (parts.length >= 2) {
-        const name = parts[0];
-        const quantity = parseInt(parts[1]);
-        if (name && !isNaN(quantity)) {
-          materials.push({ name, quantity });
-        }
-      }
-    }
-
-    return materials;
-  };
-
-  const calculateMissingMaterials = () => {
-    if (!job) return [];
-
-    // Create a map of required materials from bill of materials
-    const requiredMaterials = new Map<string, number>();
-    billOfMaterials.forEach(item => {
-      requiredMaterials.set(item.name, item.quantity);
-    });
-
-    // Create a map of owned materials from expenditures
-    const ownedMaterials = new Map<string, number>();
-    job.expenditures?.forEach(transaction => {
-      const currentOwned = ownedMaterials.get(transaction.itemName) || 0;
-      ownedMaterials.set(transaction.itemName, currentOwned + transaction.quantity);
-    });
-
-    // Calculate missing materials
-    const missingMaterials: { name: string; quantity: number }[] = [];
-    requiredMaterials.forEach((required, materialName) => {
-      const owned = ownedMaterials.get(materialName) || 0;
-      const missing = required - owned;
-      if (missing > 0) {
-        missingMaterials.push({ name: materialName, quantity: missing });
-      }
-    });
-
-    return missingMaterials;
-  };
-
-  const exportBillOfMaterials = (): string => {
-    return billOfMaterials.map(item => `${item.name} ${item.quantity}`).join('\n');
-  };
-
-  const exportConsumedMaterials = (): string => {
-    return consumedMaterials.map(item => `${item.name}\t${item.quantity}`).join('\n');
-  };
-
-  const exportMissingMaterials = (): string => {
-    const missing = calculateMissingMaterials();
-    return missing.map(item => `${item.name}\t${item.quantity}`).join('\n');
-  };
 
   const handleImportBom = async () => {
     if (!job) return;
@@ -138,7 +65,7 @@ const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
   };
 
   const handleExportBom = () => {
-    const exported = exportBillOfMaterials();
+    const exported = exportBillOfMaterials(billOfMaterials);
     navigator.clipboard.writeText(exported);
     toast({
       title: "Exported",
@@ -148,7 +75,7 @@ const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
   };
 
   const handleExportConsumed = () => {
-    const exported = exportConsumedMaterials();
+    const exported = exportConsumedMaterials(consumedMaterials);
     navigator.clipboard.writeText(exported);
     toast({
       title: "Exported",
@@ -158,7 +85,8 @@ const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
   };
 
   const handleExportMissing = () => {
-    const exported = exportMissingMaterials();
+    const missingMaterials = calculateMissingMaterials();
+    const exported = exportMissingMaterials(missingMaterials);
     if (exported) {
       navigator.clipboard.writeText(exported);
       toast({
@@ -187,30 +115,15 @@ const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
       </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>
-            <Label className="text-gray-300">Bill of Materials</Label>
+          <MaterialsActions
-            <div className="flex gap-1">
+            type="bom"
-              <Button
+            onImport={handleImportBom}
-                size="sm"
+            onExport={handleExportBom}
-                variant="outline"
+            onExportMissing={handleExportMissing}
-                onClick={handleExportBom}
+            importDisabled={!job}
-                className="border-gray-600 hover:bg-gray-800"
+            missingDisabled={!job || missingMaterials.length === 0}
-              >
+          />
-                <Download className="w-4 h-4 mr-2" />
-                Export
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={handleExportMissing}
-                className="border-gray-600 hover:bg-gray-800"
-                disabled={!job || missingMaterials.length === 0}
-              >
-                <AlertTriangle className="w-4 h-4 mr-2" />
-                Missing
-              </Button>
-            </div>
-          </div>
           <Textarea
             placeholder="Paste bill of materials here (e.g., Mexallon 1000)"
             value={bomInput}
@@ -218,29 +131,16 @@ const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
             className="bg-gray-800 border-gray-600 text-white"
             rows={4}
           />
-          <Button
-            onClick={handleImportBom}
-            className="bg-blue-600 hover:bg-blue-700"
-            disabled={!job}
-          >
-            <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>
-            <Label className="text-gray-300">Consumed Materials</Label>
+          <MaterialsActions
-            <Button
+            type="consumed"
-              size="sm"
+            onImport={handleImportConsumed}
-              variant="outline"
+            onExport={handleExportConsumed}
-              onClick={handleExportConsumed}
+            importDisabled={!job}
-              className="border-gray-600 hover:bg-gray-800"
+          />
-            >
-              <Download className="w-4 h-4 mr-2" />
-              Export
-            </Button>
-          </div>
           <Textarea
             placeholder="Paste consumed materials here (tab-separated: Item\tRequired)"
             value={consumedInput}
@@ -248,48 +148,23 @@ const MaterialsImportExport: React.FC<MaterialsImportExportProps> = ({
             className="bg-gray-800 border-gray-600 text-white"
             rows={4}
           />
-          <Button
-            onClick={handleImportConsumed}
-            className="bg-blue-600 hover:bg-blue-700"
-            disabled={!job}
-          >
-            <Import className="w-4 h-4 mr-2" />
-            Import Consumed Materials
-          </Button>
         </div>
 
-        {billOfMaterials.length > 0 && (
+        <MaterialsList
-          <div className="space-y-2">
+          title="Current Bill of Materials"
-            <Label className="text-gray-300">Current Bill of Materials:</Label>
+          materials={billOfMaterials}
-            <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 && (
+        <MaterialsList
-          <div className="space-y-2">
+          title="Current Consumed Materials"
-            <Label className="text-gray-300">Current Consumed Materials:</Label>
+          materials={consumedMaterials}
-            <div className="text-sm text-gray-400 max-h-32 overflow-y-auto">
+        />
-              {consumedMaterials.map((item, index) => (
-                <div key={index}>{item.name}: {item.quantity.toLocaleString()}</div>
-              ))}
-            </div>
-          </div>
-        )}
 
-        {missingMaterials.length > 0 && (
+        <MaterialsList
-          <div className="space-y-2">
+          title="Missing Materials"
-            <Label className="text-gray-300">Missing Materials:</Label>
+          materials={missingMaterials}
-            <div className="text-sm text-red-400 max-h-32 overflow-y-auto">
+          className="text-red-400"
-              {missingMaterials.map((item, index) => (
+        />
-                <div key={index}>{item.name}: {item.quantity.toLocaleString()}</div>
-              ))}
-            </div>
-          </div>
-        )}
       </CardContent>
     </Card>
   );

src/components/MaterialsList.tsx

@@ -0,0 +1,27 @@
+
+import React from 'react';
+import { Label } from '@/components/ui/label';
+import { IndBillitemRecord } from '@/lib/pbtypes';
+
+interface MaterialsListProps {
+  title: string;
+  materials: IndBillitemRecord[] | { name: string; quantity: number }[];
+  className?: string;
+}
+
+const MaterialsList: React.FC<MaterialsListProps> = ({ title, materials, className = "text-gray-400" }) => {
+  if (materials.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      <Label className="text-gray-300">{title}:</Label>
+      <div className={`text-sm ${className} max-h-32 overflow-y-auto`}>
+        {materials.map((item, index) => (
+          <div key={index}>{item.name}: {item.quantity.toLocaleString()}</div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MaterialsList;

src/hooks/useMaterialsCalculations.ts

@@ -0,0 +1,38 @@
+
+import { IndBillitemRecord } from '@/lib/pbtypes';
+import { IndJob } from '@/lib/types';
+
+export function useMaterialsCalculations(job?: IndJob, billOfMaterials: IndBillitemRecord[] = []) {
+  const calculateMissingMaterials = () => {
+    if (!job) return [];
+
+    // Create a map of required materials from bill of materials
+    const requiredMaterials = new Map<string, number>();
+    billOfMaterials.forEach(item => {
+      requiredMaterials.set(item.name, item.quantity);
+    });
+
+    // Create a map of owned materials from expenditures
+    const ownedMaterials = new Map<string, number>();
+    job.expenditures?.forEach(transaction => {
+      const currentOwned = ownedMaterials.get(transaction.itemName) || 0;
+      ownedMaterials.set(transaction.itemName, currentOwned + transaction.quantity);
+    });
+
+    // Calculate missing materials
+    const missingMaterials: { name: string; quantity: number }[] = [];
+    requiredMaterials.forEach((required, materialName) => {
+      const owned = ownedMaterials.get(materialName) || 0;
+      const missing = required - owned;
+      if (missing > 0) {
+        missingMaterials.push({ name: materialName, quantity: missing });
+      }
+    });
+
+    return missingMaterials;
+  };
+
+  return {
+    calculateMissingMaterials
+  };
+}

src/utils/materialsExporter.ts

@@ -0,0 +1,14 @@
+
+import { IndBillitemRecord } from '@/lib/pbtypes';
+
+export const exportBillOfMaterials = (billOfMaterials: IndBillitemRecord[]): string => {
+  return billOfMaterials.map(item => `${item.name} ${item.quantity}`).join('\n');
+};
+
+export const exportConsumedMaterials = (consumedMaterials: IndBillitemRecord[]): string => {
+  return consumedMaterials.map(item => `${item.name}\t${item.quantity}`).join('\n');
+};
+
+export const exportMissingMaterials = (missingMaterials: { name: string; quantity: number }[]): string => {
+  return missingMaterials.map(item => `${item.name}\t${item.quantity}`).join('\n');
+};

src/utils/materialsParser.ts

@@ -0,0 +1,38 @@
+
+import { IndBillitemRecordNoId } from '@/lib/pbtypes';
+
+export const parseBillOfMaterials = (text: string): IndBillitemRecordNoId[] => {
+  const lines = text.split('\n').filter(line => line.trim());
+  const materials: IndBillitemRecordNoId[] = [];
+
+  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)) {
+        materials.push({ name, quantity });
+      }
+    }
+  }
+
+  return materials;
+};
+
+export const parseConsumedMaterials = (text: string): IndBillitemRecordNoId[] => {
+  const lines = text.split('\n').filter(line => line.trim());
+  const materials: IndBillitemRecordNoId[] = [];
+
+  for (const line of lines) {
+    const parts = line.trim().split('\t');
+    if (parts.length >= 2) {
+      const name = parts[0];
+      const quantity = parseInt(parts[1]);
+      if (name && !isNaN(quantity)) {
+        materials.push({ name, quantity });
+      }
+    }
+  }
+
+  return materials;
+};