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]
@@ -1,14 +1,15 @@
|
|||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>eve-job-tracker-pro</title>
|
<title>EVE Industry Manager</title>
|
||||||
<meta name="description" content="Lovable Generated Project" />
|
<meta name="description" content="Manage EVE Online industrial jobs and track profitability" />
|
||||||
<meta name="author" content="Lovable" />
|
<meta name="author" content="Lovable" />
|
||||||
|
|
||||||
<meta property="og:title" content="eve-job-tracker-pro" />
|
<meta property="og:title" content="EVE Industry Manager" />
|
||||||
<meta property="og:description" content="Lovable Generated Project" />
|
<meta property="og:description" content="Manage EVE Online industrial jobs and track profitability" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||||
|
|
||||||
|
|||||||
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;
|
||||||
@@ -1,11 +1,242 @@
|
|||||||
// Update this page (the content is just a fallback if you fail to update the page)
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Plus, Factory, TrendingUp, Briefcase } from 'lucide-react';
|
||||||
|
import { Job, Transaction, jobService } from '@/services/jobService';
|
||||||
|
import { formatISK } from '@/utils/priceUtils';
|
||||||
|
import JobCard from '@/components/JobCard';
|
||||||
|
import JobForm from '@/components/JobForm';
|
||||||
|
import TransactionForm from '@/components/TransactionForm';
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
|
const [jobs, setJobs] = useState<Job[]>([]);
|
||||||
|
const [showJobForm, setShowJobForm] = useState(false);
|
||||||
|
const [editingJob, setEditingJob] = useState<Job | null>(null);
|
||||||
|
const [selectedJob, setSelectedJob] = useState<Job | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadJobs();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadJobs = async () => {
|
||||||
|
try {
|
||||||
|
const fetchedJobs = await jobService.getJobs();
|
||||||
|
setJobs(fetchedJobs);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading jobs:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateJob = async (jobData: Omit<Job, 'id' | 'expenditures' | 'income'>) => {
|
||||||
|
try {
|
||||||
|
const newJob = await jobService.createJob(jobData);
|
||||||
|
setJobs([...jobs, newJob]);
|
||||||
|
setShowJobForm(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating job:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditJob = (job: Job) => {
|
||||||
|
setEditingJob(job);
|
||||||
|
setShowJobForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateJob = async (jobData: Omit<Job, 'id' | 'expenditures' | 'income'>) => {
|
||||||
|
if (!editingJob) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const updatedJob = await jobService.updateJob(editingJob.id, jobData);
|
||||||
|
setJobs(jobs.map(job => job.id === editingJob.id ? updatedJob : job));
|
||||||
|
setShowJobForm(false);
|
||||||
|
setEditingJob(null);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating job:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteJob = async (jobId: string) => {
|
||||||
|
if (confirm('Are you sure you want to delete this job?')) {
|
||||||
|
try {
|
||||||
|
await jobService.deleteJob(jobId);
|
||||||
|
setJobs(jobs.filter(job => job.id !== jobId));
|
||||||
|
if (selectedJob?.id === jobId) {
|
||||||
|
setSelectedJob(null);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting job:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTransactionsAdded = async (transactions: Transaction[], type: 'expenditure' | 'income') => {
|
||||||
|
if (!selectedJob) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
for (const transaction of transactions) {
|
||||||
|
await jobService.addTransaction(selectedJob.id, transaction, type);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update local state
|
||||||
|
const updatedJob = { ...selectedJob };
|
||||||
|
if (type === 'expenditure') {
|
||||||
|
updatedJob.expenditures = [...updatedJob.expenditures, ...transactions];
|
||||||
|
} else {
|
||||||
|
updatedJob.income = [...updatedJob.income, ...transactions];
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedJob(updatedJob);
|
||||||
|
setJobs(jobs.map(job => job.id === selectedJob.id ? updatedJob : job));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding transactions:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalJobs = jobs.length;
|
||||||
|
const totalProfit = jobs.reduce((sum, job) => {
|
||||||
|
const expenditure = job.expenditures.reduce((sum, tx) => sum + Math.abs(tx.totalAmount), 0);
|
||||||
|
const income = job.income.reduce((sum, tx) => sum + tx.totalAmount, 0);
|
||||||
|
return sum + (income - expenditure);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
const totalRevenue = jobs.reduce((sum, job) =>
|
||||||
|
sum + job.income.reduce((sum, tx) => sum + tx.totalAmount, 0), 0
|
||||||
|
);
|
||||||
|
|
||||||
|
if (showJobForm) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 p-6">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<JobForm
|
||||||
|
job={editingJob || undefined}
|
||||||
|
onSubmit={editingJob ? handleUpdateJob : handleCreateJob}
|
||||||
|
onCancel={() => {
|
||||||
|
setShowJobForm(false);
|
||||||
|
setEditingJob(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedJob) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 p-6">
|
||||||
|
<div className="max-w-6xl mx-auto space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-white">Job Details</h1>
|
||||||
|
<p className="text-gray-400">{selectedJob.outputItem.name}</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setSelectedJob(null)}
|
||||||
|
className="border-gray-600 hover:bg-gray-800"
|
||||||
|
>
|
||||||
|
Back to Jobs
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<JobCard
|
||||||
|
job={selectedJob}
|
||||||
|
onEdit={handleEditJob}
|
||||||
|
onDelete={handleDeleteJob}
|
||||||
|
/>
|
||||||
|
<TransactionForm
|
||||||
|
jobId={selectedJob.id}
|
||||||
|
onTransactionsAdded={handleTransactionsAdded}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
<div className="min-h-screen bg-gray-950 p-6">
|
||||||
<div className="text-center">
|
<div className="max-w-7xl mx-auto space-y-6">
|
||||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
<div className="flex items-center justify-between">
|
||||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-white">EVE Industry Manager</h1>
|
||||||
|
<p className="text-gray-400">Manage your industrial jobs and track profitability</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowJobForm(true)}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
New Job
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<Card className="bg-gray-900 border-gray-700">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-gray-300">Total Jobs</CardTitle>
|
||||||
|
<Briefcase className="h-4 w-4 text-blue-400" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-white">{totalJobs}</div>
|
||||||
|
<p className="text-xs text-gray-400">Active industrial operations</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-900 border-gray-700">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-gray-300">Total Revenue</CardTitle>
|
||||||
|
<TrendingUp className="h-4 w-4 text-green-400" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-green-400">{formatISK(totalRevenue)}</div>
|
||||||
|
<p className="text-xs text-gray-400">From all job sales</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-900 border-gray-700">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-gray-300">Total Profit</CardTitle>
|
||||||
|
<Factory className="h-4 w-4 text-yellow-400" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className={`text-2xl font-bold ${totalProfit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||||
|
{formatISK(totalProfit)}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-400">Net profit across all jobs</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{jobs.length === 0 ? (
|
||||||
|
<Card className="bg-gray-900 border-gray-700">
|
||||||
|
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||||
|
<Factory className="h-12 w-12 text-gray-600 mb-4" />
|
||||||
|
<h3 className="text-xl font-semibold text-gray-300 mb-2">No jobs yet</h3>
|
||||||
|
<p className="text-gray-500 mb-4">Create your first industrial job to get started</p>
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowJobForm(true)}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Create First Job
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{jobs.map((job) => (
|
||||||
|
<div key={job.id} onClick={() => setSelectedJob(job)} className="cursor-pointer">
|
||||||
|
<JobCard
|
||||||
|
job={job}
|
||||||
|
onEdit={handleEditJob}
|
||||||
|
onDelete={handleDeleteJob}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
18
src/services/facilityService.ts
Normal file
18
src/services/facilityService.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
import { Facility } from './jobService';
|
||||||
|
|
||||||
|
// Stub functions - to be implemented with PocketBase
|
||||||
|
export const facilityService = {
|
||||||
|
async getFacilities(): Promise<Facility[]> {
|
||||||
|
// TODO: Implement with PocketBase
|
||||||
|
console.log('Fetching facilities');
|
||||||
|
// Mock data for development
|
||||||
|
return [
|
||||||
|
{ id: '1', name: 'Jita IV - Moon 4 - Caldari Navy Assembly Plant', location: 'Jita' },
|
||||||
|
{ id: '2', name: 'Amarr VIII (Oris) - Emperor Family Academy', location: 'Amarr' },
|
||||||
|
{ id: '3', name: 'Dodixie IX - Moon 20 - Federation Navy Assembly Plant', location: 'Dodixie' },
|
||||||
|
{ id: '4', name: 'Rens VI - Moon 8 - Brutor Tribe Treasury', location: 'Rens' },
|
||||||
|
{ id: '5', name: 'Hek VIII - Moon 12 - Boundless Creation Factory', location: 'Hek' }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
};
|
||||||
80
src/services/jobService.ts
Normal file
80
src/services/jobService.ts
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
|
||||||
|
export interface Job {
|
||||||
|
id: string;
|
||||||
|
outputItem: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
quantity: number;
|
||||||
|
};
|
||||||
|
dates: {
|
||||||
|
creation: Date;
|
||||||
|
start: Date;
|
||||||
|
end: Date;
|
||||||
|
saleStart: Date;
|
||||||
|
saleEnd: Date;
|
||||||
|
};
|
||||||
|
facilityId: string;
|
||||||
|
expenditures: Transaction[];
|
||||||
|
income: Transaction[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Transaction {
|
||||||
|
id: string;
|
||||||
|
date: Date;
|
||||||
|
quantity: number;
|
||||||
|
itemName: string;
|
||||||
|
unitPrice: number;
|
||||||
|
totalAmount: number;
|
||||||
|
buyer?: string;
|
||||||
|
location?: string;
|
||||||
|
corporation?: string;
|
||||||
|
wallet?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Facility {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
location: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stub functions - to be implemented with PocketBase
|
||||||
|
export const jobService = {
|
||||||
|
async createJob(job: Omit<Job, 'id' | 'expenditures' | 'income'>): Promise<Job> {
|
||||||
|
// TODO: Implement with PocketBase
|
||||||
|
console.log('Creating job:', job);
|
||||||
|
return {
|
||||||
|
...job,
|
||||||
|
id: Date.now().toString(),
|
||||||
|
expenditures: [],
|
||||||
|
income: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
async getJobs(): Promise<Job[]> {
|
||||||
|
// TODO: Implement with PocketBase
|
||||||
|
console.log('Fetching jobs');
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
|
||||||
|
async getJob(id: string): Promise<Job | null> {
|
||||||
|
// TODO: Implement with PocketBase
|
||||||
|
console.log('Fetching job:', id);
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateJob(id: string, updates: Partial<Job>): Promise<Job> {
|
||||||
|
// TODO: Implement with PocketBase
|
||||||
|
console.log('Updating job:', id, updates);
|
||||||
|
throw new Error('Not implemented');
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteJob(id: string): Promise<void> {
|
||||||
|
// TODO: Implement with PocketBase
|
||||||
|
console.log('Deleting job:', id);
|
||||||
|
},
|
||||||
|
|
||||||
|
async addTransaction(jobId: string, transaction: Omit<Transaction, 'id'>, type: 'expenditure' | 'income'): Promise<void> {
|
||||||
|
// TODO: Implement with PocketBase
|
||||||
|
console.log('Adding transaction:', jobId, transaction, type);
|
||||||
|
}
|
||||||
|
};
|
||||||
74
src/utils/priceUtils.ts
Normal file
74
src/utils/priceUtils.ts
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
|
||||||
|
export const parseISKAmount = (iskString: string): number => {
|
||||||
|
// Remove "ISK" and any extra whitespace
|
||||||
|
const cleanString = iskString.replace(/ISK/gi, '').trim();
|
||||||
|
|
||||||
|
// Handle negative values
|
||||||
|
const isNegative = cleanString.startsWith('-');
|
||||||
|
const numberString = cleanString.replace(/^-/, '');
|
||||||
|
|
||||||
|
// Remove commas and parse
|
||||||
|
const amount = parseFloat(numberString.replace(/,/g, ''));
|
||||||
|
|
||||||
|
return isNegative ? -amount : amount;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const formatISK = (amount: number): string => {
|
||||||
|
const absAmount = Math.abs(amount);
|
||||||
|
const sign = amount < 0 ? '-' : '';
|
||||||
|
|
||||||
|
// Format with commas and appropriate decimal places
|
||||||
|
const formatted = absAmount.toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 2
|
||||||
|
});
|
||||||
|
|
||||||
|
return `${sign}${formatted} ISK`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const parseTransactionLine = (line: string): {
|
||||||
|
date: Date;
|
||||||
|
quantity: number;
|
||||||
|
itemName: string;
|
||||||
|
unitPrice: number;
|
||||||
|
totalAmount: number;
|
||||||
|
buyer?: string;
|
||||||
|
location?: string;
|
||||||
|
corporation?: string;
|
||||||
|
wallet?: string;
|
||||||
|
} | null => {
|
||||||
|
try {
|
||||||
|
const parts = line.split('\t');
|
||||||
|
if (parts.length < 8) return null;
|
||||||
|
|
||||||
|
const [dateStr, quantityStr, itemName, unitPriceStr, totalAmountStr, buyer, location, corporation, wallet] = parts;
|
||||||
|
|
||||||
|
// Parse date (YYYY.MM.DD HH:mm format)
|
||||||
|
const [datePart, timePart] = dateStr.split(' ');
|
||||||
|
const [year, month, day] = datePart.split('.').map(Number);
|
||||||
|
const [hour, minute] = timePart.split(':').map(Number);
|
||||||
|
const date = new Date(year, month - 1, day, hour, minute);
|
||||||
|
|
||||||
|
// Parse quantity (remove commas)
|
||||||
|
const quantity = parseInt(quantityStr.replace(/,/g, ''));
|
||||||
|
|
||||||
|
// Parse prices
|
||||||
|
const unitPrice = parseISKAmount(unitPriceStr);
|
||||||
|
const totalAmount = parseISKAmount(totalAmountStr);
|
||||||
|
|
||||||
|
return {
|
||||||
|
date,
|
||||||
|
quantity,
|
||||||
|
itemName,
|
||||||
|
unitPrice,
|
||||||
|
totalAmount,
|
||||||
|
buyer,
|
||||||
|
location,
|
||||||
|
corporation,
|
||||||
|
wallet
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing transaction line:', line, error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user