Remove wails so lovable is happy
This commit is contained in:
526
src/pages/Index.tsx
Normal file
526
src/pages/Index.tsx
Normal file
@@ -0,0 +1,526 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Plus, Factory, TrendingUp, Briefcase, FileText } from 'lucide-react';
|
||||
import { IndTransactionRecordNoId, IndJobRecordNoId, IndTransactionRecord, IndJobStatusOptions } from '@/lib/pbtypes';
|
||||
import * as jobService from '@/services/jobService';
|
||||
import * as transactionService from '@/services/transactionService';
|
||||
import { formatISK } from '@/utils/priceUtils';
|
||||
import JobCard from '@/components/JobCard';
|
||||
import JobForm from '@/components/JobForm';
|
||||
import TransactionForm from '@/components/TransactionForm';
|
||||
import TransactionTable from '@/components/TransactionTable';
|
||||
import { IndJob } from '@/lib/types';
|
||||
import { createJob } from '@/services/jobService';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import BatchTransactionForm from '@/components/BatchTransactionForm';
|
||||
|
||||
// TODO: Bill of materials just does not work currently Fix this shit
|
||||
// Extended job type for UI components
|
||||
const Index = () => {
|
||||
const [jobs, setJobs] = useState<IndJob[]>([]);
|
||||
const [showJobForm, setShowJobForm] = useState(false);
|
||||
const [editingJob, setEditingJob] = useState<IndJob | null>(null);
|
||||
const [selectedJob, setSelectedJob] = useState<IndJob | null>(null);
|
||||
const [showBatchForm, setShowBatchForm] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadJobs();
|
||||
}, []);
|
||||
|
||||
const loadJobs = async () => {
|
||||
try {
|
||||
const fetchedJobs = await jobService.getJobsFull();
|
||||
// Convert to JobWithRelations format
|
||||
const jobsWithRelations: IndJob[] = fetchedJobs;
|
||||
setJobs(jobsWithRelations);
|
||||
} catch (error) {
|
||||
console.error('Error loading jobs:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Sort jobs by status priority
|
||||
const getStatusPriority = (status: IndJobStatusOptions): number => {
|
||||
switch (status) {
|
||||
case 'Planned': return 6;
|
||||
case 'Acquisition': return 1;
|
||||
case 'Running': return 2;
|
||||
case 'Done': return 3;
|
||||
case 'Selling': return 4;
|
||||
case 'Closed': return 5;
|
||||
case 'Tracked': return 7; // Put tracked jobs at the end
|
||||
default: return 0;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'Planned': return 'bg-gray-600';
|
||||
case 'Acquisition': return 'bg-yellow-600';
|
||||
case 'Running': return 'bg-blue-600';
|
||||
case 'Done': return 'bg-purple-600';
|
||||
case 'Selling': return 'bg-orange-600';
|
||||
case 'Closed': return 'bg-green-600';
|
||||
case 'Tracked': return 'bg-cyan-600';
|
||||
default: return 'bg-gray-600';
|
||||
}
|
||||
};
|
||||
|
||||
const sortedJobs = [...jobs].sort((a, b) => {
|
||||
const priorityA = getStatusPriority(a.status);
|
||||
const priorityB = getStatusPriority(b.status);
|
||||
if (priorityA === priorityB) {
|
||||
// If same status, sort by creation date (newest first)
|
||||
return new Date(b.created || '').getTime() - new Date(a.created || '').getTime();
|
||||
}
|
||||
return priorityA - priorityB;
|
||||
});
|
||||
|
||||
// Separate regular and tracked jobs
|
||||
const regularJobs = sortedJobs.filter(job => job.status !== 'Tracked');
|
||||
const trackedJobs = sortedJobs.filter(job => job.status === 'Tracked');
|
||||
|
||||
// Calculate totals excluding tracked jobs
|
||||
const totalJobs = regularJobs.length;
|
||||
const totalProfit = regularJobs.reduce((sum, job) => {
|
||||
const expenditure = job.expenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
|
||||
const income = job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
|
||||
return sum + (income - expenditure);
|
||||
}, 0);
|
||||
|
||||
const totalRevenue = regularJobs.reduce((sum, job) =>
|
||||
sum + job.income.reduce((sum, tx) => sum + tx.totalPrice, 0), 0
|
||||
);
|
||||
|
||||
const handleCreateJob = async (jobData: IndJobRecordNoId) => {
|
||||
try {
|
||||
const newJob = await createJob(jobData);
|
||||
const jobWithRelations: IndJob = {
|
||||
...newJob,
|
||||
expenditures: [],
|
||||
income: [],
|
||||
billOfMaterials: [],
|
||||
consumedMaterials: []
|
||||
};
|
||||
setJobs([...jobs, jobWithRelations]);
|
||||
setShowJobForm(false);
|
||||
} catch (error) {
|
||||
console.error('Error creating job:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditJob = (job: IndJob) => {
|
||||
setEditingJob(job);
|
||||
setShowJobForm(true);
|
||||
};
|
||||
|
||||
const handleUpdateJob = async (jobData: IndJobRecordNoId) => {
|
||||
if (!editingJob) return;
|
||||
|
||||
try {
|
||||
const updatedJob = await jobService.updateJob(editingJob.id, jobData);
|
||||
const updatedJobWithRelations: IndJob = {
|
||||
...updatedJob,
|
||||
expenditures: editingJob.expenditures,
|
||||
income: editingJob.income,
|
||||
billOfMaterials: editingJob.billOfMaterials,
|
||||
consumedMaterials: editingJob.consumedMaterials
|
||||
};
|
||||
|
||||
setJobs(jobs.map(job => job.id === editingJob.id ? updatedJobWithRelations : job));
|
||||
setShowJobForm(false);
|
||||
setEditingJob(null);
|
||||
|
||||
if (selectedJob?.id === editingJob.id) {
|
||||
setSelectedJob(updatedJobWithRelations);
|
||||
}
|
||||
} 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: IndTransactionRecordNoId[], type: 'expenditure' | 'income') => {
|
||||
if (!selectedJob) return;
|
||||
|
||||
try {
|
||||
let updatedJob = selectedJob;
|
||||
for (const transaction of transactions) {
|
||||
updatedJob = await transactionService.createTransaction(updatedJob, transaction, type);
|
||||
}
|
||||
|
||||
// Update local state
|
||||
setSelectedJob(updatedJob);
|
||||
setJobs(jobs.map(job => job.id === selectedJob.id ? updatedJob : job));
|
||||
} catch (error) {
|
||||
console.error('Error adding transactions:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateTransaction = async (transactionId: string, updates: Partial<IndTransactionRecord>) => {
|
||||
if (!selectedJob) return;
|
||||
|
||||
try {
|
||||
let updatedJob = selectedJob;
|
||||
updatedJob = await transactionService.updateTransaction(updatedJob, transactionId, updates);
|
||||
// Update local state
|
||||
setSelectedJob(updatedJob);
|
||||
setJobs(jobs.map(job => job.id === selectedJob.id ? updatedJob : job));
|
||||
} catch (error) {
|
||||
console.error('Error updating transaction:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteTransaction = async (transactionId: string) => {
|
||||
if (!selectedJob) return;
|
||||
|
||||
try {
|
||||
await transactionService.deleteTransaction(selectedJob, transactionId);
|
||||
|
||||
// Update local state
|
||||
const updatedJob = { ...selectedJob };
|
||||
updatedJob.expenditures = updatedJob.expenditures.filter(tx => tx.id !== transactionId);
|
||||
updatedJob.income = updatedJob.income.filter(tx => tx.id !== transactionId);
|
||||
|
||||
setSelectedJob(updatedJob);
|
||||
setJobs(jobs.map(job => job.id === selectedJob.id ? updatedJob : job));
|
||||
} catch (error) {
|
||||
console.error('Error deleting transaction:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateProduced = async (jobId: string, produced: number) => {
|
||||
if (!selectedJob) return;
|
||||
|
||||
try {
|
||||
const updatedJob = await jobService.updateJob(jobId, { produced });
|
||||
// Update local state
|
||||
const jobWithRelations: IndJob = {
|
||||
...updatedJob,
|
||||
expenditures: selectedJob.expenditures,
|
||||
income: selectedJob.income,
|
||||
billOfMaterials: selectedJob.billOfMaterials,
|
||||
consumedMaterials: selectedJob.consumedMaterials
|
||||
};
|
||||
|
||||
setSelectedJob(jobWithRelations);
|
||||
setJobs(jobs.map(job => job.id === jobId ? jobWithRelations : job));
|
||||
} catch (error) {
|
||||
console.error('Error updating produced quantity:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Group jobs by status
|
||||
const jobGroups = regularJobs.reduce((groups, job) => {
|
||||
const status = job.status;
|
||||
if (!groups[status]) {
|
||||
groups[status] = [];
|
||||
}
|
||||
groups[status].push(job);
|
||||
return groups;
|
||||
}, {} as Record<string, IndJob[]>);
|
||||
|
||||
// Load collapsed state from localStorage
|
||||
const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
|
||||
const saved = localStorage.getItem('jobGroupsCollapsed');
|
||||
return saved ? JSON.parse(saved) : {};
|
||||
});
|
||||
|
||||
// Toggle group collapse
|
||||
const toggleGroup = (status: string) => {
|
||||
const newState = { ...collapsedGroups, [status]: !collapsedGroups[status] };
|
||||
setCollapsedGroups(newState);
|
||||
localStorage.setItem('jobGroupsCollapsed', JSON.stringify(newState));
|
||||
};
|
||||
|
||||
const handleBatchTransactionsAssigned = async (assignments: { jobId: string, transactions: IndTransactionRecordNoId[] }[]) => {
|
||||
try {
|
||||
for (const { jobId, transactions } of assignments) {
|
||||
const job = jobs.find(j => j.id === jobId);
|
||||
if (job) {
|
||||
let updatedJob = job;
|
||||
for (const transaction of transactions) {
|
||||
updatedJob = await transactionService.createTransaction(updatedJob, transaction, 'income');
|
||||
}
|
||||
// Update local state
|
||||
setJobs(jobs.map(j => j.id === jobId ? updatedJob : j));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error assigning batch transactions:', error);
|
||||
}
|
||||
};
|
||||
|
||||
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-7xl 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}</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}
|
||||
onUpdateProduced={handleUpdateProduced}
|
||||
/>
|
||||
<TransactionForm
|
||||
jobId={selectedJob.id}
|
||||
onTransactionsAdded={handleTransactionsAdded}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<TransactionTable
|
||||
title="Expenditures"
|
||||
transactions={selectedJob.expenditures}
|
||||
type="expenditure"
|
||||
onUpdateTransaction={handleUpdateTransaction}
|
||||
onDeleteTransaction={handleDeleteTransaction}
|
||||
/>
|
||||
<TransactionTable
|
||||
title="Income"
|
||||
transactions={selectedJob.income}
|
||||
type="income"
|
||||
onUpdateTransaction={handleUpdateTransaction}
|
||||
onDeleteTransaction={handleDeleteTransaction}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 space-y-4">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card className="bg-gray-900 border-gray-700 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Factory className="w-5 h-5" />
|
||||
Active Jobs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{totalJobs}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-gray-900 border-gray-700 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
Total Revenue
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-400">{formatISK(totalRevenue)}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-gray-900 border-gray-700 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Briefcase className="w-5 h-5" />
|
||||
Total Profit
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={`text-2xl font-bold ${totalProfit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{formatISK(totalProfit)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Regular Jobs */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-bold text-white">Jobs</h2>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowBatchForm(true)}
|
||||
className="border-gray-600 hover:bg-gray-800"
|
||||
>
|
||||
<FileText className="w-4 h-4 mr-2" />
|
||||
Batch Assign
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEditingJob(null);
|
||||
setShowJobForm(true);
|
||||
}}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Job
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{Object.entries(jobGroups).map(([status, statusJobs]) => (
|
||||
<div key={status} className="space-y-4">
|
||||
<div
|
||||
className="flex items-center gap-3 cursor-pointer select-none p-3 rounded-lg hover:bg-gray-800/50 transition-colors"
|
||||
onClick={() => toggleGroup(status)}
|
||||
>
|
||||
<div className={`transform transition-transform text-xl text-gray-400 ${collapsedGroups[status] ? '' : 'rotate-90'}`}>
|
||||
▶
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white flex items-center gap-3">
|
||||
<Badge className={`${getStatusColor(status)} text-white px-3 py-1 text-base`}>
|
||||
{status}
|
||||
</Badge>
|
||||
<span className="text-gray-400 text-lg">({statusJobs.length} jobs)</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{!collapsedGroups[status] && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{statusJobs.map(job => (
|
||||
<div key={job.id} onClick={() => setSelectedJob(job)} className="cursor-pointer">
|
||||
<JobCard
|
||||
job={job}
|
||||
onEdit={handleEditJob}
|
||||
onDelete={handleDeleteJob}
|
||||
onUpdateProduced={handleUpdateProduced}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tracked Jobs */}
|
||||
{trackedJobs.length > 0 && (
|
||||
<div className="space-y-4 mt-8 pt-8 border-t border-gray-700">
|
||||
<div
|
||||
className="flex items-center gap-3 cursor-pointer select-none p-3 rounded-lg hover:bg-gray-800/50 transition-colors"
|
||||
onClick={() => toggleGroup('Tracked')}
|
||||
>
|
||||
<div className={`transform transition-transform text-xl text-gray-400 ${collapsedGroups['Tracked'] ? '' : 'rotate-90'}`}>
|
||||
▶
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white flex items-center gap-3">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-cyan-600"></span>
|
||||
Tracked Transactions
|
||||
<span className="text-gray-400 text-lg">({trackedJobs.length} jobs)</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{!collapsedGroups['Tracked'] && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{trackedJobs.map(job => (
|
||||
<div key={job.id} onClick={() => setSelectedJob(job)} className="cursor-pointer">
|
||||
<JobCard
|
||||
job={job}
|
||||
onEdit={handleEditJob}
|
||||
onDelete={handleDeleteJob}
|
||||
onUpdateProduced={handleUpdateProduced}
|
||||
isTracked={true}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Job Form Modal */}
|
||||
{showJobForm && (
|
||||
<JobForm
|
||||
job={editingJob}
|
||||
onSubmit={editingJob ? handleUpdateJob : handleCreateJob}
|
||||
onCancel={() => {
|
||||
setShowJobForm(false);
|
||||
setEditingJob(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Transaction Details */}
|
||||
{selectedJob && (
|
||||
<div className="mt-8 space-y-4">
|
||||
<Card className="bg-gray-900 border-gray-700 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle>Transactions for {selectedJob.outputItem}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<TransactionForm
|
||||
jobId={selectedJob.id}
|
||||
onTransactionsAdded={handleTransactionsAdded}
|
||||
/>
|
||||
<TransactionTable
|
||||
title="Transactions"
|
||||
transactions={[
|
||||
...selectedJob.expenditures.map(tx => ({ ...tx, type: 'expenditure' as const })),
|
||||
...selectedJob.income.map(tx => ({ ...tx, type: 'income' as const }))
|
||||
]}
|
||||
type="expenditure"
|
||||
onUpdateTransaction={handleUpdateTransaction}
|
||||
onDeleteTransaction={handleDeleteTransaction}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Batch Transaction Form */}
|
||||
{showBatchForm && (
|
||||
<BatchTransactionForm
|
||||
jobs={jobs}
|
||||
onClose={() => setShowBatchForm(false)}
|
||||
onTransactionsAssigned={handleBatchTransactionsAssigned}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
Reference in New Issue
Block a user