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.
2025-07-04 12:32:50 +00:00
parent ef40cea18b
commit 7a535639fc
8 changed files with 890 additions and 9 deletions
--- a/index.html
+++ b/index.html
@@ -1,14 +1,15 @@
+
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>eve-job-tracker-pro</title>
-    <meta name="description" content="Lovable Generated Project" />
+    <title>EVE Industry Manager</title>
+    <meta name="description" content="Manage EVE Online industrial jobs and track profitability" />
    <meta name="author" content="Lovable" />

-    <meta property="og:title" content="eve-job-tracker-pro" />
-    <meta property="og:description" content="Lovable Generated Project" />
+    <meta property="og:title" content="EVE Industry Manager" />
+    <meta property="og:description" content="Manage EVE Online industrial jobs and track profitability" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

--- a/src/components/JobCard.tsx
+++ b/src/components/JobCard.tsx
@@ -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;
--- a/src/components/JobForm.tsx
+++ b/src/components/JobForm.tsx
@@ -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;
--- a/src/components/TransactionForm.tsx
+++ b/src/components/TransactionForm.tsx
@@ -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;
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -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 [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 (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
+    <div className="min-h-screen bg-gray-950 p-6">
+      <div className="max-w-7xl mx-auto space-y-6">
+        <div className="flex items-center justify-between">
+          <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>
  );
--- a/src/services/facilityService.ts
+++ b/src/services/facilityService.ts
@@ -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' }
+    ];
+  }
+};
--- a/src/services/jobService.ts
+++ b/src/services/jobService.ts
@@ -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);
+  }
+};
--- a/src/utils/priceUtils.ts
+++ b/src/utils/priceUtils.ts
@@ -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;
+  }
+};