Add BOM import/export and consumed materials display

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

View File

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