diff --git a/frontend/src/components/JobCard.tsx b/frontend/src/components/JobCard.tsx index a671197..2afdeb2 100644 --- a/frontend/src/components/JobCard.tsx +++ b/frontend/src/components/JobCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +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'; @@ -6,14 +6,18 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/h import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Package, Wrench } from 'lucide-react'; import { formatISK } from '@/utils/priceUtils'; import { IndJob } from '@/lib/types'; +import { Input } from '@/components/ui/input'; interface JobCardProps { job: IndJob; onEdit: (job: any) => void; onDelete: (jobId: string) => void; + onUpdateProduced?: (jobId: string, produced: number) => void; } -const JobCard: React.FC = ({ job, onEdit, onDelete }) => { +const JobCard: React.FC = ({ job, onEdit, onDelete, onUpdateProduced }) => { + const [isEditingProduced, setIsEditingProduced] = useState(false); + const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0'); const totalExpenditure = job.expenditures.reduce((sum, tx) => sum + tx.totalPrice, 0); const totalIncome = job.income.reduce((sum, tx) => sum + tx.totalPrice, 0); const profit = totalIncome - totalExpenditure; @@ -47,6 +51,26 @@ const JobCard: React.FC = ({ job, onEdit, onDelete }) => { }).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'); + } + }; + return ( @@ -102,7 +126,35 @@ const JobCard: React.FC = ({ job, onEdit, onDelete }) => { )} -

Quantity: {job.outputQuantity.toLocaleString()}

+

+ Quantity: {job.outputQuantity.toLocaleString()} + {job.status !== 'Planned' && job.status !== 'Closed' && ( + + Produced: { + isEditingProduced ? ( + 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 + /> + ) : ( + setIsEditingProduced(true)} + className="cursor-pointer hover:text-blue-400" + title="Click to edit" + > + {(job.produced || 0).toLocaleString()} + + ) + } + + )} +

))}