Sync
This commit is contained in:
@@ -1,14 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
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, Import, Upload, Check } from 'lucide-react';
|
||||
import { formatISK } from '@/utils/priceUtils';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { IndJob } from '@/lib/types';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
import JobCardHeader from './JobCardHeader';
|
||||
import JobCardDetails from './JobCardDetails';
|
||||
import JobCardMetrics from './JobCardMetrics';
|
||||
|
||||
interface JobCardProps {
|
||||
job: IndJob;
|
||||
@@ -28,398 +24,42 @@ const JobCard: React.FC<JobCardProps> = ({
|
||||
isTracked = false
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const [isEditingProduced, setIsEditingProduced] = useState(false);
|
||||
const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
|
||||
const [copyingBom, setCopyingBom] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
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()
|
||||
);
|
||||
|
||||
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 importBillOfMaterials = async () => {
|
||||
if (!onImportBOM) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Import functionality is not available",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const clipboardText = await navigator.clipboard.readText();
|
||||
const lines = clipboardText.split('\n').filter(line => line.trim());
|
||||
const items: { name: string; quantity: number }[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
const parts = line.trim().split(/[\s\t]+/);
|
||||
if (parts.length >= 2) {
|
||||
const name = parts.slice(0, -1).join(' ');
|
||||
const quantityPart = parts[parts.length - 1].replace(/,/g, '');
|
||||
const quantity = parseInt(quantityPart);
|
||||
if (name && !isNaN(quantity)) {
|
||||
items.push({ name, quantity });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (items.length > 0) {
|
||||
onImportBOM(job.id, items);
|
||||
toast({
|
||||
title: "BOM Imported",
|
||||
description: `Successfully imported ${items.length} items`,
|
||||
duration: 3000,
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "No Valid Items",
|
||||
description: "No valid items found in clipboard. Format: 'Item Name Quantity' per line",
|
||||
variant: "destructive",
|
||||
duration: 3000,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to read from clipboard",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const exportBillOfMaterials = async () => {
|
||||
if (!job.billOfMaterials?.length) {
|
||||
toast({
|
||||
title: "Nothing to Export",
|
||||
description: "No bill of materials found for this job",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
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: "Exported!",
|
||||
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 handleCardClick = () => {
|
||||
navigate(`/${job.id}`);
|
||||
};
|
||||
|
||||
const handleProducedClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (job.status !== 'Closed') {
|
||||
setIsEditingProduced(true);
|
||||
const getStatusBackgroundColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'Planned': return 'bg-gray-600/20';
|
||||
case 'Acquisition': return 'bg-yellow-600/20';
|
||||
case 'Running': return 'bg-blue-600/20';
|
||||
case 'Done': return 'bg-purple-600/20';
|
||||
case 'Selling': return 'bg-orange-600/20';
|
||||
case 'Closed': return 'bg-green-600/20';
|
||||
case 'Tracked': return 'bg-cyan-600/20';
|
||||
default: return 'bg-gray-600/20';
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onEdit(job);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onDelete(job.id);
|
||||
};
|
||||
|
||||
const handleImportClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
importBillOfMaterials();
|
||||
};
|
||||
|
||||
const handleExportClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
exportBillOfMaterials();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}
|
||||
className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''} ${getStatusBackgroundColor(job.status)}`}
|
||||
onClick={handleCardClick}
|
||||
>
|
||||
<CardHeader className="flex-shrink-0">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<CardTitle className="text-blue-400 truncate">{job.outputItem}</CardTitle>
|
||||
<Badge className={`${getStatusColor(job.status)} text-white flex-shrink-0`}>
|
||||
{job.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">
|
||||
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}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
|
||||
min="0"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={handleProducedClick}
|
||||
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 flex-col gap-2 flex-shrink-0">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleEditClick}
|
||||
className="border-gray-600 hover:bg-gray-800"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleDeleteClick}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-1 justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1 h-6 w-6"
|
||||
onClick={handleImportClick}
|
||||
title="Import BOM from clipboard"
|
||||
>
|
||||
<Import className="w-4 h-4 text-blue-400" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1 h-6 w-6"
|
||||
onClick={handleExportClick}
|
||||
disabled={!job.billOfMaterials?.length}
|
||||
title="Export BOM to clipboard"
|
||||
>
|
||||
{copyingBom ? (
|
||||
<Check className="w-4 h-4 text-green-400" />
|
||||
) : (
|
||||
<Upload className="w-4 h-4 text-blue-400" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<JobCardHeader
|
||||
job={job}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
onUpdateProduced={onUpdateProduced}
|
||||
onImportBOM={onImportBOM}
|
||||
/>
|
||||
</CardHeader>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{job.billOfMaterials && job.billOfMaterials.length > 0 && (
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<div className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400">
|
||||
BOM: {job.billOfMaterials.length} items (hover to view)
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<JobCardDetails job={job} />
|
||||
<div className="flex-1" />
|
||||
|
||||
<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 text-sm">{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 text-sm">{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 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)}%
|
||||
</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>
|
||||
<JobCardMetrics job={job} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
177
frontend/src/components/JobCardDetails.tsx
Normal file
177
frontend/src/components/JobCardDetails.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { useState } from 'react';
|
||||
import { Calendar, Factory, Clock } from 'lucide-react';
|
||||
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { IndJob } from '@/lib/types';
|
||||
import { useJobs } from '@/hooks/useDataService';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
|
||||
interface JobCardDetailsProps {
|
||||
job: IndJob;
|
||||
}
|
||||
|
||||
const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
|
||||
const [editingField, setEditingField] = useState<string | null>(null);
|
||||
const [tempValues, setTempValues] = useState<{ [key: string]: string }>({});
|
||||
const { updateJob } = useJobs();
|
||||
const { toast } = useToast();
|
||||
|
||||
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 handleFieldClick = (fieldName: string, currentValue: string | null, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setEditingField(fieldName);
|
||||
setTempValues({ ...tempValues, [fieldName]: currentValue || '' });
|
||||
};
|
||||
|
||||
const handleFieldUpdate = async (fieldName: string, value: string) => {
|
||||
try {
|
||||
const dateValue = value ? new Date(value).toISOString() : null;
|
||||
await updateJob(job.id, { [fieldName]: dateValue });
|
||||
setEditingField(null);
|
||||
toast({
|
||||
title: "Updated",
|
||||
description: `${fieldName} updated successfully`,
|
||||
duration: 2000,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error updating field:', error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to update field",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = (fieldName: string, e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleFieldUpdate(fieldName, tempValues[fieldName]);
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingField(null);
|
||||
}
|
||||
};
|
||||
|
||||
const sortedIncome = [...job.income].sort((a, b) =>
|
||||
new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
);
|
||||
|
||||
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 DateField = ({ label, value, fieldName, icon }: { label: string; value: string | null; fieldName: string; icon: React.ReactNode }) => (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
{icon}
|
||||
<span className="w-16">{label}:</span>
|
||||
{editingField === fieldName ? (
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={tempValues[fieldName] || ''}
|
||||
onChange={(e) => setTempValues({ ...tempValues, [fieldName]: e.target.value })}
|
||||
onBlur={() => handleFieldUpdate(fieldName, tempValues[fieldName])}
|
||||
onKeyDown={(e) => handleKeyPress(fieldName, e)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="h-6 px-2 py-1 bg-gray-800 border-gray-600 text-white text-xs"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={(e) => handleFieldClick(fieldName, value, e)}
|
||||
className="cursor-pointer hover:text-blue-400 flex-1"
|
||||
title="Click to edit"
|
||||
>
|
||||
{formatDateTime(value)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Factory className="w-4 h-4" />
|
||||
<span className="w-16">Job ID:</span>
|
||||
<span>{job.id}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span className="w-16">Created:</span>
|
||||
<span>{formatDateTime(job.created)}</span>
|
||||
</div>
|
||||
|
||||
<DateField
|
||||
label="Start"
|
||||
value={job.jobStart}
|
||||
fieldName="jobStart"
|
||||
icon={<Clock className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<DateField
|
||||
label="End"
|
||||
value={job.jobEnd}
|
||||
fieldName="jobEnd"
|
||||
icon={<Clock className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<DateField
|
||||
label="Sale Start"
|
||||
value={job.saleStart}
|
||||
fieldName="saleStart"
|
||||
icon={<Calendar className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<DateField
|
||||
label="Sale End"
|
||||
value={job.saleEnd}
|
||||
fieldName="saleEnd"
|
||||
icon={<Calendar className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{itemsPerDay > 0 && (
|
||||
<div className="text-sm text-gray-400 mt-2">
|
||||
Items/Day: {itemsPerDay.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{job.billOfMaterials && job.billOfMaterials.length > 0 && (
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<div className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400">
|
||||
BOM: {job.billOfMaterials.length} items (hover to view)
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="w-80 bg-gray-800/50 border-gray-600 text-white">
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-semibold text-blue-400">Bill of Materials</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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobCardDetails;
|
||||
345
frontend/src/components/JobCardHeader.tsx
Normal file
345
frontend/src/components/JobCardHeader.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
import { useState } from 'react';
|
||||
import { CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Import, Upload, Check, Copy } from 'lucide-react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { IndJob } from '@/lib/types';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useJobs } from '@/hooks/useDataService';
|
||||
|
||||
interface JobCardHeaderProps {
|
||||
job: IndJob;
|
||||
onEdit: (job: any) => void;
|
||||
onDelete: (jobId: string) => void;
|
||||
onUpdateProduced?: (jobId: string, produced: number) => void;
|
||||
onImportBOM?: (jobId: string, items: { name: string; quantity: number }[]) => void;
|
||||
}
|
||||
|
||||
const JobCardHeader: React.FC<JobCardHeaderProps> = ({
|
||||
job,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onUpdateProduced,
|
||||
onImportBOM
|
||||
}) => {
|
||||
const [isEditingProduced, setIsEditingProduced] = useState(false);
|
||||
const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
|
||||
const [copyingBom, setCopyingBom] = useState(false);
|
||||
const [copyingName, setCopyingName] = useState(false);
|
||||
const { toast } = useToast();
|
||||
const { updateJob } = useJobs();
|
||||
|
||||
const statuses = ['Planned', 'Acquisition', 'Running', 'Done', 'Selling', 'Closed', 'Tracked'];
|
||||
|
||||
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 handleStatusChange = async (newStatus: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await updateJob(job.id, { status: newStatus });
|
||||
toast({
|
||||
title: "Status Updated",
|
||||
description: `Job status changed to ${newStatus}`,
|
||||
duration: 2000,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error updating status:', error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to update status",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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 importBillOfMaterials = async () => {
|
||||
if (!onImportBOM) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Import functionality is not available",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const clipboardText = await navigator.clipboard.readText();
|
||||
const lines = clipboardText.split('\n').filter(line => line.trim());
|
||||
const items: { name: string; quantity: number }[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
const parts = line.trim().split(/[\s\t]+/);
|
||||
if (parts.length >= 2) {
|
||||
const name = parts.slice(0, -1).join(' ');
|
||||
const quantityPart = parts[parts.length - 1].replace(/,/g, '');
|
||||
const quantity = parseInt(quantityPart);
|
||||
if (name && !isNaN(quantity)) {
|
||||
items.push({ name, quantity });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (items.length > 0) {
|
||||
onImportBOM(job.id, items);
|
||||
toast({
|
||||
title: "BOM Imported",
|
||||
description: `Successfully imported ${items.length} items`,
|
||||
duration: 3000,
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "No Valid Items",
|
||||
description: "No valid items found in clipboard. Format: 'Item Name Quantity' per line",
|
||||
variant: "destructive",
|
||||
duration: 3000,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to read from clipboard",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const exportBillOfMaterials = async () => {
|
||||
if (!job.billOfMaterials?.length) {
|
||||
toast({
|
||||
title: "Nothing to Export",
|
||||
description: "No bill of materials found for this job",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
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: "Exported!",
|
||||
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 handleJobNameClick = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await navigator.clipboard.writeText(job.outputItem);
|
||||
setCopyingName(true);
|
||||
toast({
|
||||
title: "Copied!",
|
||||
description: "Job name copied to clipboard",
|
||||
duration: 2000,
|
||||
});
|
||||
setTimeout(() => setCopyingName(false), 1000);
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to copy to clipboard",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleProducedClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (job.status !== 'Closed') {
|
||||
setIsEditingProduced(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onEdit(job);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onDelete(job.id);
|
||||
};
|
||||
|
||||
const handleImportClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
importBillOfMaterials();
|
||||
};
|
||||
|
||||
const handleExportClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
exportBillOfMaterials();
|
||||
};
|
||||
|
||||
const sortedIncome = [...job.income].sort((a, b) =>
|
||||
new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
);
|
||||
const itemsSold = sortedIncome.reduce((sum, tx) => sum + tx.quantity, 0);
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<CardTitle
|
||||
className="text-blue-400 truncate cursor-pointer hover:text-blue-300 transition-colors flex items-center gap-1"
|
||||
onClick={handleJobNameClick}
|
||||
title="Click to copy job name"
|
||||
>
|
||||
{job.outputItem}
|
||||
{copyingName && <Copy className="w-4 h-4 text-green-400" />}
|
||||
</CardTitle>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">
|
||||
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}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
|
||||
min="0"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={handleProducedClick}
|
||||
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 flex-col gap-2 flex-shrink-0 items-end">
|
||||
<div className="flex items-center gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}>
|
||||
{job.status}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="bg-gray-800/50 border-gray-600 text-white">
|
||||
{statuses.map((status) => (
|
||||
<DropdownMenuItem
|
||||
key={status}
|
||||
onClick={(e) => handleStatusChange(status, e)}
|
||||
className="hover:bg-gray-700 cursor-pointer"
|
||||
>
|
||||
<div className={`w-3 h-3 rounded-sm ${getStatusColor(status)} mr-2`} />
|
||||
{status}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleEditClick}
|
||||
className="border-gray-600 hover:bg-gray-800"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleDeleteClick}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1 h-6 w-6"
|
||||
onClick={handleImportClick}
|
||||
title="Import BOM from clipboard"
|
||||
>
|
||||
<Import className="w-4 h-4 text-blue-400" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="p-1 h-6 w-6"
|
||||
onClick={handleExportClick}
|
||||
disabled={!job.billOfMaterials?.length}
|
||||
title="Export BOM to clipboard"
|
||||
>
|
||||
{copyingBom ? (
|
||||
<Check className="w-4 h-4 text-green-400" />
|
||||
) : (
|
||||
<Upload className="w-4 h-4 text-blue-400" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobCardHeader;
|
||||
146
frontend/src/components/JobCardMetrics.tsx
Normal file
146
frontend/src/components/JobCardMetrics.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { formatISK, parseISKAmount } from '@/utils/priceUtils';
|
||||
import { IndJob } from '@/lib/types';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useJobs } from '@/hooks/useDataService';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
|
||||
interface JobCardMetricsProps {
|
||||
job: IndJob;
|
||||
}
|
||||
|
||||
const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
|
||||
const [editingField, setEditingField] = useState<string | null>(null);
|
||||
const [tempValues, setTempValues] = useState<{ [key: string]: string }>({});
|
||||
const { updateJob } = useJobs();
|
||||
const { toast } = useToast();
|
||||
|
||||
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()
|
||||
);
|
||||
|
||||
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 handleFieldClick = (fieldName: string, currentValue: number, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setEditingField(fieldName);
|
||||
setTempValues({ ...tempValues, [fieldName]: formatISK(currentValue) });
|
||||
};
|
||||
|
||||
const handleFieldUpdate = async (fieldName: string, value: string) => {
|
||||
try {
|
||||
const numericValue = parseISKAmount(value);
|
||||
await updateJob(job.id, { [fieldName]: numericValue });
|
||||
setEditingField(null);
|
||||
toast({
|
||||
title: "Updated",
|
||||
description: `${fieldName} updated successfully`,
|
||||
duration: 2000,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error updating field:', error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to update field",
|
||||
variant: "destructive",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = (fieldName: string, e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleFieldUpdate(fieldName, tempValues[fieldName]);
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingField(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-3 pt-4 border-t border-gray-700/50 flex-shrink-0">
|
||||
<div className="text-center space-y-1">
|
||||
<div className="text-xs font-medium text-red-400 uppercase tracking-wide">Costs</div>
|
||||
<div className="text-lg font-bold text-red-400">{formatISK(totalExpenditure)}</div>
|
||||
{job.projectedCost > 0 && (
|
||||
<div className="text-xs text-gray-400">
|
||||
vs {editingField === 'projectedCost' ? (
|
||||
<Input
|
||||
value={tempValues.projectedCost || ''}
|
||||
onChange={(e) => setTempValues({ ...tempValues, projectedCost: e.target.value })}
|
||||
onBlur={() => handleFieldUpdate('projectedCost', tempValues.projectedCost)}
|
||||
onKeyDown={(e) => handleKeyPress('projectedCost', e)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={(e) => handleFieldClick('projectedCost', job.projectedCost, e)}
|
||||
className="cursor-pointer hover:text-blue-400"
|
||||
title="Click to edit"
|
||||
>
|
||||
{formatISK(job.projectedCost)}
|
||||
</span>
|
||||
)}
|
||||
<div className={`text-xs font-medium ${totalExpenditure <= job.projectedCost ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{((totalExpenditure / job.projectedCost) * 100).toFixed(0)}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-center space-y-1">
|
||||
<div className="text-xs font-medium text-green-400 uppercase tracking-wide">Revenue</div>
|
||||
<div className="text-lg font-bold text-green-400">{formatISK(totalIncome)}</div>
|
||||
{job.projectedRevenue > 0 && (
|
||||
<div className="text-xs text-gray-400">
|
||||
vs {editingField === 'projectedRevenue' ? (
|
||||
<Input
|
||||
value={tempValues.projectedRevenue || ''}
|
||||
onChange={(e) => setTempValues({ ...tempValues, projectedRevenue: e.target.value })}
|
||||
onBlur={() => handleFieldUpdate('projectedRevenue', tempValues.projectedRevenue)}
|
||||
onKeyDown={(e) => handleKeyPress('projectedRevenue', e)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={(e) => handleFieldClick('projectedRevenue', job.projectedRevenue, e)}
|
||||
className="cursor-pointer hover:text-blue-400"
|
||||
title="Click to edit"
|
||||
>
|
||||
{formatISK(job.projectedRevenue)}
|
||||
</span>
|
||||
)}
|
||||
<div className={`text-xs font-medium ${totalIncome >= job.projectedRevenue ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{((totalIncome / job.projectedRevenue) * 100).toFixed(0)}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-center space-y-1">
|
||||
<div className="text-xs font-medium text-gray-300 uppercase tracking-wide">Profit</div>
|
||||
<div className={`text-lg font-bold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{formatISK(profit)}
|
||||
</div>
|
||||
<div className={`text-xs font-medium ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{margin.toFixed(1)}% margin
|
||||
</div>
|
||||
{job.projectedRevenue > 0 && job.projectedCost > 0 && (
|
||||
<div className="text-xs text-gray-400">
|
||||
vs {formatISK(job.projectedRevenue - job.projectedCost)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobCardMetrics;
|
||||
@@ -295,18 +295,18 @@ const Index = () => {
|
||||
{Object.entries(jobGroups).map(([status, statusJobs]) => (
|
||||
<div key={status} className="space-y-4">
|
||||
<div
|
||||
className="flex items-center gap-3 cursor-pointer select-none p-3 rounded-lg hover:bg-gray-800/50 transition-colors"
|
||||
className={`${getStatusColor(status)} rounded-lg cursor-pointer select-none transition-colors hover:opacity-90`}
|
||||
onClick={() => toggleGroup(status)}
|
||||
>
|
||||
<div className={`transform transition-transform text-xl text-gray-400 ${collapsedGroups[status] ? '' : 'rotate-90'}`}>
|
||||
▶
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<h3 className="text-xl font-semibold text-white flex items-center gap-3">
|
||||
<span>{status}</span>
|
||||
<span className="text-gray-200 text-lg">({statusJobs.length} jobs)</span>
|
||||
</h3>
|
||||
<div className={`text-white text-lg transition-transform ${collapsedGroups[status] ? '-rotate-90' : 'rotate-0'}`}>
|
||||
⌄
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white flex items-center gap-3">
|
||||
<Badge className={`${getStatusColor(status)} text-white px-3 py-1 text-base`}>
|
||||
{status}
|
||||
</Badge>
|
||||
<span className="text-gray-400 text-lg">({statusJobs.length} jobs)</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{!collapsedGroups[status] && (
|
||||
@@ -331,17 +331,18 @@ const Index = () => {
|
||||
{trackedJobs.length > 0 && (
|
||||
<div className="space-y-4 mt-8 pt-8 border-t border-gray-700">
|
||||
<div
|
||||
className="flex items-center gap-3 cursor-pointer select-none p-3 rounded-lg hover:bg-gray-800/50 transition-colors"
|
||||
className="bg-cyan-600 rounded-lg cursor-pointer select-none transition-colors hover:opacity-90"
|
||||
onClick={() => toggleGroup('Tracked')}
|
||||
>
|
||||
<div className={`transform transition-transform text-xl text-gray-400 ${collapsedGroups['Tracked'] ? '' : 'rotate-90'}`}>
|
||||
▶
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<h2 className="text-xl font-bold text-white flex items-center gap-3">
|
||||
<span>Tracked Transactions</span>
|
||||
<span className="text-gray-200 text-lg">({trackedJobs.length} jobs)</span>
|
||||
</h2>
|
||||
<div className={`text-white text-lg transition-transform ${collapsedGroups['Tracked'] ? '-rotate-90' : 'rotate-0'}`}>
|
||||
⌄
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white flex items-center gap-3">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-cyan-600"></span>
|
||||
Tracked Transactions
|
||||
<span className="text-gray-400 text-lg">({trackedJobs.length} jobs)</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{!collapsedGroups['Tracked'] && (
|
||||
|
||||
Reference in New Issue
Block a user