feat: Add transaction popover to job metrics

Adds popover functionality to display transactions on click of cost, revenue, and profit metrics in JobCardMetrics (Index and JobDetails).

src/components/JobCardMetrics.tsx

@@ -1,9 +1,11 @@
+
 import { useState } from 'react';
 import { formatISK, parseISKAmount } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
 import { Input } from '@/components/ui/input';
 import { useJobs } from '@/hooks/useDataService';
 import { useToast } from '@/hooks/use-toast';
+import JobTransactionPopover from './JobTransactionPopover';
 
 interface JobCardMetricsProps {
   job: IndJob;
@@ -28,6 +30,7 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
   const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
 
   const handleFieldClick = (fieldName: string, currentValue: number, e: React.MouseEvent) => {
+    e.stopPropagation();
     setEditingField(fieldName);
     setTempValues({ ...tempValues, [fieldName]: formatISK(currentValue) });
   };
@@ -65,7 +68,11 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
     <div className="grid grid-cols-3 gap-3 pt-4 border-t border-gray-700/50 flex-shrink-0">
       <div className="text-center space-y-1">
         <div className="text-xs font-medium text-red-400 uppercase tracking-wide">Costs</div>
-        <div className="text-lg font-bold text-red-400">{formatISK(totalExpenditure)}</div>
+        <JobTransactionPopover job={job} type="costs">
+          <div className="text-lg font-bold text-red-400 cursor-pointer hover:text-red-300 transition-colors" data-no-navigate>
+            {formatISK(totalExpenditure)}
+          </div>
+        </JobTransactionPopover>
         {job.projectedCost > 0 && (
           <div className="text-xs text-gray-400">
             vs {editingField === 'projectedCost' ? (
@@ -96,7 +103,11 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
       </div>
       <div className="text-center space-y-1">
         <div className="text-xs font-medium text-green-400 uppercase tracking-wide">Revenue</div>
-        <div className="text-lg font-bold text-green-400">{formatISK(totalIncome)}</div>
+        <JobTransactionPopover job={job} type="revenue">
+          <div className="text-lg font-bold text-green-400 cursor-pointer hover:text-green-300 transition-colors" data-no-navigate>
+            {formatISK(totalIncome)}
+          </div>
+        </JobTransactionPopover>
         {job.projectedRevenue > 0 && (
           <div className="text-xs text-gray-400">
             vs {editingField === 'projectedRevenue' ? (
@@ -127,9 +138,11 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
       </div>
       <div className="text-center space-y-1">
         <div className="text-xs font-medium text-gray-300 uppercase tracking-wide">Profit</div>
-        <div className={`text-lg font-bold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
-          {formatISK(profit)}
-        </div>
+        <JobTransactionPopover job={job} type="profit">
+          <div className={`text-lg font-bold cursor-pointer transition-colors ${profit >= 0 ? 'text-green-400 hover:text-green-300' : 'text-red-400 hover:text-red-300'}`} data-no-navigate>
+            {formatISK(profit)}
+          </div>
+        </JobTransactionPopover>
         <div className={`text-xs font-medium ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
           {margin.toFixed(1)}% margin
         </div>

src/components/JobTransactionPopover.tsx

@@ -0,0 +1,133 @@
+
+import { useState } from 'react';
+import { IndJob, IndTransaction } from '@/lib/types';
+import { formatISK } from '@/utils/priceUtils';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+interface JobTransactionPopoverProps {
+  job: IndJob;
+  type: 'costs' | 'revenue' | 'profit';
+  children: React.ReactNode;
+}
+
+const JobTransactionPopover: React.FC<JobTransactionPopoverProps> = ({
+  job,
+  type,
+  children
+}) => {
+  const [sortDescending, setSortDescending] = useState(true);
+
+  const getTransactions = () => {
+    switch (type) {
+      case 'costs':
+        return job.expenditures || [];
+      case 'revenue':
+        return job.income || [];
+      case 'profit':
+        return [...(job.expenditures || []), ...(job.income || [])];
+      default:
+        return [];
+    }
+  };
+
+  const getTitle = () => {
+    switch (type) {
+      case 'costs':
+        return 'Cost Breakdown';
+      case 'revenue':
+        return 'Revenue Breakdown';
+      case 'profit':
+        return 'Transaction History';
+      default:
+        return 'Transactions';
+    }
+  };
+
+  const transactions = getTransactions()
+    .map(transaction => ({
+      ...transaction,
+      displayValue: type === 'costs' ? transaction.totalPrice : 
+                   type === 'revenue' ? transaction.totalPrice :
+                   transaction.totalPrice // For profit, we'll show the actual value
+    }))
+    .filter(transaction => transaction.displayValue !== 0)
+    .sort((a, b) => {
+      const aValue = Math.abs(a.displayValue);
+      const bValue = Math.abs(b.displayValue);
+      return sortDescending ? bValue - aValue : aValue - bValue;
+    });
+
+  const toggleSort = () => {
+    setSortDescending(!sortDescending);
+  };
+
+  const getTransactionColor = (transaction: any) => {
+    if (type === 'profit') {
+      // For profit view, show costs as red and revenue as green
+      const isExpenditure = (job.expenditures || []).some(exp => exp.id === transaction.id);
+      return isExpenditure ? 'text-red-400' : 'text-green-400';
+    }
+    return type === 'costs' ? 'text-red-400' : 'text-green-400';
+  };
+
+  const formatTransactionValue = (transaction: any) => {
+    if (type === 'profit') {
+      const isExpenditure = (job.expenditures || []).some(exp => exp.id === transaction.id);
+      return isExpenditure ? `-${formatISK(transaction.totalPrice)}` : formatISK(transaction.totalPrice);
+    }
+    return formatISK(transaction.displayValue);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        {children}
+      </PopoverTrigger>
+      <PopoverContent className="w-[30rem] bg-gray-800/95 border-gray-600 text-white max-h-[40rem] overflow-y-auto">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg text-white flex items-center justify-between">
+            <span>{getTitle()}</span>
+            <button
+              onClick={toggleSort}
+              className="flex items-center gap-1 text-sm font-normal text-gray-300 hover:text-white transition-colors"
+              title="Click to toggle sort order"
+            >
+              Sort {sortDescending ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
+            </button>
+          </CardTitle>
+          <div className="text-sm text-gray-400">
+            {job.outputItem} (ID: {job.id})
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {transactions.length === 0 ? (
+            <p className="text-gray-400 text-sm">No transactions to display</p>
+          ) : (
+            transactions.map((transaction) => (
+              <div
+                key={transaction.id}
+                className="flex justify-between items-center p-2 rounded hover:bg-gray-700/50 transition-colors border-l-2 border-l-gray-600"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-white truncate" title={transaction.item}>
+                    {transaction.item}
+                  </div>
+                  <div className="text-xs text-gray-400">
+                    Qty: {transaction.quantity.toLocaleString()} • {new Date(transaction.date).toLocaleDateString()}
+                  </div>
+                </div>
+                <div className={`text-sm font-medium ml-2 ${getTransactionColor(transaction)}`}>
+                  {formatTransactionValue(transaction)}
+                </div>
+              </div>
+            ))
+          )}
+        </CardContent>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default JobTransactionPopover;

src/lib/types.ts

@@ -1,3 +1,4 @@
+
 import { IndJobStatusOptions, IndTransactionRecord } from "./pbtypes"
 import { IsoDateString } from "./pbtypes"
 import { IndBillitemRecord } from "./pbtypes"
@@ -21,3 +22,5 @@ export type IndJob = {
 	projectedCost?: number
 	projectedRevenue?: number
 }
+
+export type IndTransaction = IndTransactionRecord;