Make click on box copy BOM to clipboard
This commit is contained in:
@@ -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">
|
||||
|
Reference in New Issue
Block a user