Add a "sold" counter too

frontend/src/components/JobCard.tsx

@@ -137,10 +137,9 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
             </div>
             <p className="text-gray-400">
               Quantity: {job.outputQuantity.toLocaleString()}
-              {job.status !== 'Planned' && job.status !== 'Closed' && (
               <span className="ml-4">
                 Produced: {
-                    isEditingProduced ? (
+                  isEditingProduced && job.status !== 'Closed' ? (
                     <Input
                       type="number"
                       value={producedValue}
@@ -153,16 +152,18 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
                     />
                   ) : (
                     <span 
-                        onClick={() => setIsEditingProduced(true)}
-                        className="cursor-pointer hover:text-blue-400"
-                        title="Click to edit"
+                      onClick={() => job.status !== 'Closed' && setIsEditingProduced(true)}
+                      className={job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : undefined}
+                      title={job.status !== 'Closed' ? "Click to edit" : undefined}
                     >
                       {(job.produced || 0).toLocaleString()}
                     </span>
                   )
                 }
               </span>
-              )}
+              <span className="ml-4">
+                Sold: <span className="text-green-400">{itemsSold.toLocaleString()}</span>
+              </span>
             </p>
           </div>
           <div className="flex gap-2">