368 lines
14 KiB
TypeScript
368 lines
14 KiB
TypeScript
import { useState } from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
|
|
import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Package, Wrench, Check } from 'lucide-react';
|
|
import { formatISK } from '@/utils/priceUtils';
|
|
import { IndJob } from '@/lib/types';
|
|
import { Input } from '@/components/ui/input';
|
|
import { useToast } from '@/components/ui/use-toast';
|
|
|
|
interface JobCardProps {
|
|
job: IndJob;
|
|
onEdit: (job: any) => void;
|
|
onDelete: (jobId: string) => void;
|
|
onUpdateProduced?: (jobId: string, produced: number) => void;
|
|
isTracked?: boolean;
|
|
}
|
|
|
|
const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduced, isTracked = false }) => {
|
|
const [isEditingProduced, setIsEditingProduced] = useState(false);
|
|
const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
|
|
const [copyingBom, setCopyingBom] = useState(false);
|
|
const [copyingConsumed, setCopyingConsumed] = useState(false);
|
|
const { toast } = useToast();
|
|
|
|
// Sort transactions by date descending
|
|
const sortedExpenditures = [...job.expenditures].sort((a, b) =>
|
|
new Date(b.date).getTime() - new Date(a.date).getTime()
|
|
);
|
|
const sortedIncome = [...job.income].sort((a, b) =>
|
|
new Date(b.date).getTime() - new Date(a.date).getTime()
|
|
);
|
|
|
|
// Calculate totals for this job (including tracked jobs)
|
|
const totalExpenditure = sortedExpenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
|
|
const totalIncome = sortedIncome.reduce((sum, tx) => sum + tx.totalPrice, 0);
|
|
const profit = totalIncome - totalExpenditure;
|
|
const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
|
|
|
|
const itemsSold = sortedIncome.reduce((sum, tx) => sum + tx.quantity, 0);
|
|
const saleStartTime = job.saleStart ? new Date(job.saleStart).getTime() : null;
|
|
const daysSinceStart = saleStartTime ? Math.max(1, Math.ceil((Date.now() - saleStartTime) / (1000 * 60 * 60 * 24))) : 0;
|
|
const itemsPerDay = daysSinceStart > 0 ? itemsSold / daysSinceStart : 0;
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'Planned': return 'bg-gray-600';
|
|
case 'Acquisition': return 'bg-yellow-600';
|
|
case 'Running': return 'bg-blue-600';
|
|
case 'Done': return 'bg-purple-600';
|
|
case 'Selling': return 'bg-orange-600';
|
|
case 'Closed': return 'bg-green-600';
|
|
case 'Tracked': return 'bg-cyan-600';
|
|
default: return 'bg-gray-600';
|
|
}
|
|
};
|
|
|
|
const formatDateTime = (dateString: string | null | undefined) => {
|
|
if (!dateString) return 'Not set';
|
|
return new Date(dateString).toLocaleString('en-CA', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}).replace(',', '');
|
|
};
|
|
|
|
const handleProducedUpdate = () => {
|
|
const newValue = parseInt(producedValue);
|
|
if (!isNaN(newValue) && onUpdateProduced) {
|
|
onUpdateProduced(job.id, newValue);
|
|
setIsEditingProduced(false);
|
|
} else {
|
|
setProducedValue(job.produced?.toString() || '0');
|
|
setIsEditingProduced(false);
|
|
}
|
|
};
|
|
|
|
const handleProducedKeyPress = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
handleProducedUpdate();
|
|
} else if (e.key === 'Escape') {
|
|
setIsEditingProduced(false);
|
|
setProducedValue(job.produced?.toString() || '0');
|
|
}
|
|
};
|
|
|
|
const copyBillOfMaterials = async () => {
|
|
if (!job.billOfMaterials?.length) return;
|
|
|
|
const text = job.billOfMaterials
|
|
.map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
|
|
.join('\n');
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
setCopyingBom(true);
|
|
toast({
|
|
title: "Copied!",
|
|
description: "Bill of materials copied to clipboard",
|
|
duration: 2000,
|
|
});
|
|
setTimeout(() => setCopyingBom(false), 1000);
|
|
} catch (err) {
|
|
toast({
|
|
title: "Error",
|
|
description: "Failed to copy to clipboard",
|
|
variant: "destructive",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
};
|
|
|
|
const copyConsumedMaterials = async () => {
|
|
if (!job.consumedMaterials?.length) return;
|
|
|
|
const text = job.consumedMaterials
|
|
.map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
|
|
.join('\n');
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
setCopyingConsumed(true);
|
|
toast({
|
|
title: "Copied!",
|
|
description: "Consumed materials copied to clipboard",
|
|
duration: 2000,
|
|
});
|
|
setTimeout(() => setCopyingConsumed(false), 1000);
|
|
} catch (err) {
|
|
toast({
|
|
title: "Error",
|
|
description: "Failed to copy to clipboard",
|
|
variant: "destructive",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className={`bg-gray-900 border-gray-700 text-white ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
|
|
<CardHeader>
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<CardTitle className="text-blue-400">{job.outputItem}</CardTitle>
|
|
<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 relative group"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
copyBillOfMaterials();
|
|
}}
|
|
>
|
|
{copyingBom ? (
|
|
<Check className="w-4 h-4 text-green-400 absolute transition-opacity" />
|
|
) : (
|
|
<Package className="w-4 h-4 text-blue-400" />
|
|
)}
|
|
<span className="sr-only">Copy bill of 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-blue-400">Bill of Materials (click to copy)</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 relative group"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
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">
|
|
Quantity: {job.outputQuantity.toLocaleString()}
|
|
<span className="ml-4">
|
|
Produced: {
|
|
isEditingProduced && job.status !== 'Closed' ? (
|
|
<Input
|
|
type="number"
|
|
value={producedValue}
|
|
onChange={(e) => setProducedValue(e.target.value)}
|
|
onBlur={handleProducedUpdate}
|
|
onKeyDown={handleProducedKeyPress}
|
|
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
|
|
min="0"
|
|
autoFocus
|
|
/>
|
|
) : (
|
|
<span
|
|
onClick={() => job.status !== 'Closed' && setIsEditingProduced(true)}
|
|
className={job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : undefined}
|
|
title={job.status !== 'Closed' ? "Click to edit" : undefined}
|
|
>
|
|
{(job.produced || 0).toLocaleString()}
|
|
</span>
|
|
)
|
|
}
|
|
</span>
|
|
<span className="ml-4">
|
|
Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onEdit(job)}
|
|
className="border-gray-600 hover:bg-gray-800"
|
|
>
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={() => onDelete(job.id)}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</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}
|
|
</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="grid grid-cols-3 gap-4 pt-4 border-t border-gray-700">
|
|
<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>
|
|
{job.projectedCost > 0 && (
|
|
<div className="text-xs text-gray-400">
|
|
vs Projected: {formatISK(job.projectedCost)}
|
|
<Badge
|
|
variant={totalExpenditure <= job.projectedCost ? 'default' : 'destructive'}
|
|
className="ml-1 text-xs"
|
|
>
|
|
{((totalExpenditure / job.projectedCost) * 100).toFixed(1)}%
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="flex items-center justify-center gap-1 text-green-400">
|
|
<TrendingUp className="w-4 h-4" />
|
|
<span className="text-sm">Income</span>
|
|
</div>
|
|
<div className="font-semibold">{formatISK(totalIncome)}</div>
|
|
{job.projectedRevenue > 0 && (
|
|
<div className="text-xs text-gray-400">
|
|
vs Projected: {formatISK(job.projectedRevenue)}
|
|
<Badge
|
|
variant={totalIncome >= job.projectedRevenue ? 'default' : 'destructive'}
|
|
className="ml-1 text-xs"
|
|
>
|
|
{((totalIncome / job.projectedRevenue) * 100).toFixed(1)}%
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="text-center">
|
|
<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'}`}>
|
|
{formatISK(profit)}
|
|
<Badge variant={profit >= 0 ? 'default' : 'destructive'} className="ml-1 text-xs">
|
|
{margin.toFixed(1)}%
|
|
</Badge>
|
|
</div>
|
|
{job.projectedRevenue > 0 && job.projectedCost > 0 && (
|
|
<div className="text-xs text-gray-400">
|
|
vs Projected: {formatISK(job.projectedRevenue - job.projectedCost)}
|
|
<Badge
|
|
variant={profit >= (job.projectedRevenue - job.projectedCost) ? 'default' : 'destructive'}
|
|
className="ml-1 text-xs"
|
|
>
|
|
{((profit / (job.projectedRevenue - job.projectedCost)) * 100).toFixed(1)}%
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default JobCard;
|