Factor jobs into collapsible categories and implement tracked jobs

frontend/src/components/JobCard.tsx

@@ -13,9 +13,10 @@ interface JobCardProps {
   onEdit: (job: any) => void;
   onDelete: (jobId: string) => void;
   onUpdateProduced?: (jobId: string, produced: number) => void;
+  isTracked?: boolean;
 }
 
-const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduced }) => {
+const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduced, isTracked = false }) => {
   const [isEditingProduced, setIsEditingProduced] = useState(false);
   const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
 
@@ -27,6 +28,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     new Date(b.date).getTime() - new Date(a.date).getTime()
   );
 
+  // Calculate totals for this job (including tracked jobs)
   const totalExpenditure = sortedExpenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
   const totalIncome = sortedIncome.reduce((sum, tx) => sum + tx.totalPrice, 0);
   const profit = totalIncome - totalExpenditure;
@@ -45,6 +47,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
       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';
     }
   };
@@ -81,7 +84,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
   };
 
   return (
-    <Card className="bg-gray-900 border-gray-700 text-white">
+    <Card className={`bg-gray-900 border-gray-700 text-white ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
       <CardHeader>
         <div className="flex justify-between items-start">
           <div>

frontend/src/lib/pbtypes.ts

@@ -122,6 +122,7 @@ export enum IndJobStatusOptions {
 	"Done" = "Done",
 	"Selling" = "Selling",
 	"Closed" = "Closed",
+	"Tracked" = "Tracked",
 }
 export type IndJobRecord = {
 	billOfMaterials?: RecordIdString[]

frontend/src/pages/Index.tsx

@@ -12,6 +12,7 @@ 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';
 
 // TODO: Bill of materials just does not work currently Fix this shit
 // Extended job type for UI components
@@ -45,10 +46,24 @@ const Index = () => {
       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);
@@ -59,6 +74,22 @@ const Index = () => {
     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);
@@ -190,16 +221,28 @@ const Index = () => {
     }
   };
 
-  const totalJobs = jobs.length;
+  // Group jobs by status
-  const totalProfit = jobs.reduce((sum, job) => {
+  const jobGroups = regularJobs.reduce((groups, job) => {
-    const expenditure = job.expenditures.reduce((sum, tx) => sum + tx.totalPrice, 0);
+    const status = job.status;
-    const income = job.income.reduce((sum, tx) => sum + tx.totalPrice, 0);
+    if (!groups[status]) {
-    return sum + (income - expenditure);
+      groups[status] = [];
-  }, 0);
+    }
+    groups[status].push(job);
+    return groups;
+  }, {} as Record<string, IndJob[]>);
 
-  const totalRevenue = jobs.reduce((sum, job) =>
+  // Load collapsed state from localStorage
-    sum + job.income.reduce((sum, tx) => sum + tx.totalPrice, 0), 0
+  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));
+  };
 
   if (showJobForm) {
     return (
@@ -271,15 +314,55 @@ const Index = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-950 p-6">
+    <div className="container mx-auto p-4 space-y-4">
-      <div className="max-w-7xl mx-auto space-y-6">
+      {/* Stats Cards */}
-        <div className="flex items-center justify-between">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div>
+        <Card className="bg-gray-900 border-gray-700 text-white">
-            <h1 className="text-3xl font-bold text-white">EVE Industry Manager</h1>
+          <CardHeader>
-            <p className="text-gray-400">Manage your industrial jobs and track profitability</p>
+            <CardTitle className="flex items-center gap-2">
-          </div>
+              <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>
           <Button
-            onClick={() => setShowJobForm(true)}
+            onClick={() => {
+              setEditingJob(null);
+              setShowJobForm(true);
+            }}
             className="bg-blue-600 hover:bg-blue-700"
           >
             <Plus className="w-4 h-4 mr-2" />
@@ -287,73 +370,116 @@ const Index = () => {
           </Button>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="space-y-6">
-          <Card className="bg-gray-900 border-gray-700">
+          {Object.entries(jobGroups).map(([status, statusJobs]) => (
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <div key={status} className="space-y-4">
-              <CardTitle className="text-sm font-medium text-gray-300">Total Jobs</CardTitle>
+              <div 
-              <Briefcase className="h-4 w-4 text-blue-400" />
+                className="flex items-center gap-3 cursor-pointer select-none p-3 rounded-lg hover:bg-gray-800/50 transition-colors"
-            </CardHeader>
+                onClick={() => toggleGroup(status)}
-            <CardContent>
+              >
-              <div className="text-2xl font-bold text-white">{totalJobs}</div>
+                <div className={`transform transition-transform text-xl text-gray-400 ${collapsedGroups[status] ? '' : 'rotate-90'}`}>
-              <p className="text-xs text-gray-400">Active industrial operations</p>
+                  ▶
-            </CardContent>
+                </div>
-          </Card>
+                <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`}>
-          <Card className="bg-gray-900 border-gray-700">
+                    {status}
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  </Badge>
-              <CardTitle className="text-sm font-medium text-gray-300">Total Revenue</CardTitle>
+                  <span className="text-gray-400 text-lg">({statusJobs.length} jobs)</span>
-              <TrendingUp className="h-4 w-4 text-green-400" />
+                </h3>
-            </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>
+              
+              {!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>
-
+      )}
-        {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-2 gap-6">
-            {sortedJobs.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>
   );
 };