Refactor BatchTransactionForm
Refactors `BatchTransactionForm.tsx` into smaller, focused components and a custom hook to improve maintainability, mirroring the structure of the refactored `BatchExpenditureForm`.
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,14 +1,13 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { IndTransactionRecordNoId } from '@/lib/pbtypes';
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
||||||
import { parseTransactionLine, formatISK, PastedTransaction } from '@/utils/priceUtils';
|
|
||||||
import { IndTransactionRecordNoId, IndJobStatusOptions } from '@/lib/pbtypes';
|
|
||||||
import { IndJob } from '@/lib/types';
|
import { IndJob } from '@/lib/types';
|
||||||
import { X } from 'lucide-react';
|
import { useBatchTransactionLogic } from '@/hooks/useBatchTransactionLogic';
|
||||||
|
import BatchTransactionHeader from '@/components/batch-transaction/BatchTransactionHeader';
|
||||||
|
import PasteTransactionInput from '@/components/batch-transaction/PasteTransactionInput';
|
||||||
|
import TransactionStats from '@/components/batch-transaction/TransactionStats';
|
||||||
|
import TransactionTable from '@/components/batch-transaction/TransactionTable';
|
||||||
|
import TransactionActions from '@/components/batch-transaction/TransactionActions';
|
||||||
|
|
||||||
interface BatchTransactionFormProps {
|
interface BatchTransactionFormProps {
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
@@ -16,179 +15,24 @@ interface BatchTransactionFormProps {
|
|||||||
jobs: IndJob[];
|
jobs: IndJob[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TransactionGroup {
|
|
||||||
itemName: string;
|
|
||||||
transactions: PastedTransaction[];
|
|
||||||
totalQuantity: number;
|
|
||||||
totalValue: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const BatchTransactionForm: React.FC<BatchTransactionFormProps> = ({ onClose, onTransactionsAssigned, jobs }) => {
|
const BatchTransactionForm: React.FC<BatchTransactionFormProps> = ({ onClose, onTransactionsAssigned, jobs }) => {
|
||||||
const [pastedData, setPastedData] = useState('');
|
const {
|
||||||
const [transactionGroups, setTransactionGroups] = useState<TransactionGroup[]>([]);
|
pastedData,
|
||||||
const [duplicatesFound, setDuplicatesFound] = useState(0);
|
transactionGroups,
|
||||||
|
duplicatesFound,
|
||||||
// Filter jobs that are either running, selling, or tracked
|
eligibleJobs,
|
||||||
const eligibleJobs = jobs.filter(job =>
|
handlePaste,
|
||||||
job.status === IndJobStatusOptions.Running ||
|
handleAssignJob,
|
||||||
job.status === IndJobStatusOptions.Selling ||
|
getAssignments,
|
||||||
job.status === IndJobStatusOptions.Tracked
|
canSubmit
|
||||||
);
|
} = useBatchTransactionLogic(jobs);
|
||||||
|
|
||||||
const findMatchingJob = (itemName: string): string | undefined => {
|
|
||||||
// First try exact match
|
|
||||||
const exactMatch = eligibleJobs.find(job => job.outputItem === itemName);
|
|
||||||
if (exactMatch) return exactMatch.id;
|
|
||||||
|
|
||||||
// Then try case-insensitive match
|
|
||||||
const caseInsensitiveMatch = eligibleJobs.find(job =>
|
|
||||||
job.outputItem.toLowerCase() === itemName.toLowerCase()
|
|
||||||
);
|
|
||||||
if (caseInsensitiveMatch) return caseInsensitiveMatch.id;
|
|
||||||
|
|
||||||
return undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalizeDate = (dateStr: string): string => {
|
|
||||||
// Convert any ISO date string to consistent format with space
|
|
||||||
return dateStr.replace('T', ' ');
|
|
||||||
};
|
|
||||||
|
|
||||||
const createTransactionKey = (parsed: PastedTransaction): string => {
|
|
||||||
if (!parsed) return '';
|
|
||||||
const key = [
|
|
||||||
normalizeDate(parsed.date.toString()),
|
|
||||||
parsed.itemName,
|
|
||||||
parsed.quantity.toString(),
|
|
||||||
parsed.totalPrice.toString(),
|
|
||||||
parsed.buyer,
|
|
||||||
parsed.location
|
|
||||||
].join('|');
|
|
||||||
return key;
|
|
||||||
};
|
|
||||||
|
|
||||||
const createTransactionKeyFromRecord = (tx: IndTransactionRecordNoId): string => {
|
|
||||||
const key = [
|
|
||||||
normalizeDate(tx.date),
|
|
||||||
tx.itemName,
|
|
||||||
tx.quantity.toString(),
|
|
||||||
tx.totalPrice.toString(),
|
|
||||||
tx.buyer,
|
|
||||||
tx.location
|
|
||||||
].join('|');
|
|
||||||
return key;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePaste = (value: string) => {
|
|
||||||
setPastedData(value);
|
|
||||||
const lines = value.trim().split('\n');
|
|
||||||
const pasteTransactionMap = new Map<string, PastedTransaction>();
|
|
||||||
|
|
||||||
// STEP 1: First combine all identical transactions within the pasted data
|
|
||||||
lines.forEach((line) => {
|
|
||||||
const parsed: PastedTransaction | null = parseTransactionLine(line);
|
|
||||||
if (parsed) {
|
|
||||||
const transactionKey: string = createTransactionKey(parsed);
|
|
||||||
|
|
||||||
if (pasteTransactionMap.has(transactionKey)) {
|
|
||||||
// Merge with existing transaction in paste
|
|
||||||
const existing = pasteTransactionMap.get(transactionKey)!;
|
|
||||||
existing.quantity += parsed.quantity;
|
|
||||||
existing.totalPrice += Math.abs(parsed.totalPrice);
|
|
||||||
const newKey = createTransactionKey(existing);
|
|
||||||
pasteTransactionMap.set(newKey, existing);
|
|
||||||
pasteTransactionMap.delete(transactionKey); // Remove old key
|
|
||||||
} else {
|
|
||||||
// Add new transaction
|
|
||||||
pasteTransactionMap.set(transactionKey, parsed);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// STEP 2: Identify which jobs these transactions belong to
|
|
||||||
const relevantJobIds = new Set<string>();
|
|
||||||
pasteTransactionMap.forEach((transaction) => {
|
|
||||||
const matchingJobId = findMatchingJob(transaction.itemName);
|
|
||||||
if (matchingJobId) {
|
|
||||||
relevantJobIds.add(matchingJobId);
|
|
||||||
transaction.assignedJobId = matchingJobId;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// STEP 3: Only check against transactions from relevant jobs
|
|
||||||
const existingTransactionKeys = new Set<string>();
|
|
||||||
eligibleJobs.forEach(job => {
|
|
||||||
if (relevantJobIds.has(job.id)) {
|
|
||||||
job.income.forEach(tx => {
|
|
||||||
const key = createTransactionKeyFromRecord(tx);
|
|
||||||
existingTransactionKeys.add(key);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// STEP 4: Mark duplicates and assign jobs
|
|
||||||
let duplicates = 0;
|
|
||||||
pasteTransactionMap.forEach((transaction, key) => {
|
|
||||||
const isDuplicate = existingTransactionKeys.has(key);
|
|
||||||
transaction.isDuplicate = isDuplicate;
|
|
||||||
|
|
||||||
if (isDuplicate) {
|
|
||||||
duplicates++;
|
|
||||||
transaction.assignedJobId = undefined;
|
|
||||||
} else if (!!transaction.assignedJobId) {
|
|
||||||
transaction.assignedJobId = findMatchingJob(transaction.itemName);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Convert map to array for display
|
|
||||||
const transactionList = Array.from(pasteTransactionMap.values());
|
|
||||||
setDuplicatesFound(duplicates);
|
|
||||||
|
|
||||||
// Create individual transaction groups (no grouping by item name)
|
|
||||||
const groups = transactionList.map(tx => ({
|
|
||||||
itemName: tx.itemName,
|
|
||||||
transactions: [tx],
|
|
||||||
totalQuantity: tx.quantity,
|
|
||||||
totalValue: tx.totalPrice
|
|
||||||
}));
|
|
||||||
|
|
||||||
setTransactionGroups(groups);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAssignJob = (groupIndex: number, jobId: string) => {
|
|
||||||
setTransactionGroups(prev => {
|
|
||||||
const newGroups = [...prev];
|
|
||||||
newGroups[groupIndex].transactions.forEach(tx => {
|
|
||||||
tx.assignedJobId = jobId;
|
|
||||||
});
|
|
||||||
return newGroups;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
// Group transactions by assigned job
|
const assignments = getAssignments();
|
||||||
const assignments = transactionGroups
|
|
||||||
.flatMap(group => group.transactions)
|
|
||||||
.filter(tx => tx.assignedJobId)
|
|
||||||
.reduce((acc, tx) => {
|
|
||||||
const jobId = tx.assignedJobId!;
|
|
||||||
const existing = acc.find(a => a.jobId === jobId);
|
|
||||||
if (existing) {
|
|
||||||
existing.transactions.push(tx);
|
|
||||||
} else {
|
|
||||||
acc.push({ jobId, transactions: [tx] });
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, [] as { jobId: string, transactions: IndTransactionRecordNoId[] }[]);
|
|
||||||
|
|
||||||
onTransactionsAssigned(assignments);
|
onTransactionsAssigned(assignments);
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
const allAssigned = transactionGroups.every(group =>
|
|
||||||
group.transactions.every(tx => tx.assignedJobId)
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
|
className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
|
||||||
@@ -198,132 +42,35 @@ const BatchTransactionForm: React.FC<BatchTransactionFormProps> = ({ onClose, on
|
|||||||
className="bg-gray-900 border-gray-700 text-white w-full max-w-4xl max-h-[90vh] overflow-y-auto"
|
className="bg-gray-900 border-gray-700 text-white w-full max-w-4xl max-h-[90vh] overflow-y-auto"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<CardHeader className="flex flex-row items-center justify-between sticky top-0 bg-gray-900 border-b border-gray-700 z-10">
|
<BatchTransactionHeader onClose={onClose} />
|
||||||
<CardTitle className="text-blue-400">Batch Transaction Assignment</CardTitle>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-white"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div className="space-y-2">
|
<PasteTransactionInput
|
||||||
<label className="text-sm font-medium text-gray-300">
|
pastedData={pastedData}
|
||||||
Paste EVE transaction data:
|
onPaste={handlePaste}
|
||||||
</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>
|
|
||||||
|
|
||||||
{transactionGroups.length > 0 && (
|
{transactionGroups.length > 0 && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-4">
|
<TransactionStats
|
||||||
<Badge variant="outline" className="text-blue-400 border-blue-400">
|
transactionCount={transactionGroups.length}
|
||||||
{transactionGroups.length} transactions found
|
duplicatesFound={duplicatesFound}
|
||||||
</Badge>
|
/>
|
||||||
{duplicatesFound > 0 && (
|
|
||||||
<Badge variant="outline" className="text-yellow-400 border-yellow-400">
|
|
||||||
{duplicatesFound} duplicates found
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Table>
|
<TransactionTable
|
||||||
<TableHeader>
|
transactionGroups={transactionGroups}
|
||||||
<TableRow className="border-gray-700">
|
jobs={jobs}
|
||||||
<TableHead className="text-gray-300">Item</TableHead>
|
eligibleJobs={eligibleJobs}
|
||||||
<TableHead className="text-gray-300">Quantity</TableHead>
|
onAssignJob={handleAssignJob}
|
||||||
<TableHead className="text-gray-300">Total Value</TableHead>
|
/>
|
||||||
<TableHead className="text-gray-300">Assign To Job</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{transactionGroups.map((group, index) => {
|
|
||||||
const autoAssigned = group.transactions[0]?.assignedJobId;
|
|
||||||
const isDuplicate = group.transactions[0]?.isDuplicate;
|
|
||||||
const matchingJob = autoAssigned ? jobs.find(j => j.id === autoAssigned) : undefined;
|
|
||||||
|
|
||||||
return (
|
<TransactionActions
|
||||||
<TableRow
|
onCancel={onClose}
|
||||||
key={group.itemName}
|
onSubmit={handleSubmit}
|
||||||
className={`border-gray-700 ${isDuplicate ? 'bg-red-900/30' : ''}`}
|
canSubmit={canSubmit}
|
||||||
>
|
/>
|
||||||
<TableCell className="text-white flex items-center gap-2">
|
|
||||||
{group.itemName}
|
|
||||||
{isDuplicate && (
|
|
||||||
<Badge variant="destructive" className="bg-red-600">
|
|
||||||
Duplicate
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-gray-300">
|
|
||||||
{group.totalQuantity.toLocaleString()}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-green-400">
|
|
||||||
{formatISK(group.totalValue)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{isDuplicate ? (
|
|
||||||
<div className="text-red-400 text-sm">
|
|
||||||
Transaction already exists
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Select
|
|
||||||
value={group.transactions[0]?.assignedJobId || ''}
|
|
||||||
onValueChange={(value) => handleAssignJob(index, value)}
|
|
||||||
>
|
|
||||||
<SelectTrigger
|
|
||||||
className={`bg-gray-800 border-gray-600 text-white ${autoAssigned ? 'border-green-600' : ''}`}
|
|
||||||
>
|
|
||||||
<SelectValue placeholder={autoAssigned ? `Auto-assigned to ${matchingJob?.outputItem}` : 'Select a job'} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent className="bg-gray-800 border-gray-600">
|
|
||||||
{eligibleJobs
|
|
||||||
.filter(job => job.outputItem.includes(group.itemName) || job.status === 'Tracked')
|
|
||||||
.map(job => (
|
|
||||||
<SelectItem
|
|
||||||
key={job.id}
|
|
||||||
value={job.id}
|
|
||||||
className="text-white"
|
|
||||||
>
|
|
||||||
{job.outputItem} ({job.status})
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={onClose}
|
|
||||||
className="border-gray-600 hover:bg-gray-800"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
disabled={!transactionGroups.some(g => g.transactions.some(tx => !tx.isDuplicate && tx.assignedJobId))}
|
|
||||||
className="bg-blue-600 hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Assign Transactions
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@@ -332,4 +79,4 @@ const BatchTransactionForm: React.FC<BatchTransactionFormProps> = ({ onClose, on
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BatchTransactionForm;
|
export default BatchTransactionForm;
|
||||||
|
|||||||
26
src/components/batch-transaction/BatchTransactionHeader.tsx
Normal file
26
src/components/batch-transaction/BatchTransactionHeader.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
|
||||||
|
interface BatchTransactionHeaderProps {
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const BatchTransactionHeader: React.FC<BatchTransactionHeaderProps> = ({ onClose }) => {
|
||||||
|
return (
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between sticky top-0 bg-gray-900 border-b border-gray-700 z-10">
|
||||||
|
<CardTitle className="text-blue-400">Batch Transaction Assignment</CardTitle>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-white"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BatchTransactionHeader;
|
||||||
36
src/components/batch-transaction/PasteTransactionInput.tsx
Normal file
36
src/components/batch-transaction/PasteTransactionInput.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
|
||||||
|
import { useRef, useEffect } from 'react';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
interface PasteTransactionInputProps {
|
||||||
|
pastedData: string;
|
||||||
|
onPaste: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PasteTransactionInput: React.FC<PasteTransactionInputProps> = ({ pastedData, onPaste }) => {
|
||||||
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
|
// Auto focus the textarea when component mounts
|
||||||
|
useEffect(() => {
|
||||||
|
if (textareaRef.current) {
|
||||||
|
textareaRef.current.focus();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-gray-300">
|
||||||
|
Paste EVE transaction data:
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
ref={textareaRef}
|
||||||
|
value={pastedData}
|
||||||
|
onChange={(e) => onPaste(e.target.value)}
|
||||||
|
placeholder="Paste your EVE transaction data here..."
|
||||||
|
className="min-h-32 bg-gray-800 border-gray-600 text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PasteTransactionInput;
|
||||||
35
src/components/batch-transaction/TransactionActions.tsx
Normal file
35
src/components/batch-transaction/TransactionActions.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
interface TransactionActionsProps {
|
||||||
|
onCancel: () => void;
|
||||||
|
onSubmit: () => void;
|
||||||
|
canSubmit: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TransactionActions: React.FC<TransactionActionsProps> = ({
|
||||||
|
onCancel,
|
||||||
|
onSubmit,
|
||||||
|
canSubmit
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-end gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="border-gray-600 hover:bg-gray-800"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={onSubmit}
|
||||||
|
disabled={!canSubmit}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
Assign Transactions
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TransactionActions;
|
||||||
24
src/components/batch-transaction/TransactionStats.tsx
Normal file
24
src/components/batch-transaction/TransactionStats.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
|
||||||
|
interface TransactionStatsProps {
|
||||||
|
transactionCount: number;
|
||||||
|
duplicatesFound: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TransactionStats: React.FC<TransactionStatsProps> = ({ transactionCount, duplicatesFound }) => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Badge variant="outline" className="text-blue-400 border-blue-400">
|
||||||
|
{transactionCount} transactions found
|
||||||
|
</Badge>
|
||||||
|
{duplicatesFound > 0 && (
|
||||||
|
<Badge variant="outline" className="text-yellow-400 border-yellow-400">
|
||||||
|
{duplicatesFound} duplicates found
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TransactionStats;
|
||||||
102
src/components/batch-transaction/TransactionTable.tsx
Normal file
102
src/components/batch-transaction/TransactionTable.tsx
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { formatISK } from '@/utils/priceUtils';
|
||||||
|
import { IndJob } from '@/lib/types';
|
||||||
|
|
||||||
|
interface TransactionGroup {
|
||||||
|
itemName: string;
|
||||||
|
transactions: any[];
|
||||||
|
totalQuantity: number;
|
||||||
|
totalValue: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TransactionTableProps {
|
||||||
|
transactionGroups: TransactionGroup[];
|
||||||
|
jobs: IndJob[];
|
||||||
|
eligibleJobs: IndJob[];
|
||||||
|
onAssignJob: (groupIndex: number, jobId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TransactionTable: React.FC<TransactionTableProps> = ({
|
||||||
|
transactionGroups,
|
||||||
|
jobs,
|
||||||
|
eligibleJobs,
|
||||||
|
onAssignJob
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="border-gray-700">
|
||||||
|
<TableHead className="text-gray-300">Item</TableHead>
|
||||||
|
<TableHead className="text-gray-300">Quantity</TableHead>
|
||||||
|
<TableHead className="text-gray-300">Total Value</TableHead>
|
||||||
|
<TableHead className="text-gray-300">Assign To Job</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{transactionGroups.map((group, index) => {
|
||||||
|
const autoAssigned = group.transactions[0]?.assignedJobId;
|
||||||
|
const isDuplicate = group.transactions[0]?.isDuplicate;
|
||||||
|
const matchingJob = autoAssigned ? jobs.find(j => j.id === autoAssigned) : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow
|
||||||
|
key={group.itemName}
|
||||||
|
className={`border-gray-700 ${isDuplicate ? 'bg-red-900/30' : ''}`}
|
||||||
|
>
|
||||||
|
<TableCell className="text-white flex items-center gap-2">
|
||||||
|
{group.itemName}
|
||||||
|
{isDuplicate && (
|
||||||
|
<Badge variant="destructive" className="bg-red-600">
|
||||||
|
Duplicate
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-gray-300">
|
||||||
|
{group.totalQuantity.toLocaleString()}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-green-400">
|
||||||
|
{formatISK(group.totalValue)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{isDuplicate ? (
|
||||||
|
<div className="text-red-400 text-sm">
|
||||||
|
Transaction already exists
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Select
|
||||||
|
value={group.transactions[0]?.assignedJobId || ''}
|
||||||
|
onValueChange={(value) => onAssignJob(index, value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
className={`bg-gray-800 border-gray-600 text-white ${autoAssigned ? 'border-green-600' : ''}`}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder={autoAssigned ? `Auto-assigned to ${matchingJob?.outputItem}` : 'Select a job'} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="bg-gray-800 border-gray-600">
|
||||||
|
{eligibleJobs
|
||||||
|
.filter(job => job.outputItem.includes(group.itemName) || job.status === 'Tracked')
|
||||||
|
.map(job => (
|
||||||
|
<SelectItem
|
||||||
|
key={job.id}
|
||||||
|
value={job.id}
|
||||||
|
className="text-white"
|
||||||
|
>
|
||||||
|
{job.outputItem} ({job.status})
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TransactionTable;
|
||||||
185
src/hooks/useBatchTransactionLogic.ts
Normal file
185
src/hooks/useBatchTransactionLogic.ts
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { parseTransactionLine, PastedTransaction } from '@/utils/priceUtils';
|
||||||
|
import { IndTransactionRecordNoId, IndJobStatusOptions } from '@/lib/pbtypes';
|
||||||
|
import { IndJob } from '@/lib/types';
|
||||||
|
|
||||||
|
interface TransactionGroup {
|
||||||
|
itemName: string;
|
||||||
|
transactions: PastedTransaction[];
|
||||||
|
totalQuantity: number;
|
||||||
|
totalValue: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useBatchTransactionLogic = (jobs: IndJob[]) => {
|
||||||
|
const [pastedData, setPastedData] = useState('');
|
||||||
|
const [transactionGroups, setTransactionGroups] = useState<TransactionGroup[]>([]);
|
||||||
|
const [duplicatesFound, setDuplicatesFound] = useState(0);
|
||||||
|
|
||||||
|
// Filter jobs that are either running, selling, or tracked
|
||||||
|
const eligibleJobs = jobs.filter(job =>
|
||||||
|
job.status === IndJobStatusOptions.Running ||
|
||||||
|
job.status === IndJobStatusOptions.Selling ||
|
||||||
|
job.status === IndJobStatusOptions.Tracked
|
||||||
|
);
|
||||||
|
|
||||||
|
const findMatchingJob = (itemName: string): string | undefined => {
|
||||||
|
// First try exact match
|
||||||
|
const exactMatch = eligibleJobs.find(job => job.outputItem === itemName);
|
||||||
|
if (exactMatch) return exactMatch.id;
|
||||||
|
|
||||||
|
// Then try case-insensitive match
|
||||||
|
const caseInsensitiveMatch = eligibleJobs.find(job =>
|
||||||
|
job.outputItem.toLowerCase() === itemName.toLowerCase()
|
||||||
|
);
|
||||||
|
if (caseInsensitiveMatch) return caseInsensitiveMatch.id;
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeDate = (dateStr: string): string => {
|
||||||
|
// Convert any ISO date string to consistent format with space
|
||||||
|
return dateStr.replace('T', ' ');
|
||||||
|
};
|
||||||
|
|
||||||
|
const createTransactionKey = (parsed: PastedTransaction): string => {
|
||||||
|
if (!parsed) return '';
|
||||||
|
const key = [
|
||||||
|
normalizeDate(parsed.date.toString()),
|
||||||
|
parsed.itemName,
|
||||||
|
parsed.quantity.toString(),
|
||||||
|
parsed.totalPrice.toString(),
|
||||||
|
parsed.buyer,
|
||||||
|
parsed.location
|
||||||
|
].join('|');
|
||||||
|
return key;
|
||||||
|
};
|
||||||
|
|
||||||
|
const createTransactionKeyFromRecord = (tx: IndTransactionRecordNoId): string => {
|
||||||
|
const key = [
|
||||||
|
normalizeDate(tx.date),
|
||||||
|
tx.itemName,
|
||||||
|
tx.quantity.toString(),
|
||||||
|
tx.totalPrice.toString(),
|
||||||
|
tx.buyer,
|
||||||
|
tx.location
|
||||||
|
].join('|');
|
||||||
|
return key;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePaste = (value: string) => {
|
||||||
|
setPastedData(value);
|
||||||
|
const lines = value.trim().split('\n');
|
||||||
|
const pasteTransactionMap = new Map<string, PastedTransaction>();
|
||||||
|
|
||||||
|
// STEP 1: First combine all identical transactions within the pasted data
|
||||||
|
lines.forEach((line) => {
|
||||||
|
const parsed: PastedTransaction | null = parseTransactionLine(line);
|
||||||
|
if (parsed) {
|
||||||
|
const transactionKey: string = createTransactionKey(parsed);
|
||||||
|
|
||||||
|
if (pasteTransactionMap.has(transactionKey)) {
|
||||||
|
// Merge with existing transaction in paste
|
||||||
|
const existing = pasteTransactionMap.get(transactionKey)!;
|
||||||
|
existing.quantity += parsed.quantity;
|
||||||
|
existing.totalPrice += Math.abs(parsed.totalPrice);
|
||||||
|
const newKey = createTransactionKey(existing);
|
||||||
|
pasteTransactionMap.set(newKey, existing);
|
||||||
|
pasteTransactionMap.delete(transactionKey); // Remove old key
|
||||||
|
} else {
|
||||||
|
// Add new transaction
|
||||||
|
pasteTransactionMap.set(transactionKey, parsed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// STEP 2: Identify which jobs these transactions belong to
|
||||||
|
const relevantJobIds = new Set<string>();
|
||||||
|
pasteTransactionMap.forEach((transaction) => {
|
||||||
|
const matchingJobId = findMatchingJob(transaction.itemName);
|
||||||
|
if (matchingJobId) {
|
||||||
|
relevantJobIds.add(matchingJobId);
|
||||||
|
transaction.assignedJobId = matchingJobId;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// STEP 3: Only check against transactions from relevant jobs
|
||||||
|
const existingTransactionKeys = new Set<string>();
|
||||||
|
eligibleJobs.forEach(job => {
|
||||||
|
if (relevantJobIds.has(job.id)) {
|
||||||
|
job.income.forEach(tx => {
|
||||||
|
const key = createTransactionKeyFromRecord(tx);
|
||||||
|
existingTransactionKeys.add(key);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// STEP 4: Mark duplicates and assign jobs
|
||||||
|
let duplicates = 0;
|
||||||
|
pasteTransactionMap.forEach((transaction, key) => {
|
||||||
|
const isDuplicate = existingTransactionKeys.has(key);
|
||||||
|
transaction.isDuplicate = isDuplicate;
|
||||||
|
|
||||||
|
if (isDuplicate) {
|
||||||
|
duplicates++;
|
||||||
|
transaction.assignedJobId = undefined;
|
||||||
|
} else if (!!transaction.assignedJobId) {
|
||||||
|
transaction.assignedJobId = findMatchingJob(transaction.itemName);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Convert map to array for display
|
||||||
|
const transactionList = Array.from(pasteTransactionMap.values());
|
||||||
|
setDuplicatesFound(duplicates);
|
||||||
|
|
||||||
|
// Create individual transaction groups (no grouping by item name)
|
||||||
|
const groups = transactionList.map(tx => ({
|
||||||
|
itemName: tx.itemName,
|
||||||
|
transactions: [tx],
|
||||||
|
totalQuantity: tx.quantity,
|
||||||
|
totalValue: tx.totalPrice
|
||||||
|
}));
|
||||||
|
|
||||||
|
setTransactionGroups(groups);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAssignJob = (groupIndex: number, jobId: string) => {
|
||||||
|
setTransactionGroups(prev => {
|
||||||
|
const newGroups = [...prev];
|
||||||
|
newGroups[groupIndex].transactions.forEach(tx => {
|
||||||
|
tx.assignedJobId = jobId;
|
||||||
|
});
|
||||||
|
return newGroups;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAssignments = () => {
|
||||||
|
// Group transactions by assigned job
|
||||||
|
return transactionGroups
|
||||||
|
.flatMap(group => group.transactions)
|
||||||
|
.filter(tx => tx.assignedJobId)
|
||||||
|
.reduce((acc, tx) => {
|
||||||
|
const jobId = tx.assignedJobId!;
|
||||||
|
const existing = acc.find(a => a.jobId === jobId);
|
||||||
|
if (existing) {
|
||||||
|
existing.transactions.push(tx);
|
||||||
|
} else {
|
||||||
|
acc.push({ jobId, transactions: [tx] });
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, [] as { jobId: string, transactions: IndTransactionRecordNoId[] }[]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const canSubmit = transactionGroups.some(g => g.transactions.some(tx => !tx.isDuplicate && tx.assignedJobId));
|
||||||
|
|
||||||
|
return {
|
||||||
|
pastedData,
|
||||||
|
transactionGroups,
|
||||||
|
duplicatesFound,
|
||||||
|
eligibleJobs,
|
||||||
|
handlePaste,
|
||||||
|
handleAssignJob,
|
||||||
|
getAssignments,
|
||||||
|
canSubmit
|
||||||
|
};
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user