feat: Implement Eve Online job manager
Create a basic application for managing Eve Online industry jobs, including job details, transaction history, and profit calculations. Implement data ingestion via a form with paste functionality for transaction data.
This commit is contained in:
gpt-engineer-app[bot]
105
src/components/JobCard.tsx
Normal file
105
src/components/JobCard.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
|
||||
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 { Job } from '@/services/jobService';
|
||||
import { formatISK } from '@/utils/priceUtils';
|
||||
|
||||
interface JobCardProps {
|
||||
job: Job;
|
||||
onEdit: (job: Job) => void;
|
||||
onDelete: (jobId: string) => void;
|
||||
}
|
||||
|
||||
const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
|
||||
const totalExpenditure = job.expenditures.reduce((sum, tx) => sum + Math.abs(tx.totalAmount), 0);
|
||||
const totalIncome = job.income.reduce((sum, tx) => sum + tx.totalAmount, 0);
|
||||
const profit = totalIncome - totalExpenditure;
|
||||
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;
|
||||
|
||||
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>
|
||||
<p className="text-gray-400">Quantity: {job.outputItem.quantity.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onEdit(job)}
|
||||
className="border-gray-600 hover:bg-gray-800"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => onDelete(job.id)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</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">
|
||||
<TrendingDown className="w-4 h-4" />
|
||||
<span className="text-sm">Expenditure</span>
|
||||
</div>
|
||||
<div className="font-semibold">{formatISK(totalExpenditure)}</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">{formatISK(totalIncome)}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-gray-400">Profit</div>
|
||||
<div className={`font-semibold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{formatISK(profit)}
|
||||
</div>
|
||||
<Badge variant={profit >= 0 ? 'default' : 'destructive'} className="text-xs">
|
||||
{margin.toFixed(1)}%
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobCard;
|
||||
218
src/components/JobForm.tsx
Normal file
218
src/components/JobForm.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Job, Facility } from '@/services/jobService';
|
||||
import { facilityService } from '@/services/facilityService';
|
||||
|
||||
interface JobFormProps {
|
||||
job?: Job;
|
||||
onSubmit: (job: Omit<Job, 'id' | 'expenditures' | 'income'>) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
|
||||
const [facilities, setFacilities] = useState<Facility[]>([]);
|
||||
const [formData, setFormData] = useState({
|
||||
outputItem: {
|
||||
id: job?.outputItem.id || '',
|
||||
name: job?.outputItem.name || '',
|
||||
quantity: job?.outputItem.quantity || 0
|
||||
},
|
||||
dates: {
|
||||
creation: job?.dates.creation ? job.dates.creation.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
|
||||
start: job?.dates.start ? job.dates.start.toISOString().split('T')[0] : '',
|
||||
end: job?.dates.end ? job.dates.end.toISOString().split('T')[0] : '',
|
||||
saleStart: job?.dates.saleStart ? job.dates.saleStart.toISOString().split('T')[0] : '',
|
||||
saleEnd: job?.dates.saleEnd ? job.dates.saleEnd.toISOString().split('T')[0] : ''
|
||||
},
|
||||
facilityId: job?.facilityId || ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadFacilities = async () => {
|
||||
try {
|
||||
const fetchedFacilities = await facilityService.getFacilities();
|
||||
setFacilities(fetchedFacilities);
|
||||
} catch (error) {
|
||||
console.error('Error loading facilities:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadFacilities();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
onSubmit({
|
||||
outputItem: formData.outputItem,
|
||||
dates: {
|
||||
creation: new Date(formData.dates.creation),
|
||||
start: new Date(formData.dates.start),
|
||||
end: new Date(formData.dates.end),
|
||||
saleStart: new Date(formData.dates.saleStart),
|
||||
saleEnd: new Date(formData.dates.saleEnd)
|
||||
},
|
||||
facilityId: formData.facilityId
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-gray-900 border-gray-700 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-400">
|
||||
{job ? 'Edit Job' : 'Create New Job'}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="itemName" className="text-gray-300">Output Item Name</Label>
|
||||
<Input
|
||||
id="itemName"
|
||||
value={formData.outputItem.name}
|
||||
onChange={(e) => setFormData({
|
||||
...formData,
|
||||
outputItem: { ...formData.outputItem, name: e.target.value }
|
||||
})}
|
||||
className="bg-gray-800 border-gray-600 text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="itemQuantity" className="text-gray-300">Quantity</Label>
|
||||
<Input
|
||||
id="itemQuantity"
|
||||
type="number"
|
||||
value={formData.outputItem.quantity}
|
||||
onChange={(e) => setFormData({
|
||||
...formData,
|
||||
outputItem: { ...formData.outputItem, quantity: parseInt(e.target.value) || 0 }
|
||||
})}
|
||||
className="bg-gray-800 border-gray-600 text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="facility" className="text-gray-300">Facility</Label>
|
||||
<Select
|
||||
value={formData.facilityId}
|
||||
onValueChange={(value) => setFormData({ ...formData, facilityId: value })}
|
||||
>
|
||||
<SelectTrigger className="bg-gray-800 border-gray-600 text-white">
|
||||
<SelectValue placeholder="Select a facility" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-gray-800 border-gray-600">
|
||||
{facilities.map((facility) => (
|
||||
<SelectItem key={facility.id} value={facility.id} className="text-white">
|
||||
{facility.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="creationDate" className="text-gray-300">Creation Date</Label>
|
||||
<Input
|
||||
id="creationDate"
|
||||
type="date"
|
||||
value={formData.dates.creation}
|
||||
onChange={(e) => setFormData({
|
||||
...formData,
|
||||
dates: { ...formData.dates, creation: e.target.value }
|
||||
})}
|
||||
className="bg-gray-800 border-gray-600 text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="startDate" className="text-gray-300">Start Date</Label>
|
||||
<Input
|
||||
id="startDate"
|
||||
type="date"
|
||||
value={formData.dates.start}
|
||||
onChange={(e) => setFormData({
|
||||
...formData,
|
||||
dates: { ...formData.dates, start: e.target.value }
|
||||
})}
|
||||
className="bg-gray-800 border-gray-600 text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="endDate" className="text-gray-300">End Date</Label>
|
||||
<Input
|
||||
id="endDate"
|
||||
type="date"
|
||||
value={formData.dates.end}
|
||||
onChange={(e) => setFormData({
|
||||
...formData,
|
||||
dates: { ...formData.dates, end: e.target.value }
|
||||
})}
|
||||
className="bg-gray-800 border-gray-600 text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="saleStartDate" className="text-gray-300">Sale Start Date</Label>
|
||||
<Input
|
||||
id="saleStartDate"
|
||||
type="date"
|
||||
value={formData.dates.saleStart}
|
||||
onChange={(e) => setFormData({
|
||||
...formData,
|
||||
dates: { ...formData.dates, saleStart: e.target.value }
|
||||
})}
|
||||
className="bg-gray-800 border-gray-600 text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="saleEndDate" className="text-gray-300">Sale End Date</Label>
|
||||
<Input
|
||||
id="saleEndDate"
|
||||
type="date"
|
||||
value={formData.dates.saleEnd}
|
||||
onChange={(e) => setFormData({
|
||||
...formData,
|
||||
dates: { ...formData.dates, saleEnd: e.target.value }
|
||||
})}
|
||||
className="bg-gray-800 border-gray-600 text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700">
|
||||
{job ? 'Update Job' : 'Create Job'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
className="border-gray-600 hover:bg-gray-800"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobForm;
|
||||
154
src/components/TransactionForm.tsx
Normal file
154
src/components/TransactionForm.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { parseTransactionLine, formatISK } from '@/utils/priceUtils';
|
||||
import { Transaction } from '@/services/jobService';
|
||||
import { Upload, Check, X } from 'lucide-react';
|
||||
|
||||
interface TransactionFormProps {
|
||||
jobId: string;
|
||||
onTransactionsAdded: (transactions: Transaction[], type: 'expenditure' | 'income') => void;
|
||||
}
|
||||
|
||||
const TransactionForm: React.FC<TransactionFormProps> = ({ jobId, onTransactionsAdded }) => {
|
||||
const [pastedData, setPastedData] = useState('');
|
||||
const [parsedTransactions, setParsedTransactions] = useState<Transaction[]>([]);
|
||||
const [transactionType, setTransactionType] = useState<'expenditure' | 'income'>('expenditure');
|
||||
|
||||
const handlePaste = (value: string) => {
|
||||
setPastedData(value);
|
||||
|
||||
const lines = value.trim().split('\n');
|
||||
const transactions: Transaction[] = [];
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
const parsed = parseTransactionLine(line);
|
||||
if (parsed) {
|
||||
transactions.push({
|
||||
id: `temp-${index}`,
|
||||
...parsed
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
setParsedTransactions(transactions);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (parsedTransactions.length > 0) {
|
||||
onTransactionsAdded(parsedTransactions, transactionType);
|
||||
setPastedData('');
|
||||
setParsedTransactions([]);
|
||||
}
|
||||
};
|
||||
|
||||
const totalAmount = parsedTransactions.reduce((sum, tx) => sum + Math.abs(tx.totalAmount), 0);
|
||||
|
||||
return (
|
||||
<Card className="bg-gray-900 border-gray-700 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-400">Add Transactions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Tabs value={transactionType} onValueChange={(value) => setTransactionType(value as 'expenditure' | 'income')}>
|
||||
<TabsList className="grid w-full grid-cols-2 bg-gray-800">
|
||||
<TabsTrigger value="expenditure" className="data-[state=active]:bg-red-600">
|
||||
Expenditures
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="income" className="data-[state=active]:bg-green-600">
|
||||
Income
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value={transactionType} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-300">
|
||||
Paste EVE transaction data (Ctrl+V):
|
||||
</label>
|
||||
<Textarea
|
||||
value={pastedData}
|
||||
onChange={(e) => handlePaste(e.target.value)}
|
||||
placeholder="Paste your EVE transaction data here..."
|
||||
className="min-h-32 bg-gray-800 border-gray-600 text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{parsedTransactions.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="outline" className="text-blue-400 border-blue-400">
|
||||
{parsedTransactions.length} transactions parsed
|
||||
</Badge>
|
||||
<Badge variant={transactionType === 'expenditure' ? 'destructive' : 'default'}>
|
||||
Total: {formatISK(totalAmount)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="max-h-64 overflow-y-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-gray-700">
|
||||
<TableHead className="text-gray-300">Date</TableHead>
|
||||
<TableHead className="text-gray-300">Item</TableHead>
|
||||
<TableHead className="text-gray-300">Qty</TableHead>
|
||||
<TableHead className="text-gray-300">Unit Price</TableHead>
|
||||
<TableHead className="text-gray-300">Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{parsedTransactions.map((tx, index) => (
|
||||
<TableRow key={index} className="border-gray-700">
|
||||
<TableCell className="text-gray-300">
|
||||
{tx.date.toLocaleDateString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-white">{tx.itemName}</TableCell>
|
||||
<TableCell className="text-gray-300">
|
||||
{tx.quantity.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-300">
|
||||
{formatISK(tx.unitPrice)}
|
||||
</TableCell>
|
||||
<TableCell className={`font-semibold ${transactionType === 'expenditure' ? 'text-red-400' : 'text-green-400'}`}>
|
||||
{formatISK(Math.abs(tx.totalAmount))}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
Add Transactions
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setPastedData('');
|
||||
setParsedTransactions([]);
|
||||
}}
|
||||
className="border-gray-600 hover:bg-gray-800"
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionForm;
|
||||
Reference in New Issue
Block a user