dave/eve-industrializer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Make job fields editable, add status

Browse Source 
-   Allow editing of job fields.
-   Use ISO8601 date format.
-   Add job status with predefined states.
This commit is contained in:
gpt-engineer-app[bot]
2025-07-04 12:36:50 +00:00
parent 7a535639fc
commit 0a9ce41a74
3 changed files with 155 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/JobCard.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Calendar, Factory, TrendingUp, TrendingDown } from 'lucide-react';
import { Calendar, Factory, TrendingUp, TrendingDown, Clock } from 'lucide-react';
import { Job } from '@/services/jobService';
import { formatISK } from '@/utils/priceUtils';
@@ -20,15 +20,44 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
const itemsSold = job.income.reduce((sum, tx) => sum + tx.quantity, 0);
const daysSinceStart = Math.max(1, Math.ceil((Date.now() - job.dates.saleStart.getTime()) / (1000 * 60 * 60 * 24)));
const itemsPerDay = itemsSold / daysSinceStart;
const saleStartTime = job.dates.saleStart?.getTime();
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 'Transporting Materials': return 'bg-yellow-600';
case 'Running': return 'bg-blue-600';
case 'Done': return 'bg-green-600';
case 'Selling': return 'bg-purple-600';
case 'Closed': return 'bg-gray-800';
default: return 'bg-gray-600';
}
};
const formatDateTime = (date: Date | null) => {
if (!date) return 'Not set';
return date.toLocaleString('en-CA', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
}).replace(',', '');
};
return (
<Card className="bg-gray-900 border-gray-700 text-white">
<CardHeader>
<div className="flex justify-between items-start">
<div>
<CardTitle className="text-blue-400">{job.outputItem.name}</CardTitle>
<div className="flex items-center gap-2 mb-2">
<CardTitle className="text-blue-400">{job.outputItem.name}</CardTitle>
<Badge className={`${getStatusColor(job.status)} text-white`}>
{job.status}
</Badge>
</div>
<p className="text-gray-400">Quantity: {job.outputItem.quantity.toLocaleString()}</p>
</div>
<div className="flex gap-2">
@@ -51,27 +80,34 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
</div>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-gray-400">
<Calendar className="w-4 h-4" />
Created: {job.dates.creation.toLocaleDateString()}
</div>
<div className="flex items-center gap-2 text-sm text-gray-400">
<Factory className="w-4 h-4" />
Facility: {job.facilityId}
</div>
<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.dates.creation)}
</div>
<div className="space-y-2">
<div className="text-sm text-gray-400">
Sale Period: {job.dates.saleStart.toLocaleDateString()} - {job.dates.saleEnd.toLocaleDateString()}
</div>
<div className="text-sm text-gray-400">
Items/Day: {itemsPerDay.toFixed(2)}
</div>
<div className="flex items-center gap-2 text-sm text-gray-400">
<Clock className="w-4 h-4" />
Start: {formatDateTime(job.dates.start)}
</div>
<div className="flex items-center gap-2 text-sm text-gray-400">
<Factory className="w-4 h-4" />
Facility: {job.facilityId}
</div>
</div>
{job.dates.saleStart && (
<div className="space-y-2">
<div className="text-sm text-gray-400">
Sale Period: {formatDateTime(job.dates.saleStart)} - {formatDateTime(job.dates.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">