Fix: DataService updateJob and JobCard display
- Fixed `updateJob` in `dataService.ts` to correctly update local job data with full objects instead of references. - Standardized JobCard size. - Fixed JobForm not pre-filling date fields. - Removed "materials" section from JobForm, replaced with BOM import/export buttons using clipboard. - Removed consumed materials section.
This commit is contained in:
gpt-engineer-app[bot]
@@ -157,13 +157,13 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={`bg-gray-900 border-gray-700 text-white ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
|
||||
<CardHeader>
|
||||
<Card className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
|
||||
<CardHeader className="flex-shrink-0">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<CardTitle className="text-blue-400">{job.outputItem}</CardTitle>
|
||||
<Badge className={`${getStatusColor(job.status)} text-white`}>
|
||||
<CardTitle className="text-blue-400 truncate">{job.outputItem}</CardTitle>
|
||||
<Badge className={`${getStatusColor(job.status)} text-white flex-shrink-0`}>
|
||||
{job.status}
|
||||
</Badge>
|
||||
{job.billOfMaterials && job.billOfMaterials.length > 0 && (
|
||||
@@ -172,7 +172,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1 h-6 w-6 relative group"
|
||||
className="p-1 h-6 w-6 relative group flex-shrink-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
copyBillOfMaterials();
|
||||
@@ -201,43 +201,8 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
)}
|
||||
{job.consumedMaterials && job.consumedMaterials.length > 0 && (
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1 h-6 w-6 relative group"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
copyConsumedMaterials();
|
||||
}}
|
||||
>
|
||||
{copyingConsumed ? (
|
||||
<Check className="w-4 h-4 text-green-400 absolute transition-opacity" />
|
||||
) : (
|
||||
<Wrench className="w-4 h-4 text-yellow-400" />
|
||||
)}
|
||||
<span className="sr-only">Copy consumed materials</span>
|
||||
</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 (click to copy)</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.quantity.toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-400">
|
||||
<p className="text-gray-400 text-sm">
|
||||
Quantity: {job.outputQuantity.toLocaleString()}
|
||||
<span className="ml-4">
|
||||
Produced: {
|
||||
@@ -269,7 +234,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-2 flex-shrink-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@@ -288,42 +253,46 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Created: {formatDateTime(job.created)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Clock className="w-4 h-4" />
|
||||
Start: {formatDateTime(job.jobStart)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Factory className="w-4 h-4" />
|
||||
Job ID: {job.id}
|
||||
<CardContent className="flex-1 flex flex-col space-y-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Created: {formatDateTime(job.created)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Clock className="w-4 h-4" />
|
||||
Start: {formatDateTime(job.jobStart)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Factory className="w-4 h-4" />
|
||||
Job ID: {job.id}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{job.saleStart && (
|
||||
<div className="space-y-2 mt-4">
|
||||
<div className="text-sm text-gray-400">
|
||||
Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
|
||||
</div>
|
||||
{itemsPerDay > 0 && (
|
||||
<div className="text-sm text-gray-400">
|
||||
Items/Day: {itemsPerDay.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{job.saleStart && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm text-gray-400">
|
||||
Sale Period: {formatDateTime(job.saleStart)} - {formatDateTime(job.saleEnd)}
|
||||
</div>
|
||||
{itemsPerDay > 0 && (
|
||||
<div className="text-sm text-gray-400">
|
||||
Items/Day: {itemsPerDay.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1" />
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700">
|
||||
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700 flex-shrink-0">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-1 text-red-400">
|
||||
<TrendingDown className="w-4 h-4" />
|
||||
<span className="text-sm">Expenditure</span>
|
||||
</div>
|
||||
<div className="font-semibold">{formatISK(totalExpenditure)}</div>
|
||||
<div className="font-semibold text-sm">{formatISK(totalExpenditure)}</div>
|
||||
{job.projectedCost > 0 && (
|
||||
<div className="text-xs text-gray-400">
|
||||
vs Projected: {formatISK(job.projectedCost)}
|
||||
@@ -341,7 +310,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span className="text-sm">Income</span>
|
||||
</div>
|
||||
<div className="font-semibold">{formatISK(totalIncome)}</div>
|
||||
<div className="font-semibold text-sm">{formatISK(totalIncome)}</div>
|
||||
{job.projectedRevenue > 0 && (
|
||||
<div className="text-xs text-gray-400">
|
||||
vs Projected: {formatISK(job.projectedRevenue)}
|
||||
@@ -358,7 +327,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
|
||||
<div className="flex items-center justify-center gap-1 text-gray-400">
|
||||
<span className="text-sm">Profit</span>
|
||||
</div>
|
||||
<div className={`font-semibold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
<div className={`font-semibold text-sm ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{formatISK(profit)}
|
||||
<Badge variant={profit >= 0 ? 'default' : 'destructive'} className="ml-1 text-xs">
|
||||
{margin.toFixed(1)}%
|
||||
|
||||
Reference in New Issue
Block a user