dave/eve-industrializer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add BOM import/export and consumed materials display

Browse Source 
Implement BOM import/export functionality and display consumed materials data, including item and required quantities.
This commit is contained in:
gpt-engineer-app[bot]
2025-07-04 12:46:50 +00:00
parent ee4f00355f
commit 8757dae524
5 changed files with 434 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/JobCard.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; 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 { Job } from '@/services/jobService';
import { formatISK } from '@/utils/priceUtils'; import { formatISK } from '@/utils/priceUtils';
@@ -57,6 +57,50 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
<Badge className={`${getStatusColor(job.status)} text-white`}> <Badge className={`${getStatusColor(job.status)} text-white`}>
{job.status} {job.status}
</Badge> </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> </div>
<p className="text-gray-400">Quantity: {job.outputItem.quantity.toLocaleString()}</p> <p className="text-gray-400">Quantity: {job.outputItem.quantity.toLocaleString()}</p>
</div> </div>

349
src/components/JobForm.tsx
View File

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

179
src/components/MaterialsImportExport.tsx Normal file
View File

@@ -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;

4
src/pages/Index.tsx
View File

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

13
src/services/jobService.ts
View File

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