Make click on box copy BOM to clipboard

This commit is contained in:
2025-07-06 17:10:31 +02:00
parent 8c4ab2ba29
commit d9b77ea33c

View File

@@ -3,10 +3,11 @@ 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 } from 'lucide-react';
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;
@@ -19,6 +20,9 @@ interface JobCardProps {
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) =>
@@ -83,6 +87,58 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
}
};
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>
@@ -96,13 +152,26 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
{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
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</h4>
<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">
@@ -118,13 +187,26 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
{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
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</h4>
<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">